Fixed style issues.

Author: oubiwann

config.toml

@@ -21,6 +21,6 @@ internal_level = "warn"
 [extra.download]
 
 repository = "https://github.com/lfe/lfe"
-prior_release = "2.0.1"
-current_release = "2.1.4"
+prior_release = "2.1.5"
+current_release = "2.2.0"
 pre_release = "refs/heads/develop"

static/css/site.css

@@ -7,7 +7,21 @@ const HSThemeAppearance = {
         const defaultTheme = 'default'
         let theme = localStorage.getItem('hs_theme') || defaultTheme
 
-        if (document.querySelector('html').classList.contains('dark')) return
+        if (document.querySelector('html').classList.contains('dark')) {
+            // Still need to set hs-dark-mode-active and toggle icons
+            document.querySelector('html').classList.add('hs-dark-mode-active')
+            const moonIcon = document.querySelector('[data-hs-theme-click-value="dark"]')
+            const sunIcon = document.querySelector('[data-hs-theme-click-value="light"]')
+            if (moonIcon) {
+                moonIcon.classList.add('hidden')
+                moonIcon.classList.remove('block')
+            }
+            if (sunIcon) {
+                sunIcon.classList.remove('hidden')
+                sunIcon.classList.add('block')
+            }
+            return
+        }
         this.setAppearance(theme)
     },
     _resetStylesOnLoad() {
@@ -29,10 +43,45 @@ const HSThemeAppearance = {
         }
 
         document.querySelector('html').classList.remove('dark')
+        document.querySelector('html').classList.remove('light')
         document.querySelector('html').classList.remove('default')
         document.querySelector('html').classList.remove('auto')
 
-        document.querySelector('html').classList.add(this.getOriginalAppearance())
+        const themeToApply = this.getOriginalAppearance()
+
+        // Only add 'dark' class for dark mode. Light mode = no class
+        if (themeToApply === 'dark') {
+            document.querySelector('html').classList.add('dark')
+        }
+
+        // Manually toggle the hs-dark-mode-active class for icon visibility
+        const htmlEl = document.querySelector('html')
+        const moonIcon = document.querySelector('[data-hs-theme-click-value="dark"]')
+        const sunIcon = document.querySelector('[data-hs-theme-click-value="light"]')
+
+        if (themeToApply === 'dark') {
+            htmlEl.classList.add('hs-dark-mode-active')
+            // In dark mode: hide moon, show sun
+            if (moonIcon) {
+                moonIcon.classList.add('hidden')
+                moonIcon.classList.remove('block')
+            }
+            if (sunIcon) {
+                sunIcon.classList.remove('hidden')
+                sunIcon.classList.add('block')
+            }
+        } else {
+            htmlEl.classList.remove('hs-dark-mode-active')
+            // In light mode: show moon, hide sun
+            if (moonIcon) {
+                moonIcon.classList.remove('hidden')
+                moonIcon.classList.add('block')
+            }
+            if (sunIcon) {
+                sunIcon.classList.add('hidden')
+                sunIcon.classList.remove('block')
+            }
+        }
 
         setTimeout(() => {
             $resetStylesEl.remove()
@@ -66,10 +115,6 @@ window.addEventListener('load', () => {
     const $clickableThemes = document.querySelectorAll('[data-hs-theme-click-value]')
     const $switchableThemes = document.querySelectorAll('[data-hs-theme-switch]')
 
-    $clickableThemes.forEach($item => {
-        $item.addEventListener('click', () => HSThemeAppearance.setAppearance($item.getAttribute('data-hs-theme-click-value'), true, $item))
-    })
-
     $switchableThemes.forEach($item => {
         $item.addEventListener('change', (e) => {
             HSThemeAppearance.setAppearance(e.target.checked ? 'dark' : 'default')
@@ -110,12 +155,27 @@ window.addEventListener('load', () => {
                 return
             }
 
+            // Don't interfere with theme switcher clicks
+            if (e.target.closest('[data-hs-theme-click-value]')) {
+                return
+            }
+
             // Close if clicking outside the dropdown
             if (!dropdown.contains(e.target)) {
                 closeDropdown()
             }
         })
 
+        // Use event delegation for theme switchers - MUST be after dropdown handler
+        document.addEventListener('click', (e) => {
+            const themeButton = e.target.closest('[data-hs-theme-click-value]')
+            if (themeButton) {
+                e.preventDefault()
+                const themeValue = themeButton.getAttribute('data-hs-theme-click-value')
+                HSThemeAppearance.setAppearance(themeValue, true, themeButton)
+            }
+        })
+
         // Close dropdown when clicking a menu item
         dropdownMenu.querySelectorAll('a').forEach(function(link) {
             link.addEventListener('click', function() {
@@ -142,4 +202,3 @@ window.addEventListener('load', () => {
         }
     }
 })
-

static/js/site.js

@@ -1,5 +1,7 @@
 @import "tailwindcss";
 
+@variant dark (.dark &);
+
 @layer components {
     body {
         @apply dark:bg-slate-900 min-h-[75rem];

styles/site.css

@@ -19,7 +19,7 @@
     {% set current_page = "/" ~ current_path %}
     {% set selected = "" %}
     {% set selected_style = "text-blue-600 sm:py-6 dark:text-blue-500" %}
-    {% set unselected_style = "text-gray-500 hover:text-gray-400 sm:py-6 dark:text-gray-400 dark:hover:text-gray-500" %}
+    {% set unselected_style = "text-gray-700 hover:text-gray-600 sm:py-6 dark:text-gray-400 dark:hover:text-gray-500" %}
      {% set style = unselected_style %}
 
 
@@ -69,7 +69,7 @@
       {% set selected = "" %}
       {% set style = unselected_style %}
 
-      <a class="font-medium text-gray-500 hover:text-gray-400 sm:py-6 dark:text-gray-400 dark:hover:text-gray-500" href="http://blog.lfe.io">
+      <a class="font-medium text-gray-700 hover:text-gray-600 sm:py-6 dark:text-gray-400 dark:hover:text-gray-500" href="http://blog.lfe.io">
         Blog
       </a>
 
@@ -103,13 +103,13 @@
         </div>
       </div>
 
-      <a class="flex items-center gap-x-2 font-medium text-gray-500 hover:text-blue-600 sm:border-l sm:border-gray-300 sm:my-6 sm:pl-6 dark:border-gray-700 dark:text-gray-400 dark:hover:text-blue-500"
+      <a class="flex items-center gap-x-2 font-medium text-gray-700 hover:text-blue-600 sm:border-l sm:border-gray-300 sm:my-6 sm:pl-6 dark:border-gray-700 dark:text-gray-400 dark:hover:text-blue-500"
          aria-label="Github"
          href="https://github.com/lfe/lfe" >
         <i class="fab fa-github"></i>
       </a>
 
-      <a class="flex items-center gap-x-2 font-medium text-gray-500 hover:text-blue-600 dark:border-gray-700 dark:text-gray-400 dark:hover:text-blue-500"
+      <a class="flex items-center gap-x-2 font-medium text-gray-700 hover:text-blue-600 dark:border-gray-700 dark:text-gray-400 dark:hover:text-blue-500"
          aria-label="Mastodon"
          href="https://fosstodon.org/web/@lfe"
          rel="me">