10 files changed, 119 insertions, 73 deletions
diff --git a/site/themes/sine/layouts/partials/head.html b/site/themes/sine/layouts/partials/head.html
index e7c23e5..6651e89 100644
--- a/site/themes/sine/layouts/partials/head.html
+++ b/site/themes/sine/layouts/partials/head.html
@@ -8,7 +8,7 @@
   // Run as early as possible
   (function() {
     const theme = localStorage.getItem("theme");
-    const preloadClass = theme === "dark" ? "preload-dark" : "preload-light";
+    const preloadClass = theme.includes("dark") ? "preload-dark" : "preload-light";
 
     // Add preload class to <html>
     document.documentElement.classList.add(preloadClass);
diff --git a/site/themes/sine/layouts/partials/nav.html b/site/themes/sine/layouts/partials/nav.html
index efd7e5b..889d5a0 100644
--- a/site/themes/sine/layouts/partials/nav.html
+++ b/site/themes/sine/layouts/partials/nav.html
@@ -2,7 +2,7 @@
   <nav class="navbar">
     <div id="logoContainer">
       <a class="logo" href="{{ .Site.BaseURL }}">{{- .Site.Title -}}</a>
-      <button type="button" id="toggleTheme" data-theme-toggle aria-label="switch theme"></button>
+      <button type="button" id="switchTheme" data-theme-switcher aria-label="switch theme"></button>
     </div>
     <ul class="nav-links">
       {{ range.Site.Menus.main }}
diff --git a/site/themes/sine/static/css/style.css b/site/themes/sine/static/css/style.css
index c14e227..9470d48 100644
--- a/site/themes/sine/static/css/style.css
+++ b/site/themes/sine/static/css/style.css
@@ -1,8 +1,7 @@
 /* COLORS */
-@import url('themes/oxocarbon-light.css');
-@import url('themes/oxocarbon-dark.css');
+@import url('themes/themes.css');
 
-#toggleTheme {
+#switchTheme {
   font-family: "kirsch";
   font-size: 2rem;
   color: var(--fg);
@@ -10,8 +9,8 @@
   background: none;
   cursor: pointer;
   position: relative;
-  top: 2px;
-  margin: -4px 2px;
+  /* top: 2px; */
+  /* margin: -4px 2px; */
 }
 
 #logoContainer {
@@ -29,6 +28,13 @@
   font-display: block;
 }
 
+@font-face {
+  font-family: 'Jacquard12';
+  src: url('/fonts/Jacquard12-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
 /* LAYOUT */
 
 body {
@@ -152,9 +158,10 @@ body {
   margin: 14px 0;
 }
 
-#content h1 {
+#content :is(h1, h2, h3, h4, h5, h6) {
   margin: 0;
   text-align: center;
+  font-family: "Jacquard12";
 }
 
 #content ul {
diff --git a/site/themes/sine/static/css/themes/melatonin-dark.css b/site/themes/sine/static/css/themes/melatonin-dark.css
new file mode 100644
index 0000000..bd12429
--- /dev/null
+++ b/site/themes/sine/static/css/themes/melatonin-dark.css
@@ -0,0 +1,22 @@
+/* COLORS */
+[data-theme="melatonin-dark"] {
+  --base00: #152233;
+  --base01: #253850;
+  --base02: #415d81;
+  --base03: #5b7aa2;
+  --base04: #84a3cb;
+  --base05: #c8d7eb;
+  --base06: #b9cce5;
+  --base07: #dce7f6;
+  --base08: #d87595;
+  --base09: #dd9f6b;
+  --base0A: #c88953;
+  --base0B: #90a254;
+  --base0C: #55aa9b;
+  --base0D: #5ba1d0;
+  --base0E: #a586d9;
+  --base0F: #a06f42;
+
+  --fg: var(--base06);
+  --bg: var(--base00);
+}
diff --git a/site/themes/sine/static/css/themes/melatonin-light.css b/site/themes/sine/static/css/themes/melatonin-light.css
new file mode 100644
index 0000000..f0d167b
--- /dev/null
+++ b/site/themes/sine/static/css/themes/melatonin-light.css
@@ -0,0 +1,22 @@
+/* COLORS */
+[data-theme="melatonin-light"] {
+  --base00: #e5edfa;
+  --base01: #cedef6;
+  --base02: #b8cef1;
+  --base03: #6e8db8;
+  --base04: #2f548a;
+  --base05: #294069;
+  --base06: #132745;
+  --base07: #02060e;
+  --base08: #d87595;
+  --base09: #dd9f6b;
+  --base0A: #c88953;
+  --base0B: #90a254;
+  --base0C: #55aa9b;
+  --base0D: #5ba1d0;
+  --base0E: #a586d9;
+  --base0F: #9a6c40;
+
+  --fg: var(--base06);
+  --bg: var(--base00);
+}
diff --git a/site/themes/sine/static/css/themes/oxocarbon-dark.css b/site/themes/sine/static/css/themes/oxocarbon-dark.css
index 3283009..5388115 100644
--- a/site/themes/sine/static/css/themes/oxocarbon-dark.css
+++ b/site/themes/sine/static/css/themes/oxocarbon-dark.css
@@ -1,5 +1,5 @@
 /* COLORS */
-[data-theme="dark"] {
+[data-theme="oxocarbon-dark"] {
   --base00: #161616;
   --base01: #262626;
   --base02: #393939;
diff --git a/site/themes/sine/static/css/themes/oxocarbon-light.css b/site/themes/sine/static/css/themes/oxocarbon-light.css
index 7cd48ee..018eba4 100644
--- a/site/themes/sine/static/css/themes/oxocarbon-light.css
+++ b/site/themes/sine/static/css/themes/oxocarbon-light.css
@@ -1,5 +1,5 @@
 /* COLORS */
-[data-theme="light"] {
+[data-theme="oxocarbon-light"] {
   --base00: #ffffff;
   --base01: #f2f2f2;
   --base02: #d0d0d0;
diff --git a/site/themes/sine/static/css/themes/themes.css b/site/themes/sine/static/css/themes/themes.css
new file mode 100644
index 0000000..a691171
--- /dev/null
+++ b/site/themes/sine/static/css/themes/themes.css
@@ -0,0 +1,5 @@
+/* Import all themes */
+@import url('melatonin-dark.css');
+@import url('melatonin-light.css');
+@import url('oxocarbon-light.css');
+@import url('oxocarbon-dark.css');
diff --git a/site/themes/sine/static/fonts/Jacquard12-Regular.ttf b/site/themes/sine/static/fonts/Jacquard12-Regular.ttf
new file mode 100644
index 0000000..d096417
--- /dev/null
+++ b/site/themes/sine/static/fonts/Jacquard12-Regular.ttf
diff --git a/site/themes/sine/static/js/switch-theme.js b/site/themes/sine/static/js/switch-theme.js
index 5052f39..8baaee5 100644
--- a/site/themes/sine/static/js/switch-theme.js
+++ b/site/themes/sine/static/js/switch-theme.js
@@ -1,88 +1,78 @@
-// const root = document.documentElement; // <html>, not <body>
-// const btn = document.getElementById("toggleTheme");
-//
-// const savedTheme = localStorage.getItem("theme") || "light";
-// root.className = savedTheme;
-// btn.innerHTML = savedTheme === "dark" ? "✧" : "☾";
-//
-// btn.addEventListener("click", () => {
-//   const newTheme = root.classList.contains("light") ? "dark" : "light";
-//   root.className = newTheme;
-//   localStorage.setItem("theme", newTheme);
-//   btn.innerHTML = newTheme === "dark" ? "✧" : "☾";
-// });
-
-/**
-* Utility function to calculate the current theme setting.
-* Look for a local storage value.
-* Fall back to system setting.
-* Fall back to light mode.
-*/
-function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) {
+// Theme switcher
+
+// Themes and icons
+
+const themes = {
+  "melatonin-dark": { icon: " ☽", name: "Melatonin Dark" },
+  "melatonin-light": { icon: " ✧", name: "Melatonin Light" },
+  // "oxocarbon-dark": { icon: " ☾", name: "Oxocarbon Dark" },
+  // "oxocarbon-light": { icon: " ✧", name: "Oxocarbon Light" },
+};
+
+const themeOrder = Object.keys(themes);
+
+// Default themes
+const defaultDarkTheme = "melatonin-dark";
+const defaultLightTheme = "melatonin-light";
+
+// checks whether there is already a theme and if not, sets it to the user's default theme.
+function calculateTheme({ localStorageTheme, systemSettingDark }) {
   if (localStorageTheme !== null) {
     return localStorageTheme;
   }
 
   if (systemSettingDark.matches) {
-    return "dark";
+    return defaultDarkTheme;
   }
 
-  return "light";
+  return defaultLightTheme;
 }
 
-/**
-* Utility function to update the button text and aria-label.
-*/
-function updateButton({ buttonEl, isDark }) {
-  const newCta = isDark ? "Change to light theme" : "Change to dark theme";
-
-  const newInnerText = isDark ? "✧" : "☾";
-  // use an aria-label if you are omitting text on the button
-  // and using a sun/moon icon, for example
-  buttonEl.setAttribute("aria-label", newCta);
-  buttonEl.innerText = newInnerText;
+// Get next theme in list
+function getNextTheme(current) {
+  const index = themeOrder.indexOf(current);
+  return themeOrder[(index + 1) % themeOrder.length];
 }
 
-/**
-* Utility function to update the theme setting on the html tag
-*/
-function updateThemeOnHtmlEl({ theme }) {
-  document.querySelector("html").setAttribute("data-theme", theme);
-}
+// Utility function to update the button text and aria-label.
+function updateButton(button, theme) {
+  const nextTheme = getNextTheme(theme);
 
+  button.innerText = themes[theme].icon;
+  button.setAttribute(
+    "aria-label",
+    `Switch to ${themes[nextTheme].name} theme`
+  );
+}
 
-/**
-* On page load:
-*/
+// Utility function to update the theme setting on the html tag
+function applyTheme(theme) {
+  document.documentElement.setAttribute("data-theme", theme);
+  localStorage.setItem("theme", theme);
+}
 
-/**
-* 1. Grab what we need from the DOM and system settings on page load
-*/
-const button = document.querySelector("[data-theme-toggle]");
+// 1. Grab what we need from the DOM and system settings on page load
+const button = document.querySelector("[data-theme-switcher]");
 const localStorageTheme = localStorage.getItem("theme");
 const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
 
-/**
-* 2. Work out the current site settings
-*/
-let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark });
+// 2. Work out the current site settings
+let currentTheme = calculateTheme({ localStorageTheme, systemSettingDark });
+console.log(currentTheme)
 
-/**
-* 3. Update the theme setting and button text accoridng to current settings
-*/
-updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" });
-updateThemeOnHtmlEl({ theme: currentThemeSetting });
+// 3. Update the theme setting and button text accoridng to current settings
+updateButton( button, currentTheme);
+applyTheme( currentTheme );
 
-/**
-* 4. Add an event listener to toggle the theme
-*/
+// 4. Add an event listener to toggle the theme
 button.addEventListener("click", (event) => {
-  const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
+  const newTheme = getNextTheme(currentTheme);
 
   localStorage.setItem("theme", newTheme);
-  updateButton({ buttonEl: button, isDark: newTheme === "dark" });
-  updateThemeOnHtmlEl({ theme: newTheme });
+  updateButton( button, newTheme);
+  applyTheme( newTheme );
 
-  currentThemeSetting = newTheme;
+  currentTheme = newTheme;
+  console.log(currentTheme)
 });