Themes
To complement the HA-LCARS system theme - LCARdS adds a token-based theme system for its cards. Instead of hardcoding colours and other default settings, we can reference named tokens that the active theme resolves at runtime. Currently the lcards-default theme is loaded at startup, but in the future new theme packs can be added to easily change the look of all the cards.
Built-in Themes
| Theme | Description |
|---|---|
lcards-default | Standard LCARS look |
Themes are provided by content packs. See the Config Panel Pack Explorer to view all the tokens that theme provides.
Using Theme Tokens
Reference a token in card configs, such as a colour or size field using {theme:token.path}:
style:
border:
color: "{theme:colors.ui.primary}"
card:
color:
background: "{theme:colors.ui.primary}"Token Namespaces
Tokens are organized into namespaces. Browse all available tokens in the Config Panel Theme Browser tab.
Example: colors.ui.*
Semantic colours that map to UI roles. In the default theme, prefer HA-LCARS theme colours but provide LCARdS fallbacks:
| Token | lcards-default value |
|---|---|
colors.ui.primary | var(--lcars-ui-primary, var(--lcards-gray-medium)) |
colors.ui.secondary | var(--lcars-ui-secondary, var(--lcards-gray-medium-light)) |
colors.ui.tertiary | var(--lcars-ui-tertiary, var(--lcards-orange-medium-dark)) |
colors.ui.quaternary | var(--lcars-ui-quaternary, var(--lcards-gray-dark)) |
LCARdS CSS Color Palette
LCARdS injects a complete set of --lcards-<color>-<shade> CSS variables at startup. These colours can be used anywhere and do not need to be in your HA-LCARS theme file.
Note: Colors shown are the green_alert (normal) mode baseline values. When an alert mode is active (e.g.
red_alert,blue_alert), all variables are HSL-transformed automatically — you never need to change your references.
🟠 Orange
| Swatch | CSS Variable | Hex | Notes |
|---|---|---|---|
 | --lcards-orange-darkest | #d91604 | |
 | --lcards-orange-dark | #ef1d10 | |
 | --lcards-orange-medium-dark | #e7442a | |
 | --lcards-orange | #ff6753 | Base orange |
| --lcards-orange-medium | #ff6753 | Alias for --lcards-orange |
 | --lcards-orange-medium-light | #ff8470 | |
 | --lcards-orange-light | #ff977b | |
 | --lcards-orange-lightest | #ffb399 |
⚫ Gray
| Swatch | CSS Variable | Hex | Notes |
|---|---|---|---|
 | --lcards-gray-darkest | #1e2229 | |
 | --lcards-gray-dark | #2f3749 | |
 | --lcards-gray-medium-dark | #52596e | |
 | --lcards-gray | #6d748c | Base gray |
| --lcards-gray-medium | #6d748c | Alias for --lcards-gray |
 | --lcards-gray-medium-light | #9ea5ba | |
 | --lcards-gray-light | #d2d5df | |
 | --lcards-gray-lightest | #f3f4f7 | |
 | --lcards-moonlight | #dfe1e8 | Near-white; used for text/labels |
🔵 Blue
| Swatch | CSS Variable | Hex | Notes |
|---|---|---|---|
 | --lcards-blue-darkest | #002241 | |
 | --lcards-blue-dark | #1c3c55 | |
 | --lcards-blue-medium-dark | #2a7193 | |
 | --lcards-blue | #37a6d1 | Base blue |
| --lcards-blue-medium | #37a6d1 | Alias for --lcards-blue |
 | --lcards-blue-medium-light | #67caf0 | |
 | --lcards-blue-light | #93e1ff | |
 | --lcards-blue-lightest | #00eeee | Cyan-teal |
🟢 Green
| Swatch | CSS Variable | Hex | Notes |
|---|---|---|---|
 | --lcards-green-darkest | #0c2a15 | |
 | --lcards-green-dark | #083717 | |
 | --lcards-green-medium-dark | #095320 | |
 | --lcards-green | #266239 | Base green |
| --lcards-green-medium | #266239 | Alias for --lcards-green |
 | --lcards-green-medium-light | #458359 | |
 | --lcards-green-light | #80bb93 | |
 | --lcards-green-lightest | #b8e0c1 |
🟡 Yellow
| Swatch | CSS Variable | Hex | Notes |
|---|---|---|---|
 | --lcards-yellow-darkest | #70602c | |
 | --lcards-yellow-dark | #ac943b | |
 | --lcards-yellow-medium-dark | #d2bf50 | |
 | --lcards-yellow | #f9ef97 | Base yellow |
| --lcards-yellow-medium | #f9ef97 | Alias for --lcards-yellow |
 | --lcards-yellow-medium-light | #fffac9 | |
 | --lcards-yellow-light | #e7e6de | |
 | --lcards-yellow-lightest | #f5f5dc | Warm white / cream |
Shade Scale
Each color family (except gray/moonlight) follows the same 8-step scale:
| Shade | Description |
|---|---|
-darkest | Deepest / near-black tone |
-dark | Dark variant |
-medium-dark | Between dark and mid |
(base / -medium) | Core reference color — both --lcards-<color> and --lcards-<color>-medium resolve to the same value |
-medium-light | Between mid and light |
-light | Light variant |
-lightest | Palest / near-white tone |
Gray also includes
--lcards-moonlight— a near-white warm gray used for text, labels, and chart axes.
Usage
/* Direct reference */
color: var(--lcards-blue-light);
/* Prefer HA-LCARS theme variable, fall back to lcards palette */
color: var(--lcars-orange, var(--lcards-orange-medium));
/* With hex fallback */
color: var(--lcards-orange-medium, #ff6753);