diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js index aad708c..155c2be 100644 --- a/resources/assets/js/app.js +++ b/resources/assets/js/app.js @@ -68,38 +68,36 @@ $(document).on('input keypress paste keyup', 'input[data-autoalias]', function ( $(function () { // theme switcher without reloading - let themeStyle = document.querySelector('#theme-style'); - const lightURL = themeStyle.getAttribute('light-url'); - const darkURL = themeStyle.getAttribute('dark-url'); - const navbar = document.querySelector('.page-navbar'); - const logo = document.querySelector('#navbar-logo'); + 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.href === lightURL) { + if (themeStyle.attr('href') === lightURL) { newStyle.href = darkURL; - navbar.classList.remove('navbar-light'); - navbar.classList.add('navbar-dark'); - logo.src = logo.getAttribute('src-dark'); + 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.classList.remove('navbar-dark'); - navbar.classList.add('navbar-light'); - logo.src = logo.getAttribute('src-light'); + 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; - newStyle.addEventListener('load', () => { - document.head.removeChild(oldThemeStyle); - }); - document.head.appendChild(newStyle); + themeStyle = $(newStyle); + themeStyle.on('load', () => oldThemeStyle.remove()); + $(document.head).append(themeStyle); }; }); diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 31ff3af..ab5a257 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -18,8 +18,8 @@ rel="stylesheet" id="theme-style" href="{{ dark_mode() ? asset('css/app-dark.css') : asset('css/app.css') }}" - light-url="{{ asset('css/app.css') }}" - dark-url="{{ asset('css/app-dark.css') }}"> + data-light-url="{{ asset('css/app.css') }}" + data-dark-url="{{ asset('css/app-dark.css') }}"> diff --git a/resources/views/layouts/main-nav.blade.php b/resources/views/layouts/main-nav.blade.php index ecf804f..74df2e6 100644 --- a/resources/views/layouts/main-nav.blade.php +++ b/resources/views/layouts/main-nav.blade.php @@ -6,8 +6,8 @@