archive/healthchecks_healthchecks
0
0
Fork 0
mirror of https://github.com/healthchecks/healthchecks.git synced 2025-04-03 12:25:31 +00:00
Code Issues Projects Releases Wiki Activity

Add support for system theme ()

Browse source 
Add support for system theme

---------

Co-authored-by: Juan Mora <juan@nimble.gt>
Co-authored-by: Pēteris Caune <cuu508@gmail.com>
This commit is contained in:
moraj-turing 2024-04-15 01:42:16 -06:00 • committed by GitHub
parent 8ba75475bb
commit 3718ff57c7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 35 additions and 8 deletions
hc/accounts
views.py
static/img
theme-system.png
templates
accounts
appearance.html
base.html

2
hc/accounts/views.py
View file

@ -940,7 +940,7 @@ def appearance(request: AuthenticatedHttpRequest) -> HttpResponse:
if request.method == "POST":
theme = request.POST.get("theme", "")
if theme in ("", "dark"):
if theme in ("", "dark", "system"):
profile.theme = theme
profile.save()
ctx["status"] = "info"

BIN
static/img/theme-system.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 8.7 KiB

23
templates/accounts/appearance.html
View file

@ -33,7 +33,7 @@
<h2>Theme</h2>
<div class="row">
<div class="col-sm-6 theme">
<div class="col-sm-4 theme">
<label for="theme-light">
<img
src="{% static 'img/theme-light.png' %}"
@ -51,7 +51,7 @@
Light
</label>
</div>
<div class="col-sm-6 theme">
<div class="col-sm-4 theme">
<label for="theme-dark">
<img
src="{% static 'img/theme-dark.png' %}"
@ -69,7 +69,24 @@
Dark
</label>
</div>
</div>
<div class="col-sm-4 theme">
<label for="theme-system">
<img
src="{% static 'img/theme-system.png' %}"
alt="System theme preview">
</label>
<label class="radio-container">
<input
id="theme-system"
type="radio"
name="theme"
value="system"
{% if profile.theme == "system" %} checked {% endif %}>
<span class="radiomark"></span>
System
</label>
</div>
</form>
</div>
{% if status == "info" %}

18
templates/base.html
View file

@ -12,9 +12,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-title" content="{{ site_name }}">
<meta name="application-name" content="{{ site_name }}">
{% if request.user.is_authenticated and request.profile.theme == 'dark' %}
<meta name="theme-color" content="#18181b">
{% endif %}
{% block favicon %}
<link rel="icon" type="image/svg+xml" href="{% static 'img/favicon.svg' %}">
{% endblock %}
@ -224,9 +221,22 @@
</ul>
</div>
</footer>
{% block base_modals %}{% endblock %}
{% if request.user.is_authenticated and request.profile.theme == 'system' %}
<script>
(function() {
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
function switchColors() {
document.body.classList.toggle("dark", prefersDark.matches);
}
switchColors();
prefersDark.addEventListener("change", switchColors);
})();
</script>
{% endif %}
{% block base_scripts %}
{% compress js %}
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>