Merge #453

453: Automatic dark/light mode toggle, force dark mode r=bidoubiwa a=ColinFrick

This adds a new event listener to the color scheme, and `always` as a third option for `enableDarkMode`

Any objection against the option value `always`? It could also be `force` or something like that?
What do you think?

Closes #369 

Co-authored-by: Colin Frick <[email protected]>
Co-authored-by: colin.frick <[email protected]>

Author: bors[bot]

README.md

@@ -189,18 +189,23 @@ docsSearchBar({
 ##### `enableDarkMode` <!-- omit in toc -->
 
 Allows you to display the searchbar in dark mode. It is useful if your website has dark mode support and you also want the searchbar to appear in a dark version.
-You can always edit the style of the searchbar to match the style of your website.
+You can always edit the style of the searchbar to match the style of your website. When the option `enableDarkMode` is set to `auto`, the searchbar automatically sets the mode to the system mode.
+
+`enableDarkMode` has three possible states:
+- `false`: enforce light mode.
+- `true`: enforce dark mode.
+- `auto`: system mode (light or dark).
 
 Example:
 
 ```javascript
 docsSearchBar({
   ...
-  enableDarkMode: true
+  enableDarkMode: 'auto'
 })
 ```
 
-Dark mode with `enableDarkMode` set to `true` and system mode set to `dark`:
+Dark mode with `enableDarkMode` set to `auto` and system mode set to `dark`:
 
 ![docs-searchbar with dark mode](assets/dark-mode.png)
 

src/lib/DocsSearchBar.js

@@ -21,7 +21,7 @@ import { MeiliSearch } from 'meilisearch'
  * @param  {function}          [options.handleSelected]      This function is called when a suggestion is selected
  * @param  {function}          [options.enhancedSearchInput] When set to true, a theme is applied to the search box to improve its appearance
  * @param  {'column'|'simple'} [options.layout]              Layout of the search bar
- * @param  {boolean}           [options.enableDarkMode]      Allows you to display the searchbar in dark mode
+ * @param  {boolean|'auto'}    [options.enableDarkMode]      Allows you to enforce, light theme, dark theme, or auto mode on the searchbar.
  * @return {Object}
  */
 const usage = `Usage:
@@ -174,7 +174,7 @@ class DocsSearchBar {
    * Wraps input selector in a docs-searchbar-js div
    * @function addThemeWrapper
    * @param  {string} inputSelector Selector of the input element
-   * @param  {bool} enableDarkMode Wether darkMode is enabled
+   * @param  {boolean|'auto'} enableDarkMode Allows you to enforce, light theme, dark theme, or auto mode on the searchbar.
    * @returns {void}
    */
   static addThemeWrapper(inputSelector, enableDarkMode) {
@@ -185,14 +185,28 @@ class DocsSearchBar {
     parent.replaceChild(wrapper, inputElement)
     wrapper.appendChild(inputElement)
 
-    const isSystemInDarkMode =
-      window.matchMedia &&
-      window.matchMedia('(prefers-color-scheme: dark)').matches
+    let isSystemInDarkMode = Boolean(enableDarkMode)
+    if (enableDarkMode === 'auto' && window.matchMedia) {
+      const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)')
+      isSystemInDarkMode = mediaQueryList.matches
+
+      const listener = function (e) {
+        if (document.body.contains(wrapper)) {
+          wrapper.setAttribute('data-ds-theme', e.matches ? 'dark' : 'light')
+        } else if (mediaQueryList.removeEventListener) {
+          mediaQueryList.removeEventListener('change', listener)
+        } else if (mediaQueryList.removeListener) {
+          mediaQueryList.removeListener(listener)
+        }
+      }
 
-    wrapper.setAttribute(
-      'data-ds-theme',
-      inputElement && enableDarkMode && isSystemInDarkMode ? 'dark' : 'light',
-    )
+      if (mediaQueryList.addEventListener) {
+        mediaQueryList.addEventListener('change', listener)
+      } else if (mediaQueryList.addListener) {
+        mediaQueryList.addListener(listener)
+      }
+    }
+    wrapper.setAttribute('data-ds-theme', isSystemInDarkMode ? 'dark' : 'light')
   }
 
   /**
@@ -225,9 +239,19 @@ class DocsSearchBar {
       true,
     )
 
+    if (
+      args.enableDarkMode !== 'auto' &&
+      args.enableDarkMode !== false &&
+      args.enableDarkMode !== true
+    ) {
+      throw new Error(
+        `Error: "enableDarkMode" must be either true, false, or 'auto'. Supplied value: ${args.enableDarkMode}`,
+      )
+    }
+
     DocsSearchBar.typeCheck(
       args,
-      ['debug', 'enableDarkMode', 'enhancedSearchInput'],
+      ['debug', 'enhancedSearchInput'],
       'boolean',
       false,
     )