feature: Make color scheme configurable

i18n/de.json

@@ -8,5 +8,10 @@
 	"skinname-citizen": "Citizen",
 	"citizen-skin-desc": "Ein responsive Skin entwickelt für das Star Citizen Wiki",
 	"citizen-footer-desc": "Bearbeiten Sie diesen Text auf MediaWiki:Citizen-footer-desc",
-	"citizen-footer-tagline": "Bearbeiten Sie diesen Text auf MediaWiki:Citizen-footer-tagline"
+	"citizen-footer-tagline": "Bearbeiten Sie diesen Text auf MediaWiki:Citizen-footer-tagline",
+
+	"citizen-upo-style": "Skin Citizen Farbschema",
+	"citizen-upo-style-auto": "Automatisch",
+	"citizen-upo-style-light": "Hell",
+	"citizen-upo-style-dark":  "Dunkel"
 }

i18n/en.json

@@ -17,5 +17,10 @@
 	"citizen-footer-desc": "Edit this text on MediaWiki:Citizen-footer-desc",
 	"citizen-footer-tagline": "Edit this text on MediaWiki:Citizen-footer-tagline",
 
-	"citizen-search-fulltext": "Search pages containing"
+	"citizen-search-fulltext": "Search pages containing",
+
+	"citizen-upo-style": "Skin Citizen Color Scheme",
+	"citizen-upo-style-auto": "Auto",
+	"citizen-upo-style-light": "Light",
+	"citizen-upo-style-dark":  "Dark"
 }

i18n/qqq.json

@@ -14,5 +14,10 @@
 	"citizen-search-toggle": "Tooltip of search box toggle",
 	"citizen-footer-desc": "Edit this text on MediaWiki:Citizen-footer-desc",
 	"citizen-footer-tagline": "Edit this text on MediaWiki:Citizen-footer-tagline",
-	"citizen-search-fulltext": "Fulltext search suggestion"
+	"citizen-search-fulltext": "Fulltext search suggestion",
+
+	"citizen-upo-style": "Skin Citizen Color Scheme",
+	"citizen-upo-style-auto": "Auto",
+	"citizen-upo-style-light": "Light",
+	"citizen-upo-style-dark":  "Dark"
 }

includes/CitizenHooks.php

@@ -27,6 +27,7 @@ use MediaWiki\MediaWikiServices;
 use RequestContext;
 use ResourceLoaderContext;
 use ThumbnailImage;
+use User;
 
 /**
  * Hook handlers for Citizen skin.
@@ -144,4 +145,31 @@ class CitizenHooks {
 	private static function getSkinConfig( $name ) {
 		return MediaWikiServices::getInstance()->getConfigFactory()->makeConfig( 'Citizen' )->get( $name );
 	}
+
+    /**
+     * @param User $user
+     * @param array $preferences
+     */
+    public static function onGetPreferences( $user, &$preferences ) {
+        $options = MediaWikiServices::getInstance()
+            ->getUserOptionsLookup()
+            ->getOptions( $user );
+
+        if ( $options['skin'] !== 'citizen' ) {
+            return;
+        }
+
+        // A checkbox
+        $preferences['citizen-color-scheme'] = [
+            'type' => 'select',
+            'label-message' => 'citizen-upo-style', // a system message
+            'section' => 'rendering/skin',
+            'options' => [
+                wfMessage( 'citizen-upo-style-auto' )->escaped() => 'auto',
+                wfMessage( 'citizen-upo-style-light' )->escaped() => 'light',
+                wfMessage( 'citizen-upo-style-dark' )->escaped() => 'dark',
+            ],
+            'default' => $options['citizen-color-scheme'] ?? 'auto'
+        ];
+    }
 }

includes/SkinCitizen.php

@@ -113,6 +113,8 @@ class SkinCitizen extends SkinMustache {
 		// Feature policy
 		$skin->addFeaturePolicy();
 
+		$this->setSkinColorScheme( $out, $options );
+
 		$options['templateDirectory'] = __DIR__ . '/templates';
 		parent::__construct( $options );
 	}
@@ -738,4 +740,26 @@ class SkinCitizen extends SkinMustache {
 				$featurePolicy ) );
 		}
 	}
+
+	private function setSkinColorScheme( OutputPage $out, array &$skinOptions ) {
+        $options = MediaWikiServices::getInstance()
+            ->getUserOptionsLookup()
+            ->getOptions( $this->getUser() );
+
+        $skinStyle = $this->getConfigValue( 'ColorScheme' );
+
+        $setDarkClass = $skinStyle === 'dark' || $options['citizen-color-scheme'] === 'dark';
+        $setLightClass = $skinStyle === 'light' || $options['citizen-color-scheme'] === 'light';
+
+        if ( $setDarkClass ) {
+            $out->addHtmlClasses( 'skin-citizen-dark' );
+        } elseif ($setLightClass) {
+            $out->addHtmlClasses( 'skin-citizen-light' );
+        } else {
+            $skinOptions['scripts'] = array_merge(
+                $skinOptions['scripts'],
+                [ 'skins.citizen.scripts.theme-switcher' ]
+            );
+        }
+    }
 }

resources/skins.citizen.scripts.theme-switcher/theme-switcher.js

@@ -0,0 +1,49 @@
+/*
+ * Citizen - Theme Switcher JS
+ * https://starcitizen.tools
+ */
+
+(() => {
+    if (typeof window.mw === 'undefined') {
+        return;
+    }
+
+    const isGlobalAutoSet = window.mw.config.get('wgCitizenColorScheme') === 'auto' || window.mw.config.get('wgCitizenColorScheme') === null;
+
+    const isUserPreferenceAuto = window.mw.user.options.get('citizen-color-scheme') === 'auto';
+
+    const enable = isGlobalAutoSet || isUserPreferenceAuto;
+
+    if (!enable) {
+        return;
+    }
+
+    const switchColorScheme = (useDark) => {
+        let dark;
+        
+        if (useDark) {
+            document.documentElement.classList.add('skin-citizen-dark');
+            document.documentElement.classList.remove('skin-citizen-light');
+            dark = true
+        } else {
+            document.documentElement.classList.add('skin-citizen-light');
+            document.documentElement.classList.remove('skin-citizen-dark');
+            dark = false
+        }
+
+        try {
+            localStorage.setItem('skin-citizen-dark', dark);
+        } catch (e) {}
+    };
+
+    let useDarkTheme;
+    try {
+        useDarkTheme = localStorage.getItem('skin-citizen-dark');
+    } catch (e) {}
+
+    const prefersColorSchemeDarkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    if (useDarkTheme || prefersColorSchemeDarkQuery.matches) {
+        switchColorScheme(true)
+    }
+})();

skin.json

@@ -66,7 +66,8 @@
 	"Hooks": {
 		"ResourceLoaderGetConfigVars": "Citizen\\CitizenHooks::onResourceLoaderGetConfigVars",
 		"SkinPageReadyConfig": "Citizen\\CitizenHooks::onSkinPageReadyConfig",
-		"ThumbnailBeforeProduceHTML": "Citizen\\CitizenHooks::onThumbnailBeforeProduceHTML"
+		"ThumbnailBeforeProduceHTML": "Citizen\\CitizenHooks::onThumbnailBeforeProduceHTML",
+		"GetPreferences": "Citizen\\CitizenHooks::onGetPreferences"
 	},
 	"ResourceModules": {
 		"skins.citizen.styles": {
@@ -133,6 +134,14 @@
 				"citizen-search-fulltext"
 			]
 		},
+		"skins.citizen.scripts.theme-switcher": {
+			"scripts": [
+				"resources/skins.citizen.scripts.theme-switcher/theme-switcher.js"
+			],
+			"dependencies": [
+				"mediawiki.api"
+			]
+		},
 		"skins.citizen.scripts.toc": {
 			"scripts": [
 				"resources/skins.citizen.scripts.toc/skins.citizen.scripts.toc.js"
@@ -542,6 +551,12 @@
 			"description": "Enable or disable image lazyloading",
 			"descriptionmsg": "citizen-config-enablelazyload",
 			"public": true
+		},
+		"ColorScheme": {
+			"value": "auto",
+			"description": "Skin style to use. Valid values are 'light', 'dark' and 'auto'.",
+			"descriptionmsg": "citizen-config-skinstyle",
+			"public": true
 		}
 	},
 	"manifest_version": 2