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 = {