TTS. DocsPanel Design System
1.4.0
Guidelines

System Mode

Contents

The Theming section focuses on the structural differences in dashboard layouts. Our design system provides two main layout styles: Modern Layout and Classic Layout, offering flexibility in dashboard design to suit different use cases.

Automatic Mode (Default)

  • The UI theme adapts to the user’s device settings.
  • If the user’s system is set to light mode, the UI appears inlight mode.
  • If the system is in dark mode, the UI automatically switches to dark mode.
  • This is the default behavior in the design system.

Light Mode

  • The UI remains in light mode regardless of the user’s device settings.
  • To enforce this mode, add the following attribute to the <html> tag:
                    
 HTML
                      
                    
<html color-scheme="light">

Dark Mode

  • The UI remains in dark mode regardless of the user’s device settings.
  • To enforce this mode, add the following attribute to the <html> tag:
                    
 HTML
                      
                    
<html color-scheme="dark">

Implementation & Best Practices

  • Automatic Mode (Default)

No need to add any attributes; the UI follows the user’s system theme.

  • Light Mode Only

Add color-scheme="light" to <html>, and hide the theme toggle button.

  • Dark Mode Only

Add color-scheme="dark" to <html>, and hide the theme toggle button.

  • Manual Toggle

If both modes are supported, provide a toggle button for users to switch themes.

  • Storage

Save the user’s preference in localStorage to maintain the selected theme across sessions.

Last updated 3 months ago