From 3911da475a9f37cba98295d1f51a70101a6811e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=93scar=20Garc=C3=ADa=20Amor?= Date: Mon, 2 Dec 2024 12:10:01 +0100 Subject: [PATCH] Adds a fancy theme selector --- supysonic/static/js/supysonic.js | 27 +++++++++++++++++++++++++++ supysonic/templates/layout.html | 32 +++++++++++++++++++------------- 2 files changed, 46 insertions(+), 13 deletions(-) diff --git a/supysonic/static/js/supysonic.js b/supysonic/static/js/supysonic.js index 7bc3196..f4d9b11 100644 --- a/supysonic/static/js/supysonic.js +++ b/supysonic/static/js/supysonic.js @@ -22,3 +22,30 @@ document.querySelectorAll('.modal').forEach(function (modal) { }, { once: true }); }); }); + +function setTheme(theme) { + if (theme === 'auto') { + const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + document.body.setAttribute('data-bs-theme', systemTheme); + } else { + document.body.setAttribute('data-bs-theme', theme); + } +} + +const savedTheme = localStorage.getItem('theme') || 'light'; +document.querySelector(`input[value="${savedTheme}"]`).checked = true; +setTheme(savedTheme); + +document.querySelectorAll('input[name="theme"]').forEach(function (radio) { + radio.addEventListener('change', function () { + const selectedTheme = this.value; + localStorage.setItem('theme', selectedTheme); + setTheme(selectedTheme); + }); +}); + +window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () { + if (localStorage.getItem('theme') === 'auto') { + setTheme('auto'); + } +}); diff --git a/supysonic/templates/layout.html b/supysonic/templates/layout.html index eda3c97..3d2a7b0 100644 --- a/supysonic/templates/layout.html +++ b/supysonic/templates/layout.html @@ -57,12 +57,30 @@