Set default theme in config toml

panr · Dec 21, 2018 · 9532cb8 · 9532cb8
1 parent 1974d30
commit 9532cb8
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -7,6 +7,8 @@ paginate = 5
 
 [params]
   subtitle = "A simple theme for Hugo"
+  # "light" or "dark"
+  defaultTheme = "dark"
 
 [params.logo]
   logoText = "hello friend"

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -6,7 +6,7 @@
   {{ end }}
   {{ partial "head.html" . }}
 </head>
-<body class="dark-theme">
+<body class="{{ if ne $.Site.Params.defaultTheme "light" -}} dark-theme {{- end -}}">
 <div class="container">
   {{ partial "header.html" . }}
 

diff --git a/source/js/theme.js b/source/js/theme.js
@@ -1,16 +1,18 @@
 // Toggle theme
 
-const getTheme = window.localStorage && window.localStorage.getItem('theme')
-const themeToggle = document.querySelector('.theme-toggle')
-const isDark = getTheme === 'dark' || getTheme === null
+const getTheme = window.localStorage && window.localStorage.getItem("theme");
+const themeToggle = document.querySelector(".theme-toggle");
+const isDark = getTheme === "dark";
 
-document.body.classList.toggle('dark-theme', isDark)
+if (getTheme !== null) {
+  document.body.classList.toggle("dark-theme", isDark);
+}
 
-themeToggle.addEventListener('click', () => {
-  document.body.classList.toggle('dark-theme')
+themeToggle.addEventListener("click", () => {
+  document.body.classList.toggle("dark-theme");
   window.localStorage &&
     window.localStorage.setItem(
-      'theme',
-      document.body.classList.contains('dark-theme') ? 'dark' : 'light',
-    )
-})
+      "theme",
+      document.body.classList.contains("dark-theme") ? "dark" : "light",
+    );
+});