rubyapi · AaronC81 · Oct 7, 2020
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -25,4 +25,8 @@ def github_url(ruby_doc)
     # Inspiration: https://github.com/rack/rack/pull/1202
     %(#{GITHUB_REPO}/#{version}/#{file}#{"#L#{line}" if line})
   end
+
+  def dark_mode?
+    cookies[:'rubyapi-darkMode'] == "1"
+  end
 end
diff --git a/app/javascript/controllers/theme-switch_controller.js b/app/javascript/controllers/theme-switch_controller.js
@@ -5,29 +5,47 @@ export default class extends Controller {
 
   connect() {
     const osDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
-    const supportsLocalStorage = 'localStorage' in window
 
+    // Dark theme was previously stored using localStorage.
+    // Migrate to a cookie if the old localStorage key is present.
+    const supportsLocalStorage = 'localStorage' in window
     if (supportsLocalStorage) {
-      const darkMode = localStorage.getItem('rubyapi-darkMode')
-
-      if (darkMode !== null && darkMode === '1') {
-        this.setDarkMode(this.switchTarget)
-      } else if (osDarkMode && darkMode === null) {
-        this.setDarkMode(this.switchTarget)
+      const localStorageDarkMode = localStorage.getItem('rubyapi-darkMode')
+      if (localStorageDarkMode !== null) {
+        this.savePreference(localStorageDarkMode)
+        localStorage.removeItem('rubyapi-darkMode')
       }
     }
+
+    const cookies = document.cookie.split('; ')
+    const darkModeCookie = cookies.find(cookie => cookie.startsWith('rubyapi-darkMode='))
+    const darkMode = darkModeCookie !== undefined
+      ? darkModeCookie.split("=")[1]
+      : null
+
+    if (darkMode !== null && darkMode === '1') {
+      this.setDarkMode(this.switchTarget)
+    } else if (osDarkMode && darkMode === null) {
+      this.setDarkMode(this.switchTarget)
+    } else {
+      this.setLightMode(this.switchTarget)
+    }
   }
 
   setLightMode(target) {
     target.classList.replace("fa-moon", "fa-sun")
     document.documentElement.classList.remove("mode-dark")
-    localStorage.setItem('rubyapi-darkMode', '0')
+    this.savePreference(0)
   }
 
   setDarkMode(target) {
     target.classList.replace("fa-sun", "fa-moon")
     document.documentElement.classList.add("mode-dark")
-    localStorage.setItem('rubyapi-darkMode', '1')
+    this.savePreference(1)
+  }
+
+  savePreference(value) {
+    document.cookie = `rubyapi-darkMode=${value}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/`
   }
 
   toggle() {

diff --git a/app/views/layouts/_theme_selector.html.slim b/app/views/layouts/_theme_selector.html.slim
@@ -1,4 +1,4 @@
 -#frozen_string_literal: true
 div class="relative ml-4 md:block hidden" data-controller="theme-switch"
     button id="darkmode-toggle" class="relative z-20 text-xl hover:text-red-100 dark-hover:text-gray-400 hover:fill-current" data-action="theme-switch#toggle" aria-label="Toggle theme" title="Toggle theme"
-        i class="fas fa-sun" data-target="theme-switch.switch"
+        i class="fas #{dark_mode? ? 'fa-moon' : 'fa-sun'}" data-target="theme-switch.switch"
diff --git a/app/views/layouts/application.html.slim b/app/views/layouts/application.html.slim
@@ -1,6 +1,6 @@
 -# frozen_string_literal: true
 doctype html
-html lang="en"
+html lang="en" class=("mode-dark" if dark_mode?)
   head
     = display_meta_tags site: "Ruby API (#{dev? ? "dev" : "v" + ruby_version})", reverse: true
     meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"