Switch prism and comments theme on changes

config.yaml

@@ -25,20 +25,6 @@ params:
         repository: site
 
   prism:
-    languages:
-      - markup
-      - css
-      - clike
-      - javascript
-      - bash
-      - csharp
-      - hcl
-      - ignore
-      - json
-      - markdown
-      - powershell
-      - toml
-      - yaml
     plugins:
       - normalize-whitespace
       - toolbar

content/about.md

@@ -26,4 +26,4 @@ Connect with me by using any of the following methods:
 
 - The site is generated with [hugo](https://gohugo.io/)
 - The theme is a modified version of [hugo-theme-gruvbox](https://github.com/schnerring/hugo-theme-gruvbox)
-- The comments system uses [utterances](https://github.com/utterance/utterances)
+- The comments system is powered by [utterances](https://github.com/utterance/utterances)

layouts/partials/comments/utterances.html

@@ -5,25 +5,22 @@
 .Page.Site.Params.comments.utterances.github.repository -}}
 
 <script>
-  // load utteranc comment
+  // load comments
-  var getTheme = window.localStorage && window.localStorage.getItem("theme");
+  var getTheme =
-  getTheme =
+    window.matchMedia &&
-    getTheme == null
+    window.matchMedia("(prefers-color-scheme: light)").matches
-      ? window.matchMedia &&
+      ? "light"
-        window.matchMedia("(prefers-color-scheme: light)").matches
+      : "dark";
-        ? "light"
-        : "dark"
-      : getTheme;
   getTheme = getTheme == null ? "dark" : getTheme;
 
   let theme = getTheme === "dark" ? "gruvbox-dark" : "github-light";
-  let s = document.createElement("script");
+  let script = document.createElement("script");
-  s.src = "https://utteranc.es/client.js";
+  script.src = "https://utteranc.es/client.js";
-  s.setAttribute("repo", '{{ print $username "/" $repository }}');
+  script.setAttribute("repo", '{{ print $username "/" $repository }}');
-  s.setAttribute("issue-term", "{{ $issueTerm }}");
+  script.setAttribute("issue-term", "{{ $issueTerm }}");
-  s.setAttribute("theme", theme);
+  script.setAttribute("theme", theme);
-  s.setAttribute("crossorigin", "anonymous");
+  script.setAttribute("crossorigin", "anonymous");
-  s.setAttribute("async", "");
+  script.setAttribute("async", "");
   document.querySelector("div.comments").innerHTML = "";
-  document.querySelector("div.comments").appendChild(s);
+  document.querySelector("div.comments").appendChild(script);
 </script>

themes/hugo-theme-gruvbox/assets/css/critical/15-colors.css

@@ -6,7 +6,8 @@
   {{ $backgroundColor = "bg0_h" }}
 {{ end }}
 
-:root[data-theme="light"] {
+@media (prefers-color-scheme: light) {
+  :root {
   --bg: var(--{{ $backgroundColor }});
   --bg0: #fbf1c7;
   --bg0_h: #f9f5d7;
@@ -41,9 +42,11 @@
   & .light--hidden {
     display: none;
   }
+  }
 }
 
-:root[data-theme="dark"] {
+@media (prefers-color-scheme: dark) {
+  :root {
   --bg: var(--{{ $backgroundColor }});
   --bg0: #282828;
   --bg0_h: #1d2021;
@@ -78,6 +81,8 @@
   & .dark--hidden {
     display: none;
   }
+  }
+
 }
 
 :root {
@@ -85,3 +90,4 @@
   --primary: var(--{{ $themeColor }}1);
   --primary-alt: var(--{{ $themeColor }}2);
 }
+

themes/hugo-theme-gruvbox/assets/css/critical/45-json-resume.css

@@ -1,29 +0,0 @@
-.jr__item-meta {
-  font-family: var(--font-monospace);
-}
-
-.jr__item-meta {
-  align-items: start;
-  flex-flow: column;
-}
-
-@media (--md) {
-  .jr__item-meta {
-    align-items: center;
-    flex-flow: row wrap;
-  }
-
-  .jr__date,
-  .jr__date-range,
-  .jr-work__location {
-    flex-grow: 1;
-    text-align: right;
-  }
-
-  .jr-awards__awarder,
-  .jr-publications__publisher,
-  .jr-education__institution,
-  .jr-volunteer__organization {
-    flex-basis: 100%;
-  }
-}

themes/hugo-theme-gruvbox/assets/css/critical/50-social-share.css

@@ -1,68 +0,0 @@
-.social-share {
-  align-items: center;
-  border-top: 2px dotted var(--bg1);
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.9rem;
-  margin: 3rem 0;
-  padding-top: 3rem;
-
-  & svg {
-    fill: var(--fg);
-    width: 24px;
-    height: 24px;
-
-    &.icon-tabler {
-      fill: none;
-      stroke: var(--fg);
-    }
-  }
-}
-
-.social-share__item {
-  background: var(--bg1);
-  padding: 0.5rem;
-  display: flex;
-}
-
-/* Sticky social bar left
-
-@media (--xl) {
-  .social-share {
-    align-items: flex-start;
-    border-top: none;
-    flex-direction: column;
-
-    position: fixed;
-    top: 15%;
-    left: 0;
-  }
-
-  .social-share__heading {
-    display: none;
-  }
-
-  .social-share__item {
-    transition: padding 0.2s ease-in;
-
-    &:hover {
-      padding: 0.5rem 1rem;
-    }
-
-    & svg {
-      &:hover {
-        fill: var(--fg);
-      }
-
-      &.icon-tabler {
-        fill: none;
-
-        &:hover {
-          stroke: var(--fg);
-        }
-      }
-    }
-  }
-}
-
-*/

themes/hugo-theme-gruvbox/assets/js/dark-mode.js

@@ -1,12 +1,4 @@
 function getTheme() {
-  if (localStorage && localStorage.getItem("theme")) {
-    // User preference
-    return localStorage.getItem("theme");
-  }
-  // Undefined
-}
-
-function getOSTheme() {
   if (window.matchMedia) {
     // OS preference
     return window.matchMedia("(prefers-color-scheme: light)").matches
@@ -16,44 +8,34 @@ function getOSTheme() {
   // Undefined
 }
 
-function setTheme(theme) {
+function setPrismTheme(theme) {
-  // Main theme
-  document.documentElement.setAttribute("data-theme", theme);
-
-  // Prism theme
   const prismDark = document.getElementById("prism-dark");
   const prismLight = document.getElementById("prism-light");
   prismDark.toggleAttribute("disabled", theme === "light");
   prismLight.toggleAttribute("disabled", theme === "dark");
 }
 
-function saveTheme(theme) {
+function setCommentsTheme(theme) {
-  localStorage.setItem("theme", theme);
+  if (document.querySelector(".utterances-frame")) {
+    const iframe = document.querySelector(".utterances-frame");
+    var message = {
+      type: "set-theme",
+      theme: theme == "dark" ? "gruvbox-dark" : "github-light",
+    };
+    iframe.contentWindow.postMessage(message, "https://utteranc.es");
+  }
 }
 
 // Initial load
 const theme = getTheme();
-const osTheme = getOSTheme();
 if (theme) {
-  setTheme(theme);
+  setPrismTheme(theme);
-  // Store user preference
-} else if (osTheme) {
-  setTheme(osTheme);
 }
 
-function toggleTheme(e) {
+window
-  const theme = e.currentTarget.classList.contains("light--hidden")
+  .matchMedia("(prefers-color-scheme: dark)")
-    ? "light"
+  .addEventListener("change", (event) => {
-    : "dark";
+    const theme = event.matches ? "dark" : "light";
-  setTheme(theme);
+    setPrismTheme(theme);
-  saveTheme(theme);
+    setCommentsTheme(theme);
-}
-
-// This script is inlined in the <head> of the document, so we have to wait
-// for the DOM content before can add event listeners to the toggle buttons
-document.addEventListener("DOMContentLoaded", function () {
-  const toggleButtons = document.querySelectorAll(".theme__toggle");
-  toggleButtons.forEach((btn) => {
-    btn.addEventListener("click", toggleTheme);
   });
-});