Professional dark theme with system-aware intelligence and manual override
Keyboard shortcut: ⌘ + Shift + D to toggle dark mode
Colors automatically adjust for optimal contrast and readability in dark mode.
Cards adapt their background and borders for perfect contrast in any theme.
| Feature | Light Mode | Dark Mode | Status |
|---|---|---|---|
| Background | #FFFFFF | #000000 | Optimized |
| Text Color | #333333 | #FFFFFF | Optimized |
| Primary Color | #ED8B00 | #FF9500 | Optimized |
| Border Color | #DEDEDE | #3A3A3C | Optimized |
<!-- Auto-initialize with data attribute -->
<body data-dark-mode-toggle>
<!-- Your content -->
</body>
<!-- Include the script -->
<script src="/src/js/dark-mode-toggle.js"></script>// Initialize manually
const darkMode = new DarkModeToggle({
defaultTheme: 'system', // 'light', 'dark', 'system'
showToggle: true,
togglePosition: 'bottom-right',
onChange: (state) => {
console.log('Theme changed:', state);
}
});
// API methods
darkMode.setTheme('dark'); // Set specific theme
darkMode.toggle(); // Toggle between themes
darkMode.getTheme(); // Get current theme setting
darkMode.getEffectiveThemeValue(); // Get actual theme in use/* Use semantic color variables that adapt automatically */
.my-component {
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border);
}
/* Check current theme in CSS */
:root[data-theme="dark"] .my-component {
/* Dark mode specific styles */
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .my-component {
/* System dark mode styles */
}
}This is a lead paragraph with larger text for emphasis. It adapts perfectly to dark mode with optimized contrast.
Regular paragraph text with inline links, bold text, italic text, and inline code. All typography elements are carefully tuned for readability in both light and dark themes.
"Dark mode isn't just about inverting colors—it's about creating a cohesive, comfortable viewing experience that reduces eye strain while maintaining visual hierarchy and brand identity."