From 520cbd0dbc87ebc2b380f3ab2c392dabd6be1a47 Mon Sep 17 00:00:00 2001
From: Speyll <speyll@protonmail.com>
Date: Thu, 5 Oct 2023 22:38:45 +0100
Subject: [PATCH] renamed default_mode to default_theme, streamlined the code
 for theme switching, added documentation

---
 README.md             | 18 ++++++++++++++
 config.toml           |  3 +++
 templates/header.html | 58 +++++++++++++++++++++----------------------
 3 files changed, 49 insertions(+), 30 deletions(-)

diff --git a/README.md b/README.md
index 9ef47f4..741dc5b 100644
--- a/README.md
+++ b/README.md
@@ -95,6 +95,24 @@ en = { name = "/blog/", url = "/blog" }
 fr = { name = "/blog/", url = "/blog" }
 ```
 
+#### Default Theme
+
+To configure the default theme, simply utilize the `default_theme` variable and set it to either `light` or `dark`:
+
+```toml
+[extra]
+default_theme = "light"
+```
+
+#### Display Author Name in Blog Posts
+
+Customize the display of the author's name in your blog posts by toggling the `display_author` variable to either `true` or `false`:
+
+```toml
+[extra]
+display_author = true
+```
+
 ### Webrings
 
 Add a webring with a shortcode:
diff --git a/config.toml b/config.toml
index b7cb20b..0958125 100644
--- a/config.toml
+++ b/config.toml
@@ -46,8 +46,11 @@ internal_level = "warn"
 [extra]
 author = "Speyll"
 display_author = true
+
 favicon = "favicon.ico"
 image = ""
+
+default_theme = "dark"
 list_pages = false
 twitter_card = true
 
diff --git a/templates/header.html b/templates/header.html
index 0b8f97e..0bda1b0 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -7,46 +7,44 @@
     rel="noreferrer noopener" {% endif %}>{{ current_nav_item.name }}</a>
   {% endif %}
   {% endfor %}
+
   <div class="themeSwitch">
-    {% if not config.extra.default_mode %}
-    <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg
-        class="icons icons__background">
-        <use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use>
-      </svg></button>
-    <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background">
-        <use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use>
-      </svg></button>
-    {% elif config.extra.default_mode and config.extra.default_mode == "light" %}
-    <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg
-        class="icons icons__background">
-        <use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use>
-      </svg></button>
-    <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background">
-        <use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use>
-      </svg></button>
-    {% elif config.extra.default_mode and config.extra.default_mode == "dark" %}
-    <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background">
-        <use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use>
-      </svg></button>
-    <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg
-        class="icons icons__background">
-        <use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use>
-      </svg></button>
+    {% if not config.extra.default_theme %}
+    <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
+    <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
+
+    {% elif config.extra.default_theme and config.extra.default_theme == "light" %}
+    <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"> <use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
+    <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
+
+    {% elif config.extra.default_theme and config.extra.default_theme == "dark" %}
+    <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
+    <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
     {% endif %}
   </div>
 </nav>
 {% endif %}
+
 <script>
   const setTheme = (theme) => {
     document.documentElement.className = theme;
     localStorage.setItem('theme', theme);
   }
+
+  const hasCodeRun = localStorage.getItem('hasCodeRun');
+
+  if (!hasCodeRun) {
+    const defaultTheme = "{{ config.extra.default_theme }}";
+    setTheme(defaultTheme);
+    localStorage.setItem('hasCodeRun', 'true');
+  }
+
   const getTheme = () => {
     const theme = localStorage.getItem('theme');
-    theme && setTheme(theme);
+    if (theme) {
+      setTheme(theme);
+    }
   }
-  getTheme()
-  {% if config.extra.default_mode %}
-  setTheme("{{ config.extra.default_mode }}")
-  {% endif %}
-</script>
\ No newline at end of file
+
+  getTheme();
+</script>