From eb84b0583baabe388e099e89bb9676f36f0a9870 Mon Sep 17 00:00:00 2001 From: "Tomi P. Hakala" Date: Mon, 13 Jan 2025 17:45:24 +0200 Subject: [PATCH] fix: improve theme selection code to avoid page flashes in dark mode --- assets/custom.css | 5 +++++ views/elements/header.html | 2 +- views/index.html | 23 ++++++++++++----------- views/settings/filtersSettings.html | 2 +- views/settings/speciesSettings.html | 11 +++++++---- 5 files changed, 26 insertions(+), 17 deletions(-) diff --git a/assets/custom.css b/assets/custom.css index 64b46a2b..2f94c122 100644 --- a/assets/custom.css +++ b/assets/custom.css @@ -512,3 +512,8 @@ thead.sticky-header { font-size: 0.875rem; margin-top: 0.25rem; } + +/* Theme toggle */ +.swap-rotate { + transition: transform 0.2s ease-in-out; +} diff --git a/views/elements/header.html b/views/elements/header.html index 5ae65432..8f27281b 100644 --- a/views/elements/header.html +++ b/views/elements/header.html @@ -97,7 +97,7 @@ - + diff --git a/views/settings/speciesSettings.html b/views/settings/speciesSettings.html index c6c62266..8d799060 100644 --- a/views/settings/speciesSettings.html +++ b/views/settings/speciesSettings.html @@ -5,7 +5,7 @@
+x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true })" +x-cloak>
@@ -142,7 +143,8 @@ .slice(0, 5); }, }" -x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true });"> +x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true })" +x-cloak>
@@ -301,7 +303,8 @@ .slice(0, 5); }, }" -x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true });"> +x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true })" +x-cloak>