Global Color Palette: Linking 9 Colors Made Simple

The Global Color Palette in SureDash provides a consistent color system across the portal. It includes 9 slots, each defined with a specific purpose. The palette is available in two modes: Light and Dark. Updating a color in either mode automatically applies it across all linked areas on the frontend, ensuring a seamless experience for users switching between themes.

Light and Dark Modes

• Light Mode: Used when the portal is viewed with a lighter interface, ensuring colors remain readable and accessible.
• Dark Mode: Used when the portal is viewed with a darker interface, applying a different set of the same 9 slots to maintain contrast and usability.
• Each mode has its own set of 9 colors, so you can define variations that best suit the theme while keeping brand consistency.

Best Practices for Using the Global Color Palette

• Maintain Branding Consistency: Define Color 1 (Branding) and Color 2 (Alternate Branding) consistently in both Light and Dark modes to keep your brand recognizable.
• Ensure Readability: Adjust Headings (Color 3) and Text (Color 4) separately for Light and Dark modes to maintain strong contrast and readability.
• Use Hover Highlights Effectively: Since Color 7 (Alternate Background) is used for hover backgrounds in menus, navigation links, and header icons, choose a distinct yet subtle shade that stands out without being too bright.
• Maintain Visual Hierarchy: Use Color 8 (Subtle Background) thoughtfully for borders and separators to structure content without drawing too much attention.
• Support UI Elements Clearly: Color 9 (Other Supporting) controls placeholders, menu colors, input fields, and sidebar navigation text. Ensure these elements have enough contrast for visibility, especially in Dark Mode.
• Test Across Both Modes: After setting up colors, test your portal in both Light and Dark modes to ensure a consistent and accessible user experience.
• Use System Preference: For the most user-friendly setup, consider setting the default mode to System Preference, so users automatically get a theme matching their device settings.

Conclusion

The Global Color Palette in SureDash makes it easy to design a consistent experience across both Light and Dark modes. By carefully defining each of the 9 color slots, you can ensure your portal remains visually aligned with your brand, accessible for users, and adaptable for future improvements.