# shopify polaris-inspired light theme — artlu.ai added a second theme alongside the terminal dark — white cards, inter body, #008060 green Type: project entry Published: 2026-04-18 [Original page]() [Browse this group]() Parent project: artlu.ai Recorded status: launched Updated: 2026-05-20T19:37:39.331Z Technologies: React, Vite, CSS variables, spoolcast Tags: artlu, dev tool ## Details **What is this?** A second visual theme for the artlu.ai tracker site. The dark theme (terminal aesthetic — #08090a, ibm plex mono, #4ade80 green) is still the site's identity. Light is a shopify polaris direction built for the people who find the site through non-dev channels. **What it does** - Toggle in the nav (sun/moon icon between `journal` and `sign in`) - Persists in `localStorage` under `artlu-theme` - Defaults to light — most visitors aren't developers - White cards (#ffffff) floating on a soft gray canvas (#f6f6f7) - Inter for display/body, IBM Plex Mono for anything that should read as data (stats, tags, filter chips) - Shopify dark green (#008060) for the accent, 12px card radius, soft 2-layer shadows **How it works** Both themes share the same DOM. Switched via `html[data-theme="light|dark"]`, with all color/spacing values scoped to CSS variables on that attribute. No hardcoded theme-specific values in components — changing a component's look across both themes means editing one variable in index.css. **Built with** React, Vite, CSS variables. No runtime theming library — all values swap via the `data-theme` attribute. ## Links [Site or demo]() ## Related build notes [shipped two features, then fought github desktop for an hour]() Status and dates describe the published record, not a recent test of an external service. Missing details are not inferred. Public links do not imply an open-source licence or permission to reuse material. [Directory]()