Eclipse

A customizable night mode extension for your browser that applies a dark theme, supports multiple palettes, custom CSS and integrates with web apps like Google Sheets.

---

Architecture

flowchart TD
    subgraph Extension Context
        Sidepanel[Sidepanel Options UI: src/sidepanel.html]
        Storage[(Chrome Storage API)]
        Background[Background Service Worker: src/background.js]
        ContentScript[Content Script Injector: src/content.js]
        WebPage[DOM Page Element Styles]
    end

    Sidepanel -- User Options / Color Picker --> Storage
    Storage -- Theme Sync --> ContentScript
    Background -- Tab Events & Key Commands --> ContentScript
    ContentScript -- Dynamic CSS / Canvas Filter --> WebPage

Loading

Features

• Multiple Built-In Themes: Choose from Default Dark, OLED Black, GitHub Dark, Tokyo Night and Sepia.
• Custom CSS Engine: Write custom CSS rules and apply them in real-time.
• Custom Color Picker: Modify background, text, link and accent colors via the Side Panel.
• Smart Element Handling: Strips drop shadows and recolors tables, SVG icons and text inputs.
• Google Sheets Support: Detects and darkens Google Sheets cell canvases.

Theme & Customization Options

Theme	Palette Description	Target Display / Use Case
Default Dark	Slate gray dark palette	Daily Web Browsing
OLED Black	Deep pitch black (#000000)	OLED / AMOLED Screens
GitHub Dark	GitHub dark dim contrast	Developer Documentation
Tokyo Night	Cyberpunk neon contrast	Media & Code Editors
Sepia	Warm soft brown tones	Low-strain Night Reading

Preview

Extension Logo	Documentation Preview

Installation Guide

1. Download Eclipse.zip from this link.
2. Extract the ZIP file.
3. Open your browser and navigate to chrome://extensions/.
4. Enable Developer mode at the top right.
5. Click Load unpacked and select the extracted src folder.

Contributing

To add a new theme, edit src/themes.json. See the Contributing Guide for instructions.

---

</> by Tejas Gupta