initial commit

README.md

@@ -0,0 +1,115 @@
+# Theme Switcher Demo
+
+A lightweight, elegant theme switcher for web applications that allows users to toggle between light, dark, and system themes, along with custom accent colors.
+
+## Features
+
+- **Multiple theme options**:
+  - Light mode
+  - Dark mode
+  - System preference detection
+- **Custom accent color** selection
+- **Persistent settings** using localStorage
+- **Responsive design** that works on all screen sizes
+- **No flash of unstyled content** when loading in dark mode
+- **Modern UI** with accessible controls
+- **Smooth transitions** between themes
+
+## Demo
+
+The project includes a demo page with various UI elements to showcase the theme switching capabilities:
+- Text elements (headings, paragraphs)
+- Cards with different backgrounds
+- Buttons
+- Form elements
+- Footer
+
+## How It Works
+
+### Theme Switching
+
+The theme switcher allows users to select between three theme options:
+- **Light**: Forces light theme regardless of system settings
+- **Dark**: Forces dark theme regardless of system settings
+- **System**: Automatically follows the user's system preference
+
+### Accent Color
+
+Users can customize the accent color used throughout the interface:
+1. Click on the color preview in the theme menu
+2. Select a color using the color picker
+3. The accent color is applied across buttons, headings, and UI accents
+
+### Persistence
+
+User preferences are stored in the browser's localStorage, so theme settings persist between visits.
+
+## Usage
+
+1. Include the CSS and JavaScript files in your project
+2. Add the theme toggle HTML markup
+3. Initialize the theme switcher with JavaScript
+
+```html
+<link rel="stylesheet" href="styles.css">
+<script src="script.js"></script>
+```
+
+## Implementation Details
+
+### Preventing Flash
+
+To prevent flash of unstyled content when loading in dark mode, the project includes an inline script in the head that sets the theme before the page renders:
+
+```html
+<script>
+    // Immediately set theme before page renders
+    const savedTheme = localStorage.getItem('preferred-theme') || 'system';
+    if (savedTheme === 'dark') {
+        document.documentElement.setAttribute('data-theme', 'dark');
+    } else if (savedTheme === 'system') {
+        const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        document.documentElement.setAttribute('data-theme', prefersDarkScheme ? 'dark' : 'light');
+    }
+</script>
+```
+
+### CSS Variables
+
+The theme switcher uses CSS custom properties (variables) to define theme colors:
+
+```css
+:root {
+    --background-color: #ffffff;
+    --text-color: #333333;
+    --accent-color: #4a90e2;
+    /* more variables... */
+}
+
+[data-theme="dark"] {
+    --background-color: #1a1a1a;
+    --text-color: #f5f5f5;
+    /* more variables... */
+}
+```
+
+## Browser Support
+
+This theme switcher works in all modern browsers that support:
+- CSS Custom Properties (variables)
+- localStorage API
+- matchMedia API
+
+## License
+
+This project is available for use under the MIT License.
+
+## Author
+
+Created by sHa.
+
+## Getting Started
+
+1. Clone the repository
+2. Open index.html in your browser
+3. Try switching between themes and selecting custom accent colors