theme-controller resets and stops working on session history back #3037

keksiskela · 2024-05-15T15:27:12Z

keksiskela
May 15, 2024

I'm using the simple swap controller with some javascript to store and retrieve set theme from local storage and to update both the document root data-theme attribute and the checkbox; it works as expected until I navigate back in the session history, from there the theme-controller reverts to the default swap-off while the theme remains the same even if the checkbox is checked and the root <html data-theme='foo'> attribute is set to the correct theme, and theme change doesn't respond anymore to further clicks, only the icon changes; it starts working again only on page refresh, which causes annoying flickering if set with location.reload() on popstate as a temporary hack in the javascript. I'm not a professional web-developer, just an amateur: what am I doing wrong? The javascript is just a vanilla addEventListener() on window load/reload and on checkbox change, storing and updating attributes and values, so I don't think the problem is there...

I'm using htmx to make internal navigation responsive, and it does store some cache data, but the data stored is correct relative to the theme, and the problem occurs even disabling said htmx cache. No web search has helped me understand the issue, and I've debugged my code to the best of my knowledge.

saadeghi · 2024-05-15T18:18:03Z

saadeghi
May 15, 2024
Maintainer

Can you please provide a minimum reproduction link?

2 replies

keksiskela May 15, 2024
Author

Code not online (yet), but it's something like this:

navbar.html (pretty much copy-paste from DaisyUI and included into the base.html template <header> through jinja)

...
<div class="navbar-end">
    <label class="swap swap-flip">
      <!-- this hidden checkbox controls the state -->
      <input id="theme-switch"
             type="checkbox"
             class="theme-controller"
             value="dark" />
      <!-- light bulb icon -->
      <div class="swap-off font-emoji text-2xl">🌑</div>
      <!-- moon icon -->
      <div class="swap-on font-emoji text-2xl">💡</div>
    </label>
  </div>
...

vanilla script.js (needs refactoring) to set, load, change, and trying to reload on history back-navigation

const checkbox = document.querySelector("#theme-switch")
const preferredColorScheme = window.matchMedia("(prefers-color-scheme: dark)")
  .matches
  ? "dark"
  : "light"
const darkTheme = localStorage.getItem("theme") === "dark"

function setPreferredTheme() {
  if (localStorage.getItem("theme") === null) {
    localStorage.setItem("theme", preferredColorScheme)
    document.documentElement.setAttribute("data-theme", preferredColorScheme)
    if (preferredColorScheme === "dark") {
      checkbox.checked = true
    } else {
      checkbox.checked = false
    }
    return console.log(`no default: let there be ${preferredColorScheme}!`)
  }
}

function loadTheme() {
  window.addEventListener("load", () => {
    if (darkTheme) {
      checkbox.checked = true
      document.documentElement.setAttribute("data-theme", "dark")
      console.log("welcome dark!")
    } else {
      checkbox.checked = false
      document.documentElement.setAttribute("data-theme", "light")
      console.log("welcome light!")
    }
  })
}

function reloadTheme() {
  window.addEventListener("popstate", () => {
    if (darkTheme) {
      checkbox.checked = true
      document.documentElement.setAttribute("data-theme", "dark")
      return console.log("still dark!")
    } else {
      checkbox.checked = false
      document.documentElement.setAttribute("data-theme", "light")
      return console.log("still light!")
    }
  })
}

function changeTheme() {
  checkbox.addEventListener("change", () => {
    if (checkbox.checked === true) {
      localStorage.setItem("theme", "dark")
      document.documentElement.setAttribute("data-theme", "dark")
      return console.log("switch to dark!")
    } else {
      localStorage.setItem("theme", "light")
      document.documentElement.setAttribute("data-theme", "light")
      return console.log("switch to light!")
    }
  })
}

setPreferredTheme()
loadTheme()
reloadTheme()
changeTheme()

As I said, everything works flawlessly until I use browser back navigation which breaks the correct icon and the load/reload => theme change function, making the swap animation ineffective in changing theme and update local storage (which otherwise works perfectly). I know my .js code is very redundant and full of debuging console.logs, but I was trying to patch every scenario just to make it work, so it's very repetitive.

To (re)produce I just go to the website, change theme, navigate through pages without using the browser buttons, and when I do (e.g. history backwards) the theme toggle either breaks (i.e. swap icons without changing theme) or the theme changes but neither data-theme="foo" nor local host gets updated, and toggling the checkbox either through click or the browser console doesn't produce any effect, nor does the value change. I'm pretty sure it's an issue on my part, but it doesn't seem to be the htmx loading of partials, nor cache, and my code is boilerplate, so I don't know how to solve it.

P.S. I'm on the latest of everything: DaisyUI, tailwind, and Chrome.

keksiskela May 18, 2024
Author

Ok, so I actually solved it! It was a caching issue: htmx was saving the whole <body> for back & forth navigation history, which included the <navbar> inside the <header>, making it unresponsive when loaded from cache...

The issue disappeared immediately when another saving point, e.g. <main>, was defined. For those using htmx this is the relevant reference: https://htmx.org/attributes/hx-history-elt/

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

theme-controller resets and stops working on session history back #3037

{{title}}

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{title}}

Select a reply

theme-controller resets and stops working on session history back #3037

keksiskela May 15, 2024

Replies: 1 comment · 2 replies

saadeghi May 15, 2024 Maintainer

keksiskela May 15, 2024 Author

keksiskela May 18, 2024 Author

keksiskela
May 15, 2024

Replies: 1 comment 2 replies

saadeghi
May 15, 2024
Maintainer

keksiskela May 15, 2024
Author

keksiskela May 18, 2024
Author