Swatches

Color palette for both light and dark themes. Use the theme toggle to switch between modes.

Toggle Index

Background Colors

Color	Class	Swatch
Orange	`bg-default`
Blue	`bg-info`
Green	`bg-success`
Yellow	`bg-warning`
Red	`bg-danger`
Gray	`bg-disabled`

Gradient Background Colors

Color	Class	Swatch
Orange	`bgGradient-orange`
Blue	`bgGradient-blue`
Green	`bgGradient-green`
Magenta	`bgGradient-magenta`
Purple	`bgGradient-purple`

Dark Mode Colors

Dark mode automatically adjusts colors for better contrast and reduced eye strain. These colors are applied when data-theme="dark" is set on the document.

Theme Variables:

:root { /* Primary colors */ --color-primary: #e87c00; /* Light: Orange */ --color-info: #324a91; /* Light: Blue */ --color-success: #008140; /* Light: Green */ --color-warning: #e8ad11; /* Light: Yellow */ --color-danger: #860c0e; /* Light: Red */ }

[data-theme=“dark”] { /* Primary colors - enhanced for dark backgrounds / –color-primary: #ff9500; / Dark: Brighter Orange / –color-info: #5a7bc8; / Dark: Lighter Blue / –color-success: #20a55a; / Dark: Brighter Green / –color-warning: #f5c842; / Dark: Brighter Yellow / –color-danger: #ef4444; / Dark: Lighter Red */ }

CSS Variables Usage

Use CSS custom properties (variables) for consistent theming across light and dark modes:

Variable	Light Mode	Dark Mode	Usage
`--color-primary`	#e87c00	#ff9500	Main brand color
`--color-info`	#324a91	#5a7bc8	Information states
`--color-success`	#008140	#20a55a	Success states
`--color-warning`	#e8ad11	#f5c842	Warning states
`--color-danger`	#860c0e	#ef4444	Error states
`--color-body-bg`	#ffffff	#0f0f0f	Page background
`--color-surface`	#ffffff	#1f1f1f	Card/surface backgrounds

Implementation Examples

CSS Example:

.my-component {
              background-color: var(--color-primary);
              color: var(--color-body-text);
              border: 1px solid var(--color-border);
            }

JavaScript Theme Toggle:

// Toggle between themes
            function toggleTheme() {
              const current = document.documentElement.getAttribute('data-theme');
              const newTheme = current === 'dark' ? 'light' : 'dark';
              document.documentElement.setAttribute('data-theme', newTheme);
              localStorage.setItem('rotunda-theme', newTheme);
            }
            // Apply stored theme on page load
            const storedTheme = localStorage.getItem(‘rotunda-theme’)
            || (window.matchMedia(‘(prefers-color-scheme: dark)’).matches ? ‘dark’ : ‘light’);
            document.documentElement.setAttribute(‘data-theme’, storedTheme);

Keyboard Shortcuts

Theme toggle supports the following keyboard shortcut: Ctrl/Cmd + Shift + T