Skip to main content

Plan Your Transition from SLDS 1 to SLDS 2

Learning Objectives

After completing this unit, you’ll be able to:

  • Turn on the Salesforce Cosmos theme.
  • Create a new SLDS 2 theme.
  • Understand your SLDS 2 transition tasks as an admin.
  • Understand your developer’s and designer’s SLDS 2 transition tasks.
  • Describe how to get help with SLDS 2.

SLDS 2 Availability

As of Spring ’25, SLDS 2 is available in new and existing Salesforce orgs—but SLDS 2 is rolling out in phases. To check that SLDS 2 is available in your Salesforce org product and edition, read Salesforce Cosmos Theme and SLDS 2 Availability in Salesforce Help.

How to Turn SLDS 2 On and Off

Now that you know a little bit about what SLDS 2 is and what its benefits are, you can turn it on. SLDS 2 is activated when you turn on its default theme, Salesforce Cosmos. Follow these instructions to turn on Salesforce Cosmos.

  1. In your org, click Setup and select Setup.
  2. For Starter orgs, click Open Advanced Setup. For all other orgs, skip this step.
  3. In the Quick Find box, search for and select Themes and Branding.
  4. From the Salesforce Cosmos theme dropdown list, select Activate.
Note

As soon as Salesforce Cosmos is activated, or you create and activate an SLDS 2 theme, SLDS 2 is enabled for everyone in that org. The transition from SLDS 1 to SLDS 2 and Salesforce Cosmos is a significantly less complex effort than the transition from Classic to Lightning.

An example Sales org Themes and Branding page with a highlight on Activate on the Salesforce Cosmos SLDS 2 row.

To turn off SLDS 2, you must activate an SLDS 1 theme.

  1. In your org, click Setup and select Setup.
  2. For Starter orgs, click Open Advanced Setup. For all other orgs, skip this step.
  3. In the Quick Find box, search for and select Themes and Branding.
  4. From the available themes, choose an SLDS 1 theme, and from its dropdown list, select Activate.

An example Sales org Themes and Branding page with a highlight on Activate on the SLDS 1 theme Lightning Blue row.

Note

If you enable SLDS 2 and switch back to an SLDS 1 theme, SLDS 2 is deactivated across your whole org for all users. Do you have a custom theme that you created in SLDS 1? Working in your existing org with SLDS 2 enabled, you must re-create your SLDS 1 theme for it to work in SLDS 2.

How to Create a Custom SLDS 2 Theme

As an admin, configure your brand in Themes and Branding in Setup with custom themes using configurable visual elements. In Themes and Branding, you can:

  • Upload your brand logo, avatars, and banners.
  • Upload your primary brand color. SLDS 2 then automatically generates for you modern accent, container accent, and border accent colors from the SLDS 2 palette that meet Web Content Accessibility Guidelines (WCAG) for color contrast.

Here’s how to create your own custom theme.

  1. In your org, click Setup and select Setup.
  2. For Starter orgs, click Open Advanced Setup. For all other orgs, skip this step.
  3. In the Quick Find box, search for and select Themes and Branding.
  4. Click New Theme.

Themes and Branding in Setup with a highlight on the New Theme button.

  1. In the New Custom Theme window in Theme Details, provide your Theme Name (1). The API Name is populated automatically.

An example New Custom SLDS V2 Theme window with required Theme Name (1), Brand Color (2), Brand Image (3), and Save (4) highlighted.

  1. In Branding, choose your Brand Color (2) and upload your Brand Image (3). SLDS 2 automatically selects accent colors for you.
  2. Fill out any other optional fields.
  3. Click Save (4).

To preview your new theme click Preview. To activate your new theme, click Activate.

An example new theme window with Activate and Preview buttons

Note

Admins can override the generated SLDS 2 color palette values by selecting Override accessible brand color, but we advise against this. The accent colors that SLDS 2 recommends based on your primary brand color are compliant with accessibility standards. Overriding these recommendations might not produce an accessible palette, leading to issues for your customers.

Your Current UI Assessment

Now you know how to turn Salesforce Cosmos and SLDS 2 on and create your own custom SLDS 2 theme.

But what if your org contains a lot of customizations, like custom components and installed managed packages from AppExchange? Or if your org is a combination of features across various Salesforce products and features? Depending on SLDS 2 availability across those products and features:

  • All or most of your org may enjoy Salesforce Cosmos and the SLDS 2 UI.
  • Some aspects of your org might need to be manually uplifted to SLDS 2, like custom components.
  • Some aspects of your org might be ineligible for SLDS 2, such as Visualforce pages, Salesforce Classic, Tableau, and Slack.

Transition Tasks for Admins

As a Salesforce admin, your main role is to oversee your org’s transition to SLDS 2. That means there are specific tasks you must do, but many other tasks for your developers and designers to tackle. As the admin, coordinate all aspects of your org’s transition project for a seamless move to SLDS 2.

These are your specific tasks as an admin.

  • Help your developers and designers assess your org’s compatibility with SLDS 2.
  • Manage your org’s transition to SLDS 2 to ensure that the outcomes are what you expect.
  • Create a sandbox or scratch org for testing SLDS 2.
  • Enable SLDS 2 in a test environment.
  • Coordinate testing phases across your developer and designer teams.
  • If you have AppExchange apps in your org, communicate with your ISV partners to learn when they plan to upgrade their managed packages and components to SLDS 2, and how you can install those upgrades.

You have a big job to help your developers and designers stay on track with the SLDS 2 transition. So that you can help your team and manage the work, here are the high-level tasks that your developers and designers must do. For more details, read Transition Your Org to Salesforce Lightning Design System 2 and complete the Salesforce Lightning Design System 2 for Developers Trailhead module.

Transition Tasks for Your Developers

Your developers are responsible for the deep technical details of assessing your custom components and third-party apps for SLDS 2 capability and uplift. Here’s what your developers will do.

  • Assess your org’s compatibility with SLDS 2.
  • Set up SLDS Linter or SLDS Validator in a development environment.
  • Update your org’s component code to align with SLDS 2 based on feedback from SLDS Linter or SLDS Validator.
  • Review and update your code based on any UI automation testing your org contains.
  • Test your components in a sandbox or scratch org.
  • Update your UI automation tests, if applicable.

Transition Tasks for Your Designers

Your designers are responsible for the consistent look and feel of your brand across your org. Here’s what your designers will do.

  • Validate the visual consistency across your UI user interface.
  • Support the testing of custom components for unexpected visual behavior.

Best Practices for a Smooth Transition to SLDS 2

Transitioning your brand from SLDS 1 to SLDS 2 is a smooth process when you follow a couple straightforward guidelines.

  • Use the SLDS 2 built-in theme, Salesforce Cosmos.
  • When creating a new theme, input your brand color and rely on the SLDS 2 recommended accent colors.

SLDS 2 Support

Awesome! You learned about SLDS 2, how to use the Salesforce Cosmos theme, and how to create your own SLDS 2 theme. You also learned how to support your developer and designer teams to transition your org to SLDS 2.

But what if you need support? No worries, we’ve got you covered.

To continue learning about SLDS 2, encourage your team to take the Salesforce Lightning Design System 2 for Developers.

Resources

Condividi il tuo feedback su Trailhead dalla Guida di Salesforce.

Conoscere la tua esperienza su Trailhead è importante per noi. Ora puoi accedere al modulo per l'invio di feedback in qualsiasi momento dal sito della Guida di Salesforce.

Scopri di più Continua a condividere il tuo feedback