Change from nightMode to theme (#1532)

Instead of a boolean theme (dark or not), change to a generic 'theme'
setting. This keeps backwards-compatibility from older settings. The new
themes are 'dark' and 'light' and 'system'. 'system' will allow for the
user's OS to apply darkMode automatically depending on their system
settings. Null and 'system' are treated as the same. 'dark' and 'light'
will ignore OS settings.

This also introduces reactivity from the OS's changing
`prefers-color-scheme`, for example if your system is set to go into
dark mode at sunrise, then the browser will switch to
`prefers-color-scheme: dark`. Before this commit, the theme would not
react to this change until page reload. Now, it will watch for media
changes and apply the dark theme if appropriate.

Author: dbernheisel

assets/js/entry/html.js

@@ -5,7 +5,7 @@ import { initialize as initSidebarContent } from '../sidebar/sidebar-list'
 import { initialize as initSidebarSearch } from '../sidebar/sidebar-search'
 import { initialize as initVersions } from '../sidebar/sidebar-version-select'
 import { initialize as initSearchPage } from '../search-page'
-import { initialize as initNightMode } from '../night'
+import { initialize as initTheme } from '../theme'
 import { initialize as initMakeup } from '../makeup'
 import { initialize as initModal } from '../modal'
 import { initialize as initKeyboardShortcuts } from '../keyboard-shortcuts'
@@ -16,7 +16,7 @@ import { initialize as initCopyButton } from '../copy-button'
 import { initialize as initSettings } from '../settings'
 
 onDocumentReady(() => {
-  initNightMode()
+  initTheme()
   initSidebarDrawer()
   initSidebarContent()
   initSidebarSearch()

assets/js/handlebars/templates/settings-modal-body.handlebars

@@ -2,12 +2,16 @@
   <div id="settings-content">
     <label class="switch-button-container">
       <div>
-        <span>Night mode</span>
-        <p>Use the documentation UI in a dark theme</p>
+        <span>Theme</span>
+        <p>Use the documentation UI in a theme.</p>
       </div>
-      <div class="switch-button">
-        <input class="switch-button__checkbox" type="checkbox" name="night_mode" />
-        <div class="switch-button__bg"></div>
+      <div>
+        <select name="theme" class="settings-select">
+          <option disabled>Theme</option>
+          <option value="dark">Dark</option>
+          <option value="light">Light</option>
+          <option value="system">System</option>
+        </select>
       </div>
     </label>
     <label class="switch-button-container">

assets/js/keyboard-shortcuts.js

@@ -1,7 +1,7 @@
 import { qs } from './helpers'
 import { openSidebar, toggleSidebar } from './sidebar/sidebar-drawer'
 import { focusSearchInput } from './sidebar/sidebar-search'
-import { toggleNightMode } from './night'
+import { cycleTheme } from './theme'
 import { openQuickSwitchModal } from './quick-switch'
 import { closeModal, isModalOpen } from './modal'
 import { openSettingsModal } from './settings'
@@ -16,8 +16,8 @@ export const keyboardShortcuts = [
   },
   {
     key: 'n',
-    description: 'Toggle night mode',
-    action: toggleNightMode
+    description: 'Cycle themes',
+    action: cycleTheme
   },
   {
     key: 's',

assets/js/night.js

@@ -3,8 +3,8 @@ const SETTINGS_KEY = 'ex_doc:settings'
 const DEFAULT_SETTINGS = {
   // Whether to show tooltips on function/module links
   tooltips: true,
-  // Night mode preference, null if never explicitly overridden by the user
-  nightMode: null,
+  // Theme preference, null if never explicitly overridden by the user
+  theme: null,
   // Livebook URL to point the badges directly to
   livebookUrl: null
 }
@@ -68,10 +68,8 @@ class SettingsStore {
 
   _storeSettings () {
     try {
-      const json = JSON.stringify(this._settings)
-      localStorage.setItem(SETTINGS_KEY, json)
-
       this._storeSettingsLegacy()
+      localStorage.setItem(SETTINGS_KEY, JSON.stringify(this._settings))
     } catch (error) {
       console.error(`Failed to persist settings: ${error}`)
     }
@@ -89,8 +87,12 @@ class SettingsStore {
     }
 
     const nightMode = localStorage.getItem('night-mode')
-    if (nightMode !== null) {
-      this._settings = { ...this._settings, nightMode: JSON.parse(nightMode) }
+    if (nightMode === 'true') {
+      this._settings = { ...this._settings, nightMode: true }
+    }
+
+    if (this._settings.nightMode === true) {
+      this._settings = { ...this._settings, theme: 'dark' }
     }
   }
 
@@ -102,8 +104,16 @@ class SettingsStore {
     }
 
     if (this._settings.nightMode !== null) {
-      localStorage.setItem('night-mode', JSON.stringify(this._settings.nightMode))
+      localStorage.setItem('night-mode', this._settings.nightMode === true ? 'true' : 'false')
+    } else {
+      localStorage.removeItem('night-mode')
+    }
+
+    if (this._settings.theme !== null) {
+      localStorage.setItem('night-mode', this._settings.theme === 'dark' ? 'true' : 'false')
+      this._settings.nightMode = this._settings.theme === 'dark'
     } else {
+      delete this._settings.nightMode
       localStorage.removeItem('night-mode')
     }
   }

assets/js/settings-store.js

@@ -1,7 +1,6 @@
 import settingsModalBodyTemplate from './handlebars/templates/settings-modal-body.handlebars'
 import { qs, qsAll } from './helpers'
 import { openModal } from './modal'
-import { shouldUseNightMode } from './night'
 import { settingsStore } from './settings-store'
 import { keyboardShortcuts } from './keyboard-shortcuts'
 
@@ -60,13 +59,13 @@ export function openSettingsModal () {
 
   const modal = qs(SETTINGS_MODAL_BODY_SELECTOR)
 
-  const nightModeInput = modal.querySelector(`[name="night_mode"]`)
+  const themeInput = modal.querySelector(`[name="theme"]`)
   const tooltipsInput = modal.querySelector(`[name="tooltips"]`)
   const directLivebookUrlInput = modal.querySelector(`[name="direct_livebook_url"]`)
   const livebookUrlInput = modal.querySelector(`[name="livebook_url"]`)
 
   settingsStore.getAndSubscribe(settings => {
-    nightModeInput.checked = shouldUseNightMode(settings)
+    themeInput.value = settings.theme || 'system'
     tooltipsInput.checked = settings.tooltips
 
     if (settings.livebookUrl === null) {
@@ -81,8 +80,8 @@ export function openSettingsModal () {
     }
   })
 
-  nightModeInput.addEventListener('change', event => {
-    settingsStore.update({ nightMode: event.target.checked })
+  themeInput.addEventListener('change', event => {
+    settingsStore.update({ theme: event.target.value })
   })
 
   tooltipsInput.addEventListener('change', event => {

assets/js/settings.js

@@ -0,0 +1,45 @@
+import { settingsStore } from './settings-store'
+
+const DARK_MODE_CLASS = 'dark'
+const THEMES = ['system', 'dark', 'light']
+
+/**
+ * Sets initial night mode state and registers to settings updates.
+ */
+export function initialize () {
+  settingsStore.getAndSubscribe(settings => {
+    document.body.classList.toggle(DARK_MODE_CLASS, shouldUseDarkMode(settings))
+  })
+  listenToDarkMode()
+}
+
+/**
+ * Cycles through themes and saves the preference.
+ */
+export function cycleTheme () {
+  const settings = settingsStore.get()
+  const currentTheme = settings.theme || 'system'
+  const nextTheme = THEMES[THEMES.indexOf(currentTheme) + 1] || THEMES[0]
+  settingsStore.update({ theme: nextTheme })
+}
+
+function shouldUseDarkMode (settings) {
+  // nightMode used to be true|false|null
+  // Now it's 'dark'|'light'|'system'|null with null treated as 'system'
+  return (settings.theme === 'dark') ||
+         (prefersDarkColorScheme() && (settings.theme == null || settings.theme === 'system'))
+}
+
+function prefersDarkColorScheme () {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+}
+
+function listenToDarkMode () {
+  window.matchMedia('(prefers-color-scheme: dark)').addListener(_e => {
+    const settings = settingsStore.get()
+    const isNight = shouldUseDarkMode(settings)
+    if (settings.theme == null || settings.theme === 'system') {
+      document.body.classList.toggle(DARK_MODE_CLASS, isNight)
+    }
+  })
+}

assets/js/theme.js

@@ -17,6 +17,6 @@
   @import './content/bottom-actions.less';
 }
 
-body:not(.night-mode) .content-inner img[src*="#gh-dark-mode-only"] {
+body:not(.dark) .content-inner img[src*="#gh-dark-mode-only"] {
   display: none;
 }

assets/less/content.less

@@ -95,7 +95,7 @@ code.makeup {
 @night-comment-color: #969386;
 
 /* Originally taken from: https://tmbb.github.io/makeup_demo/elixir.html#monokai */
-.night-mode .makeup {
+.dark .makeup {
   color: #f8f8f2;
 
   .hll {background-color: #49483e}

assets/less/makeup.less

@@ -1,4 +1,4 @@
-body.night-mode .content-inner {
+body.dark .content-inner {
   background: @nightBackground;
   color: @nightTextBody;
   @import './content/general';

assets/less/night/content.less

@@ -1,4 +1,4 @@
-body.night-mode {
+body.dark {
   #keyboard-shortcuts-modal {
     background-color: rgba(0, 0, 0, 0.75);
 

assets/less/night/keyboard-shortcuts.less

@@ -1,10 +1,6 @@
-body.night-mode {
+body.dark {
   background: @nightBackground;
 
-  .night-mode-toggle .icon-theme::before {
-    content: "\e901";
-  }
-
   #search .result-id a {
     &:visited,
     &:active,

assets/less/night/night.less

@@ -1,4 +1,4 @@
-body.night-mode {
+body.dark {
   #quick-switch-modal-body {
     .ri-search-2-line {
       color: @nightMediumGray;

assets/less/night/quick-switch.less

@@ -1,4 +1,4 @@
-body.night-mode {
+body.dark {
   #search {
     .loading div {
       border-top-color: @mediumGray;

assets/less/night/search.less

@@ -1,4 +1,4 @@
-body.night-mode {
+body.dark {
   .sidebar-closed .sidebar-button, .sidebar-button {
     color: @lightestGray;
   }

assets/less/night/sidebar.less

@@ -1,4 +1,4 @@
-body.night-mode {
+body.dark {
   #tooltip {
     box-shadow: 0 0 10px fade(@black, 50%);
     .tooltip-body {

assets/less/night/tooltips.less

@@ -109,4 +109,19 @@
     color: @accentMediumGray;
     font-size: 18px;
   }
+
+  .settings-select {
+    cursor: pointer;
+    position: relative;
+    border: none;
+    background-color: transparent;
+
+    option {
+      color: initial;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
 }

assets/less/settings.less

@@ -26,8 +26,13 @@
     <script>
       <%# Immediately apply night mode preference to avoid a flash effect %>
       try {
-        if (localStorage.getItem('night-mode') === 'true') {
-          document.body.classList.add('night-mode');
+        var settings = JSON.parse(localStorage.getItem('ex_doc:settings') || '{}');
+
+        if (settings.theme === 'dark' ||
+           ((settings.theme === 'system' || settings.theme == null) &&
+             window.matchMedia('(prefers-color-scheme: dark)').matches)
+           ) {
+          document.body.classList.add('dark')
         }
       } catch (error) { }
     </script>