Easy on the eyes.

Paste a YouTube URL, pick a filter, and watch comfortably. GlareGuard is a lightweight web app that dims and tints YouTube videos to reduce eye strain — no accounts, no tracking, nothing leaves your browser.

Four filter modes, each designed for a different moment.

🌙 Simple Dim Like turning down a dial. Uniform darkening across the entire frame. → Late-night background viewing, winding down before sleep.

🔲 Dark Invert White backgrounds become dark. Colors shift to match. → Tutorials, documentation walkthroughs, anything with a bright UI.

🔴 Night Red Red monochrome that preserves your dark-adapted vision. → Falling asleep to a video, stargazing breaks, pitch-dark rooms.

🟢 Night Green Green monochrome with the same dark-vision benefits and a tactical feel. → Same use cases as Night Red, different aesthetic preference.

Viewing

• Darkness slider from 0% to 100%
• Fullscreen support — filters follow the video
• UI dims and tints to match the active filter mode
• Slider glow pulses with mode-matched color
• End-screen overlay keeps you in-app between videos

Smart

• Auto-detect brightness adjusts filters to content (experimental, requires screen sharing)
• Shareable URLs preserve video and intensity settings
• Accepts all YouTube URL formats: watch, youtu.be, embed, shorts, and bare IDs

Accessible

• Respects prefers-reduced-motion — animations disabled when requested
• Light and dark theme via prefers-color-scheme
• Mobile-first responsive design

Your viewing habits are none of our business.

• ✅ Zero tracking
• ✅ Zero analytics
• ✅ Zero cookies
• ✅ No external APIs beyond the YouTube embed
• ✅ All brightness detection processed locally
• ✅ Settings stored in localStorage only
• ✅ No accounts, no signups

1. Open GlareGuard in your browser
2. Paste any YouTube URL and press Watch
3. Drag the darkness slider and pick a filter mode

Settings persist automatically between sessions.

Web — Just visit the URL. Nothing to install.

PWA — Click the Install App button when it appears. Works offline after install.

Vanilla JavaScript, Vite, CSS, and the YouTube IFrame Player API. No frameworks.

npm install # Install dependencies
npm run dev # Start Vite dev server
npm run build # Production build to dist/
npm run preview # Preview production build locally

src/
├── index.html # Landing page with URL input & player container
├── main.js # Entry point — wires player, processor, settings, SW registration
├── player.js # YouTube IFrame Player API wrapper
├── processor.js # CSS filter engine (dim, bright-reduction, night tint)
├── detector.js # Auto-detect brightness via screen capture
├── ui/
│ ├── settings.js # Settings panel component (slider, mode selector, toggles)
│ └── styles.css # Global styles, dark theme, responsive layout
└── utils/
 ├── storage.js # localStorage read/write helpers
 ├── url.js # YouTube URL parser
 └── resize.js # ResizeObserver overlay sync
public/
├── manifest.json # PWA manifest
├── icons/ # App icons
└── service-worker.js # Cache-first service worker

MIT — © 2026 GlareGuard