add dark theme

layouts/partials/footer.html

@@ -1,5 +1,9 @@
 <p>
-    {{ range first 1 (where .Site.RegularPages.ByDate.Reverse "Section" "blog") }}
+    Made without AI tools using Hugo.
-        Site last updated <time id="last-update" datetime="{{ .PublishDate.Format "2006-01-02 15:04:05 -0700" }}">{{ .PublishDate.Format "January 2, 2006" }}</time>.
+    {{ range first 1 .Site.RegularPages.ByDate.Reverse }}
+        Last updated <time id="last-update" datetime="{{ .PublishDate.Format "2006-01-02 15:04:05 -0700" }}">{{ .PublishDate.Format "January 2, 2006" }}</time>.
     {{ end }}
 </p>
+<p>
+    <button class="hidden" value="dark mode" id="theme-toggle">Button</button>
+</p>

themes/dreamcast/layouts/_default/baseof.html

@@ -15,9 +15,9 @@
                 <main>
                     {{- block "main" . }}{{- end }}
                 </main>
-                <!-- <footer> -->
+                <footer>
-                <!--     {{- partial "footer.html" . -}} -->
+                    {{- partial "footer.html" . -}}
-                <!-- </footer> -->
+                </footer>
             </div>
         </div>
     </body>

themes/dreamcast/static/css/main.css

@@ -10,7 +10,15 @@
     --blue: #284D9E;
     --black: #342F23;
 
-    --main-bg: var(--bg);
+    --russian-violet: #1f0949;
+    --tea-rose: #f8c7cc;
+    --periwinkle: #BEB7DF;
+    --rose-quartz: #ABA9BF;
+    --eerie-black: #1D1E18;
+    --lavender: #E1E2EF;
+    --mardi-gras: #320F76;
+
+    --main-bg: linear-gradient(#0045df, #00d4ff);
     --content-bg: var(--isabelline);
     --primary-text: var(--black);
     --secondary-text: var(--blue-gray);
@@ -32,8 +40,44 @@
     --heading-6: 0.25rem;
 }
 
+@media (prefers-color-scheme: dark) {
+    :root {
+        --main-bg: linear-gradient(#28164B, 70%, #825ECA );
+        --content-bg: #1A181B;
+        --primary-text: #DCCBFF;
+        --secondary-text: #B89AF5;
+        --header: #825ECA;
+        --nav-link: #B89AF5;
+        --primary-link: #B89AF5;
+        --primary-link-hover: #E3D5FF;
+        --secondary-link: #E3D5FF;
+        --secondary-link-hover: #B89AF5;
+        --ternary-link: var(--blue);
+        --ternary-link-hover: var(--brown);
+        --shadow: #00000088;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --main-bg: linear-gradient(#0045df, #00d4ff);
+        --content-bg: var(--isabelline);
+        --primary-text: var(--black);
+        --secondary-text: var(--blue-gray);
+        --header: var(--orange);
+        --nav-link: var(--orange);
+        --primary-link: var(--brown);
+        --primary-link-hover: var(--blue);
+        --secondary-link: var(--blue);
+        --secondary-link-hover: var(--brown);
+        --ternary-link: var(--blue);
+        --ternary-link-hover: var(--brown);
+        --shadow: #2F3E5E55;
+    }
+}
+
 body {
-    background: fixed no-repeat url('/images/waves.svg') var(--main-bg);
+    background: fixed no-repeat url('/images/waves-nobg.svg'), fixed no-repeat var(--main-bg);
     background-size: cover;
     color: var(--primary-text);
     font-size: medium;
@@ -166,7 +210,7 @@ header .profile {
     flex-flow: row wrap;
     justify-content: space-between;
     margin: 10px;
-    text-shadow: 3px 3px 5px var(--blue-gray);
+    text-shadow: 3px 3px 5px var(--shadow);
 }
 
 header .profile img {
@@ -234,7 +278,7 @@ nav li a {
 
 nav li a:link,
 nav li a:visited {
-  color: #de9b00;
+  color: var(--nav-link);
   text-decoration: none;
   border-left: 1px solid rgba(255, 255, 255, 0);
   border-right: 1px solid rgba(255, 255, 255, 0);
@@ -400,11 +444,21 @@ li.page-item {
 }
 
 footer {
+    border-top: 1px dotted var(--secondary-text);
     text-align: center;
     color: var(--secondary-text);
     flex: 1 1 100%;
 }
 
+footer p {
+    font-size: 0.8rem;
+}
+
+#theme-toggle {
+    background: var(--content-bg);
+    color: var(--primary-text);
+}
+
 .metadata {
     display: flex;
     flex-flow: row;

themes/dreamcast/static/js/main.js

@@ -1,14 +1,93 @@
-const root = document.documentElement;
+const root = document.querySelector(':root');
+const themeToggle = document.getElementById('theme-toggle');
 let mouseX = 0;
 let mouseY = 0;
 
+const darkMode = {
+  mainBg: "linear-gradient(#28164B, 70%, #825ECA )",
+  contentBg: "#1A181B",
+  primaryText: "#DCCBFF",
+  secondaryText: "#B89AF5",
+  header: "#825ECA",
+  navLink: "#B89AF5",
+  primaryLink: "#B89AF5",
+  primaryLinkHover: "#E3D5FF",
+  secondaryLink: "#E3D5FF",
+  secondaryLinkHover: "#B89AF5",
+  ternaryLink: "var(--blue)",
+  ternaryLinkHover: "var(--brown)",
+  shadow: "#00000088"
+}
+
+const lightMode = {
+  mainBg: "linear-gradient(#0045df, #00d4ff)",
+  contentBg: "#EEE5E5",
+  primaryText: "#342F23",
+  secondaryText: "#2F3E5E",
+  header: "#DE9B00",
+  navLink: "#DE9B00",
+  primaryLink: "#896D2E",
+  primaryLinkHover: "#284D9E",
+  secondaryLink: "#284D9E",
+  secondaryLinkHover: "#896D2E",
+  ternaryLink: "#284D9E",
+  ternaryLinkHover: "#896D2E",
+  shadow: "#2F3E5E55"
+}
+
+const applyTheme = (theme) => {
+  root.style.setProperty("--main-bg", theme.mainBg);
+  root.style.setProperty("--content-bg", theme.contentBg);
+  root.style.setProperty("--primary-text", theme.primaryText);
+  root.style.setProperty("--secondary-text", theme.secondaryText);
+  root.style.setProperty("--header", theme.header);
+  root.style.setProperty("--nav-link", theme.navLink);
+  root.style.setProperty("--primary-link", theme.primaryLink);
+  root.style.setProperty("--primary-link-hover", theme.primaryLinkHover);
+  root.style.setProperty("--secondary-link", theme.secondaryLink);
+  root.style.setProperty("--secondary-link-hover", theme.secondaryLinkHover);
+  root.style.setProperty("--ternary-link", theme.ternaryLink);
+  root.style.setProperty("--ternary-link-hover", theme.ternaryLinkHover);
+  root.style.setProperty("--shadow", theme.shadow);
+}
+
+const enableDarkMode = () => {
+  applyTheme(darkMode);
+  localStorage.setItem('theme', 'dark');
+  themeToggle.innerText = 'Light Mode';
+}
+
+const disableDarkMode = () => {
+  applyTheme(lightMode);
+  localStorage.setItem('theme', 'light');
+  themeToggle.innerText = 'Dark Mode';
+}
+
+const detectTheme = () => {
+  let theme = 'light';
+  let themeObj = lightMode;
+
+  if (localStorage.getItem('theme')) {
+    theme = localStorage.getItem('theme');
+  }
+  else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    theme = 'dark';
+  }
+
+  theme === 'dark' ? enableDarkMode() : disableDarkMode();
+}
+
 document.addEventListener("mousemove", (evt) => {
   mouseX = evt.clientX / innerWidth;
   mouseY = evt.clientY / innerHeight;
 
   root.style.setProperty("--mouse-x", `${mouseX}`);
   root.style.setProperty("--mouse-y", `${mouseY}`);
-
-  console.log(root.style.getPropertyValue("--mouse-x"));
 });
 
+themeToggle.className = "";
+detectTheme();
+
+themeToggle.addEventListener('click', () => {
+  localStorage.getItem('theme') === 'light' ? enableDarkMode() : disableDarkMode();
+});