I’ve been adding more styling to pages, using Tailwindcss and Daisyui.

The column on the left of the layout was bothering me, but I’ve added Particles.js into that div, and now it’s hypnotic, reminds me of a lava lamp.

One big thing that has bothered me since the start was that the theme switcher wasn’t saving the theme.

Fixed that with some simple javascript:

    <script>
      function themeCheck () {
        var checked = localStorage.getItem('theme');
        if (checked == 'dark' ) {
          document.getElementById('dataTheme').setAttribute('checked', 'checked');
          }
        console.log("loaded theme = " + checked);
      }

      function themeSave () {
        if (document.getElementById('dataTheme').checked) {
          newTheme = "dark";   
        } else {
          newTheme = "fire";
        }
        localStorage.setItem('theme', newTheme);
        console.log("new theme = " + newTheme);
      }
    </script>

And edited the HTML for the switch to be:

  <label class="flex cursor-pointer gap-2">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
    <input type="checkbox" 
      value="dim" 
      class="toggle theme-controller" 
      data-toggle-theme="dark,fire" 
      data-act-class="ACTIVECLASS" 
      id="dataTheme" 
      onclick="themeSave()">
    
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
  </label>

Still a lot more to do, but it’s looking more cohesive now.