fix(CodeMirror): 🐛 override default dark mode color

Citizen defines its own highlight color already. Closes: #1001
StarCitizenTools · Jan 23, 2025 · 32e78ff · 32e78ff
1 parent c91135d
commit 32e78ff
Show file tree

Hide file tree

Showing 4 changed files with 202 additions and 186 deletions.
diff --git 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
@@ -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
@@ -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 ) );
+		}
+	}
+}