107 lines
No EOL
3.7 KiB
Markdown
107 lines
No EOL
3.7 KiB
Markdown
# Dark Mode Implementation
|
|
|
|
## Overview
|
|
The CVS Repository Browser now includes a fully functional dark mode with system theme detection and user preference persistence.
|
|
|
|
## Features
|
|
|
|
### 1. **System Theme Detection**
|
|
- On first load, the application automatically detects the user's system theme preference using `prefers-color-scheme` media query
|
|
- If the system prefers dark mode, the app starts in dark mode
|
|
- If the system prefers light mode, the app starts in light mode
|
|
- If no system preference is detected, defaults to dark mode
|
|
|
|
### 2. **User Preference Persistence**
|
|
- User's theme choice is saved to browser's localStorage
|
|
- On subsequent visits, the saved preference is used instead of system preference
|
|
- Users can override system preference by toggling the theme
|
|
|
|
### 3. **Theme Toggle Button**
|
|
- Located in the header next to the status indicator
|
|
- Shows 🌙 (moon) icon in light mode
|
|
- Shows ☀️ (sun) icon in dark mode
|
|
- Click to toggle between light and dark themes
|
|
|
|
### 4. **Comprehensive Dark Mode Styling**
|
|
- All UI elements are properly styled for both light and dark modes
|
|
- Uses CSS custom properties (variables) for easy theme switching
|
|
- Maintains excellent contrast ratios for accessibility
|
|
- Smooth transitions between themes
|
|
|
|
## Implementation Details
|
|
|
|
### CSS Variables
|
|
The application uses CSS custom properties defined in `:root` and `[data-theme="dark"]` selectors:
|
|
|
|
**Light Mode (default):**
|
|
- Background: `#f9fafb` (light gray)
|
|
- Surface: `#ffffff` (white)
|
|
- Text Primary: `#111827` (dark gray)
|
|
- Text Secondary: `#6b7280` (medium gray)
|
|
- Border: `#e5e7eb` (light border)
|
|
|
|
**Dark Mode:**
|
|
- Background: `#1a1a1a` (very dark)
|
|
- Surface: `#2d2d2d` (dark gray)
|
|
- Text Primary: `#f3f4f6` (light gray)
|
|
- Text Secondary: `#d1d5db` (medium light gray)
|
|
- Border: `#404040` (dark border)
|
|
|
|
### JavaScript Implementation
|
|
The `UIManager` class in `ui.js` handles theme management:
|
|
|
|
- `initializeTheme()`: Initializes theme on page load
|
|
- `setTheme(theme)`: Sets the theme and updates localStorage
|
|
- `toggleTheme()`: Toggles between light and dark modes
|
|
- `updateThemeButton(icon)`: Updates the toggle button icon
|
|
|
|
## Files Modified
|
|
|
|
1. **styles.css**
|
|
- Added `[data-theme="dark"]` selector with dark mode CSS variables
|
|
- All color references use CSS variables for dynamic theming
|
|
|
|
2. **index.html**
|
|
- Added theme toggle button in header: `<button id="themeToggleBtn" class="btn-icon">🌙</button>`
|
|
|
|
3. **ui.js**
|
|
- Added `initializeTheme()` method to detect and apply system theme
|
|
- Added `setTheme()` method to apply theme and save preference
|
|
- Added `toggleTheme()` method to switch between themes
|
|
- Added `updateThemeButton()` method to update button icon
|
|
- Added theme toggle button event listener
|
|
|
|
## Usage
|
|
|
|
### For Users
|
|
1. The app automatically uses your system theme preference on first visit
|
|
2. Click the moon/sun icon in the header to toggle between light and dark modes
|
|
3. Your preference is saved and will be remembered on future visits
|
|
|
|
### For Developers
|
|
To modify the dark mode colors, edit the CSS variables in `styles.css`:
|
|
|
|
```css
|
|
[data-theme="dark"] {
|
|
--primary-color: #3b82f6;
|
|
--primary-hover: #2563eb;
|
|
--secondary-color: #9ca3af;
|
|
/* ... other variables ... */
|
|
}
|
|
```
|
|
|
|
## Browser Compatibility
|
|
- Works in all modern browsers that support:
|
|
- CSS Custom Properties (CSS Variables)
|
|
- `prefers-color-scheme` media query
|
|
- localStorage API
|
|
- ES6 JavaScript
|
|
|
|
## Testing
|
|
A test file `test-dark-mode.html` is included for testing the dark mode functionality independently.
|
|
|
|
To test:
|
|
1. Open `test-dark-mode.html` in a browser
|
|
2. Click the moon/sun button to toggle themes
|
|
3. Refresh the page to verify persistence
|
|
4. Check browser DevTools to see localStorage values |