{% load django_htmx %} <!DOCTYPE html> <html lang="en"> {% load static %} <head> <meta charset="utf-8" /> <meta name="description" content="Self-hosted time-tracker." /> <meta name="keywords" content="time, tracking, video games, self-hosted" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Timetracker - {% block title %} Untitled {% endblock title %} </title> <script src="{% static 'js/htmx.min.js' %}"></script> {% django_htmx_script %} <link rel="stylesheet" href="{% static 'base.css' %}" /> <script src="https://cdn.jsdelivr.net/npm/flowbite@2.4.1/dist/flowbite.min.js"></script> <script> // On page load or when changing themes, best to add inline in `head` to avoid FOUC if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark') } </script> </head> <body hx-indicator="#indicator"> <img id="indicator" src="{% static 'icons/loading.png' %}" class="absolute right-3 top-3 animate-spin htmx-indicator" height="24" width="24" alt="loading indicator" /> <div class="flex flex-col min-h-screen"> {% include "navbar.html" %} <div class="flex flex-1 flex-col dark:bg-gray-800 pt-8"> {% block content %} No content here. {% endblock content %} </div> {% load version %} <span class="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span> </div> {% block scripts %} {% endblock scripts %} <script> var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon'); var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon'); // Change the icons inside the button based on previous settings if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { themeToggleLightIcon.classList.remove('hidden'); } else { themeToggleDarkIcon.classList.remove('hidden'); } var themeToggleBtn = document.getElementById('theme-toggle'); themeToggleBtn.addEventListener('click', function () { // toggle icons inside button themeToggleDarkIcon.classList.toggle('hidden'); themeToggleLightIcon.classList.toggle('hidden'); // if set via local storage previously if (localStorage.getItem('color-theme')) { if (localStorage.getItem('color-theme') === 'light') { document.documentElement.classList.add('dark'); localStorage.setItem('color-theme', 'dark'); } else { document.documentElement.classList.remove('dark'); localStorage.setItem('color-theme', 'light'); } // if NOT set via local storage previously } else { if (document.documentElement.classList.contains('dark')) { document.documentElement.classList.remove('dark'); localStorage.setItem('color-theme', 'light'); } else { document.documentElement.classList.add('dark'); localStorage.setItem('color-theme', 'dark'); } } }); </script> </body> </html>