Select dark mode based on CSS instead of Java Script

awinterstein · Dec 2, 2024 · de7e2cc · de7e2cc
1 parent 190ec12
commit de7e2cc
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -133,8 +133,8 @@ It supports setting a different color scheme depending on the user selected them
 In order to use it you should select the color scheme you want to use for light and dark themes in the list provided [here](https://www.getzola.org/documentation/getting-started/configuration/#syntax-highlighting) and edit your `config.toml` file like this example:
 
 ```toml
+highlight_code = true
 highlight_theme = "css"
-
 highlight_themes_css = [
   { theme = "ayu-dark", filename = "syntax-dark.css" },
   { theme = "ayu-light", filename = "syntax-light.css" },

diff --git a/src/js/main.js b/src/js/main.js
@@ -1,17 +1,11 @@
 document.addEventListener("DOMContentLoaded", function() {
   // ---------------- Switch Theme -------------------------
   // On page load or when changing themes, best to add inline in `head` to avoid FOUC
-  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-    document.documentElement.classList.add('dark')
-    document.getElementById('dark').classList.add('hidden');
+  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
     document.getElementById("syntax_highlight").href = "/syntax-dark.css";
   } else {
-    document.documentElement.classList.remove('dark')
-    document.getElementById('light').classList.add('hidden');
     document.getElementById("syntax_highlight").href = "/syntax-light.css";
   }
-  // Switch theme action
-  document.getElementById('switch-theme')?.addEventListener('click', switchTheme);
 
   // ---------------- Toggle Sidebar -------------------------
   document.getElementById('toggle-sidebar')?.addEventListener('click', toggleSidebar);
@@ -20,23 +14,6 @@ document.addEventListener("DOMContentLoaded", function() {
   document.getElementById('toggle-mobile-menu')?.addEventListener('click', toggleMobileMenu);
 });
 
-function switchTheme() {
-  let current_theme = ([...document.documentElement.classList].includes('dark')) ? 'dark' : 'light';
-  if (current_theme === 'dark') {
-    localStorage.theme = 'light';
-    document.documentElement.classList.remove('dark');
-    document.getElementById('light').classList.add('hidden');
-    document.getElementById('dark').classList.remove('hidden');
-    document.getElementById("syntax_highlight").href = "/syntax-light.css";
-  } else {
-    localStorage.theme = 'dark';
-    document.documentElement.classList.add('dark');
-    document.getElementById('dark').classList.add('hidden');
-    document.getElementById('light').classList.remove('hidden');
-    document.getElementById("syntax_highlight").href = "/syntax-dark.css";
-  }
-}
-
 function toggleSidebar() {
   let sidebar = document.getElementById('sidebar');
   if ([...sidebar.classList].includes('translate-x-0')) {

diff --git a/static/css/main.css b/static/css/main.css
diff --git a/static/js/main.js b/static/js/main.js
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -3,7 +3,7 @@ module.exports = {
       './templates/**/*.html',
       './static/js/**/*.js',
    ],
-  darkMode: 'class', // or 'media' or 'class'
+  darkMode: 'media', // or 'media' or 'class'
   theme: {
     extend: {},
   },

diff --git a/templates/layout.html b/templates/layout.html
@@ -29,7 +29,9 @@
   {% endif %}
 
   <link href="{{ config.base_url | trim_end_matches(pat='/') | safe }}/css/main.css" rel="stylesheet">
-  <link id="syntax_highlight" href="#" rel="stylesheet">
+
+  <link rel="stylesheet" type="text/css" href="/syntax-dark.css" media="(prefers-color-scheme: dark)" />
+  <link rel="stylesheet" type="text/css" href="/syntax-light.css" media="(prefers-color-scheme: light)" />
 
   <title>
     {% block title %}
@@ -221,52 +223,6 @@
             </div>
           </div>
           {% endif %}
-          <!-- Theme switch button -->
-          <div class="flex p-2">
-            <button id="switch-theme" type="button"
-              class="bg-gray-200 text-gray-800 hover:text-gray-900 dark:bg-gray-800 dark:text-gray-400 dark:hover:text-white p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
-              <span class="sr-only">Switch Theme</span>
-              <!-- Heroicon name: outline/light -->
-              <svg id="light" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                  d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z">
-                </path>
-              </svg>
-              <!-- Heroicon name: outline/dark -->
-              <svg id="dark" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                  d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
-              </svg>
-            </button>
-
-            <!-- Profile dropdown -->
-            <!-- <div class="ml-3 relative">
-            <div>
-              <button type="button" class="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
-                <span class="sr-only">Open user menu</span>
-                <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
-              </button>
-            </div> -->
-
-            <!--
-              Dropdown menu, show/hide based on menu state.
-
-              Entering: "transition ease-out duration-100"
-                From: "transform opacity-0 scale-95"
-                To: "transform opacity-100 scale-100"
-              Leaving: "transition ease-in duration-75"
-                From: "transform opacity-100 scale-100"
-                To: "transform opacity-0 scale-95"
-            -->
-            <!-- Active: "bg-gray-100", Not Active: "" -->
-            <!-- <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
-              <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
-              <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
-              <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
-            </div> -->
-          </div>
         </div>
       </div>
     </div>