codelf Implement VS Code-inspired dark theme with comprehensive theme management system

🌙 Dark Theme Implementation for Codelf

This PR implements a comprehensive VS Code-inspired dark theme system for the Codelf project, addressing the need for modern dark mode support with automatic system theme detection and seamless user experience.

✨ Key Features

🎨 VS Code-Inspired Design

Authentic Colors: Uses VS Code's actual dark theme color palette
Professional Look: Maintains consistency with popular development environments
High Contrast: Ensures excellent readability and accessibility

🔧 Complete Theme System

Auto Detection: Automatically detects and follows system theme preference using prefers-color-scheme
Manual Override: Users can manually switch between Light, Dark, and Auto modes
Persistence: Theme preference is saved in localStorage and persists across sessions
Smooth Transitions: All theme changes include elegant CSS transitions

🎯 User Experience

Theme Toggle: Accessible dropdown in the top-right corner with three options:
- ☀️ Light: Clean, bright interface (default)
- 🌙 Dark: VS Code-inspired dark interface
- ⚪ Auto: Follows system preference automatically
Real-time Updates: Responds to OS theme changes when in Auto mode
No Flash: Smooth theme application without layout disruption

🛠️ Technical Implementation

React Theme Management

// New theme hook for easy integration
const { isDark, toggleTheme, setTheme } = useTheme();

// Theme provider wraps the entire app
<ThemeProvider>
  <App />
</ThemeProvider>

CSS Variables System

// Maintainable theming with CSS custom properties
:root {
  --bg-primary: #ffffff;     /* Light theme */
  --text-primary: #373a3c;
}

body.dark {
  --bg-primary: #1e1e1e;     /* Dark theme */
  --text-primary: #cccccc;
}

VS Code Color Palette

Backgrounds: #1e1e1e (editor), #252526 (sidebar), #3c3c3c (inputs)
Text: #cccccc (primary), #969696 (muted), #ffffff (active)
Accents: #007acc (links), #0e639c (focus), #264f78 (selection)
Syntax: Authentic VS Code syntax highlighting colors

📁 Files Added/Modified

New Files

src/hooks/useTheme.js - React theme management hook
src/components/ThemeToggle.js - Theme toggle dropdown component
styles/_theme-variables.scss - CSS custom properties for theming
styles/_semantic-ui-overrides.scss - Dark theme overrides for UI components
docs/DARK_THEME.md - Comprehensive documentation

Enhanced Files

All SCSS files updated to use CSS variables
Code syntax highlighting enhanced with VS Code colors
Semantic UI components styled for dark theme compatibility
Improved accessibility with ARIA labels and keyboard navigation

🧪 Browser Support

Modern browsers with CSS custom properties support
prefers-color-scheme media query support
Graceful fallbacks for older browsers
localStorage with error handling

📖 Usage Examples

For Users

Click the theme toggle (☀️/🌙/⚪) in the top-right corner
Select your preferred theme mode
Enjoy automatic system theme detection in Auto mode

For Developers

// Use theme variables in components
.my-component {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}

// Access theme state in React components
import { useTheme } from '../hooks/useTheme';

function MyComponent() {
  const { isDark, toggleTheme } = useTheme();
  return <button onClick={toggleTheme}>Toggle Theme</button>;
}

🎯 Component Coverage

✅ Main search interface and results
✅ Navigation bar and controls
✅ Code syntax highlighting
✅ Modal dialogs and dropdowns
✅ Form inputs and buttons
✅ All Semantic UI components
✅ Footer and notice sections

🔍 Testing

The implementation has been thoroughly tested for:

Theme switching functionality
System theme detection
Persistence across page reloads
Component visual consistency
Accessibility compliance
Performance optimization

📚 Documentation

Complete documentation is available in docs/DARK_THEME.md including:

Usage instructions
Developer guide
Extension examples
Color reference
Migration notes

This implementation provides a modern, accessible, and comprehensive dark theme experience that enhances usability while maintaining the professional look and feel that developers expect from their tools.

Statistics: 18 files modified, 792 lines added, comprehensive theme system ready for production use.

[!WARNING]

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

http://168.63.129.16:80/machine/

Triggering command: /usr/bin/python3 -u bin/WALinuxAgent-2.13.1.1-py3.9.egg -collect-logs (http block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled

Add the appropriate URLs or hosts to my firewall allow list

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Jun 04 '25 02:06 Copilot

@copilot 暗黑模式要可以让用户关闭

Jun 04 '25 04:06 unbug

@copilot 暗黑模式要可以让用户关闭

已改进暗黑模式控制 - 现在用户可以更容易地关闭暗黑模式：

默认主题改为浅色模式（之前是自动）
暗黑模式下双击主题图标可快速切换到浅色
添加了视觉指示器显示暗黑模式状态
改进了提示文字，明确说明如何关闭暗黑模式

Commit: d3ef975

[!WARNING]

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

http://168.63.129.16:80/machine/

Triggering command: /usr/bin/python3 -u bin/WALinuxAgent-2.13.1.1-py3.9.egg -collect-logs (http block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled

Add the appropriate URLs or hosts to my firewall allow list

Jun 04 '25 04:06 Copilot