diff --git a/includes/Partials/Theme.php b/includes/Partials/Theme.php index 40a0c5d5..d7a82a85 100644 --- a/includes/Partials/Theme.php +++ b/includes/Partials/Theme.php @@ -67,7 +67,7 @@ final class Theme extends Partial { // Script content at 'skins.citizen.scripts.theme/inline.js // @phpcs:ignore Generic.Files.LineLength.TooLong - $this->out->getOutput()->addHeadItem( 'theme-switcher', '' ); + $this->out->getOutput()->addHeadItem( 'theme-switcher', '' ); // Add styles and scripts module if ( $theme === 'auto' ) { diff --git a/resources/skins.citizen.scripts.theme/inline.js b/resources/skins.citizen.scripts.theme/inline.js index 289eb631..1ca0113f 100644 --- a/resources/skins.citizen.scripts.theme/inline.js +++ b/resources/skins.citizen.scripts.theme/inline.js @@ -3,17 +3,30 @@ * Citizen - Inline script used in SkinCitizen.php * * https://starcitizen.tools + * + * Mangle using https://jscompress.com/ */ window.switchTheme = () => { + // Generates an array of prefix-(auto|dark|light) strings + const classNames = (prefix) => { + return ['auto', 'dark', 'light'].map(themeType => { + return prefix + themeType; + }); + } + + const themeToggle = document.getElementById('theme-toggle'); + try { const cookieTheme = document.cookie.match(/skin-citizen-theme=(dark|light|auto)/); const theme = cookieTheme !== null ? cookieTheme.pop() : null; if (theme !== null) { - document.documentElement.classList.remove(...['auto', 'dark', 'light'].map(theme => { - return 'skin-citizen-' + theme; - })); + // First remove all theme classes + document.documentElement.classList.remove(...classNames('skin-citizen-')); + // Then add the right one document.documentElement.classList.add('skin-citizen-' + theme); + themeToggle.classList.remove(...classNames('theme-toggle')) + themeToggle.classList.add('theme-toggle-' + theme); } } catch (e) { } diff --git a/resources/skins.citizen.scripts/themeToggle.js b/resources/skins.citizen.scripts/themeToggle.js index 5daa6fe9..27ad3d41 100644 --- a/resources/skins.citizen.scripts/themeToggle.js +++ b/resources/skins.citizen.scripts/themeToggle.js @@ -2,21 +2,18 @@ function init() { var theme = window.mw.cookie.get( 'skin-citizen-theme' ); var toggleBtn = document.getElementById( 'theme-toggle' ); - // * theme-toggle-light - // * theme-toggle-dark - toggleBtn.classList.add( 'theme-toggle-' + theme ); - toggleBtn.addEventListener( 'click', function ( clickEvent ) { + theme = window.mw.cookie.get( 'skin-citizen-theme' ); + try { theme = theme === 'dark' ? 'light' : 'dark'; - clickEvent.target.classList.remove( 'theme-toggle-light', 'theme-toggle-dark' ); + clickEvent.target.classList.remove( 'theme-toggle-light', 'theme-toggle-dark', 'theme-toggle-auto' ); // * theme-toggle-light // * theme-toggle-dark clickEvent.target.classList.add( 'theme-toggle-' + theme ); try { - window.mw.cookie.set( 'skin-citizen-theme', null ); window.mw.cookie.set( 'skin-citizen-theme', theme ); window.mw.cookie.set( 'skin-citizen-theme-override', '1' ); } catch ( e ) { @@ -26,6 +23,12 @@ function init() { } catch ( e ) { } } ); + + if ( theme !== 'auto' ) { + // * theme-toggle-light + // * theme-toggle-dark + toggleBtn.classList.add( 'theme-toggle-' + theme ); + } } module.exports = {