Dark Mode Toggle Chrome Extension

A simple Chrome extension that allows you to toggle dark mode on any website with an easy-to-use on/off switch.

Features

• 🌙 Universal Dark Mode: Works on any website
• 🔄 Simple Toggle: Easy on/off switch in the extension popup
• 💾 Persistent Settings: Remembers your preference for each website
• 🖼️ Smart Media Handling: Automatically adjusts images and videos for better visibility
• ⚡ Lightweight: Minimal performance impact
• 🎨 Modern UI: Clean and intuitive popup interface

Installation

From Source (Developer Mode)

1. Clone or download this repository
2. Open Chrome and navigate to chrome://extensions/
3. Enable "Developer mode" in the top right corner
4. Click "Load unpacked" and select the extension directory
5. The extension will appear in your Chrome toolbar

Usage

1. Click the Dark Mode Toggle extension icon in your Chrome toolbar
2. Use the toggle switch to enable/disable dark mode for the current website
3. The extension will remember your preference for each website
4. Toggle as needed on different websites

How It Works

The extension uses a combination of:

• CSS Filters: Applies invert() and hue-rotate() filters to create dark mode
• Smart Targeting: Specifically handles images, videos, and media elements
• Content Scripts: Injects dark mode styles into web pages
• Chrome Storage API: Saves preferences per website
• Service Worker: Manages extension state and tab updates

Technical Details

• Manifest Version: 3 (latest Chrome extension standard)
• Permissions: activeTab, storage
• Content Script: Runs on all URLs (<all_urls>)
• Service Worker: Handles background tasks and state management

Development

Prerequisites

• Chromium browser
• Basic knowledge of JavaScript, HTML, and CSS

Testing

1. Load the extension in developer mode
2. Navigate to any website
3. Click the extension icon and test the toggle
4. Verify dark mode is applied correctly
5. Check that preferences persist across page reloads

Customization

You can customize the dark mode behavior by modifying:

• content.js: Adjust the CSS filter values or add custom styling logic
• darkmode.css: Add additional CSS rules for specific elements
• popup.html/css: Customize the popup interface appearance

Browser Compatibility

• Chrome 88+ (Manifest V3 support required)
• Chromium-based browsers (Edge, Brave, etc.)

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is open source and available under the MIT License.

Known Issues

• Some websites with complex styling may require additional CSS adjustments
• Video players with custom controls might not invert properly
• Canvas elements may need special handling

Future Enhancements

• Custom dark mode themes
• Website-specific exclusions
• Keyboard shortcuts
• Automatic dark mode based on system preferences
• Advanced filter options