diff options
author | Guru Sabarish <gurusabarisha@gmail.com> | 2022-01-25 21:05:54 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-01-25 21:05:54 +0300 |
commit | aeec9ef74fe73be9bf57dd3b01efc61042435193 (patch) | |
tree | 4a0ce4ff23505f8f602a6c3e0df81334440f4a37 | |
parent | a1a2264e6bb81102b297e9e1838d4777f9460c97 (diff) | |
parent | 9ab6341fe4b6e6d663b2186260460773ae316092 (diff) |
Merge pull request #45 from gurusabarish/auto-darkmode-fix
Auto darkmode fix for #37 by @lr1980
-rw-r--r-- | .gitignore | 18 | ||||
-rw-r--r-- | layouts/_default/baseof.html | 34 | ||||
-rw-r--r-- | layouts/index.html | 52 | ||||
-rw-r--r-- | static/js/auto_darkmode.js | 63 |
4 files changed, 123 insertions, 44 deletions
@@ -1,5 +1,19 @@ -/public /config.yaml /content /static/images -.vscode
\ No newline at end of file +.vscode + +### Hugo ### +# Generated files by hugo +/public/ +/resources/_gen/ +/assets/jsconfig.json +hugo_stats.json + +# Executable may be added to repository +hugo.exe +hugo.darwin +hugo.linux + +# Temporary lock file while building +/.hugo_build.lock
\ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 884515f..f1d35b8 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -56,6 +56,20 @@ $('[data-toggle="tooltip"]').tooltip() }) </script> + + <!-- Darkmode --> + <script> + function autoDarkMode() { + $("body").toggleClass("darkmode"); + $(".fa-moon").addClass("d-none"); + $(".fa-sun").removeClass("d-none"); + $("nav").toggleClass("navbar-dark"); + $("nav").toggleClass("navbar-light"); + $('.text-dark').toggleClass('darkmode-text-dark'); + $('.text-muted').toggleClass('darkmode-text-muted'); + }; + </script> + <script src="/js/auto_darkmode.js"></script> <script> $('.darkmode-label').click(function () { $("body").toggleClass("darkmode"); @@ -63,23 +77,13 @@ $(".fa-sun").toggleClass("d-none"); $("nav").toggleClass("navbar-dark"); $("nav").toggleClass("navbar-light"); - $('.text-dark').addClass('darkmode-text-dark').removeClass('text-dark'); - $('.text-muted').addClass('darkmode-text-muted').removeClass('text-muted'); - if ($('input.custom-control-input').is(':checked')) { - $('.darkmode-text-dark').addClass('text-dark').removeClass('darkmode-text-dark'); - $('.darkmode-text-muted').addClass('text-muted').removeClass('darkmode-text-muted'); - }; + $('.text-dark').toggleClass('darkmode-text-dark'); + $('.text-muted').toggleClass('darkmode-text-muted'); + + switchDarkmodeSetting(); }); - if ($('input.custom-control-input').is(':checked')) { - $("body").toggleClass("darkmode"); - $(".fa-moon").addClass("d-none"); - $(".fa-sun").removeClass("d-none"); - $("nav").toggleClass("navbar-dark"); - $("nav").toggleClass("navbar-light"); - $('.text-dark').addClass('darkmode-text-dark').removeClass('text-dark'); - $('.text-muted').addClass('darkmode-text-muted').removeClass('text-muted'); - }; </script> + </body> {{ else }} diff --git a/layouts/index.html b/layouts/index.html index b1a03bd..e01e9a9 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -115,6 +115,23 @@ {{- partial "sections/v3/footer.html" . -}} {{- partial "sections/v3/scripts.html" . -}} </div> + + <!-- Darkmode --> + <script> + function autoDarkMode() { + $("body").toggleClass("darkmode"); + $(".fa-moon").addClass("d-none"); + $(".fa-sun").removeClass("d-none"); + $("nav").toggleClass("navbar-dark"); + $("nav").toggleClass("navbar-light"); + $(".text-dark").toggleClass("darkmode-text-dark"); + $(".text-muted").toggleClass("darkmode-text-muted") + $(".about-backdark").toggleClass("about-back"); + $(".education-backdark").toggleClass("education-back"); + $(".achievements-backdark").toggleClass("achievements-back"); + } + </script> + <script src="/js/auto_darkmode.js"></script> <script> /* document.onreadystatechange = function () { @@ -131,6 +148,7 @@ } }; */ + $(".darkmode-label").click(function () { $("body").toggleClass("darkmode"); $(".fa-moon").toggleClass("d-none"); @@ -140,37 +158,17 @@ $(".achievements-backdark").toggleClass("achievements-back"); $("nav").toggleClass("navbar-dark"); $("nav").toggleClass("navbar-light"); - $(".text-dark").addClass("darkmode-text-dark").removeClass("text-dark"); - $(".text-muted") - .addClass("darkmode-text-muted") - .removeClass("text-muted"); - if ($("input.custom-control-input").is(":checked")) { - $(".darkmode-text-dark") - .addClass("text-dark") - .removeClass("darkmode-text-dark"); - $(".darkmode-text-muted") - .addClass("text-muted") - .removeClass("darkmode-text-muted"); - } + $(".text-dark").toggleClass("darkmode-text-dark"); + $(".text-muted").toggleClass("darkmode-text-muted") + + switchDarkmodeSetting(); }); - if ($("input.custom-control-input").is(":checked")) { - $("body").toggleClass("darkmode"); - $(".fa-moon").addClass("d-none"); - $(".fa-sun").removeClass("d-none"); - $("nav").toggleClass("navbar-dark"); - $("nav").toggleClass("navbar-light"); - $(".text-dark").addClass("darkmode-text-dark").removeClass("text-dark"); - $(".text-muted") - .addClass("darkmode-text-muted") - .removeClass("text-muted"); - $(".about-backdark").toggleClass("about-back"); - $(".education-backdark").toggleClass("education-back"); - $(".achievements-backdark").toggleClass("achievements-back"); - } + + </script> </body> {{ else }} {{ end }} -</html> +</html>
\ No newline at end of file diff --git a/static/js/auto_darkmode.js b/static/js/auto_darkmode.js new file mode 100644 index 0000000..51a8fd7 --- /dev/null +++ b/static/js/auto_darkmode.js @@ -0,0 +1,63 @@ +function setCookie(name,value,days) { + var expires = ""; + if (days) { + var date = new Date(); + date.setTime(date.getTime() + (days*24*60*60*1000)); + expires = "; expires=" + date.toUTCString(); + } + document.cookie = name + "=" + (value || "") + expires + "; path=/"; +} +function getCookie(name) { + var nameEQ = name + "="; + var ca = document.cookie.split(';'); + for(var i=0;i < ca.length;i++) { + var c = ca[i]; + while (c.charAt(0)==' ') c = c.substring(1,c.length); + if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); + } + return null; +} + +function getDarkmodeSetting() { + switch(getCookie("darkmode")) { + case "true": + return true; + case "false": + return false; + default: + return null; + } +} + +function setDarkmodeSetting(value) { + if (value) { + setCookie("darkmode", "true", 100); + } else { + setCookie("darkmode", "false", 100); + } +} + +function switchDarkmodeSetting() { + const darkmode = getDarkmodeSetting(); + switch(darkmode) { + case true: + setDarkmodeSetting(false); + break; + case false: + setDarkmodeSetting(true); + break; + default: + setDarkmodeSetting(true); + break; + } +} + + +const check_darkmode = getDarkmodeSetting(); +const darkmode_prefer = window.matchMedia('(prefers-color-scheme: dark)').matches; +if (darkmode_prefer && check_darkmode === null) { + autoDarkMode(); + setDarkmodeSetting(true); +} else if (check_darkmode) { + autoDarkMode(); +} |