From 5a825f7b09c439f74773ed7b288d4867ac0e683e Mon Sep 17 00:00:00 2001
From: dannyk3941 <52807859+dannyk3941@users.noreply.github.com>
Date: Thu, 9 Mar 2023 14:57:42 -0500
Subject: [PATCH] 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                                 |  3 +-
 package.json                              |  1 +
 packages/styles/index.html                |  8 +++++-
 packages/styles/src/index.js              |  5 ++++
 packages/styles/src/sass/base/_core.scss  | 14 ++++++----
 packages/styles/src/utilities/darkMode.js | 34 +++++++++++++++++++++++
 6 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 packages/styles/src/utilities/darkMode.js

diff --git a/README.md b/README.md
index cdede770..f371cf93 100644
--- a/README.md
+++ b/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)
diff --git a/package.json b/package.json
index 2525f7b8..2599eeaa 100644
--- a/package.json
+++ b/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": {
diff --git a/packages/styles/index.html b/packages/styles/index.html
index 5d4a8416..25373654 100644
--- a/packages/styles/index.html
+++ b/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>
diff --git a/packages/styles/src/index.js b/packages/styles/src/index.js
index 780fc817..d86306a8 100644
--- a/packages/styles/src/index.js
+++ b/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);
+  });
 });
diff --git a/packages/styles/src/sass/base/_core.scss b/packages/styles/src/sass/base/_core.scss
index 53d886c8..0e85a02b 100644
--- a/packages/styles/src/sass/base/_core.scss
+++ b/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;
-}
\ No newline at end of file
+  background-color: $cbp-bg-dark;
+}
+
+body {
+  font-family: $cbp-font-family-roboto;
+}
diff --git a/packages/styles/src/utilities/darkMode.js b/packages/styles/src/utilities/darkMode.js
new file mode 100644
index 00000000..90ad5319
--- /dev/null
+++ b/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;