Allow for dark mode toggling via keyboard

Co-authored-by: Adrian D. Alvarez <1302542+06b@users.noreply.github.com>
up-for-grabs · Aug 28, 2023 · e561d6e · e561d6e
1 parent aa70551
commit e561d6e
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 75 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,4 +1,8 @@
-<a id="view-mode-a" title="dark-mode"><img id="view-mode" src="/images/Dim-Night.png"/></a>
+<button id="view-mode-toggle" class="theme-selector" type="button" title="Toggle dark mode" aria-pressed="false">
+    <span class="visually-hidden">Toggle dark mode</span>
+    <img id="view-mode" alt="" src="/images/Dim-Night.png"/>
+</button>
+
 <header role="banner">
     <a id="forkme_banner" href="https://github.com/up-for-grabs/up-for-grabs.net">View on GitHub</a>
     <div class="container">

diff --git a/javascripts/dark-mode.js b/javascripts/dark-mode.js
@@ -16,45 +16,30 @@ define([], () => {
    * Apply changes to document to put the page into "dark" mode
    *
    * @param {HTMLElement} viewModeElement
-   * @param {HTMLElement} viewModeAnchor
+   * @param {HTMLElement} viewModeToggleButton
    * @param {HTMLElement} goBackHomeElement
    */
-  function setDarkMode(viewModeElement, viewModeAnchor, goBackHomeElement) {
-    root.style.setProperty('--body-back', '#1a2025');
-    root.style.setProperty('--body-color', '#eeeded');
-    root.style.setProperty('--abs', 'rgb(39, 47, 55)');
-    root.style.setProperty('--box-shadow-color', 'rgba(27, 30, 33, 0.5)');
-    root.style.setProperty('--heading-color', '#7bc6f2');
-    root.style.setProperty('--container-border', 'transparent');
-    root.style.setProperty('--container-border-alt', '#dbdbdb');
-    root.style.setProperty('--databox-bg', '#32404d');
-    root.style.setProperty('--databox-text', '#7bceff');
-
+  function setDarkMode(viewModeElement, viewModeToggleButton, goBackHomeElement) {
     goBackHomeElement.setAttribute('src', '/images/logo_dark_1.png');
     viewModeElement.setAttribute('src', '/images/sun-light.png');
-    viewModeAnchor.title = 'light-mode';
+    viewModeToggleButton.setAttribute('aria-pressed', 'true');
+
+    root.setAttribute('data-theme-preference', 'dark');
   }
 
   /**
    * Apply changes to document to put the page into "light" mode
    *
    * @param {HTMLElement} viewModeElement
-   * @param {HTMLElement} viewModeAnchor
+   * @param {HTMLElement} viewModeToggleButton
    * @param {HTMLElement} goBackHomeElement
    */
-  function setLightMode(viewModeElement, viewModeAnchor, goBackHomeElement) {
-    root.style.setProperty('--body-back', '#f9f9f9');
-    root.style.setProperty('--body-color', '#303030');
-    root.style.setProperty('--abs', '#FFF');
-    root.style.setProperty('--box-shadow-color', 'rgba(0,0,0,0.2)');
-    root.style.setProperty('--heading-color', '#005485');
-    root.style.setProperty('--container-border', '#eee');
-    root.style.setProperty('--databox-bg', '#fff');
-    root.style.setProperty('--databox-text', '#2e7ba9');
-
+  function setLightMode(viewModeElement, viewModeToggleButton, goBackHomeElement) {
     goBackHomeElement.setAttribute('src', '/images/logo.png');
     viewModeElement.setAttribute('src', '/images/Dim-Night.png');
-    viewModeAnchor.title = 'dark-mode';
+    viewModeToggleButton.setAttribute('aria-pressed', 'false');
+
+    root.setAttribute('data-theme-preference', '');
   }
 
   /**
@@ -77,13 +62,8 @@ define([], () => {
       return;
     }
 
-    const viewModeAnchor = document.getElementById('view-mode-a');
-    if (!viewModeAnchor) {
-      return;
-    }
-
-    const goBackHomeAnchor = document.getElementById('go-back-home-a');
-    if (!goBackHomeAnchor) {
+    const viewModeToggleButton = document.getElementById('view-mode-toggle');
+    if (!viewModeToggleButton) {
       return;
     }
 
@@ -93,15 +73,15 @@ define([], () => {
     }
 
     if (!lightModeEnabled) {
-      setDarkMode(viewModeElement, viewModeAnchor, goBackHomeElement);
+      setDarkMode(viewModeElement, viewModeToggleButton, goBackHomeElement);
     }
 
-    viewModeAnchor.addEventListener('click', () => {
+    viewModeToggleButton.addEventListener('click', () => {
       if (lightModeEnabled) {
-        setDarkMode(viewModeElement, viewModeAnchor, goBackHomeElement);
+        setDarkMode(viewModeElement, viewModeToggleButton, goBackHomeElement);
         updateValue('dark');
       } else {
-        setLightMode(viewModeElement, viewModeAnchor, goBackHomeElement);
+        setLightMode(viewModeElement, viewModeToggleButton, goBackHomeElement);
         updateValue('light');
       }
     });

diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css
@@ -1,46 +1,34 @@
 @import url(pygment_trac.css);
 
-/*******************************************************************************
-MeyerWeb Reset
-*******************************************************************************/
-#view-mode {
-  position: fixed;
-  width: 55px;
-  height: 55px;
-  z-index: 999;
-  margin-left: 10px;
-}
-
-/* for light mode
---body-back: #f9f9f9;
-  --body-color:#303030;;
-  --abs:#FFF ; 
-  --heading-color: #005485;
-  --container-border: ##dbdbdb;
-  --databox-bg: #fff
-  --databox-text: #2e7ba9; */
+/* Default [Light Mode] */
 :root {
-  --body-back: #e9eaec;
+  --body-back: #f9f9f9;
   --body-color: #303030;
+  --abs: #fff;
   --box-shadow-color: rgba(0, 0, 0, 0.2);
-  --abs: #FFF;
-  --view-mode: true;
   --heading-color: #005485;
-  --container-rgb: 219, 219, 219;
-  --container-border: rgb(var(--container-rgb));
+  --container-border: #dbdbdb;
   --container-border-alt: #303030;
   --databox-bg: #fff;
   --databox-text: #2e7ba9;
 }
 
-/* for dark mode
+/* Dark Mode Preference has been selected */
+[data-theme-preference=dark]:root {
   --body-back: #1a2025;
-  --body-color:#eeeded;
-  --abs:rgb(38 45 49) ;
+  --body-color: #eeeded;
+  --abs: rgb(39 47 55);
+  --box-shadow-color: rgba(27, 30, 33, 0.5);
   --heading-color: #7bc6f2;
-  --container-border: transparent
-  --databox-bg: #32404d; 
-  --databox-text: #7bceff; */
+  --container-border: transparent;
+  --container-border-alt: #dbdbdb;
+  --databox-bg: #32404d;
+  --databox-text: #7bceff;
+}
+
+/*******************************************************************************
+MeyerWeb Reset
+*******************************************************************************/
 
 html,
 body,
@@ -238,7 +226,27 @@ img {
 }
 
 button {
-  border: none;
+  border-color: transparent;
+}
+
+.theme-selector {
+  position: fixed;
+  width: 55px;
+  height: 55px;
+  z-index: 999;
+  background: transparent;
+  cursor: pointer;
+}
+
+.theme-selector .visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
 }
 
 #go-back-home {
@@ -998,19 +1006,20 @@ ul.popular-tags li {
 }
 
 .projects .stats {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
 .fork-count {
-    display: flex;
-    margin-top: 10px;
-    height: max-content;
+  display: flex;
+  margin-top: 10px;
+  height: max-content;
 }
 
 .fork-count-svg {
-    align-self: center;
+  align-self: center;
+  fill: currentColor;
 }
 
 @media screen and (max-width : 670px) {