diff --git a/resources/mixins.less b/resources/mixins.less
index 6d30fda19..f6bf3b49c 100644
--- a/resources/mixins.less
+++ b/resources/mixins.less
@@ -111,6 +111,22 @@
 	}
 }
 
+.mixin-citizen-css-theme-clientpref-all( @prop, @value ) {
+	@{prop}: @value;
+
+	@media screen {
+		html.skin-theme-clientpref-night & {
+			@{prop}: @value;
+		}
+	}
+
+	@media screen and ( prefers-color-scheme: dark ) {
+		html.skin-theme-clientpref-os & {
+			@{prop}: @value;
+		}
+	}
+}
+
 // Transform black into given color
 // From https://stackoverflow.com/a/73390109/10624167
 .recolor(@color ) {
diff --git a/skin.json b/skin.json
index 13537831f..f033f7c1e 100644
--- a/skin.json
+++ b/skin.json
@@ -411,8 +411,9 @@
 			"+ext.codeEditor.ace": "skinStyles/extensions/CodeEditor/ext.codeEditor.ace.less",
 			"+jquery.codeEditor": "skinStyles/extensions/CodeEditor/jquery.codeEditor.less",
 			"+ext.CodeMirror.lib": "skinStyles/extensions/CodeMirror/ext.CodeMirror.lib.less",
-			"+ext.CodeMirror.mode.mediawiki": "skinStyles/extensions/CodeMirror/ext.CodeMirror.mode.mediawiki.less",
+			"+ext.CodeMirror.mode.mediawiki": "skinStyles/extensions/CodeMirror/codemirror.mediawiki.less",
 			"+ext.CodeMirror.v6": "skinStyles/extensions/CodeMirror/ext.CodeMirror.v6.less",
+			"+ext.CodeMirror.v6.mode.mediawiki": "skinStyles/extensions/CodeMirror/codemirror.mediawiki.less",
 			"+ext.CodeMirror.v6.visualEditor": "skinStyles/extensions/CodeMirror/ext.CodeMirror.v6.visualEditor.less",
 			"+ext.CodeMirror.v6.WikiEditor": "skinStyles/extensions/CodeMirror/ext.CodeMirror.v6.WikiEditor.less",
 			"+ext.CodeMirror.visualEditor": "skinStyles/extensions/CodeMirror/ext.CodeMirror.visualEditor.less",
diff --git a/skinStyles/extensions/CodeMirror/codemirror.mediawiki.less b/skinStyles/extensions/CodeMirror/codemirror.mediawiki.less
new file mode 100644
index 000000000..8e2075980
--- /dev/null
+++ b/skinStyles/extensions/CodeMirror/codemirror.mediawiki.less
@@ -0,0 +1,184 @@
+/*
+ * Citizen
+ *
+ * SkinStyles for Extension:CodeMirror
+ * Module: ext.CodeMirror.mode.mediawiki, ext.CodeMirror.v6.mode.mediawiki
+ * Version: REL1_43
+*/
+
+@import '../../../resources/mixins.less';
+
+.cm-mw {
+	&-matching {
+		background-color: var( --color-syntax-yellow );
+	}
+
+	&-skipformatting {
+		background-color: var( --color-syntax-cyan );
+	}
+
+	&-doubleUnderscore,
+	&-double-underscore,
+	&-signature,
+	&-hr {
+		.mixin-citizen-css-theme-clientpref-all( color, var( --color-syntax-purple ) );
+		background-color: transparent;
+	}
+
+	&-list,
+	&-indenting {
+		.mixin-citizen-css-theme-clientpref-all( color, var( --color-syntax-cyan ) );
+	}
+
+	&-mnemonic,
+	&-html-entity {
+		.mixin-citizen-css-theme-clientpref-all( color, var( --color-syntax-green ) );
+	}
+
+	&-comment {
+		.mixin-citizen-css-theme-clientpref-all( color, var( --color-syntax-grey ) );
+	}
+
+	&-apostrophes-bold,
+	&-apostrophes-italic {
+		.mixin-citizen-css-theme-clientpref-all( color, var( --color-syntax-cyan ) );
+	}
+
+	&-section {
+		&-1,
+		&-2,
+		&-3,
+		&-4,
+		&-5,
+		&-6 {
+			span:not( .cm-mw-section-header ) {
+				.mixin-citizen-css-theme-clientpref-all( color, var( --color-emphasized ) );
+			}
+		}
+	}
+
+	&-section-header {
+		.mixin-citizen-css-theme-clientpref-all( color, var( --color-syntax-cyan ) );
+	}
+
+	&-template,
+	&-templatevariable,
+	&-parserfunction {
+		.mixin-citizen-css-theme-clientpref-all( color, var( --color-emphasized ) );
+
+		&-name {
+			font-weight: var( --font-weight-normal );
+			.mixin-citizen-css-theme-clientpref-all( color, var( --color-syntax-blue ) );
+		}
+
+		&-delimiter {
+			font-weight: var( --font-weight-normal );
+			.mixin-citizen-css-theme-clientpref-all( color, var( --color-syntax-cyan ) );
+		}
+
+		&-bracket {
+			font-weight: var( --font-weight-normal );
+			.mixin-citizen-css-theme-clientpref-all( color, var( --color-syntax-purple ) );
+		}
+	}
+
+	&-template {
+		&-name-mnemonic {
+			font-weight: var( --font-weight-normal );
+			.mixin-citizen-css-theme-clientpref-all( color, var( --color-syntax-blue ) );
+		}
+
+		&-argument-name {
+			font-weight: var( --font-weight-normal );
+			.mixin-citizen-css-theme-clientpref-all( color, var( --color-syntax-red ) );
+		}
+	}
+
+	&-exttag,
+	&-htmltag {
+		&-name {
+			font-weight: var( --font-weight-normal );
+			.mixin-citizen-css-theme-clientpref-all( color, var( --color-syntax-red ) );
+		}
+
+		&-bracket {
+			.mixin-citizen-css-theme-clientpref-all( color, var( --color-syntax-cyan ) );
+		}
+
+		&-attribute {
+			.mixin-citizen-css-theme-clientpref-all( color, var( --color-syntax-yellow ) );
+		}
+	}
+
+	&-link {
+		.mixin-citizen-css-theme-clientpref-all( color, var( --color-progressive ) );
+
+		&-pagename {
+			.mixin-citizen-css-theme-clientpref-all( color, var( --color-progressive ) );
+		}
+
+		&-tosection {
+			.mixin-citizen-css-theme-clientpref-all( color, var( --color-progressive--hover ) );
+		}
+
+		&-text {
+			.mixin-citizen-css-theme-clientpref-all( color, var( --color-syntax-green ) );
+		}
+
+		&-bracket {
+			.mixin-citizen-css-theme-clientpref-all( color, var( --color-progressive ) );
+		}
+
+		&-delimiter {
+			.mixin-citizen-css-theme-clientpref-all( color, var( --color-syntax-cyan ) );
+		}
+
+		&-ground {
+			background-color: var( --background-color-progressive-subtle );
+		}
+	}
+
+	&-extlink,
+	&-free-extlink {
+		.mixin-citizen-css-theme-clientpref-all( color, var( --color-progressive ) );
+
+		&-protocol {
+			font-weight: var( --font-weight-normal );
+			.mixin-citizen-css-theme-clientpref-all( color, var( --color-syntax-orange ) );
+		}
+
+		&-text {
+			.mixin-citizen-css-theme-clientpref-all( color, var( --color-syntax-green ) );
+		}
+
+		&-bracket {
+			font-weight: var( --font-weight-normal );
+			.mixin-citizen-css-theme-clientpref-all( color, var( --color-progressive ) );
+		}
+
+		&-ground {
+			background-color: var( --background-color-progressive-subtle );
+		}
+	}
+
+	&-table {
+		&-bracket {
+			font-weight: var( --font-weight-normal );
+			.mixin-citizen-css-theme-clientpref-all( color, var( --color-syntax-pink ) );
+		}
+
+		&-delimiter {
+			font-weight: var( --font-weight-normal );
+			.mixin-citizen-css-theme-clientpref-all( color, var( --color-syntax-cyan ) );
+		}
+
+		&-definition {
+			.mixin-citizen-css-theme-clientpref-all( color, var( --color-syntax-yellow ) );
+		}
+
+		&-caption {
+			font-weight: var( --font-weight-normal );
+			.mixin-citizen-css-theme-clientpref-all( color, var( --color-emphasized ) );
+		}
+	}
+}
diff --git a/skinStyles/extensions/CodeMirror/ext.CodeMirror.mode.mediawiki.less b/skinStyles/extensions/CodeMirror/ext.CodeMirror.mode.mediawiki.less
deleted file mode 100644
index dd4ba13bc..000000000
--- a/skinStyles/extensions/CodeMirror/ext.CodeMirror.mode.mediawiki.less
+++ /dev/null
@@ -1,185 +0,0 @@
-/*
- * Citizen
- *
- * SkinStyles for Extension:CodeMirror
- * Module: ext.CodeMirror.mode.mediawiki
- * Version: REL1_35 a326407
- *
- * Date: 2021-08-25
-*/
-
-.cm-mw {
-	&-matching {
-		background-color: var( --color-syntax-yellow );
-	}
-
-	&-skipformatting {
-		background-color: var( --color-syntax-cyan );
-	}
-
-	&-list {
-		color: var( --color-syntax-cyan );
-	}
-
-	&-doubleUnderscore,
-	&-signature,
-	&-hr {
-		color: var( --color-syntax-purple );
-		background-color: transparent;
-	}
-
-	&-indenting {
-		color: var( --color-syntax-cyan );
-	}
-
-	&-mnemonic {
-		color: var( --color-syntax-green );
-	}
-
-	&-comment {
-		color: var( --color-syntax-grey );
-	}
-
-	&-apostrophes-bold,
-	&-apostrophes-italic {
-		color: var( --color-syntax-cyan );
-	}
-
-	&-section {
-		&-1,
-		&-2,
-		&-3,
-		&-4,
-		&-5,
-		&-6 {
-			span:not( .cm-mw-section-header ) {
-				color: var( --color-emphasized );
-			}
-		}
-	}
-
-	&-section-header {
-		color: var( --color-syntax-cyan );
-	}
-
-	&-template,
-	&-templatevariable,
-	&-parserfunction {
-		color: var( --color-emphasized );
-
-		&-name {
-			font-weight: var( --font-weight-normal );
-			color: var( --color-syntax-blue );
-		}
-
-		&-delimiter {
-			font-weight: var( --font-weight-normal );
-			color: var( --color-syntax-cyan );
-		}
-
-		&-bracket {
-			font-weight: var( --font-weight-normal );
-			color: var( --color-syntax-purple );
-		}
-	}
-
-	&-template {
-		&-name-mnemonic {
-			font-weight: var( --font-weight-normal );
-			color: var( --color-syntax-blue );
-		}
-
-		&-argument-name {
-			font-weight: var( --font-weight-normal );
-			color: var( --color-syntax-red );
-		}
-	}
-
-	&-exttag,
-	&-htmltag {
-		&-name {
-			font-weight: var( --font-weight-normal );
-			color: var( --color-syntax-red );
-		}
-
-		&-bracket {
-			color: var( --color-syntax-cyan );
-		}
-
-		&-attribute {
-			color: var( --color-syntax-yellow );
-		}
-	}
-
-	&-link {
-		color: var( --color-progressive );
-
-		&-pagename {
-			color: var( --color-progressive );
-		}
-
-		&-tosection {
-			color: var( --color-progressive--hover );
-		}
-
-		&-text {
-			color: var( --color-syntax-green );
-		}
-
-		&-bracket {
-			color: var( --color-progressive );
-		}
-
-		&-delimiter {
-			color: var( --color-syntax-cyan );
-		}
-
-		&-ground {
-			background-color: var( --background-color-progressive-subtle );
-		}
-	}
-
-	&-extlink,
-	&-free-extlink {
-		color: var( --color-progressive );
-
-		&-protocol {
-			font-weight: var( --font-weight-normal );
-			color: var( --color-syntax-orange );
-		}
-
-		&-text {
-			color: var( --color-syntax-green );
-		}
-
-		&-bracket {
-			font-weight: var( --font-weight-normal );
-			color: var( --color-progressive );
-		}
-
-		&-ground {
-			background-color: var( --background-color-progressive-subtle );
-		}
-	}
-
-	&-table {
-		&-bracket {
-			font-weight: var( --font-weight-normal );
-			color: var( --color-syntax-pink );
-		}
-
-		&-delimiter {
-			font-weight: var( --font-weight-normal );
-			color: var( --color-syntax-cyan );
-		}
-
-		&-definition {
-			color: var( --color-syntax-yellow );
-		}
-
-		&-caption {
-			font-weight: var( --font-weight-normal );
-			color: var( --color-emphasized );
-		}
-	}
-}