Theming
Presets
Switch between the built-in color themes.
variables.css ships with four ready-made themes. Yellow is active by default; Green, Blue and Red are included as commented-out blocks at the bottom of the file.
| Preset | Accent | Hue rotate |
|---|---|---|
| Yellow (default) | #FFEF1F | 0deg |
| Green | #87F286 | 0deg |
| Blue | #5B8DEF | 60deg |
| Red | #E65D5D | 200deg |
How to switch preset
There is always exactly one active :root block at the top of the file. To switch:
Comment out the current active block
Wrap the active :root { ... } at the top in /* ... */.
Uncomment the preset you want
Find the preset block (e.g. /* — Blue — */) and remove the surrounding /* and */ so it becomes the active :root.
Save and refresh
Restart the resource (or re-open the UI) to see the new theme.
Keep only one active
:root block. If two are active, the last one in the file wins, which can be confusing. Comment out the ones you are not using.Example: activate Blue
Before (Blue is commented out):
variables.css
/* — Blue — */
/* :root {
--accent: #5B8DEF;
--accent-rgb: 91, 141, 239;
...
--hue-rotate: 60deg;
} */
After (Blue is active — remove the /* and */, and comment the old top block):
variables.css
/* — Blue — */
:root {
--accent: #5B8DEF;
--accent-rgb: 91, 141, 239;
...
--hue-rotate: 60deg;
}
Each preset already sets matching
--accent, --accent-rgb, radial colors and --hue-rotate, so swapping presets is a one-step recolor.