From a5b25ab56bbb5015b5a9b3c6a5ae878ed90d59db Mon Sep 17 00:00:00 2001 From: ernolf Date: Thu, 17 Oct 2024 17:18:58 +0200 Subject: [PATCH] fix(ui): ensure theme-toggle button is visible on first visit Signed-off-by: ernolf --- php/public/toggle-dark-mode.js | 18 +++++++++--------- php/templates/layout.twig | 6 ++++-- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/php/public/toggle-dark-mode.js b/php/public/toggle-dark-mode.js index 1ec2c114..9fc17193 100644 --- a/php/public/toggle-dark-mode.js +++ b/php/public/toggle-dark-mode.js @@ -1,7 +1,7 @@ // Function to toggle theme function toggleTheme() { const currentTheme = document.documentElement.getAttribute('data-theme'); - const newTheme = (currentTheme === 'dark') ? 'light' : 'dark'; + const newTheme = (currentTheme === 'dark') ? '' : 'dark'; // Toggle between no theme and dark theme document.documentElement.setAttribute('data-theme', newTheme); localStorage.setItem('theme', newTheme); @@ -13,14 +13,14 @@ function toggleTheme() { // Function to apply saved theme from localStorage function applySavedTheme() { const savedTheme = localStorage.getItem('theme'); - if (savedTheme) { - document.documentElement.setAttribute('data-theme', savedTheme); - - // Ensure the icon is set correctly based on the saved theme - const themeIcon = document.getElementById('theme-icon'); - themeIcon.textContent = savedTheme === 'dark' ? '☀️' : '🌙'; + if (savedTheme === 'dark') { + document.documentElement.setAttribute('data-theme', 'dark'); + document.getElementById('theme-icon').textContent = '☀️'; // Sun icon for dark mode + } else { + document.documentElement.removeAttribute('data-theme'); // Default to light theme (no data-theme) + document.getElementById('theme-icon').textContent = '🌙'; // Moon icon for light mode } } -// Apply theme when the page loads -document.addEventListener('DOMContentLoaded', applySavedTheme); \ No newline at end of file +// Immediately apply the saved theme +applySavedTheme(); diff --git a/php/templates/layout.twig b/php/templates/layout.twig index f5523c76..cad5ae7a 100644 --- a/php/templates/layout.twig +++ b/php/templates/layout.twig @@ -4,16 +4,18 @@ +
{% block body %}{% endblock %}
- -
+