Add dark mode UI and update components

ui/DARK_MODE_README.md

@@ -0,0 +1,107 @@
+# 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