1 files changed, 19 insertions, 0 deletions
diff --git a/templates/global.html b/templates/global.html
index d9bd29d..97212df 100644
--- a/templates/global.html
+++ b/templates/global.html
@@ -1,8 +1,17 @@
+{% import 'macros.html' as ui %}
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TTUN</title>
+    <script>
+        (function () {
+            var stored = localStorage.getItem('ttun-theme');
+            var theme = stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+            document.documentElement.setAttribute('data-theme', theme);
+        })();
+    </script>
    <style>
 /* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
@@ -52,9 +61,19 @@ table {
        border-collapse: collapse;
        border-spacing: 0;
 }
+{% include '_styles.html' %}
    </style>
 </head>
 <body>
+    <div class="pulse-line" aria-hidden="true"></div>
+    <button class="theme-toggle" type="button" aria-label="Toggle color theme" onclick="
+        var next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+        document.documentElement.setAttribute('data-theme', next);
+        localStorage.setItem('ttun-theme', next);
+    ">
+        {{ ui.sun_icon() }}
+        {{ ui.moon_icon() }}
+    </button>
    {% block template %}{% endblock %}
 </body>
 </html>

diff --git a/templates/global.html b/templates/global.html index d9bd29d..97212df 100644 --- a/templates/global.html +++ b/templates/global.html
@@ -1,8 +1,17 @@
		1	{% import 'macros.html' as ui %}
1	<!DOCTYPE html>	2	<!DOCTYPE html>
2	<html lang="en">	3	<html lang="en">
3	<head>	4	<head>
4	<meta charset="UTF-8">	5	<meta charset="UTF-8">
		6	<meta name="viewport" content="width=device-width, initial-scale=1">
5	<title>TTUN</title>	7	<title>TTUN</title>
		8	<script>
		9	(function () {
		10	var stored = localStorage.getItem('ttun-theme');
		11	var theme = stored \|\| (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
		12	document.documentElement.setAttribute('data-theme', theme);
		13	})();
		14	</script>
6	<style>	15	<style>
7	/* http://meyerweb.com/eric/tools/css/reset/	16	/* http://meyerweb.com/eric/tools/css/reset/
8	v2.0 \| 20110126	17	v2.0 \| 20110126
@@ -52,9 +61,19 @@ table {
52	border-collapse: collapse;	61	border-collapse: collapse;
53	border-spacing: 0;	62	border-spacing: 0;
54	}	63	}
		64	{% include '_styles.html' %}
55	</style>	65	</style>
56	</head>	66	</head>
57	<body>	67	<body>
		68	<div class="pulse-line" aria-hidden="true"></div>
		69	<button class="theme-toggle" type="button" aria-label="Toggle color theme" onclick="
		70	var next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
		71	document.documentElement.setAttribute('data-theme', next);
		72	localStorage.setItem('ttun-theme', next);
		73	">
		74	{{ ui.sun_icon() }}
		75	{{ ui.moon_icon() }}
		76	</button>
58	{% block template %}{% endblock %}	77	{% block template %}{% endblock %}
59	</body>	78	</body>
60	</html>	79	</html>