🎨 Living Code for CSS variables

Calm slate. Living color.
Living Code for CSS variables. Repository-owned theme files, installation instructions and four color flavors.

Installation · Flavors · Configuration · All ports

Installation

pnpm add @living-code/css

Import the stylesheet in your app:

@import "@living-code/css/living-code.css";

Or load it directly in HTML:

<link rel="stylesheet" href="living-code.css" />
<html data-theme="living-code-night">

Use palette names (var(--lc-teal)) or semantic roles (var(--lc-keyword), var(--lc-bg), var(--lc-border-active)).

Flavors

Expand a flavor for its activation instructions.

Night · Dark · full palette

<html data-theme="living-code-night">

Frost · Dark · softer chroma

<html data-theme="living-code-frost">

Paper · Light · near-white slate

<html data-theme="living-code-paper">

Signal · Dark · teal accent

<html data-theme="living-code-signal">

Configuration

See CSS variables's documentation for application settings and reload behavior. The activation instructions above identify each supported flavor; keep your other application configuration.

Compatibility

Preserves the npm package name @living-code/css and its existing import paths. Package publication and registry credentials are separate from creating this repository.

Contributing

Found a problem? Open an issue with the app version, the flavor and a screenshot. Want Living Code somewhere else? Request a port.

Pull requests are welcome. Keep this README, port.json and images/ in sync, and use real screenshots of the app, never mockups.

_{🦎 One chameleon, many habitats. Part of Living Code.}

License

_{© Elliot Luque}