Dashboard theme

The haunt.gg dashboard is pink. This userscript makes it any colour you want, from one accent, one background and one text colour. It repaints the sidebar, the cards, the charts, the toasts and the buttons, and it keeps its settings between visits. It changes nothing on haunt's side: it is your browser, painting the page you already loaded.

Everything is yours to set. Ten presets to start from, then a panel inside the script, opened with Ctrl + Shift + H, where you pick the three colours by hand, push the contrast, round or square the corners, change the font, turn the glow on, and override the cards, the borders, the sidebar and the success, warning and error colours one by one.

Install the script Tampermonkey or Violentmonkey, one click Read the source Version 2.2.0, by toutourina
Drag the bar
Original White

Left of the bar, haunt as it ships. Right of the bar, the same page with the theme on.
Both sides are the real dashboard markup and the real haunt stylesheet, frozen on 25 August 2026. Only the variables differ.
Presets here are a taste of it: the script's own panel goes further, colour by colour.

What it writes

The dashboard is built on CSS variables. The script never touches haunt's markup or its JavaScript: it appends one stylesheet that redefines those variables, so every card, border and chart follows. Here is what the preset above produces.

The haunt.gg dashboard with its original pink theme
Original, straight from haunt.
The haunt.gg dashboard themed in blue
Midnight blue, one accent away.
The haunt.gg dashboard themed in yellow
Amber, with a light background.
The haunt.gg dashboard themed in grayscale
White, no colour at all.
How it works

Three colours, thirty variables. You pick an accent, a background and a text colour. Every surface between them is derived: cards sit 4.5% of the way from the background towards the text, borders 14%, inputs 11%. One contrast slider multiplies all of those distances at once, so the set stays coherent instead of drifting apart.

Readable text, always. Whatever accent you choose, the text drawn on top of it is picked by measuring the accent's relative luminance, the same maths the accessibility guidelines use. A yellow button gets black text, a navy one gets white, without you thinking about it.

The leftover pink. A few colours are baked into the page rather than read from a variable: inline styles, SVG fills, a chart gradient. A small watcher listens to the parts of the page that change and rewrites just those, keeping the transparency when there is any. It only looks at what actually moved, never at the whole document.

It follows you around. The dashboard is a single page app, so the URL changes without a reload. The script hooks the browser's own navigation calls and repaints on arrival, and it steps aside entirely once you leave the dashboard.

The settings panel, where everything is set. Ctrl + Shift + H opens it on the dashboard. Ten presets, the three colours as pickers or hex, contrast from 30 to 220%, corner radius from 0 to 28 pixels, five font stacks, the glow, and under "More colours" the cards, borders and sidebar plus the success, warning and error colours, each overridable one by one. It lives in a shadow root, so the page's stylesheet cannot reach inside it and the panel cannot leak out. Your settings are stored by the extension, or in your browser if you run the script another way.

Install

Install Tampermonkey or Violentmonkey in your browser. Both are free extension stores away.

Open the script. The extension catches the file and shows you the source before anything runs.

Press install, then open haunt.gg/dashboard. Ctrl + Shift + H opens the settings.

Updates are automatic: the extension checks this page's copy and offers the new version when there is one.

The script only runs on haunt.gg/dashboard and haunt.gg/acp. It reads nothing, sends nothing, and stores only your colours. Not affiliated with haunt.gg.