Theme status pages (and dashboard?) by defining "base colors" in Appearance setting

[pro-sumer]

📑 I have found these related issues/pull requests

Unable to find any related issue.

🏷️ Feature Request Type

Status-page

🔖 Feature description

It would be great if one can configure Uptime Kuma's "base colors" in the web interface, instead of manually overwriting many individual status page elements using CSS.

Bonus: also theme the dashboard this way.

✔️ Solution

Allow the user to define the hex/RGB values for the "base colors" in the Appearance section of Uptime Kuma's settings.

❓ Alternatives

A CSS solution that does not require overwriting many individual status page items would also be good, but unfortunately I don't know how to do that (if this is already possible, a Wiki entry on how to do it would be appreciated).

📝 Additional Context

N/A

[CommanderStorm]

Currently, our system works by defining colours in SCSS in src/assets/vars.scss. This is then used in most places (not quite all, PRs welcome) The colours are then used at src/assets/app.scss to override the defaults by bootstrap 5.

The problem is that SCSS variables are not changeable at runtime (SCSS is compiled). One option would be to change these to CSS variables.

I think changes like you did on https://status.prosumer.dev/ are somewhat out of scope. If somebody has such special requirements, they will be reaching for the CSS guns anyway… => don't see a big payoff of spending lots of effort here..

[pro-sumer]

The problem is that SCSS variables are not changeable at runtime (SCSS is compiled).

That's what I thought. Thanks for confirming.

If somebody has such special requirements, they will be reaching for the CSS guns anyway…

Luckily Uptime Kuma allows custom CSS. Thank you for that option.

[chakflying]

We should consider moving from scss variables to css variables to allow customization in this way.