Quick Start

2 minutes

Turn any screen into a controllable light. Works as a Chrome extension or as a simple website.

1) Open the light

  • Web app: Visit your hosted URL (e.g., screen‑lights.web.app).
  • Extension: Click the ScreenLight icon in the Chrome toolbar.

2) Pick a color & brightness

  • Use the color picker and Brightness slider in the top toolbar.
  • Try Warm, Cool, or White presets.

3) Go distraction‑free

  • Press F for fullscreen.
  • Press H to hide/show the UI.

4) Optional ambience

  • Toggle Static, Fade, or Pulse for subtle animation.

Light Panel Controls

Color • Brightness • Temperature

From the top toolbar, adjust:

  • Color – choose any hue using the color picker.
  • Brightness – fine‑tune intensity for your room.
  • Color temperature – set Kelvin (e.g., 2700K warm, 6500K cool) for photography or comfort.

Tip: Temperature and color stay in sync, so changing one updates the other automatically.

Preset Swatches

One‑click looks

Use Warm, Cool, and White to jump to tried‑and‑true lighting setups. Presets instantly update the color picker and temperature readout.

Ambient Animation Modes

Static • Fade • Pulse

Soften your scene or add gentle motion:

  • Static – a steady wash of color.
  • Fade – gradual transitions in intensity for a relaxed glow.
  • Pulse – subtle rhythmic brightening and dimming.

Animations are designed to be low‑distraction and performant. See eye‑safety for flashing guidance.

Fullscreen & UI Toggle

Keys: F, H
  • Enter / exit fullscreen with F.
  • Hide / show the toolbar with H.
  • Move your pointer to the very top edge to reveal the toolbar; it auto‑hides after a few seconds.

Some browsers require a click before allowing fullscreen. If blocked, click anywhere on the page, then press F again.

Keyboard Shortcuts

Power‑user reference
ActionShortcutNotes
Toggle fullscreenFWorks in web & extension
Toggle UI visibilityHHide controls for distraction‑free light
Brightness up (Up arrow)Adjusts by ~5%
Brightness down (Down arrow)Adjusts by ~5%

Auto‑Hide Control Bar

Edge reveal

Hover your cursor at the top edge to temporarily reveal the toolbar while the UI is hidden. The toolbar hides automatically after ~6 seconds of inactivity.

Annotations: Notes & Freehand Draw

Off • Type • Draw • Clear

Add quick cues on top of the light panel:

  • Mode: switch between Off, Type (rich‑text sticky notes), and Draw (freehand).
  • Manipulate: drag notes to reposition; resize or edit their text.
  • Clear: remove all annotations with one click.

Persistence: Notes and drawings are saved automatically and restored when you reopen ScreenLight.

Persistence & Sync

chrome.storage.sync → localStorage fallback
  • Both builds share a unified storage layer.
  • Extension: preferences sync across signed‑in Chrome browsers using chrome.storage.sync.
  • Web app: settings persist locally per browser/device via localStorage.
  • On load, ScreenLight restores your color, brightness, ambient mode, annotations, and UI visibility.

Color Temperature Sync

Kelvin ↔︎ RGB

Adjust the Kelvin slider to match a target color temperature. ScreenLight converts Kelvin to RGB and updates the color picker. Selecting a new color also adjusts the Kelvin readout to the nearest match.

Common reference points
  • Warm tungsten: ~2700K
  • Neutral office: ~4000–4500K
  • Daylight: ~5500–6500K

Chrome Extension

MV3 • Action‑launched
  • Click the toolbar icon to open ScreenLight in a dedicated tab.
  • Preferences sync automatically across your signed‑in Chrome profiles.
  • Changes propagate in real time between open windows via storage change listeners.

You may need to pin the extension to make the icon visible in the toolbar.

Standalone Web App

Drop‑in HTML bundle
  • Open the hosted URL anywhere (or load the public/ bundle locally).
  • All features are available; settings persist per browser/device.
  • No login required; no data leaves your device (except optional donation link).

Pro Tips

Better sessions
Start dim, work up

Begin at low brightness to avoid eye strain; increase as needed.

Warm for evenings

Use 2700–3200K after dark to keep light gentle and sleep‑friendly.

Use fullscreen

Press F to remove window chrome and maximize uniform light.

Hide the UI

Press H to hide controls; reveal them by touching the top edge.

Presets for speed

Warm/Cool/White are tuned to common use cases; start there, then tweak.

Annotate cues

Use notes/draw to mark camera positions, framing, or lighting cues during sessions.

Eye‑Safety & Accessibility

Please read
  • Avoid high‑brightness flashing if you’re sensitive to light or prone to migraines/photosensitive epilepsy.
  • Prefer Static or gentle Fade in dark environments.
  • Take regular breaks; look away from the screen every 20 minutes.

Troubleshooting FAQ

Common fixes
Fullscreen doesn’t activate

Most browsers require user interaction first. Click once on the page, then press F again. Also check any popup blockers or permissions.

Settings don’t persist

In the extension, ensure you’re signed into Chrome and sync is enabled. In the web app, confirm your browser allows localStorage (not in private mode) and that you’re not clearing site data on close.

High CPU or fan noise

Switch to Static mode, reduce brightness, and keep only one ScreenLight tab open. Close other heavy pages.

Annotations are missing after reload

Verify storage permissions (extension) or site data settings (web). If storage was cleared, annotations can’t be restored.

The toolbar won’t show when hidden

Move the pointer to the very top edge. If still hidden, press H to toggle UI back on.

Privacy

Local‑first

ScreenLight stores preferences and annotations locally (or via Chrome Sync for the extension). No usage analytics are sent. The Buy me a coffee button opens a PayPal page; no payment data is handled by ScreenLight.

Changelog (high‑level)

What’s included
  • Initial tutorial release covering: controls, presets, ambient modes, fullscreen/UI, shortcuts, auto‑hide, annotations (with persistence), Kelvin↔︎RGB sync, extension vs web storage behavior.

For code‑level changes, see your repository commit history.