rubyapi · AlexWayfer · Apr 3, 2020 · Apr 3, 2020
diff --git a/app/javascript/controllers/theme-switch_controller.js b/app/javascript/controllers/theme-switch_controller.js
@@ -1,40 +1,32 @@
 import { Controller } from "stimulus"
 
-function setLightMode(target) {
-  target.classList.replace("dark-switch", "light-switch")
-  document.body.dataset.theme = 'light'
-}
-
-function setDarkMode(target) {
-  target.classList.replace("light-switch", "dark-switch")
-  document.body.dataset.theme = 'dark'
+function setDarkMode(value) {
+  if (value == null) value = document.body.dataset.theme == 'light'
+  document.body.dataset.theme = value ? 'dark' : 'light'
 }
 
 export default class extends Controller {
-  static targets = ["switch"]
-
   connect() {
     const osDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
     const supportsLocalStorage = 'localStorage' in window
 
     if (supportsLocalStorage) {
       const darkMode = localStorage.getItem('rubyapi-darkMode')
+      console.debug(darkMode)
 
-      if (darkMode !== null && darkMode === '1') {
-        setDarkMode(this.switchTarget)
-      } else if (osDarkMode && darkMode === null) {
-        setDarkMode(this.switchTarget)
+      if (
+        (darkMode !== null && darkMode == 'true') ||
+          (osDarkMode && darkMode == null)
+      ) {
+        setDarkMode(true)
       }
     }
   }
 
   toggle() {
-    if (this.switchTarget.classList.contains('light-switch')) {
-      setDarkMode(this.switchTarget)
-      localStorage.setItem('rubyapi-darkMode', '1')
-    } else {
-      setLightMode(this.switchTarget)
-      localStorage.setItem('rubyapi-darkMode', '0')
-    }
+    setDarkMode()
+    localStorage.setItem(
+      'rubyapi-darkMode', document.body.dataset.theme == 'dark'
+    )
   }
 }
diff --git a/app/javascript/packs/app/application.scss b/app/javascript/packs/app/application.scss
@@ -53,6 +53,10 @@ pre:not(.ruby) {
   }
 }
 
+.switch-in-dark {
+  display: none;
+}
+
 [data-theme="dark"] {
   code { @apply bg-gray-700 text-gray-400; }
 
@@ -63,6 +67,16 @@ pre:not(.ruby) {
   .page a, .next a, .prev  a, .last a, .first a, .current {
     &:hover { @apply bg-gray-900 text-gray-200; }
   }
+
+  #darkmode-toggle {
+    .switch-in-dark {
+      display: initial;
+    }
+
+    .switch-in-light {
+      display: none;
+    }
+  }
 }
 
 .ruby-documentation pre {
@@ -71,17 +85,4 @@ pre:not(.ruby) {
   }
 }
 
-.light-switch:before {
-  content: '☾';
-}
-
-.dark-switch:before {
-  content: '☼';
-}
-
-.dev-search-query {
-  @apply bg-gray-900 border-gray-800;
-  color: #5FB3B3;
-}
-
 /* purgecss end ignore */
diff --git a/app/javascript/packs/app/icons.js b/app/javascript/packs/app/icons.js
@@ -1,9 +1,8 @@
 import { library, dom } from '@fortawesome/fontawesome-svg-core'
-import { faSearch, faCaretDown, faLink, faFastForward, faFastBackward, faForward, faBackward, faHistory, faCheck } from '@fortawesome/free-solid-svg-icons'
-import { faPlay, faSync, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
-import { faCopy } from '@fortawesome/free-regular-svg-icons'
+import { faSearch, faCaretDown, faLink, faFastForward, faFastBackward, faForward, faBackward, faHistory, faCheck, faPlay, faSync, faInfoCircle, faMoon as faMoonSolid } from '@fortawesome/free-solid-svg-icons'
+import { faCopy, faMoon as faMoonRegular } from '@fortawesome/free-regular-svg-icons'
 import { faGithub, faTwitter } from '@fortawesome/free-brands-svg-icons'
 
-library.add(faSearch, faCaretDown, faLink, faFastForward, faFastBackward, faForward, faBackward, faGithub, faTwitter, faHistory, faPlay, faCopy, faCheck, faSync, faInfoCircle)
+library.add(faSearch, faCaretDown, faLink, faFastForward, faFastBackward, faForward, faBackward, faGithub, faTwitter, faHistory, faPlay, faCopy, faCheck, faSync, faInfoCircle, faMoonSolid, faMoonRegular)
 
 dom.watch()
diff --git a/app/views/application/_darkmode_toggle.html.slim b/app/views/application/_darkmode_toggle.html.slim
@@ -0,0 +1,3 @@
+button id="darkmode-toggle" class="relative z-20 text-xl" data-action="theme-switch#toggle" aria-label="Toggle theme" title="Toggle theme"
+  i class="far fa-moon switch-in-light"
+  i class="fas fa-moon switch-in-dark"
diff --git a/app/views/home/index.html.slim b/app/views/home/index.html.slim
@@ -24,8 +24,7 @@ div class="bg-home-container-background text-white md:pt-3 md:pb-6"
         div class="md:w-2/12 w-6/12"
           div class="flex flex-row-reverse"
             div class="block relative ml-4" data-controller="theme-switch"
-              button id="darkmode-toggle" class="relative z-20 text-xl" data-action="theme-switch#toggle" aria-label="Toggle theme" title="Toggle theme"
-                div.light-switch data-target="theme-switch.switch"
+              = render "darkmode_toggle"
             div class="block relative ml-4" data-controller="github-links"
               button class="relative z-20 text-xl hover:text-github-links-hover" data-action="click->github-links#toggle"
                 i class="fab fa-github hover:fill-current"

diff --git a/app/views/layouts/_header.html.slim b/app/views/layouts/_header.html.slim
@@ -16,8 +16,7 @@ header id="header" class="text-white bg-header-background flex items-center fixe
       div class="w-2/12"
         div class="flex flex-row-reverse"
           div class="block relative ml-4" data-controller="theme-switch"
-            button id="darkmode-toggle" class="relative z-20 text-xl" data-action="theme-switch#toggle" aria-label="Toggle theme" title="Toggle theme"
-              div.light-switch data-target="theme-switch.switch"
+            = render "darkmode_toggle"
           div class="hidden md:block relative ml-4" data-controller="github-links"
             button class="relative z-20 text-xl hover:text-header-github-link-hover" data-action="click->github-links#toggle"
               i class="fab fa-github hover:fill-current"

diff --git a/theme.config.js b/theme.config.js
@@ -113,7 +113,6 @@ const darkTheme = new Theme()
     'background':'#2d3748',
     'body': '#cbd5e0',
 
-    'home-container-background': '#4a5568',
     'github-links-hover': '#cbd5e0',
     'github-links': '#cbd5e0',
     'github-links-background': '#1a202c',
@@ -126,8 +125,6 @@ const darkTheme = new Theme()
     'core-class-border': '#4a5568',
     'core-class-title': '#edf2f7',
     'core-class': '#a0aec0',
-    'header-background': '#4a5568',
-    'header-autocomplete-background': '#2d3748',
     'header-github-link-hover': '#cbd5e0',
     'header-github-links': '#cbd5e0',
     'header-github-links-background': '#1a202c',