A thoughtfully designed Chrome extension that automatically adjusts website colors to warmer tones, reducing eye strain for developers who spend long hours coding. Built with React, TypeScript, and Tailwind CSS.
- 🌅 Automatic warm color adjustment for all websites
- 🎚️ Customizable warmth intensity
- 🔄 Persistent settings across browser sessions
- 💻 Optimized for development environments
- 🎨 Special handling for code blocks and syntax highlighting
- 🖼️ Smart image processing that maintains natural colors
- 📱 Responsive popup interface
(Coming soon)
- Clone the repository:
git clone https://github.com/KartikKar19/SoothEyes.git
cd SoothEyes- Install dependencies:
npm install- Build the extension:
npm run build- Load the extension in Chrome:
- Open Chrome and navigate to
chrome://extensions/ - Enable "Developer mode" in the top right
- Click "Load unpacked"
- Select the
distfolder from your project directory
- Open Chrome and navigate to
Start the development server:
npm run devBuild the extension:
npm run build- Frontend: React 18 with TypeScript
- Styling: Tailwind CSS
- Icons: Lucide React
- Build Tool: Vite
- Type Checking: TypeScript
- Linting: ESLint
The extension applies a carefully tuned combination of CSS filters and color adjustments to create a warmer, more comfortable viewing experience:
- Adjusts website colors to warmer tones using CSS filters
- Preserves image and video quality while slightly warming them
- Optimizes code blocks for better contrast
- Customizes scrollbars for improved visibility
- Maintains persistent user preferences
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Icons by Lucide
- Built with React
- Styled with Tailwind CSS