add theme mode switch

fsinfuhh · Jul 12, 2024 · 7df8ee1 · 7df8ee1
1 parent 63fad2e
commit 7df8ee1
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 3 deletions.
diff --git a/src/vinywaji/gui/static_src/tailwind.config.js b/src/vinywaji/gui/static_src/tailwind.config.js
@@ -3,6 +3,7 @@ const colors = require('tailwindcss/colors')
 const theme_color = process.env.VW_THEME_COLOR || 'teal';
 
 module.exports = {
+    darkMode: 'selector',
     content: [
         /**
          * HTML. Paths to Django template files that will contain Tailwind CSS classes.

diff --git a/src/vinywaji/gui/templates/base.html b/src/vinywaji/gui/templates/base.html
@@ -44,6 +44,42 @@
     {% include "components/footer.html" %}
     {% block scripts %}
         <script type="application/javascript" src="{% static 'base.js' %}"></script>
+        <script>
+        let mode = localStorage.theme ?? 'system';
+
+        function updateMode() {
+            if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                document.documentElement.classList.add('dark')
+            } else {
+                document.documentElement.classList.remove('dark')
+            }
+
+            document.querySelector('#modeSwitch').dataset.mode = mode;
+        }
+        updateMode();
+
+        function switchMode() {
+            switch (mode) {
+                case 'light':
+                    localStorage.theme = 'dark';
+                    mode = 'dark';
+                    break;
+                case 'dark':
+                    localStorage.removeItem('theme')
+                    mode = 'system';
+                    break;
+                case 'system':
+                    localStorage.theme = 'light';
+                    mode = 'light';
+                    break;
+            }
+            updateMode();
+        }
+
+        document.querySelector('#modeSwitch').addEventListener('click', (e) => {
+            switchMode();
+        })
+    </script>
         {% block scripts-extra %}{% endblock %}
     {% endblock %}
 {% endblock %}

diff --git a/src/vinywaji/gui/templates/components/navbar.html b/src/vinywaji/gui/templates/components/navbar.html
@@ -2,11 +2,16 @@
     <div class="bg-primary-400 dark:bg-primary-600 text-black dark:text-white flex justify-between px-2 items-stretch">
         <a href="/" class="text-3xl font-bold place-self-center">{{ title }}</a>
         <ul class="flex items-stretch">
+            <li><a class="block px-2 leading-[4rem] hover:bg-primary-700 transition-colors" href="#"
+                   onclick="switchMode()" id="modeSwitch">Mode</a></li>
             {% if request.user.is_anonymous %}
-                <li><a class="block px-2 leading-[4rem] hover:bg-primary-700 transition-colors" href="{% url 'simple_openid_connect:login' %}">Login</a></li>
+                <li><a class="block px-2 leading-[4rem] hover:bg-primary-700 transition-colors"
+                       href="{% url 'simple_openid_connect:login' %}">Login</a></li>
             {% else %}
-                <li><a class="block px-2 leading-[4rem] hover:bg-primary-700 transition-colors" href="{% url 'profile' %}">Profile</a></li>
-                <li><a class="block px-2 leading-[4rem] hover:bg-primary-700 transition-colors" href="{% url 'simple_openid_connect:logout' %}">Logout</a></li>
+                <li><a class="block px-2 leading-[4rem] hover:bg-primary-700 transition-colors"
+                       href="{% url 'profile' %}">Profile</a></li>
+                <li><a class="block px-2 leading-[4rem] hover:bg-primary-700 transition-colors"
+                       href="{% url 'simple_openid_connect:logout' %}">Logout</a></li>
             {% endif %}
         </ul>
     </div>