shopify polaris-inspired light theme — artlu.ai
added a second theme alongside the terminal dark — white cards, inter body, #008060 green
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.