diff --git a/docs.html b/docs.html index aae1183..a066712 100644 --- a/docs.html +++ b/docs.html @@ -25,6 +25,7 @@
  • Usage
  • Photo Guidelines
  • Documentation
    • +
  • 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/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..e658908 100644 --- a/style.css +++ b/style.css @@ -27,10 +27,87 @@ 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; } -.bg-primary { +.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; + margin-left: auto; + margin-right: auto; +} + +.dark-mode .toggle-theme::after { + content: url("images/moon.svg"); +} + +.light-mode .toggle-theme::after { + content: url("images/sun.svg"); +} + +.dark-mode { + background-color: #212529; + color: #fff !important; + +} + +.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; + } */ +.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; } @@ -176,7 +253,8 @@ body { } /* Documentation Header */ -#docs h2>a, #docs h3>a{ +#docs h2>a, +#docs h3>a { color: black; text-decoration: none; } @@ -200,4 +278,4 @@ footer h2 { .qr-code-div { padding: 30px 15px; -} +} \ No newline at end of file