Change #1156449 had a related patch set uploaded (by Gerrit Patch Uploader; author: My Name):

[mediawiki/skins/Vector@master] Skin: improve readability of skin-inverted diagrams or formulas in dark/night mode

https://gerrit.wikimedia.org/r/1156449

The patch original depended on T288498 because it used the each() function of lesscss not yet ported to less.php.
It has been rewritten to cope without each().

@Pppery: rechecked https://gerrit.wikimedia.org/r/1156449

@Pppery: rechecked https://gerrit.wikimedia.org/r/1156449

saturate function missed an escape, because it is both, a less function and a CSS filter function

The exception was thrown, because the LESS parser tried to interpret it as a less function call, refer to https://lesscss.org/functions/#color-operations-saturate ; to pass it through the parser as a CSS literal, LESS offers two possibilities:

• https://lesscss.org/functions/#string-functions-e
• https://lesscss.org/#escaping

Thanks for working on the ticket.

Please do not ping me on this ticket. I have my own processes for finding patches needing a recheck and don't find the ping useful.

The acceptance of the dark-mode usability enhancements, specifically rendering of inverted images, does highly benefit from these changes.

Imho, as long as this is unavailable it is a reason for lots of reverts downstream, then claiming that 'dark-mode' is merely a POV (point-of-view) feature, and, at will, pointless.

However, a lot of studies show, that reading experience in the dark / night color model is not only beneficial for sight-impaired readers, but more general for all readers, depending on time-of-day usage.

I do not oppose evaluation, take your time, but please do not schedule this as 'nice to have' or 'low'.

Its a point missing that should have been implemented together with the Vector 2022 (Desktop improvements) by the web team – given the complexity of color models and accessible inversion renderings, I do not claim however, that this would have been an easy-to-spot implementation detail.

Best regards.

The CSS variable name --skin-invert-saturate has been chosen as to be descriptive and
not hinder future additions to the CSS / less code that might need the term saturate in other context.

The abbreviation in inv-saturate-*, instead of spelled out variant skin-invert-saturate-*, has been specifically chosen, because it is expected that this CSS class name may be repeated a lot of times in an individual article, depending on media usage.

Because it is expected to generally be used in combination with CSS class skin-invert-image, there is
no loss on descriptivity (due to that abbreviation). More so, it would not be elegant to read assignments
|class=skin-invert-image skin-invert-saturate-60
or alike in wikitext, when the public API is employed.

The reason to not also abbreviate the CSS variable name itself stems from the wish for the code to be self-documenting and additionally, because the stylesheet itself is loaded once per pageview and thus repetition is less of an issue as when authoring wikitext.

If you find the class names incomprehensive or badly named, then please, go ahead and adjust them. I'm strong about the feature, not specifically on the implementation detail.

Implementation variant

The following is a sketch to eventually discuss. It is an alternative implementation to the one already proposed. Some notable differences are

• more generic solution at the expense of code readability
• employs 'contains' variant (*=) of the CSS3 Substring Matching Attribute Selectors, instead of .class selector
  • (may need benchmarking to check if performance is in the same class)
• compound class name – in wikitext one class name only, instead of two, toggles the skin-invert features, example:
  • |class=skin-invert-image-saturate-60 vs |class=skin-invert-image inv-saturate-60

lesscss code (with omissions):

html.skin-theme-clientpref-os {
  [class*="skin-invert-image"] img,
  [class*="skin-invert"] {
    color-scheme: light;
    filter: invert( 1 ) hue-rotate( 180deg ) e( 'saturate(var(--saturate, 100%))' );
  }
}

.saturate-classes( os );

@values: 0, 1, 10, 20, 30, 60, 90, 120;
.loop( @pref, @i ) when ( @i > 0 ) {
	@v: extract( @values, @i );
	html.skin-theme-clientpref-@{pref} [class*="-saturate-@{v}"] {
		--saturate: @v;
	}
	.loop( @pref, @i - 1 );
}
.saturate-classes( @pref ) {
	.loop( @pref, length( @values ) );
}

CSS result (with omissions):

html.skin-theme-clientpref-os [class*="skin-invert-image"] img,
html.skin-theme-clientpref-os [class*="skin-invert"] {
  color-scheme: light;
  filter: invert(1) hue-rotate(180deg) saturate(var(--saturate, 100%));
}
html.skin-theme-clientpref-os [class*="-saturate-120"] {
  --saturate: 120;
}
/* output omitted .. */
html.skin-theme-clientpref-os [class*="-saturate-60"] {
  --saturate: 60;
}
/* output omitted .. */

Without exploding the ruleset for every possible combination, this were to match a range of CSS class names to be used in wikitext as follows

• either skin-invert or skin-invert-image as prefix and
• one of -saturate-0, -saturate-1, etc. as suffix

This implementation variant does not strictly bind the term saturate to context, in contrast to the earlier implementation. In consequence [class*="-saturate-@{v}"] and the CSS variable name --saturate may later on be reusable in combination with other class name sets, targeting different features. In its simplest form e. g.

[class*="skin-saturate-"] {
  filter: saturate(var(--saturate, 100%));
}

Caveats:
This extensibility may be desirable, or not. If it is favorable, then as a precondition, it should be checked whether multiple assignments to --saturate may occur from a /use case perspective/. For example, |class=skin-invert-image-saturate-60 skin-saturate-10 would assign to the variable twice, but all backing rules will read the same one value. Thus, the design decision assumes that there are no use cases for this in practice. (Otherwise the variable name should be safe-guarded with additional chars and specifically pair with a feature prefix, as in the original implementation.)

For the following reasons the original implementation is preferable, imho:

• more specific naming, less potential naming conflicts
• conventional CSS class names (may perform better than substring matching (neglectable?) )
• easier code readability (spelled out class names vs prefix / suffix matching strategy)
• more minimal change, less experimental
• may still borrow from the concepts above by refactoring the code to be more generic at a later time

Since the monolithic (compound) class name may be favorable to offer in the public API, for example it disallows fragmentation shown in the discouraged Example4 above, find the full patch below regardless. There may still be a better way to implement it, but it adds to the pool of ideas to draw from.

Full patch for this implementation variant:

diff
diff --git a/resources/skins.vector.styles/CSSCustomProperties.less b/resources/skins.vector.styles/CSSCustomProperties.less
index 15facde0..fa375cf4 100644
--- a/resources/skins.vector.styles/CSSCustomProperties.less
+++ b/resources/skins.vector.styles/CSSCustomProperties.less
@@ -44,13 +44,16 @@
 	 * - T365102 invert class specifically for image related element
 	 * - T365764 special treatment of inverted OOUI icons
 	 */
-	html.skin-theme-clientpref-night .skin-invert-image img,
-	html.skin-theme-clientpref-night .skin-invert,
-	html.skin-theme-clientpref-night @{OOUIIconSelectors},
-	html.skin-theme-clientpref-night @{OOUIIndicatorSelectors} {
-		color-scheme: light;
-		filter: invert( 1 ) hue-rotate( 180deg );
+	html.skin-theme-clientpref-night {
+		[class*="skin-invert-image"] img,
+		[class*="skin-invert"],
+		@{OOUIIconSelectors},
+		@{OOUIIndicatorSelectors} {
+			color-scheme: light;
+			filter: invert( 1 ) hue-rotate( 180deg ) e( 'saturate(var(--saturate, 100%))' );
+		}
 	}
+	.saturate-classes( night );
 
 	/**
 	 * Forced light mode.
@@ -139,11 +142,31 @@
 	}
 
 	// T365102 invert class specifically for image related elements
-	html.skin-theme-clientpref-os .skin-invert-image img,
-	html.skin-theme-clientpref-os .skin-invert,
-	html.skin-theme-clientpref-os @{OOUIIconSelectors},
-	html.skin-theme-clientpref-os @{OOUIIndicatorSelectors} {
-		color-scheme: light;
-		filter: invert( 1 ) hue-rotate( 180deg );
+	html.skin-theme-clientpref-os {
+		[class*="skin-invert-image"] img,
+		[class*="skin-invert"],
+		@{OOUIIconSelectors},
+		@{OOUIIndicatorSelectors} {
+			color-scheme: light;
+			filter: invert( 1 ) hue-rotate( 180deg ) e( 'saturate(var(--saturate, 100%))' );
+		}
 	}
+	.saturate-classes( os );
+}
+
+/**
+ * Intensity defining rule set for a saturation filter optionally
+ * applied at the end of a skin-invert-* filter chain
+ *
+ */
+@values: 0, 1, 10, 20, 30, 60, 90, 120;
+.loop( @pref, @i ) when ( @i > 0 ) {
+	@v: extract( @values, @i );
+	html.skin-theme-clientpref-@{pref} [class*="-saturate-@{v}"] {
+		--saturate: @v;
+	}
+	.loop( @pref, @i - 1 );
+}
+.saturate-classes( @pref ) {
+	.loop( @pref, length( @values ) );
 }

Change #1156449 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] Skin: improve readability of skin-inverted diagrams or formulas in dark/night mode

Reason:

Needs further discussion.

https://gerrit.wikimedia.org/r/1156449