retheme

name	retheme
description	Adjust or create a color theme for destiny-ui-css — tuning slightly-off colors, making a faction/element themed variant, or fixing a token's default. Use for any request about changing the framework's colors.

Retheme destiny-ui-css

Two different tasks — pick the right one:

A. User-side theme (no rebuild)

For a consumer page that wants different colors, override the custom properties on the .destiny scope in the page's own CSS:

.destiny {
  --d2-rarity-exotic: #e0c257;
  --d2-accent-green: #6ab87a;
}

The full token list is in the Theming section of docs/llms.txt (rarity, damage, text, surfaces, states, progress). Derived shades — item-tile gradients, hover border tints, translucent fills — are computed with color-mix() from the base token, so one override propagates everywhere; there are no -light/-dark companion tokens to keep in sync.

To preview values interactively, open the live theme editor: docs/index.html#theming (color pickers apply tokens to the whole showcase page).

B. Changing the framework's default colors

Edit ONLY the $_-prefixed raw values at the top of src/_variables.scss — nothing else needs to change, the custom property and public variable follow automatically. Then:

1. npm run build-css (the compiled dist/ + docs/dist/ files are committed).
2. Sanity-check contrast: body text and .text-* utilities sit on near-black backgrounds; tooltip header text is white on the rarity color.
3. Screenshot the showcase (docs/index.html) — at minimum the Colors, Items, Tooltips and Buttons sections — and compare against the previous render.

Never "fix" a color by editing a component file; if a component uses the wrong token, change which token it references, not the color value in place.