From 8b3a913e64d84c8262f19f1cc7b8972830f9e4e4 Mon Sep 17 00:00:00 2001 From: Andrew M McCall Date: Mon, 22 Jul 2024 20:29:48 -0400 Subject: [PATCH 1/9] feature/theme-toggle --- index.html | 199 +++++++++++++++++++++++++++++++++++++++++++++++++ moon-light.svg | 3 + moon.svg | 3 + sun-light.svg | 11 +++ sun.svg | 11 +++ 5 files changed, 227 insertions(+) create mode 100644 moon-light.svg create mode 100644 moon.svg create mode 100644 sun-light.svg create mode 100644 sun.svg diff --git a/index.html b/index.html index 5b12f4352..e19c1c9a9 100644 --- a/index.html +++ b/index.html @@ -4321,6 +4321,13 @@

Change Log

+
+ +
+ + @@ -4334,5 +4341,197 @@

Change Log

}) + + + + diff --git a/moon-light.svg b/moon-light.svg new file mode 100644 index 000000000..2e74bc8b2 --- /dev/null +++ b/moon-light.svg @@ -0,0 +1,3 @@ + + + diff --git a/moon.svg b/moon.svg new file mode 100644 index 000000000..6280a5e16 --- /dev/null +++ b/moon.svg @@ -0,0 +1,3 @@ + + + diff --git a/sun-light.svg b/sun-light.svg new file mode 100644 index 000000000..bf6b40290 --- /dev/null +++ b/sun-light.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/sun.svg b/sun.svg new file mode 100644 index 000000000..896dfb419 --- /dev/null +++ b/sun.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + From 75540e332f9025b9e001e7745979bad367766ffa Mon Sep 17 00:00:00 2001 From: Andrew M McCall Date: Mon, 22 Jul 2024 20:35:57 -0400 Subject: [PATCH 2/9] removed extra console log --- index.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/index.html b/index.html index e19c1c9a9..43d18ec33 100644 --- a/index.html +++ b/index.html @@ -4370,8 +4370,6 @@

Change Log

this.body.setAttribute('data-theme', 'dark') } - console.log(toggle.checked) - } From 6505d535571938a92169ab77982f1ec45a831996 Mon Sep 17 00:00:00 2001 From: Andrew M McCall Date: Mon, 22 Jul 2024 21:39:52 -0400 Subject: [PATCH 3/9] minor refactor to work on firefox, moving files arond --- index.html | 201 +----------------- static/css/theme-toggle.css | 160 ++++++++++++++ .../images/moon-light.svg | 0 moon.svg => static/images/moon.svg | 0 sun-light.svg => static/images/sun-light.svg | 0 sun.svg => static/images/sun.svg | 0 static/js/themeToggle.js | 55 +++++ 7 files changed, 222 insertions(+), 194 deletions(-) create mode 100644 static/css/theme-toggle.css rename moon-light.svg => static/images/moon-light.svg (100%) rename moon.svg => static/images/moon.svg (100%) rename sun-light.svg => static/images/sun-light.svg (100%) rename sun.svg => static/images/sun.svg (100%) create mode 100644 static/js/themeToggle.js diff --git a/index.html b/index.html index 43d18ec33..51843eaf6 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@ Underscore.js + @@ -4322,9 +4324,11 @@

Change Log

- +
+ +
@@ -4340,196 +4344,5 @@

Change Log

} }) - - - - - diff --git a/static/css/theme-toggle.css b/static/css/theme-toggle.css new file mode 100644 index 000000000..97571f7cf --- /dev/null +++ b/static/css/theme-toggle.css @@ -0,0 +1,160 @@ + 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="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; + } + + svg { + path { + color: #fff; + } + } + + a { + color: #fff; + } + + tt { + color: #333; + } + + #sidebar { + background: #333; + color: #fff; + a { + color: #fff; + } + + a:hover, + a:active { + color: #e6e6e6; + } + } + } diff --git a/moon-light.svg b/static/images/moon-light.svg similarity index 100% rename from moon-light.svg rename to static/images/moon-light.svg diff --git a/moon.svg b/static/images/moon.svg similarity index 100% rename from moon.svg rename to static/images/moon.svg diff --git a/sun-light.svg b/static/images/sun-light.svg similarity index 100% rename from sun-light.svg rename to static/images/sun-light.svg diff --git a/sun.svg b/static/images/sun.svg similarity index 100% rename from sun.svg rename to static/images/sun.svg diff --git a/static/js/themeToggle.js b/static/js/themeToggle.js new file mode 100644 index 000000000..097899aa8 --- /dev/null +++ b/static/js/themeToggle.js @@ -0,0 +1,55 @@ +function ThemeToggle(toggleID) { + + this.toggleForm = document.getElementById(toggleID); + this.body = document.body + this.toggle = this.toggleForm.querySelector('input[type="checkbox"]') || this.toggleForm.closest('input[type="checkbox"]') + + this.events = function() { + 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 From ed42966bfd2cd372fd8dcc1252bc24a9f77171f1 Mon Sep 17 00:00:00 2001 From: Andrew M McCall Date: Mon, 22 Jul 2024 21:47:45 -0400 Subject: [PATCH 4/9] fail if no toggle --- static/js/themeToggle.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/static/js/themeToggle.js b/static/js/themeToggle.js index 097899aa8..8e69496f1 100644 --- a/static/js/themeToggle.js +++ b/static/js/themeToggle.js @@ -1,10 +1,11 @@ function ThemeToggle(toggleID) { - this.toggleForm = document.getElementById(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)) From de20b6fa315d65b40db360218e1fa371f0b6c399 Mon Sep 17 00:00:00 2001 From: Andrew M MccCall Date: Mon, 22 Jul 2024 22:42:27 -0400 Subject: [PATCH 5/9] incorporated stylesheet that was already available --- static/css/theme-toggle.css | 392 +++++++++++++++++++++++------------- 1 file changed, 248 insertions(+), 144 deletions(-) diff --git a/static/css/theme-toggle.css b/static/css/theme-toggle.css index 97571f7cf..6ef7bc7e6 100644 --- a/static/css/theme-toggle.css +++ b/static/css/theme-toggle.css @@ -1,160 +1,264 @@ - form[data-name="toggleForm"]{ - cursor: pointer; - display: block; - position: absolute; - top: 1rem; - right: 2rem; - height: 50px; - width: 50px; - label { - background: none; + form[data-name="toggleForm"] { 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%); - } + 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; + background: #333; + color: #fff; + + label::before, + label::after { + background-color: #333; + } - label::before, - label::after { - background-color: #333; - } + label::before { + background: url('../images/sun-light.svg') no-repeat center center / cover; + } - 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; + } - label::after { - background: url('../images/moon-light.svg') no-repeat center center / cover; - } - svg { - path { - color: #fff; + 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 { - color: #fff; - } + a.toc_title, + a.toc_title:visited { + color: #f4f4f4; + } + + a.toc_title:hover { + text-decoration: underline; + } - tt { - color: #333; - } + .toc_section li a { + text-decoration: none; + color: #f4f4f4; + } - #sidebar { - background: #333; - color: #fff; - a { - color: #fff; - } + img#logo { + filter: brightness(0) invert(1); + } - a:hover, - a:active { - color: #e6e6e6; - } - } + 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; + } } From 55720c074b673d84e34d1f4378379958e107057e Mon Sep 17 00:00:00 2001 From: Andrew M McCall Date: Tue, 23 Jul 2024 19:57:02 -0400 Subject: [PATCH 6/9] 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 From 184aae5863c2b5f85823b553fe894d7ecd7121f1 Mon Sep 17 00:00:00 2001 From: Andrew M McCall Date: Tue, 23 Jul 2024 19:58:00 -0400 Subject: [PATCH 7/9] unncessary prefers-color-scheme: light removal --- index.html | 5 ----- 1 file changed, 5 deletions(-) diff --git a/index.html b/index.html index fcc07e357..fd6a682d5 100644 --- a/index.html +++ b/index.html @@ -259,11 +259,6 @@ width: 100%; } } - @media screen and (prefers-color-scheme: light) { - img#logo { - filter: none; - } -} @media screen and (prefers-color-scheme: dark) { body { From dd23fd0cdfb8b846af73a30f4ecb7b83bdf3279a Mon Sep 17 00:00:00 2001 From: Andrew M McCall Date: Tue, 23 Jul 2024 21:14:13 -0400 Subject: [PATCH 8/9] formatting, filter, darker darkmode --- index.html | 21 +++++---------------- 1 file changed, 5 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index fd6a682d5..b9b98e039 100644 --- a/index.html +++ b/index.html @@ -260,65 +260,54 @@ } } -@media screen and (prefers-color-scheme: dark) { + @media screen and (prefers-color-scheme: dark) { body { - background: #333 !important; + background: #111 !important; color: #c6c6c6; } - div#sidebar { - background: #444; + background: #111; 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); + filter: invert(1) hue-rotate(180deg) brightness(0.9); } - 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; } - } + } From bd3468ba4ba5c58db10583f58464106f27a68c51 Mon Sep 17 00:00:00 2001 From: Andrew M McCall Date: Tue, 23 Jul 2024 21:18:50 -0400 Subject: [PATCH 9/9] even more css formatting --- index.html | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index b9b98e039..6b4b68dab 100644 --- a/index.html +++ b/index.html @@ -262,50 +262,50 @@ @media screen and (prefers-color-scheme: dark) { body { - background: #111 !important; - color: #c6c6c6; + background: #111 !important; + color: #c6c6c6; } div#sidebar { - background: #111; - 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; + background: #111; + 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; + color: #f4f4f4; } a.toc_title:hover { - text-decoration: underline; + text-decoration: underline; } .toc_section li a { - text-decoration: none; - color: #f4f4f4; + text-decoration: none; + color: #f4f4f4; } img#logo { filter: invert(1) hue-rotate(180deg) brightness(0.9); } div.warning { - color: #CC6060; + color: #CC6060; } a, a:visited { - color: #f4f4f4; + color: #f4f4f4; } a:active, a:hover { - color: #ffffff; + color: #ffffff; } table .rule { - background: #777; + background: #777; } tt { - background: #444; - border: 1px solid #777; + background: #444; + border: 1px solid #777; } pre { - border-left: 5px solid #aaa; + border-left: 5px solid #aaa; } }