diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 358a179..1014de4 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -15,6 +15,11 @@ + +{{ if site.Params.darkMode.enable }} + +{{ end }} + {{/* add favicon only if the site author has provided the the favicon */}} {{ if site.Params.logo.favicon }} diff --git a/layouts/partials/navigators/theme-selector.html b/layouts/partials/navigators/theme-selector.html index 51e371c..9d243f4 100644 --- a/layouts/partials/navigators/theme-selector.html +++ b/layouts/partials/navigators/theme-selector.html @@ -1,20 +1,20 @@
  • - - + + -
    - - - - - - - - - +
    + + + + + + + + +
    • \ No newline at end of file diff --git a/static/css/colortheme/colortheme.css b/static/css/colortheme/colortheme.css new file mode 100644 index 0000000..3b8eb1e --- /dev/null +++ b/static/css/colortheme/colortheme.css @@ -0,0 +1,20 @@ +/* Note: No need to invert when the screen is small because the navbar is + collapsed to a hamburger menu. */ +@media only screen and (min-width: 1200px) { + .navbar-icon-svg-dark { + filter: invert(1); + }; +} + +@media only screen and (min-width: 1200px) { + .dropdown-menu-icons-only { + width: 25px; + min-width: 3rem; + } +} + +.menu-icon-center { + display: block; + margin-left: auto; + margin-right: auto; +} \ No newline at end of file diff --git a/static/js/darkmode-darkreader.js b/static/js/darkmode-darkreader.js index 409e30d..3da85ca 100644 --- a/static/js/darkmode-darkreader.js +++ b/static/js/darkmode-darkreader.js @@ -8,27 +8,34 @@ const DARK_OPTIONS = { sepia: 0 }; const SVG_INVERT = {invert: ['img[src$=".svg"]']}; +const NAVBAR_ICON_ID = "navbar-theme-icon-svg"; +const DARK_ICON = "/icons/moon-svgrepo-com.svg"; +const LIGHT_ICON = "/icons/sun-svgrepo-com.svg"; +const SYSTEM_ICON = "/icons/computer-svgrepo-com.svg"; function enableDarkTheme() { localStorage.setItem(COLOR_THEME, DARK); DarkReader.enable(DARK_OPTIONS, SVG_INVERT); + document.getElementById(NAVBAR_ICON_ID).src = DARK_ICON; } function enableLightTheme() { localStorage.setItem(COLOR_THEME, LIGHT); DarkReader.disable(); + document.getElementById(NAVBAR_ICON_ID).src = LIGHT_ICON; } function useSystemTheme() { localStorage.setItem(COLOR_THEME, SYSTEM); DarkReader.auto(DARK_OPTIONS, SVG_INVERT); + document.getElementById(NAVBAR_ICON_ID).src = SYSTEM_ICON; } function initializeColorTheme() { // We're using the themeInitialization attributes as a 'hack' for setting up // the default color scheme because we don't want to complicate this further // by creating custom javascript output in Hugo. - let themeInitialization = document.getElementById("themeInitialization"); + let themeInitialization = document.getElementById("theme-initialization"); let defaultColorScheme = themeInitialization.getAttribute('default-theme'); // If the user has already selected a preferred theme then use that instead // of the default theme. Also, the default theme gets loaded to localStorage diff --git a/static/js/navbar.js b/static/js/navbar.js index 78f8626..0ed7394 100644 --- a/static/js/navbar.js +++ b/static/js/navbar.js @@ -8,6 +8,9 @@ const updateNavBar = () => { $('#navbar-toggler').removeClass('navbar-dark'); $('#navbar-toggler').addClass('navbar-light'); + // color theme selector a.k.a. dark mode + $('#navbar-theme-icon-svg').removeClass('navbar-icon-svg-dark'); + // get the main logo from hidden img tag let mainLogo = document.getElementById("main-logo") if (mainLogo !== null) { @@ -22,6 +25,9 @@ const updateNavBar = () => { $('#navbar-toggler').removeClass('navbar-light'); $('#navbar-toggler').addClass('navbar-dark'); + // color theme selector a.k.a. dark mode + $('#navbar-theme-icon-svg').addClass('navbar-icon-svg-dark'); + // get the inverted logo from hidden img tag let invertedLogo = document.getElementById("inverted-logo") if (invertedLogo !== null) {