@fluid-ds/themes
v0.0.3-alpha.0
Published
Drop-in brand presets for Fluid, pure CSS, no build required. Apply via `data-fluid-brand` to swap brands at runtime.
Maintainers
Readme
@fluid-ds/themes
Drop-in brand presets for Fluid.
Pure CSS, no build step, apply via the data-fluid-brand attribute to
swap brands at runtime.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fluid-ds/themes@latest/src/midnight.css" />
<body data-fluid-brand="midnight">
<!-- everything inside uses the midnight theme -->
</body>Install
pnpm add @fluid-ds/themesimport "@fluid-ds/themes/midnight.css";
import "@fluid-ds/themes/corporate.css";What's in the box
src/midnight.css: dark, deep-purple accentsrc/corporate.css: neutral, blue accent
Each theme is a single [data-fluid-brand="..."] rule that overrides the
semantic tokens. Pair with @fluid-ds/tokens as the base.
Roll your own
Use the theme builder to edit tokens visually and export your own brand CSS, the output drops straight into your app.
License
MIT, © Fluid contributors
