From 0f20dffbaa0d700763afed9b6801b7757da68184 Mon Sep 17 00:00:00 2001 From: Shinwoo Kim Date: Sat, 22 Jul 2023 19:40:36 -0400 Subject: [PATCH 1/5] Adding dark mode support --- docs.html | 1 + index.html | 1 + js/index.js | 36 ++++++++++++++++++++++++++++++++++++ style.css | 24 ++++++++++++++++++++++++ 4 files changed, 62 insertions(+) diff --git a/docs.html b/docs.html index c5aa7e4..2d75459 100644 --- a/docs.html +++ b/docs.html @@ -25,6 +25,7 @@
  • Usage
  • Photo Guidelines
  • Documentation
    • +
  • diff --git a/index.html b/index.html index 7b569fa..a3a84ee 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,7 @@
  • Usage
  • Photo Guidelines
  • Documentation
    • +
  • diff --git a/js/index.js b/js/index.js index 3defb7f..60de29e 100644 --- a/js/index.js +++ b/js/index.js @@ -30,3 +30,39 @@ $(document).ready(function() { $(".navbar-collapse").collapse('hide'); }); }) + +// Dark mode toggle + +const defaultMode = "light-mode"; // if prefer scheme is not available +const body = document.querySelector("body"); + +const mode = checkSavedMode() ? checkSavedMode() : detectColorMode(); +body.classList.add(mode); +const toggle = document.querySelector(".toggle-theme"); +toggle.addEventListener("click", toggleClass); + +function checkSavedMode() { + return localStorage.getItem("color-mode"); +} +function saveColorMode(value) { + localStorage.setItem("color-mode", value); +} + +function detectColorMode() { + if ( window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) { + return "dark-mode"; + } else if (window.matchMedia) { + return "light-mode"; + } + return defaultMode; +} + + +function toggleClass() { + // toggle body class selector + $('body').toggleClass('light-mode dark-mode') + + body.classList.contains("dark-mode") + ? saveColorMode("dark-mode") + : saveColorMode("light-mode"); +} \ No newline at end of file diff --git a/style.css b/style.css index 44505b6..95a7ad6 100644 --- a/style.css +++ b/style.css @@ -30,6 +30,30 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Lato, Helvetica, Arial, sans-serif; } +.toggle-theme { + color: #f1f1f1; +} + +.dark-mode .toggle-theme::after { + content: "☽"; +} + +.light-mode .toggle-theme::after { + content: "☀"; + +} + +.dark-mode { + background-color: #212529; + color: #fff !important; + + #docs h2>a, + #docs h3>a { + color: #fff !important; + } +} + + .bg-primary { background-color: #006699 !important; } From dca5647c0176f49b76e49c50b4cf9ce5ff4e7cc1 Mon Sep 17 00:00:00 2001 From: Shinwoo Kim Date: Sat, 2 Sep 2023 00:42:30 -0400 Subject: [PATCH 2/5] make better icons for darkmode toggle --- images/moon.svg | 1 + images/sun.svg | 1 + style.css | 15 ++++++++++++--- 3 files changed, 14 insertions(+), 3 deletions(-) create mode 100644 images/moon.svg create mode 100644 images/sun.svg diff --git a/images/moon.svg b/images/moon.svg new file mode 100644 index 0000000..3b4080d --- /dev/null +++ b/images/moon.svg @@ -0,0 +1 @@ +Created by Arkinasifrom the Noun Project \ No newline at end of file diff --git a/images/sun.svg b/images/sun.svg new file mode 100644 index 0000000..9f1a02c --- /dev/null +++ b/images/sun.svg @@ -0,0 +1 @@ +Created by Arkinasifrom the Noun Project \ No newline at end of file diff --git a/style.css b/style.css index 95a7ad6..268fac7 100644 --- a/style.css +++ b/style.css @@ -32,15 +32,24 @@ body { .toggle-theme { color: #f1f1f1; + opacity: 50%; +} +.toggle-theme:hover{ + opacity: 100%; +} +.toggle-theme::after{ + filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(356deg) brightness(106%) contrast(102%); + display: block; + width: 25px; + height: 25px; } .dark-mode .toggle-theme::after { - content: "☽"; + content: url("images/moon.svg"); } .light-mode .toggle-theme::after { - content: "☀"; - + content: url("images/sun.svg"); } .dark-mode { From 95261aabb71f3bda698daef33e4e2f26a551ba3c Mon Sep 17 00:00:00 2001 From: Shinwoo Kim Date: Sat, 2 Sep 2023 00:43:16 -0400 Subject: [PATCH 3/5] fix shadows in dark mode --- style.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/style.css b/style.css index 268fac7..8bccaa5 100644 --- a/style.css +++ b/style.css @@ -60,6 +60,9 @@ body { #docs h3>a { color: #fff !important; } + .shadow { + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.85) !important; + } } From 6e47e2fdccb071f3d9ccd899451bac69a621a82e Mon Sep 17 00:00:00 2001 From: Shinwoo Kim Date: Mon, 2 Oct 2023 00:24:56 -0400 Subject: [PATCH 4/5] Update style.css --- style.css | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index 8bccaa5..9fdb498 100644 --- a/style.css +++ b/style.css @@ -42,6 +42,8 @@ body { display: block; width: 25px; height: 25px; + margin-left: auto; + margin-right: auto; } .dark-mode .toggle-theme::after { @@ -63,9 +65,35 @@ body { .shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.85) !important; } + a { + color: #99caff !important; + } + a:hover { + color: #7bbaff !important; + } + .btn-outline-primary { + border-color: #99caff !important; + } + .btn-outline-primary:hover { + border-color: #70cfff !important; + } + /* .badge-primary { + background-color: #99caff !important; + } */ + li::before { + color: #70cfff !important; + } + .text-success { + color: #6cdc86 !important; + } + .text-danger { + color: #ea868f !important; + } + .section-divider { + filter: brightness(140%); + } } - .bg-primary { background-color: #006699 !important; } From 5f8f5104e7ca818be58289cb0266a0605c292d76 Mon Sep 17 00:00:00 2001 From: Shinwoo Kim Date: Wed, 18 Oct 2023 11:31:03 -0400 Subject: [PATCH 5/5] add chrome support --- style.css | 94 ++++++++++++++++++++++++++++++++----------------------- 1 file changed, 54 insertions(+), 40 deletions(-) diff --git a/style.css b/style.css index 9fdb498..e658908 100644 --- a/style.css +++ b/style.css @@ -27,17 +27,19 @@ body { * [1]: https://phabricator.wikimedia.org/T175877 * [2]: https://getbootstrap.com/docs/4.1/content/reboot/#native-font-stack */ - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Lato, Helvetica, Arial, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Lato, Helvetica, Arial, sans-serif; } .toggle-theme { color: #f1f1f1; opacity: 50%; } -.toggle-theme:hover{ + +.toggle-theme:hover { opacity: 100%; } -.toggle-theme::after{ + +.toggle-theme::after { filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(356deg) brightness(106%) contrast(102%); display: block; width: 25px; @@ -58,43 +60,54 @@ body { background-color: #212529; color: #fff !important; - #docs h2>a, - #docs h3>a { - color: #fff !important; - } - .shadow { - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.85) !important; - } - a { - color: #99caff !important; - } - a:hover { - color: #7bbaff !important; - } - .btn-outline-primary { - border-color: #99caff !important; - } - .btn-outline-primary:hover { - border-color: #70cfff !important; - } - /* .badge-primary { +} + +.dark-mode #docs h2>a, +.dark-mode #docs h3>a { + color: #fff !important; +} + +.dark-mode .shadow { + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.85) !important; +} + +.dark-mode a { + color: #99caff !important; +} + +.dark-mode a:hover { + color: #7bbaff !important; +} + +.dark-mode .btn-outline-primary { + border-color: #99caff !important; +} + +.dark-mode .btn-outline-primary:hover { + border-color: #70cfff !important; +} + +/* .badge-primary { background-color: #99caff !important; } */ - li::before { - color: #70cfff !important; - } - .text-success { - color: #6cdc86 !important; - } - .text-danger { - color: #ea868f !important; - } - .section-divider { - filter: brightness(140%); - } -} - -.bg-primary { +.dark-mode li::before { + color: #70cfff !important; +} + +.dark-mode .text-success { + color: #6cdc86 !important; +} + +.dark-mode .text-danger { + color: #ea868f !important; +} + +.dark-mode .section-divider { + filter: brightness(140%); +} + + +.dark-mode .bg-primary { background-color: #006699 !important; } @@ -240,7 +253,8 @@ body { } /* Documentation Header */ -#docs h2>a, #docs h3>a{ +#docs h2>a, +#docs h3>a { color: black; text-decoration: none; } @@ -264,4 +278,4 @@ footer h2 { .qr-code-div { padding: 30px 15px; -} +} \ No newline at end of file