A powerful Chrome extension that transforms any webpage into dark mode with advanced element scanning and customizable color themes. Features a modern purple-themed interface with comprehensive DOM analysis and per-element color customization.
- Clean Tab-Based Design: Organized Basic and Advanced tabs.
- Purple Branding: Beautiful purple theme with light mode (#F3F4F6) and dark mode (#2D1B4E) support
- Responsive Design: Smooth hover effects and transitions throughout
- Comprehensive DOM Analysis: Scans and counts 30+ HTML element types on any webpage
- Real-Time Results: Displays detailed element counts with visual breakdown
- Smart Element Detection: Identifies text, headings, links, buttons, inputs, and semantic elements
- Basic Mode: Simple background and text color adjustment
- Advanced Mode: Individual color control for different element types
- Dynamic Color Pickers: Auto-generated color inputs for specific elements found on pages
- Live Preview: Color changes apply immediately as you adjust them
- Per-Website Settings: All customizations saved individually for each domain
- Automatic Application: Settings remembered and applied on future visits
- Cross-Session Persistence: Settings maintained across browser restarts
- Manifest V3 Compatible: Built with modern Chrome extension standards
- Performance Optimized: Efficient scanning and color application for large pages
- Error Handling: Robust error handling for seamless user experience
- Live Updates: Debounced color changes for smooth real-time feedback
- Clean Toggle Interface: Simple enable/disable button in a compact 280x200 popup
- Basic Color Customization: Choose your preferred background and text colors
- Modern UI: Streamlined design with proper spacing and responsive layout
- No Clutter: Removed complex features in favor of essential functionality
- Improved Heading Readability: Enhanced contrast with brightness-adjusted colors:
- H1 headings: 30% brighter with bold weight for maximum visibility
- H2 headings: 25% brighter with enhanced weight
- H3-H6 headings: 20% brighter with medium weight
- Smooth Navigation: Eliminates white flash when navigating between websites
- Immediate CSS Injection: Dark mode styles apply before page rendering
- Per-Website Settings: Remembers your preferences for each website individually
- Manifest V3 Compatible: Updated to modern Chrome extension standards
- Reliable API Usage: Fixed deprecated
chrome.browserActioncalls - Enhanced Performance: Streamlined code with better error handling
- Automatic Color Detection: Intelligently adjusts colors while maintaining readability
- Clone the repository:
git clone https://github.com/ujaved931/dark-mode-extension.git
- Open Chrome and navigate to
chrome://extensions/. - Enable "Developer mode" by toggling the switch in the top right corner.
- Click "Load unpacked" and select the cloned repository folder.
- Enable/Disable Dark Mode: Click the extension icon in the browser toolbar to toggle dark mode on or off for the current page
- Quick Color Adjustment: Use the Basic tab for simple background and text color changes
- Instant Application: Colors apply immediately when you click "Apply"
- Comprehensive Element Scanning:
- Switch to the Advanced tab
- Click "Scan Page Elements" to analyze the current webpage
- View detailed breakdown of element types and counts
- Granular Color Control:
- Adjust colors for specific element types (headings, links, buttons, etc.)
- Use auto-generated color pickers for elements found during scanning
- See live preview of changes as you adjust colors
- Advanced Customization: Colors are applied intelligently based on element semantics
- Automatic Persistence: All settings automatically saved per website
- Element Scanning: Get detailed analysis of webpage structure with element counts
- Live Color Updates: Changes apply immediately without page refresh
- Smart Color Application: Different element types receive appropriate color treatments
- Per-Website Memory: Each domain remembers your preferred settings
- Tab-Based Interface: New organized layout with Basic and Advanced tabs
- Purple Branding: Modern purple theme with light (#F3F4F6) and dark (#2D1B4E) modes
- Element Scanning: Comprehensive DOM analysis with 30+ element type detection
- Dynamic Color Pickers: Auto-generated controls for elements found during scanning
- Live Color Updates: Real-time preview with debounced input handling
- Enhanced Persistence: Improved per-website settings management
- UI Transformation: Completely redesigned from complex multi-feature interface to clean, focused design
- Bug Fixes: Fixed critical Chrome extension compatibility issues
- Enhanced Readability: Improved heading contrast and visibility in dark mode
- Smooth Transitions: Eliminated jarring white flash when navigating between pages
- Code Quality: Reduced codebase by 108 lines while improving functionality
Basic tab with simple background and text color controls
Advanced tab showing comprehensive element color customization
Real-time element scanning with detailed counts and dynamic color pickers
- Purple Branding: Modern purple theme throughout the interface
- Tab Navigation: Clean organization between Basic and Advanced features
- Element Analysis: Comprehensive scanning showing element types and counts
- Dynamic Controls: Auto-generated color pickers for discovered elements
- Live Feedback: Immediate visual feedback for all interactions
Before and after comparison showing improved heading visibility:
Before - Poor Contrast:
After - Enhanced Readability:
We welcome contributions to improve this extension. To contribute, please follow these steps:
- Fork the repository.
- Create a new branch for your feature or bugfix.
- Make your changes and commit them with clear and descriptive messages.
- Push your changes to your forked repository.
- Create a pull request to the main repository.
This project is licensed under the MIT License. See the LICENSE file for details.