louislam/uptime-kuma

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

Open

#4,642 opened on Apr 1, 2024

View on GitHub
 (16 comments) (1 reaction) (0 assignees)JavaScript (7,844 forks)batch import
A:coreA:dashboardA:settingsA:status-pageA:ui/uxfeature-requesthelp wanted

Repository metrics

Stars
 (86,760 stars)
PR merge metrics
 (Avg merge 4d 10h) (27 merged PRs in 30d)

Description

📑 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

Contributor guide

Research direction
Investigate the Appearance settings component (likely in src/components/Settings.vue) to see existing settings structure. Look at how status page CSS is currently overridden and identify where base colors could be added. Consider reading the discussion in the issue comments for user expectations. Ensure the solution avoids breaking existing custom CSS overrides.
Tech stack
javascriptvuecss
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
Basic Vue.js knowledgeCSS theming conceptsFamiliarity with Uptime Kuma settings
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50