From 55720c074b673d84e34d1f4378379958e107057e Mon Sep 17 00:00:00 2001 From: Andrew M McCall Date: Tue, 23 Jul 2024 19:57:02 -0400 Subject: [PATCH] minimal dark mode implementation --- index.html | 76 ++++++++-- static/css/theme-toggle.css | 264 ----------------------------------- static/images/moon-light.svg | 3 - static/images/moon.svg | 3 - static/images/sun-light.svg | 11 -- static/images/sun.svg | 11 -- static/js/themeToggle.js | 56 -------- 7 files changed, 65 insertions(+), 359 deletions(-) delete mode 100644 static/css/theme-toggle.css delete mode 100644 static/images/moon-light.svg delete mode 100644 static/images/moon.svg delete mode 100644 static/images/sun-light.svg delete mode 100644 static/images/sun.svg delete mode 100644 static/js/themeToggle.js diff --git a/index.html b/index.html index 51843eaf6..fcc07e357 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,6 @@ Underscore.js - @@ -4323,15 +4386,6 @@

Change Log

-
-
- -
-
- - diff --git a/static/css/theme-toggle.css b/static/css/theme-toggle.css deleted file mode 100644 index 6ef7bc7e6..000000000 --- a/static/css/theme-toggle.css +++ /dev/null @@ -1,264 +0,0 @@ - form[data-name="toggleForm"] { - cursor: pointer; - display: block; - position: absolute; - top: 1rem; - right: 2rem; - height: 50px; - width: 50px; - - label { - background: none; - cursor: pointer; - display: grid; - padding: unset; - padding-inline: 0.15rem; - padding-left: 0.15rem; - padding-right: 0.15rem; - place-items: center; - width: inherit; - height: inherit; - left: unset; - position: relative; - z-index: 1; - } - - label::before { - content: ""; - cursor: inherit; - background: #fff url('../images/sun.svg') no-repeat center / cover; - display: block; - height: 24px; - width: 24px; - position: absolute; - top: 50%; - left: 0; - transform: translate(-66%, -50%); - z-index: 10; - } - - label::after { - content: ""; - cursor: inherit; - background: #fff url('../images/moon.svg') no-repeat center / cover; - display: block; - height: 24px; - width: 24px; - position: absolute; - top: 50%; - right: 0; - transform: translate(66%, -50%); - display: flex; - align-items: center; - justify-content: center; - z-index: 10; - } - - input { - cursor: inherit; - left: unset; - right: unset; - top: unset; - bottom: unset; - margin: unset; - padding: unset; - position: relative; - visibility: hidden; - z-index: 9; - } - - .theme-control { - position: relative; - z-index: 0; - } - - .theme-control::before { - content: ""; - height: 1.1rem; - width: 2rem; - border-radius: 3rem; - background: #000; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - display: block; - visibility: visible; - z-index: 0; - } - - - .theme-control::after { - border-radius: 50%; - left: 0; - right: 0; - top: 0; - bottom: 0; - top: 50%; - left: 50%; - content: ''; - background: #0071b5; - width: 1rem; - height: 1rem; - display: block; - position: absolute; - transform: translate(-0.85rem, -50%); - visibility: visible; - -moz-transition: transform 350ms; - -webkit-transition: transform 350ms; - transition: transform 350ms; - z-index: 0; - - } - - .theme-control:has(label > input:checked)::after { - transform: translate(-0.15rem, -50%); - } - } - - body[data-theme="light"] { - - img#logo { - filter: unset; - } - } - - body[data-theme="dark"] { - background: #333; - color: #fff; - - label::before, - label::after { - background-color: #333; - } - - label::before { - background: url('../images/sun-light.svg') no-repeat center center / cover; - } - - label::after { - background: url('../images/moon-light.svg') no-repeat center center / cover; - } - - - div#sidebar { - background: #444; - border-right: 1px solid #666; - box-shadow: 0 0 20px #555; - -webkit-box-shadow: 0 0 20px #555; - -moz-box-shadow: 0 0 20px #555; - } - - a.toc_title, - a.toc_title:visited { - color: #f4f4f4; - } - - a.toc_title:hover { - text-decoration: underline; - } - - .toc_section li a { - text-decoration: none; - color: #f4f4f4; - } - - img#logo { - filter: brightness(0) invert(1); - } - - div.warning { - color: #CC6060; - } - - a, - a:visited { - color: #f4f4f4; - } - - a:active, - a:hover { - color: #ffffff; - } - - table .rule { - background: #777; - } - - tt { - background: #444; - border: 1px solid #777; - } - - pre { - border-left: 5px solid #aaa; - } - } - - @media screen and (prefer-color-scheme: light) { - img#logo { - filter: unset; - } - - } - - - @media screen and (prefers-color-scheme: dark) { - body { - background: #333; - color: #c6c6c6; - } - - div#sidebar { - background: #444; - border-right: 1px solid #666; - box-shadow: 0 0 20px #555; - -webkit-box-shadow: 0 0 20px #555; - -moz-box-shadow: 0 0 20px #555; - } - - a.toc_title, - a.toc_title:visited { - color: #f4f4f4; - } - - a.toc_title:hover { - text-decoration: underline; - } - - .toc_section li a { - text-decoration: none; - color: #f4f4f4; - } - - img#logo { - filter: brightness(0) invert(1); - } - - div.warning { - color: #CC6060; - } - - a, - a:visited { - color: #f4f4f4; - } - - a:active, - a:hover { - color: #ffffff; - } - - table .rule { - background: #777; - } - - tt { - background: #444; - border: 1px solid #777; - } - - pre { - border-left: 5px solid #aaa; - } - } diff --git a/static/images/moon-light.svg b/static/images/moon-light.svg deleted file mode 100644 index 2e74bc8b2..000000000 --- a/static/images/moon-light.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/static/images/moon.svg b/static/images/moon.svg deleted file mode 100644 index 6280a5e16..000000000 --- a/static/images/moon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/static/images/sun-light.svg b/static/images/sun-light.svg deleted file mode 100644 index bf6b40290..000000000 --- a/static/images/sun-light.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/static/images/sun.svg b/static/images/sun.svg deleted file mode 100644 index 896dfb419..000000000 --- a/static/images/sun.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/static/js/themeToggle.js b/static/js/themeToggle.js deleted file mode 100644 index 8e69496f1..000000000 --- a/static/js/themeToggle.js +++ /dev/null @@ -1,56 +0,0 @@ -function ThemeToggle(toggleID) { - - this.toggleForm = document.getElementById(toggleID) || null; - this.body = document.body - this.toggle = this.toggleForm.querySelector('input[type="checkbox"]') || this.toggleForm.closest('input[type="checkbox"]') - - this.events = function() { - if (!this.toggleForm) return null - this.loadThemeFromStorage() - this.toggleForm.addEventListener('click', this.handleChange.bind(this)) - document.addEventListener('keyup', this.handleKeyDown.bind(this)) - } - - - this.handleKeyDown = function(e) { - - if(e.key === 't' || e.key === 'T') { - this.handleChange() - } - }.bind(this) - - - this.loadThemeFromStorage = function() { - var getThemeFromLocalStorage = localStorage.getItem('theme') || "light" - this.toggle.checked = getThemeFromLocalStorage === "dark" - document.body.setAttribute('data-theme', getThemeFromLocalStorage) - } - - - this.handleChange = function() { - if (typeof this.toggle === "undefined") return null - - if (this.toggle.checked) { - this.toggle.checked = false - this.toggle.setAttribute('aria-label', 'light') - this.body.setAttribute('data-theme', 'light') - localStorage.setItem("theme", "light") - } else { - this.toggle.checked = true - this.toggle.setAttribute('aria-label', 'dark') - this.body.setAttribute('data-theme', 'dark') - localStorage.setItem("theme", "dark") - } - - } - this.events() - } - - - - // init - - new ThemeToggle('themeForm') - - - \ No newline at end of file