peterstockings/function
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: Add light/dark theme with toggle in navbar (dark theme styling incomplete - dont care for now)

Browse Source
This commit is contained in:
Peter Stockings
2025-11-23 22:00:41 +11:00
parent fc494a9355
commit 89a17f68ab
15 changed files with 463 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
templates/base.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html class="{% if current_user.is_authenticated and current_user.theme_preference == 'dark' %}dark{% endif %}">
<head>
<meta charset="utf-8">
@@ -10,6 +10,11 @@
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z' /%3E%3C/svg%3E%0A" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
<script src="/static/js/tailwindcss@3.2.4.js"></script>
<script>
tailwind.config = {
darkMode: 'class',
}
</script>
<script src="/static/js/htmx.min.js"></script>
<script src="/static/js/hyperscript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.1/ace.min.js"
@@ -21,6 +26,8 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.1/theme-monokai.min.js"
integrity="sha512-g9yptARGYXbHR9r3kTKIAzF+vvmgEieTxuuUUcHC5tKYFpLR3DR+lsisH2KZJG2Nwaou8jjYVRdbbbBQI3Bo5w=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.1/theme-chrome.min.js" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script src="/static/js/mithril/editor.js"></script>
@@ -42,6 +49,16 @@
"Noto Color Emoji";
}
/* Dark mode transition */
html.dark {
color-scheme: dark;
}
html,
body {
transition: background-color 0.3s ease, color 0.3s ease;
}
.gradient {
background-image: linear-gradient(-225deg, #cbbacc 0%, #2580b3 100%);
}
@@ -52,13 +69,40 @@
background-image: linear-gradient(315deg, #f39f86 0%, #f9d976 74%);
}
</style>
<script>
function toggleTheme() {
const html = document.documentElement;
const isDark = html.classList.contains('dark');
const newTheme = isDark ? 'light' : 'dark';
if (newTheme === 'dark') {
html.classList.add('dark');
} else {
html.classList.remove('dark');
}
// Dispatch event for components to listen to
window.dispatchEvent(new CustomEvent('themeChanged', { detail: { theme: newTheme } }));
// Send preference to backend
const formData = new FormData();
formData.append('theme', newTheme);
fetch('/settings/theme', {
method: 'POST',
body: formData
});
}
</script>
</head>
<body class="leading-relaxed tracking-wide flex flex-col">
<body class="leading-relaxed tracking-wide flex flex-col bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-50">
<div class="container mx-auto p-4 lg:p-1 min-h-screen h-full">
{% block content %}
{% endblock %}
</div>
</body>
</body>
</html>