This is a comprehensive dark theme implementation that automatically responds to system preferences and allows manual toggling. It's designed to be easily integrated into any Val Town project.

• System Preference Detection: Automatically detects and applies the user's system color scheme preference
• Manual Toggle: Provides a toggle button for users to switch between light and dark themes
• Preference Persistence: Remembers the user's theme choice using localStorage
• Smooth Transitions: Includes CSS transitions for a smooth experience when switching themes
• Comprehensive Variables: Provides a complete set of CSS variables for consistent styling
• Accessibility: Includes proper ARIA attributes and keyboard navigation

• theme.css: Contains all theme variables and basic styling
• theme.js: Handles theme detection, toggling, and persistence
• index.html: Demo page showcasing the theme implementation

Add these to your HTML file:

<link rel="stylesheet" href="theme.css">
<script src="theme.js"></script>

The theme provides these CSS variables:

--background-color: Main background color
--text-color: Main text color
--primary-color: Primary accent color
--secondary-color: Secondary accent color
--border-color: Border color
--card-background: Background color for cards/containers
--hover-color: Color for hover states
--shadow-color: Color for shadows
--success-color: Color for success states
--warning-color: Color for warning states
--error-color: Color for error states
--info-color: Color for informational states

Example usage:

.my-element {
  background-color: var(--card-background);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

You can customize the theme by modifying the CSS variables in theme.css. The variables are organized into light and dark themes.

1. On page load, the script checks for a saved theme preference in localStorage
2. If no preference is found, it uses the system's color scheme preference
3. The theme is applied by setting a data-theme attribute on the root HTML element
4. A toggle button is automatically added to the top-right corner of the page
5. When the user clicks the toggle button, the theme is switched and the preference is saved

This implementation works in all modern browsers that support:

• CSS Custom Properties (Variables)
• localStorage
• prefers-color-scheme media query

This theme implementation can be easily integrated into any Val Town project:

1. Copy the theme.css and theme.js files to your project
2. Include them in your HTML file
3. Use the CSS variables in your styles

For React projects, you can modify the theme.js to work with React's state management instead of directly manipulating the DOM.

MIT