Get Started

    Design

    Light theme pass

    light-theme-pass

    Add a light theme to a dark-native site that actually looks designed: warm palette, frosted white glass, and a sweep of every dark-only component.

    3dopenwebsite.comMIT383 words · updated 2026-09-20light modethemingtailwindaccessibility
    Tested withClaude CodeCodexCursorOpenCodeWindsurfCopilotAntigravity

    Install

    Add it to your agent

    One file, no build step. Pick the agent you use; the command drops the SKILL.md where that agent looks for skills.

    The `skills` CLI reads this repo's /skills folder and installs into every agent it detects. Pick the skill from the list it shows.

    Terminal
    npx skills add Ku-code/3d-open-website --skill light-theme-pass
    Download Source

    Light theme pass

    Flipping tokens gets you a working light mode. A good one needs a second pass over every surface that was designed on black.

    1. Mechanics

    • Keep dark on :root if it is the brand default; add a .light { … } token block. Store the choice (localStorage), apply the class to <html> in an inline <script> in index.html before first paint (no flash), and set color-scheme.
    • Add a light: Tailwind variant as the mirror of dark:: plugin(({ addVariant }) => addVariant('light', '.light &')). Use it for one-off surface treatments instead of duplicating components.
    • Mark sections that must stay dark (video heroes) with a .force-dark class that re-pins the dark tokens.

    2. Palette (warm, not clinical)

    • Ground: warm off-white (36 40% 97%), not #fff. Elevated surfaces: pure white. Ink: warm near-black (20 16% 9%). Muted text ≥ 4.5:1 on the ground.
    • "Glass" on paper = frosted white (0 0% 100% / 0.72) + hairline (ink / 0.08) + a warm drop shadow. Black-at-4% glass reads as dirty grey — avoid.
    • Borders slightly warm (24 18% 86%). Selection colour = accent at 22%.

    3. Sweep the components (the actual work)

    Grep for and fix, in this order:

    1. bg-[#…], bg-black/…, text-white, border-white/…, bg-white/[0.0x] → tokens (bg-surface, text-foreground, border-foreground/10, bg-foreground/[0.04]). White text stays only on the accent colour or on video.
    2. Canvas/SVG effects with baked colours (dot fields, circuit boards, cubes): expose colour props and pass hsl(var(--…)), or dim the layer on paper (.light .dot-layer { opacity: .4 }).
    3. White-on-transparent logos: .light .logo-mark { filter: invert(1) brightness(.12) }, and remove the dark theme's "dim until hover" opacity in light.
    4. Overlays for readability (video reflections, hero scrims): flip from dark-at-55% to white-at-60%.
    5. Third-party components with their own theme detection (variant="dark"): pass the live theme.
    6. Toasts, dialogs, code blocks, scrollbars: follow the theme (color-scheme, toaster theme prop).
    7. Navigation cards/menus that were near-black: give them warm tints with dark text.

    4. Verify

    Toggle on every page at 375 / 768 / 1280. Look specifically for: grey boxes, invisible logos, white text on white cards, black shadows on paper, unreadable code blocks, effects that vanish. Reset the stored theme after testing if you automated it in a shared browser profile.

    Shared under MIT, credited to 3dopenwebsite.com. View source.