Is there a way to keep the dark theme with a custom theme?

[Winston]

I've made a custom theme with the theme builder but now we can't pick the dark theme out of the preferences. 

Is there a way to keep the dark theme with a custom theme or at least see what the dark theme colors are so we can build a custom one to fit that need?

[jMarshal]

Dark theme is just a style that comes with Polaris (Next Experience default theme)...if you want a custom theme, you need to create your own styles with it (including "dark theme" <- actually a style, not a theme). When going to Vancouver and enabling Next Experience UI, we took the approach of leaving Polaris as the theme (default) and instead created a style for our band and kept the dark theme (style) oob. This dark theme still has the Polaris colours, not our brand's -- but we intend on using it as a model to create a branded dark theme too.

You can probably also add the "Polaris Dark Style" as a style for your custom theme -- but I would think it would not have the results you expect and may not even still "work" as the dark theme for Polaris, as I believe some of the necessary style elements are a part of the main theme still...something you could try out, though!

[Brad Tilton]

Technically dark mode is a "Theme variant" associated to the OOB polaris theme and that theme variant is only compatible with the polaris theme. At the moment our guidance is to stick with the polaris theme if you need dark mode, but we are looking at ways to enable theme builder to create dark mode variants for custom themes in the future.

[tijohnson]

System Properties that need to be validated or configured.

Property	Value	Purpose
glide.ui.polaris.use	true	Enables Polaris (Next Experience)
glide.ui.polaris.experience	true	Enables Next Experience UI
glide.ui.polaris.core_ui_exclude_dark_mode	false	Enables dark mode variants
glide.ui.polaris.theme.user_selectable	true	Allows users to select theme variants
glide.ui.polaris.theme.custom	sys_id of custom theme	Registers your custom theme as the active one

• ✅ Your custom theme must have at least one variant
• ✅ The theme must be active and accessible to the user’s scope

 glide.ui.polaris.theme.custom

• Must be set to the sys_id of your custom UX Theme record
• This tells the system which theme to treat as the active custom theme
• Without this, even if your theme is active and has variants, it may not be recognized or rendered correctly in the user preferences

🛠️ Steps to create the dark variance 

1. Navigate to Your Custom UX Theme

• Go to Now Experience Framework > Themes
• Open your custom theme record

1. Go to the Tab: Compositional: App Theme

• Scroll to the Compositional: App Theme tab
• This is where you define variants for your theme

• 3. Click on the “Insert a new row” to Add a Variant
• In the related list, go to the “Style” column
• Use the magnify glass to open a popup window

You can also go to the UX style but you will then need to associate the style to the theme. (Developers choice)

• Fill in the following fields:
• Name: Dark (then your own tag. I used 360 in the example)
• Type: variant
• Style: : Add your dark mode CSS variable overrides

Important note: You need to lead the JSON declaring “isDark”: “true”

You can copy the Style from one of the other Out of Box “Dark” UX Styles and update the color values.