Color palette for both light and dark themes. Use the theme toggle to switch between modes.
Toggle Index
| Color | Class | Swatch |
|---|---|---|
| Orange | bg-default |
|
| Blue | bg-info |
|
| Green | bg-success |
|
| Yellow | bg-warning |
|
| Red | bg-danger |
|
| Gray | bg-disabled |
| Color | Class | Swatch |
|---|---|---|
| Orange | bgGradient-orange |
|
| Blue | bgGradient-blue |
|
| Green | bgGradient-green |
|
| Magenta | bgGradient-magenta |
|
| Purple | bgGradient-purple |
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.
: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 */
}
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 |
.my-component {
background-color: var(--color-primary);
color: var(--color-body-text);
border: 1px solid var(--color-border);
}
// 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);
Theme toggle supports the following keyboard shortcut: Ctrl/Cmd + Shift + T