|
/ Documentation /Getting Started/ SureDash Color Palette: Light and Dark Palette

SureDash Color Palette: Light and Dark Palette

SureDash v1.3.0 introduces a built-in Color Palette that creates a more comfortable viewing experience for your community members, especially those who prefer a darker interface or browse at night. You can customize the color palette and decide how the mode switcher appears in your portal.

Accessing Color Palette Settings

You can find the Color Palette settings under:
SureDash > Customize Portal > Design Settings > Colors tab > Select Default Palette

  • The Default Palette provides two options to chose from:
    • Light
    • Dark
suredash portal ‹ templ… 2025 09 24 at 6.04.17 pm

The Light and Dark palette has 9 colors that can be adjusted to match your brand. Any changes you make must be saved by clicking Save Settings in the SureDash panel under the Colors tab.

Learn More about Linking 9 Colors from the Color Palette!

Managing the Color Switcher Appearance

Once you have set your Color Palette, it’s time to manage the Color Switcher you want to display for your users.

To allow users to toggle between Light and Dark Mode, navigate to:
SureDash > Customize Portal > Settings > Click on the Color Switcher icon as shown in the below image.

suredash portal ‹ templ… 2025 09 24 at 6.02.39 pm

Following are the Switcher Settings you will notice:

  • Switcher Type:
    • Icon Only
    • Text Only
    • Icon + Text
  • Force Page Reload:
    • Option to reload the page after switching modes.
    • Useful for complex themes where instant switching may not apply all styles correctly.
  • System Preference Mode:
    • Enabling this option will prefer the System mode over the Default mode.

Customizing the Switcher

SureDash provides complete customizability for the Switcher settings for Icon and Text settings. Available options include:

Icon Settings

This option is only visible when the Switcher Type is selected as “Icon Only” or “Icon + Text Only”.

  • Default Mode Icon
  • Switched Mode Icon
  • Icon Size

Text Settings

This option is only visible when the Switcher Type is selected as “Text Only” or “Icon + Text Only”.

  • Default Mode Text
  • Switched Mode Text
suredash portal ‹ templ… 2025 09 24 at 6.13.19 pm

These options let you style how the switcher looks, ensuring it matches your portal’s branding and provides clear visual feedback to users.

Conclusion

SureDash Color Palette gives your users flexibility in how they view your portal. By setting up Light and Dark palettes in the Global Palette and customizing the switcher appearance, you can ensure both modes stay consistent with your brand identity while improving usability.

Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

On this page
Scroll to Top