From 2875331b8f8aaaadf6135b05bdaed55682c72fd1 Mon Sep 17 00:00:00 2001 From: "Adrian D. Alvarez" Date: Fri, 21 Oct 2022 13:38:38 -0400 Subject: [PATCH 1/2] Allow for dark mode toggling via keyboard --- _includes/header.html | 6 +++- javascripts/dark-mode.js | 46 +++++++++---------------- stylesheets/stylesheet.css | 70 +++++++++++++++++++++----------------- 3 files changed, 60 insertions(+), 62 deletions(-) diff --git a/_includes/header.html b/_includes/header.html index 2f3b04620dd..0fb5c4c291b 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,4 +1,8 @@ - + +
View on GitHub diff --git a/javascripts/dark-mode.js b/javascripts/dark-mode.js index c39347111c0..70f4031a2da 100644 --- a/javascripts/dark-mode.js +++ b/javascripts/dark-mode.js @@ -16,40 +16,26 @@ define([], () => { * Apply changes to document to put the page into "dark" mode * * @param {HTMLElement} viewModeElement - * @param {HTMLElement} viewModeAnchor + * @param {HTMLElement} viewModeToggleButton */ - function setDarkMode(viewModeElement, viewModeAnchor) { - 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('--databox-bg', '#32404d'); - root.style.setProperty('--databox-text', '#7bceff'); - + function setDarkMode(viewModeElement, viewModeToggleButton) { 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 */ - function setLightMode(viewModeElement, viewModeAnchor) { - 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) { viewModeElement.setAttribute('src', '/images/Dim-Night.png'); - viewModeAnchor.title = 'dark-mode'; + viewModeToggleButton.setAttribute('aria-pressed', 'false'); + + root.setAttribute('data-theme-preference', ''); } /** @@ -72,21 +58,21 @@ define([], () => { return; } - const viewModeAnchor = document.getElementById('view-mode-a'); - if (!viewModeAnchor) { + const viewModeToggleButton = document.getElementById('view-mode-toggle'); + if (!viewModeToggleButton) { return; } if (!lightModeEnabled) { - setDarkMode(viewModeElement, viewModeAnchor); + setDarkMode(viewModeElement, viewModeToggleButton); } - viewModeAnchor.addEventListener('click', () => { + viewModeToggleButton.addEventListener('click', () => { if (lightModeEnabled) { - setDarkMode(viewModeElement, viewModeAnchor); + setDarkMode(viewModeElement, viewModeToggleButton); updateValue('dark'); } else { - setLightMode(viewModeElement, viewModeAnchor); + setLightMode(viewModeElement, viewModeToggleButton); updateValue('light'); } }); diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css index ddeece8c80f..41f818f1361 100644 --- a/stylesheets/stylesheet.css +++ b/stylesheets/stylesheet.css @@ -1,45 +1,32 @@ @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-border: #dbdbdb; + --container-border: #eee; --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; + --databox-bg: #32404d; + --databox-text: #7bceff; +} + +/******************************************************************************* +MeyerWeb Reset +*******************************************************************************/ html, body, @@ -238,7 +225,28 @@ img { } button { - border: none; + border-color: transparent; +} + +.theme-selector { + position: fixed; + width: 55px; + height: 55px; + z-index: 999; + margin-left: 5px; + 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 { From ce3924c32551b9b8e9203226bc7395115624b0ba Mon Sep 17 00:00:00 2001 From: "Adrian D. Alvarez" Date: Mon, 19 Dec 2022 13:11:15 -0500 Subject: [PATCH 2/2] Resolve merge conflict --- javascripts/dark-mode.js | 31 ++++++++++++++----------------- stylesheets/stylesheet.css | 1 + 2 files changed, 15 insertions(+), 17 deletions(-) diff --git a/javascripts/dark-mode.js b/javascripts/dark-mode.js index d9c558d4fab..9c5df57d253 100644 --- a/javascripts/dark-mode.js +++ b/javascripts/dark-mode.js @@ -17,20 +17,10 @@ define([], () => { * * @param {HTMLElement} viewModeElement * @param {HTMLElement} viewModeToggleButton + * @param {HTMLElement} goBackHomeElement */ - - function setDarkMode(viewModeElement, viewModeToggleButton) { - function setDarkMode(viewModeElement, viewModeAnchor) { - 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'); viewModeToggleButton.setAttribute('aria-pressed', 'true'); @@ -42,8 +32,10 @@ define([], () => { * * @param {HTMLElement} viewModeElement * @param {HTMLElement} viewModeToggleButton + * @param {HTMLElement} goBackHomeElement */ - function setLightMode(viewModeElement, viewModeToggleButton) { + function setLightMode(viewModeElement, viewModeToggleButton, goBackHomeElement) { + goBackHomeElement.setAttribute('src', '/images/logo.png'); viewModeElement.setAttribute('src', '/images/Dim-Night.png'); viewModeToggleButton.setAttribute('aria-pressed', 'false'); @@ -75,16 +67,21 @@ define([], () => { return; } + const goBackHomeElement = document.getElementById('go-back-home'); + if (!goBackHomeElement) { + return; + } + if (!lightModeEnabled) { - setDarkMode(viewModeElement, viewModeToggleButton); + setDarkMode(viewModeElement, viewModeToggleButton, goBackHomeElement); } viewModeToggleButton.addEventListener('click', () => { if (lightModeEnabled) { - setDarkMode(viewModeElement, viewModeToggleButton); + setDarkMode(viewModeElement, viewModeToggleButton, goBackHomeElement); updateValue('dark'); } else { - setLightMode(viewModeElement, viewModeToggleButton); + setLightMode(viewModeElement, viewModeToggleButton, goBackHomeElement); updateValue('light'); } }); diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css index 88bd3775595..a4975368c62 100644 --- a/stylesheets/stylesheet.css +++ b/stylesheets/stylesheet.css @@ -23,6 +23,7 @@ --box-shadow-color: rgba(27, 30, 33, 0.5); --heading-color: #7bc6f2; --container-border: transparent; + --container-border-alt: #dbdbdb; --databox-bg: #32404d; --databox-text: #7bceff; }