A simple and easy-to-use Chrome browser extension that can quickly toggle dark mode for any webpage.

• 🌙 One-click toggle - Click the extension icon to toggle dark mode for the current webpage
• 💾 State persistence - Dark mode settings for each website are saved
• 🌐 Domain-level control - Option to apply settings to all pages under the entire domain
• 🎨 Smart adaptation - Automatically handles images, videos, and existing dark themes
• ⚡ Performance optimized - Uses CSS filter technology for rapid response
• 🔄 Real-time sync - Multiple tab states sync in real-time
• 🎯 Precise control - Supports reset functionality and keyboard shortcuts

1. Download or clone this project to your local machine
2. Open Chrome browser and go to chrome://extensions/
3. Enable "Developer mode" in the top right corner
4. Click "Load unpacked extension"
5. Select the project folder (directory containing manifest.json)
6. Extension installation complete!

1. Toggle dark mode: Click the extension icon in the browser toolbar
2. Check status: The extension popup shows the current website's dark mode status
3. Apply to entire domain: Check "Apply to entire domain" option to apply settings to all pages under the same domain
4. Reset settings: Click "Reset Settings" button in the popup to clear current website or domain settings

• Space key: Press space in the extension popup to toggle dark mode
• Cmd/Ctrl + R: Press in the extension popup to reset settings

• Uses intelligent CSS style replacement instead of simple filter inversion
• Directly sets background color to dark (#121212, #1e1e1e) and text color to light (#e8e6e3)
• Maintains original display effects for images, videos, and other media elements
• Uses Chrome Extension Manifest V3
• Intelligently handles inline styles and dynamic content

1. Color mapping: Maps white backgrounds to dark colors, black text to light colors
2. Media protection: Images and videos maintain original colors, only adjusting opacity
3. Smart detection: Automatically identifies and handles inline styles
4. Dynamic adaptation: Monitors DOM changes and applies dark mode to new elements in real-time
5. Performance optimization: Uses CSS variables and efficient selectors

dark-mode/
├── manifest.json          # Extension configuration file
├── popup/                 # Extension popup interface
│   ├── popup.html
│   ├── popup.css
│   └── popup.js
├── content/               # Content scripts
│   ├── content.js         # Main dark mode logic
│   └── dark-mode.css      # Dark mode styles
├── background/            # Background script
│   └── background.js
├── icons/                 # Extension icons
│   ├── icon.svg
│   ├── icon16.png
│   ├── icon32.png
│   ├── icon48.png
│   └── icon128.png
└── README.md             # Documentation

• ✅ Chrome 88+
• ✅ Edge 88+
• ✅ Other Chromium-based browsers

The extension has special optimizations for the following websites:

• GitHub
• GitLab
• Zhihu
• Twitter/X
• YouTube
• Reddit
• Stack Overflow
• Wikipedia

A: You can click the "Reset Settings" button, or use the native dark mode on that website.

A: No, the extension automatically maintains original colors for images and videos.

A: This issue has been fixed in the new version. If you still encounter it, please:

1. Refresh the page to reload the extension
2. Click the reset button to clear settings
3. Reinstall the extension

A: Currently settings are only saved locally and do not support cross-device sync.

A: Go to chrome://extensions/ page, find the extension, and click "Remove".

A: The extension automatically skips websites and elements that already have dark themes to avoid double inversion.

After installing the extension, you can test dark mode effects on any webpage:

1. Visit any webpage (like Baidu, GitHub, Weibo, etc.)
2. Click the extension icon to enable dark mode
3. Check if various elements display correctly

• Node.js 16+
• Chrome 88+

1. Click "Reload" in the extension management page to update the extension
2. Right-click extension icon → "Inspect popup" to debug popup
3. Press F12 on the webpage → Console to view content script logs
4. In chrome://extensions/ click "Background page" to debug background script

• Modify content/content.js to adjust dark mode algorithm
• Modify popup/popup.css to customize popup styles
• Modify content/dark-mode.css to add specific website adaptations

MIT License

Copyright (c) 2025-2026 Mario Studio

See LICENSE file for details

Issues and Pull Requests are welcome!

• Initial version
• Basic dark mode toggle functionality
• State persistence storage
• Smart media element handling