Dark Mode

JustDocs comes with built-in dark mode support that respects user preferences.

Automatic Detection

Dark mode automatically detects:

• System preference (prefers-color-scheme)
• User’s manual selection
• Saved preference in localStorage

Manual Toggle

Users can manually toggle between light and dark modes using the theme toggle button in the header.

Customization

Custom Dark Mode Colors

Override dark mode colors in your configuration:

justdocs({
  theme: {
    dark: {
      background: '#0a0a0a',
      foreground: '#ffffff',
      muted: '#1a1a1a',
      border: '#2a2a2a'
    }
  }
})

CSS Variables

You can also customize using CSS variables:

.dark {
  --color-background: #0a0a0a;
  --color-text: #ffffff;
  --color-border: #2a2a2a;
}

Best Practices

1. Test both modes - Always test your content in both light and dark modes
2. Use semantic colors - Use color variables instead of hardcoded values
3. Consider accessibility - Ensure proper contrast ratios in both modes
4. Image handling - Provide appropriate images for each theme when necessary

Implementation Details

The dark mode system uses:

• CSS custom properties for theming
• JavaScript for theme detection and switching
• LocalStorage for persistence
• Smooth transitions between modes