Skip to content

feat: add configurable color scheme and dark branding - #214

Open
ZiYan416 wants to merge 1 commit into
lyc8503:mainfrom
ZiYan416:feat/configurable-color-scheme
Open

feat: add configurable color scheme and dark branding#214
ZiYan416 wants to merge 1 commit into
lyc8503:mainfrom
ZiYan416:feat/configurable-color-scheme

Conversation

@ZiYan416

@ZiYan416 ZiYan416 commented Jul 30, 2026

Copy link
Copy Markdown

Summary

  • add a configurable status-page color scheme;
  • support auto, light, and dark modes;
  • add optional dark-mode logo and favicon assets;
  • preserve the existing system-following behavior by default;
  • apply the same color-scheme configuration to ColorSchemeScript and MantineProvider.

Configuration

const pageConfig: PageConfig = {
  colorScheme: 'auto',
  logo: '/logo-light.svg',
  darkLogo: '/logo-dark.svg',
  favicon: '/favicon-light.png',
  darkFavicon: '/favicon-dark.png',
}

auto follows the system color scheme.

Fallback behavior

  • dark logo: darkLogologo/logo.svg
  • light logo: logo/logo.svg
  • dark favicon: darkFaviconfavicon/favicon.png
  • light favicon: favicon/favicon.png

Existing configurations that do not use the new fields continue to behave exactly as before.

Scope

This PR intentionally does not add:

  • an end-user theme toggle;
  • localStorage theme preferences;
  • new dependencies;
  • custom theme colors;
  • changes to monitoring, Worker, D1, proxy, or deployment logic.

Testing

  • npm ci
  • npm run lint
  • npx tsc --noEmit
  • npm run build
  • default configuration follows the system theme
  • forced light mode works while the system is dark
  • forced dark mode works while the system is light
  • dark logo and favicon are selected correctly
  • missing dark assets fall back to the existing assets
  • home page browser test
  • incidents page
  • embedded single-monitor browser test
  • desktop and mobile layouts
  • system theme changes are reflected while using auto

Closes #184

@ZiYan416

Copy link
Copy Markdown
Author

I didn't configure darkFavicon during my initial testing, so the recorded GIF shows the fallback behavior using the standard favicon. I have now added the test for this, and as shown in the attached image, the feature works perfectly.

PixPin_2026-07-31_09-39-29

@ZiYan416
ZiYan416 marked this pull request as ready for review July 31, 2026 01:43
Copilot AI review requested due to automatic review settings July 31, 2026 01:43

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] Dark mode settings implementation

2 participants