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

README.md

@@ -12,6 +12,8 @@ CODELF(变量命名神器)
 
   Also a GitHub stars, repositories tagger and organizer tool.
 
+  ✨ **New**: VS Code-inspired dark theme with automatic system theme detection! Toggle between light, dark, and auto modes.
+
   >There are only two hard things in Computer Science: cache invalidation and naming things.-- Phil Karlton
   >
   >![twohardtings](https://user-images.githubusercontent.com/799578/50462942-8075fe80-09c3-11e9-9c7f-b38d495b925d.jpg)

__static/app/resources/css/prettify.css

@@ -2,6 +2,11 @@
   color: #000
 }
 
+/* Dark theme code highlighting */
+body.dark .pln {
+  color: #cccccc;
+}
+
 @media screen {
   .str {
     color: #080
@@ -27,6 +32,31 @@
     color: #660
   }
 
+  /* Dark theme syntax highlighting */
+  body.dark .str {
+    color: #ce9178; /* VS Code string color */
+  }
+
+  body.dark .kwd {
+    color: #569cd6; /* VS Code keyword color */
+  }
+
+  body.dark .com {
+    color: #6a9955; /* VS Code comment color */
+  }
+
+  body.dark .typ {
+    color: #4ec9b0; /* VS Code type color */
+  }
+
+  body.dark .lit {
+    color: #b5cea8; /* VS Code literal color */
+  }
+
+  body.dark .pun, body.dark .opn, body.dark .clo {
+    color: #cccccc; /* VS Code punctuation color */
+  }
+
   .tag {
     color: #008
   }
@@ -46,6 +76,27 @@
   .fun {
     color: red
   }
+
+  /* Dark theme additional syntax highlighting */
+  body.dark .tag {
+    color: #569cd6; /* VS Code tag color */
+  }
+
+  body.dark .atn {
+    color: #9cdcfe; /* VS Code attribute name color */
+  }
+
+  body.dark .atv {
+    color: #ce9178; /* VS Code attribute value color */
+  }
+
+  body.dark .dec, body.dark .var {
+    color: #9cdcfe; /* VS Code declaration/variable color */
+  }
+
+  body.dark .fun {
+    color: #dcdcaa; /* VS Code function color */
+  }
 }
 
 @media print, projection {
@@ -92,7 +143,14 @@
 
 pre.prettyprint {
   padding: 2px;
-  border: 1px solid #888
+  border: 1px solid #888;
+  background: #f8f8f8;
+}
+
+body.dark pre.prettyprint {
+  background: #1e1e1e;
+  border: 1px solid #3e3e3e;
+  color: #cccccc;
 }
 
 ol.linenums {
@@ -107,3 +165,7 @@ li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
 li.L1, li.L3, li.L5, li.L7, li.L9 {
   background: #eee
 }
+
+body.dark li.L1, body.dark li.L3, body.dark li.L5, body.dark li.L7, body.dark li.L9 {
+  background: #2d2d30;
+}

docs/DARK_THEME.md

@@ -0,0 +1,216 @@
+# Dark Theme Implementation for Codelf
+
+## Overview
+
+This document describes the implementation of a VS Code-inspired dark theme for the Codelf project. The implementation includes a complete theme system with automatic system theme detection, manual theme switching, and comprehensive styling for all UI components.
+
+## Features
+
+### Theme System
+- **Auto Detection**: Automatically detects user's system theme preference (`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 switches include smooth CSS transitions
+
+### Theme Options
+1. **Light Theme**: Clean, bright interface (default)
+2. **Dark Theme**: VS Code-inspired dark interface with proper contrast
+3. **Auto Theme**: Follows system preference and responds to system theme changes
+
+## Implementation Details
+
+### File Structure
+
+```
+styles/
+├── _constants.scss              # VS Code color constants
+├── _theme-variables.scss        # CSS custom properties for theming
+├── _semantic-ui-overrides.scss  # Dark theme overrides for Semantic UI
+└── app.scss                     # Main stylesheet importing all theme files
+
+src/
+├── hooks/
+│   └── useTheme.js             # React theme management hook
+├── components/
+│   └── ThemeToggle.js          # Theme toggle dropdown component
+└── App.js                      # Updated with ThemeProvider
+```
+
+### Color Scheme
+
+The dark theme uses VS Code's color palette:
+
+#### Background Colors
+- **Primary Background**: `#1e1e1e` (editor background)
+- **Secondary Background**: `#252526` (sidebar background) 
+- **Input Background**: `#3c3c3c` (input fields)
+- **Hover Background**: `#2a2d2e` (hover states)
+
+#### Text Colors
+- **Primary Text**: `#cccccc` (main text)
+- **Secondary Text**: `#969696` (muted text)
+- **Active Text**: `#ffffff` (highlighted text)
+
+#### Accent Colors
+- **Primary Accent**: `#007acc` (links, buttons)
+- **Focus Accent**: `#0e639c` (focus states)
+- **Selection**: `#264f78` (selections)
+
+### CSS Variables System
+
+The theme system uses CSS custom properties that change based on the `body.dark` class:
+
+```scss
+:root {
+  --bg-primary: #ffffff;     /* Light theme */
+  --text-primary: #373a3c;
+  // ... other variables
+}
+
+body.dark {
+  --bg-primary: #1e1e1e;     /* Dark theme */
+  --text-primary: #cccccc;
+  // ... other variables
+}
+```
+
+### React Theme Hook
+
+The `useTheme` hook provides:
+
+```javascript
+const {
+  theme,        // Current theme preference ('light'|'dark'|'auto')
+  actualTheme,  // Resolved theme ('light'|'dark')
+  setTheme,     // Function to set theme preference
+  toggleTheme,  // Function to toggle between light/dark
+  isDark,       // Boolean indicating if dark theme is active
+  isAuto        // Boolean indicating if auto mode is enabled
+} = useTheme();
+```
+
+### Theme Toggle Component
+
+The `ThemeToggle` component provides a dropdown with three options:
+- ☀️ Light
+- 🌙 Dark  
+- ⚪ Auto
+
+## Usage
+
+### For Developers
+
+#### Using the Theme Hook
+```javascript
+import { useTheme } from '../hooks/useTheme';
+
+function MyComponent() {
+  const { isDark, toggleTheme } = useTheme();
+
+  return (
+    <div style={{ background: isDark ? '#1e1e1e' : '#ffffff' }}>
+      <button onClick={toggleTheme}>Toggle Theme</button>
+    </div>
+  );
+}
+```
+
+#### Using CSS Variables
+```scss
+.my-component {
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-primary);
+
+  &:hover {
+    background: var(--bg-hover);
+  }
+}
+```
+
+### Extending the Theme
+
+#### Adding New CSS Variables
+1. Add the variable to both light and dark sections in `_theme-variables.scss`
+2. Use the variable in your component styles
+
+#### Adding New Colors
+1. Define the color in `_constants.scss`
+2. Add it to the CSS variables system
+3. Use it in your components
+
+#### Custom Component Theming
+For custom components, follow this pattern:
+
+```scss
+.my-custom-component {
+  background: var(--bg-primary);
+  color: var(--text-primary);
+
+  .my-element {
+    border-color: var(--border-primary);
+
+    &:hover {
+      background: var(--bg-hover);
+    }
+  }
+}
+```
+
+## Code Syntax Highlighting
+
+The dark theme includes VS Code-inspired syntax highlighting for code blocks:
+
+- **Strings**: `#ce9178` (light orange)
+- **Keywords**: `#569cd6` (light blue)
+- **Comments**: `#6a9955` (green)
+- **Types**: `#4ec9b0` (cyan)
+- **Functions**: `#dcdcaa` (yellow)
+
+## Testing
+
+To test the theme implementation:
+
+1. **Manual Testing**:
+   - Click the theme toggle in the top-right corner
+   - Test all three modes (Light, Dark, Auto)
+   - Verify smooth transitions
+   - Check all UI components in both themes
+
+2. **System Theme Testing**:
+   - Set theme to "Auto"
+   - Change your OS theme preference
+   - Verify the app follows system changes
+
+3. **Persistence Testing**:
+   - Change theme preference
+   - Refresh the page
+   - Verify theme preference is maintained
+
+## Browser Support
+
+The theme system supports:
+- Modern browsers with CSS custom properties support
+- `prefers-color-scheme` media query support
+- localStorage for theme persistence
+
+## Future Enhancements
+
+Potential improvements for the theme system:
+1. Additional theme variants (high contrast, custom themes)
+2. Theme editor for custom color schemes  
+3. Keyboard shortcuts for theme switching
+4. More granular component-level theming options
+5. Theme preview without applying changes
+
+## Migration Notes
+
+### From Legacy Dark Theme
+The old dark theme was a simple `body.dark` class with hardcoded colors. The new system:
+- Maintains backward compatibility
+- Provides more comprehensive coverage
+- Uses CSS variables for easier maintenance
+- Includes proper VS Code color scheme
+
+### Breaking Changes
+None - the new system is fully backward compatible with existing dark theme usage.

src/App.js

@@ -4,15 +4,16 @@ import MainContainer from './containers/MainContainer';
 // import CopybookContainer from './containers/CopybookContainer';
 import NoticeContainer from './containers/NoticeContainer';
 import NavBarContainer from './containers/NavBarContainer';
+import { ThemeProvider } from './hooks/useTheme';
 
 function App() {
   return (
-    <>
+    <ThemeProvider>
       <NavBarContainer />
       <MainContainer />
       {/* <CopybookContainer /> */}
       <NoticeContainer />
-    </>
+    </ThemeProvider>
   );
 }