[PR #511] [CLOSED] Dark mode #981

New issue

Closed

opened 2026-02-26 00:30:19 +03:00 by kerem · 0 comments

kerem commented

2026-02-26 00:30:19 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/healthchecks/healthchecks/pull/511
Author: @andyloree
Created: 5/8/2021
Status: ❌ Closed

Base: master ← Head: dark-mode

📝 Commits (1)

556bc2d Dark mode

📊 Changes

14 files changed (+590 additions, -1 deletions)

View changed files

➕ static/css/badges-dark.css (+4 -0)
➕ static/css/base-dark.css (+36 -0)
➕ static/css/bootstrap-dark.css (+382 -0)
➕ static/css/channels-dark.css (+30 -0)
➕ static/css/details-dark.css (+4 -0)
➕ static/css/docs-dark.css (+19 -0)
➕ static/css/log-dark.css (+20 -0)
➕ static/css/login-dark.css (+4 -0)
➕ static/css/my_checks-dark.css (+5 -0)
➕ static/css/my_checks_desktop-dark.css (+46 -0)
➕ static/css/profile-dark.css (+3 -0)
➕ static/css/projects-dark.css (+10 -0)
➕ static/css/welcome-dark.css (+13 -0)
📝 templates/base.html (+14 -1)

📄 Description

For your consideration, the following are the minimal CSS files (all suffixed with -dark), placed after the corresponding existing CSS files in the base.html, with the media="(prefers-color-scheme: dark)" attribute. This will respect browse/OS settings for dark mode rendering.

Certainly possible to change this behavior a per-user saved preference or similar code-driven option as opposed to browser preference driven, but I thought this would present a minimal change, no-code, option.

One draw back to this implementation is any older browser that doesn't support theme preference will render dark mode by default. A workaround to this would be to leverage per-page JS to assist correct loading on older browsers, which I would be happy to add.

Below are screen shots of the dark mode in use:

01 - Welcome Screen

02 - Login/Signup

03 - Docs

04 - Projects

05 - Checks

06 - Check Details

07 - Integrations

08 - Badges

09 - Settings

I tested using Firefox and Chromium, and emulated mobile rendering. It is possible that may have missed a few dark-on-dark rendering issues (tried my best to test all pages/areas).

Thank you for your consideration, and for making such an excellently simple tool for healthcheck monitoring.

Andrew

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/healthchecks/healthchecks/pull/511 **Author:** [@andyloree](https://github.com/andyloree) **Created:** 5/8/2021 **Status:** ❌ Closed **Base:** `master` ← **Head:** `dark-mode` --- ### 📝 Commits (1) - [`556bc2d`](https://github.com/healthchecks/healthchecks/commit/556bc2d95fcbc904dbcb353fbe852909c9673038) Dark mode ### 📊 Changes **14 files changed** (+590 additions, -1 deletions) <details> <summary>View changed files</summary> ➕ `static/css/badges-dark.css` (+4 -0) ➕ `static/css/base-dark.css` (+36 -0) ➕ `static/css/bootstrap-dark.css` (+382 -0) ➕ `static/css/channels-dark.css` (+30 -0) ➕ `static/css/details-dark.css` (+4 -0) ➕ `static/css/docs-dark.css` (+19 -0) ➕ `static/css/log-dark.css` (+20 -0) ➕ `static/css/login-dark.css` (+4 -0) ➕ `static/css/my_checks-dark.css` (+5 -0) ➕ `static/css/my_checks_desktop-dark.css` (+46 -0) ➕ `static/css/profile-dark.css` (+3 -0) ➕ `static/css/projects-dark.css` (+10 -0) ➕ `static/css/welcome-dark.css` (+13 -0) 📝 `templates/base.html` (+14 -1) </details> ### 📄 Description For your consideration, the following are the minimal CSS files (all suffixed with ```-dark```), placed after the corresponding existing CSS files in the ```base.html```, with the ``` media="(prefers-color-scheme: dark)"``` attribute. This will respect browse/OS settings for dark mode rendering. Certainly possible to change this behavior a per-user saved preference or similar code-driven option as opposed to browser preference driven, but I thought this would present a minimal change, no-code, option. One draw back to this implementation is any [older browser](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#browser_compatibility) that doesn't support theme preference will render dark mode by default. A workaround to this would be to leverage per-page JS to assist correct loading on older browsers, which I would be happy to add. Below are screen shots of the dark mode in use: **01 - Welcome Screen** ![01-welcome](https://user-images.githubusercontent.com/6370905/117554487-11465580-b026-11eb-9be6-0adb212db30c.png) **02 - Login/Signup** ![02-login](https://user-images.githubusercontent.com/6370905/117554491-1d321780-b026-11eb-84d6-4d321af7544e.png) **03 - Docs** ![03-docs](https://user-images.githubusercontent.com/6370905/117554506-26bb7f80-b026-11eb-87fb-30abbf476259.png) **04 - Projects** ![04-projects](https://user-images.githubusercontent.com/6370905/117554509-29b67000-b026-11eb-8e10-15067c2d3e5c.png) **05 - Checks** ![05-checks](https://user-images.githubusercontent.com/6370905/117554512-2de28d80-b026-11eb-8a4d-d2c36af7a895.png) **06 - Check Details** ![06-check-details](https://user-images.githubusercontent.com/6370905/117554513-2fac5100-b026-11eb-8f26-9abf87b080c6.png) **07 - Integrations** ![07-integrations](https://user-images.githubusercontent.com/6370905/117554515-31761480-b026-11eb-8235-be8becd92a65.png) **08 - Badges** ![08-badges](https://user-images.githubusercontent.com/6370905/117554516-333fd800-b026-11eb-9e91-6d00eaa7a123.png) **09 - Settings** ![09-settings-dialog](https://user-images.githubusercontent.com/6370905/117554518-35099b80-b026-11eb-8eeb-9c82d49a143e.png) I tested using Firefox and Chromium, and emulated mobile rendering. It is possible that may have missed a few dark-on-dark rendering issues (tried my best to test all pages/areas). Thank you for your consideration, and for making such an excellently simple tool for healthcheck monitoring. Andrew --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>