Feat/implement dark mode (#13)

* feat: initial dark mode toggle js and prefers-color-scheme media query

* chore: remove css variables test from _core.scss

* fix: dark mode bootstrap in index.js

* chore: clean up import in index.js

* fix: use data attribute in _core.scss and refactor darkMode.js

* chore: add script to run 'styles' package storybook from root directory and update readme

README.md

@@ -12,7 +12,8 @@ The CBP Design System (1.0) exists to provide a unifying user experience and red
 $ cd design-system
 $ npm install
 $ npm run styles-dev      # run the styles dev server
-$ npm run styles-build    # runs vite build
+$ npm run styles-build    # runs vite build to build out css and js
+$ npm run styles-sb       # runs storybook for the styles package
 ```
 
 The CBP Design System repo is set up as a monorepo that uses the "workspaces" feature from `npm` for managing multiple packages from a singular top-level, root package. [[NPM Workspaces]](https://docs.npmjs.com/cli/v8/using-npm/workspaces)

package.json

@@ -9,6 +9,7 @@
     "build-tokens": "npm run sd -w packages/styles",
     "styles-dev": "npm run dev -w packages/styles",
     "styles-build": "npm run build -w packages/styles",
+    "styles-sb": "npm run storybook -w packages/styles",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {

packages/styles/index.html

@@ -238,7 +238,13 @@ <h6 class="cbp-banner__info-title d-none-sm">
                 <div class="sandbox__demo-container">
                   <div class="sandbox__demo">
                     <!-- *COMPONENT GOES HERE* -->
-
+                    <label class="cbp-toggle demo-toggle" data-component="cbp-toggle">
+                      <input type="checkbox" data-theme-toggle>
+                      <span class="slider">
+                        <i class="fas fa-moon" style="color: yellow;"></i>
+                        <i class="fas fa-sun" style="color: orange;"></i>
+                      </span>
+                    </label>
                   </div>
                   <aside class="sandbox__modifiers">
                     <h2>State Modifiers</h2>

packages/styles/src/index.js

@@ -8,6 +8,7 @@ import Toggle from './components/toggle/toggle';
 import FileUploader from './components/fileupload/fileupload';
 import HashedField from './components/form/hashed-field/hashedField';
 import NumberCounter from './components/form/number-counter/numberCounter';
+import DarkMode from './utilities/darkMode';
 
 import './sass/main.scss';
 
@@ -92,4 +93,8 @@ document.addEventListener('DOMContentLoaded', (event) => {
   SelectorEngine.findAll('.cbp-form__number--counter').forEach((counter) => {
     addOrInstantiate(NumberCounter, counter);
   });
+
+  SelectorEngine.findAll('[data-theme-toggle]').forEach((themeToggle) => {
+    addOrInstantiate(DarkMode, themeToggle);
+  });
 });

packages/styles/src/sass/base/_core.scss

@@ -1,12 +1,16 @@
 @use 'colors' as *;
 @use '../tokens/font' as *;
 
-html {
+html[data-cbp-theme="light"] {
   color: $cbp-text-darkest;
-  font-family: $cbp-font-family-roboto;
+  background-color: $cbp-bg-light;
 }
 
-[data-theme="dark"] {
-  background-color: $cbp-bg-dark;
+html[data-cbp-theme="dark"] {
   color: $cbp-text-lightest;
-}
+  background-color: $cbp-bg-dark;
+}
+
+body {
+  font-family: $cbp-font-family-roboto;
+}

packages/styles/src/utilities/darkMode.js

@@ -0,0 +1,34 @@
+class DarkMode {
+  constructor(themeToggle) {
+    // Toggle component needs to have 'data-theme-toggle' attribute in order for this to work.
+    this.themeToggle = themeToggle;
+    this.prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
+    this.storedTheme = localStorage.getItem('theme');
+
+    this.preferredTheme() === 'dark' ? this.themeToggle.checked = true : this.themeToggle.checked = false;
+
+    this.setTheme(this.preferredTheme());
+
+    this.handleThemeToggle(this.themeToggle);
+  }
+
+  preferredTheme() {
+    if (this.storedTheme) {
+      return this.storedTheme;
+    }
+    return this.prefersDarkMode.matches ? 'dark' : 'light';
+  }
+
+  setTheme(theme) {
+    localStorage.setItem('theme', theme)
+    document.documentElement.setAttribute('data-cbp-theme', theme);
+  }
+
+  handleThemeToggle(themeToggle) {
+    themeToggle.addEventListener('click', () => {
+      themeToggle.checked ? this.setTheme('dark') : this.setTheme('light');
+    })
+  }
+}
+
+export default DarkMode;