diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js index ebc08c1..42584bc 100644 --- a/resources/assets/js/app.js +++ b/resources/assets/js/app.js @@ -4,6 +4,7 @@ require('./base-setup') require('./modules/block-collapse') require('./modules/flash-messages') require('./modules/form-autoalias') +require('./modules/dark-mode') require('./vue-init') $(function () { diff --git a/resources/assets/js/modules/dark-mode.js b/resources/assets/js/modules/dark-mode.js new file mode 100644 index 0000000..d955b00 --- /dev/null +++ b/resources/assets/js/modules/dark-mode.js @@ -0,0 +1,35 @@ +$(function () { + // theme switcher without reloading + + let themeStyle = $('#theme-style'); + const lightURL = themeStyle.data('light-url'); + const darkURL = themeStyle.data('dark-url'); + const navbar = $('.page-navbar'); + const logo = $('#navbar-logo'); + + window.toggleDarkMode = function () { + let newStyle = document.createElement('link'); + newStyle.rel = 'stylesheet'; + if (themeStyle.attr('href') === lightURL) { + newStyle.href = darkURL; + navbar.removeClass('navbar-light'); + navbar.addClass('navbar-dark'); + logo.attr('src', logo.data('src-dark')); + + document.cookie = "dark_mode=1"; + } else { + newStyle.href = lightURL; + navbar.removeClass('navbar-dark'); + navbar.addClass('navbar-light'); + logo.attr('src', logo.data('src-light')); + + document.cookie = "dark_mode=0;expires=" + new Date().toUTCString(); + } + + // remove old css after new css has loaded to prevent FOUC + let oldThemeStyle = themeStyle; + themeStyle = $(newStyle); + themeStyle.on('load', () => oldThemeStyle.remove()); + $(document.head).append(themeStyle); + }; +});