Improve the the local storage handling of the UI theme (#111)

* extra logic for theme in local storage. Not sure why there are multiple spots for it

* use prefers theme as well

Author: colegoldsmith

gcx/algoliaSearch/index.html

@@ -198,24 +198,29 @@ <h3>Filter by product</h3>
 </footer>
   <script type="text/javascript" src="/en/home/assets/js/site404.js"></script>
   <script>
+    function getTheme() {
+      var localStorage = window.localStorage.getItem("theme");
+      var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      if (localStorage) return localStorage;
+      if (prefersDark) return "dark";
+      return "light";
+    }
     !function () {
-      var theme = window.localStorage.getItem('theme');
       var root = document.getElementsByTagName('html')[0];
-      if (theme) {
+      if (getTheme() === 'dark') {
         root.classList.add('dark-mode');
       }
     }();
     window.addEventListener('DOMContentLoaded', (event) => {
-  var theme = window.localStorage.getItem('theme')
+  var theme = getTheme()
 
   var path = window.location.pathname
   var page = path.split('/').pop()
   var name = page.replace('.html', '')
-  console.log(name)
   const sidebar = document.querySelector('.sidebar')
   const col = document.getElementById('collapse')
   var checkbox = document.getElementById('switch')
-  if (theme) {
+  if (theme === 'dark') {
     checkbox.checked = true
   } else {
     checkbox.checked = false
@@ -242,7 +247,7 @@ <h3>Filter by product</h3>
         window.localStorage.setItem('theme', 'dark')
         root.classList.add('dark-mode')
       } else {
-        window.localStorage.removeItem('theme')
+        window.localStorage.setItem('theme', 'light')
         root.classList.remove('dark-mode')
       }
     }

gcx/stencil/gcx-schema/src/components/gcx-schema/gcx-schema.tsx

@@ -10,7 +10,7 @@ export class MyComponent {
     const theme = window.localStorage.getItem("theme");
     let checkbox: any = document.getElementById("switch");
     let root = document.getElementsByTagName("html")[0];
-    if (theme) {
+    if (theme === 'dark') {
       root.classList.add("dark-mode");
       checkbox.checked = true;
     } else {

gcx/styles/src/js/08-gcx-helios.js

@@ -1,4 +1,11 @@
 /*Dark theme verification*/
+function getTheme () {
+  var localStorage = window.localStorage.getItem('theme')
+  var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  if (localStorage) return localStorage
+  if (prefersDark) return 'dark'
+  return 'light'
+}
 
 function isMobile () {
   // eslint-disable-next-line no-undef
@@ -12,16 +19,15 @@ function isMobile () {
 }
 
 window.addEventListener('DOMContentLoaded', (event) => {
-  var theme = window.localStorage.getItem('theme')
+  var theme = getTheme()
 
   var path = window.location.pathname
   var page = path.split('/').pop()
   var name = page.replace('.html', '')
-  console.log(name)
   const sidebar = document.querySelector('.sidebar')
   const col = document.getElementById('collapse')
   var checkbox = document.getElementById('switch')
-  if (theme) {
+  if (theme === 'dark') {
     checkbox.checked = true
   } else {
     checkbox.checked = false
@@ -64,7 +70,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
         window.localStorage.setItem('theme', 'dark')
         root.classList.add('dark-mode')
       } else {
-        window.localStorage.removeItem('theme')
+        window.localStorage.setItem('theme', 'light')
         root.classList.remove('dark-mode')
       }
     }
@@ -195,7 +201,7 @@ sliderBlock.forEach( (s,i) => {
   })
   restart.addEventListener('click', resetSlider)
   function resetSlider() {
-      swiper.slideTo(0)
+    swiper.slideTo(0)
   }
 })
 

gcx/styles/src/layouts/404.hbs

@@ -119,10 +119,16 @@
   </article>
   <script type="text/javascript" src="/en/home/assets/js/site404.js"></script>
   <script>
+    function getTheme() {
+      var localStorage = window.localStorage.getItem("theme");
+      var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      if (localStorage) return localStorage;
+      if (prefersDark) return "dark";
+      return "light";
+    }
     !function () {
-      var theme = window.localStorage.getItem('theme');
       var root = document.getElementsByTagName('html')[0];
-      if (theme) {
+      if (getTheme() === 'dark') {
         root.classList.add('dark-mode');
       }
     }();
@@ -139,16 +145,15 @@
 }
 
 window.addEventListener('DOMContentLoaded', (event) => {
-  var theme = window.localStorage.getItem('theme')
+  var theme = getTheme()
 
   var path = window.location.pathname
   var page = path.split('/').pop()
   var name = page.replace('.html', '')
-  console.log(name)
   const sidebar = document.querySelector('.sidebar')
   const col = document.getElementById('collapse')
   var checkbox = document.getElementById('switch')
-  if (theme) {
+  if (theme === 'dark') {
     checkbox.checked = true
   } else {
     checkbox.checked = false
@@ -175,7 +180,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
         window.localStorage.setItem('theme', 'dark')
         root.classList.add('dark-mode')
       } else {
-        window.localStorage.removeItem('theme')
+        window.localStorage.setItem('theme', 'light')
         root.classList.remove('dark-mode')
       }
     }

gcx/styles/src/partials/header-scripts.hbs

@@ -5,12 +5,18 @@
     <!-- End Google Tag Manager (noscript) -->
     {{/with}}
     <script>
-      !function(){
-        var theme = window.localStorage.getItem('theme');
-        var root = document.getElementsByTagName('html')[0];
-        if (theme) {
-          root.classList.add('dark-mode');
-        }
-      }();
+    function getTheme() {
+      var localStorage = window.localStorage.getItem("theme");
+      var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      if (localStorage) return localStorage;
+      if (prefersDark) return "dark";
+      return "light";
+    }
+    !function () {
+      var root = document.getElementsByTagName('html')[0];
+      if (getTheme() === 'dark') {
+        root.classList.add('dark-mode');
+      }
+    }();
     </script>