diff --git a/templates/base.html b/templates/base.html
index 73dd405..04c7ede 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,106 +1,103 @@
+
+
+
+
-
-
-
-
+ {% block site_meta %}
+
+
- {% block site_meta %}
-
-
+
+
+ {% endblock site_meta %}
-
-
- {% endblock site_meta %}
+ {% block page_meta %}
+ {% if config.description %}
+
+ {% endif %}
+ {% endblock page_meta %}
- {% block page_meta %}
- {% if config.description %}
-
- {% endif %}
- {% endblock page_meta %}
+ {% block css %}
+
+ {% endblock css %}
+ {% block title %}{{ config.title }}{% endblock title%}
+
+
+
+
-
+ /**
+ * This code is required here to avoid flickering the light theme when the dark theme is chosen.
+ */
+ function evaluate_prefers_color() {
+ const s = get_theme();
+ if (s === 'dark') {
+ document.body.classList.add('dark');
+ } else if (s === 'light') {
+ document.body.classList.remove('dark');
+ } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ document.body.classList.add('dark');
+ }
+ }
+
+ {% block content %}
+ please fill this with a template
+ {% endblock content %}
+
+
-
+ {% block js %}
- {% block content %}
- please fill this with a template
- {% endblock content %}
-
-
-
-{% block js %}
-
-{% endblock js %}
+ function init_toggle_theme() {
+ const el = document.getElementById('toggle-theme')
+ const renderState = () => {
+ // Icons from https://fonts.google.com/icons
+ el.innerHTML = get_theme() === 'dark'
+ ? ``
+ : ``
+ evaluate_prefers_color()
+ }
+ el.onclick = () => {
+ localStorage.setItem('prefers-color', get_theme() === 'dark' ? 'light' : 'dark');
+ renderState()
+ }
+ renderState()
+ }
+ init_toggle_theme()
+
+ {% endblock js %}
\ No newline at end of file