Template:Para/styles.css

/*----------------------------< U N D A R K   M O D E   C O L O R S >------------------------------------------

colors for undark mode are those used by <syntaxhighlight> .. </syntaxhighlight> except for para-red and para-green
which were originally intended to be the colors used by {{mxt}} and {{!mxt}}.

colors for |color=red and |color=green chosen from named colors ([[Web_colors#Extended_colors]]) and evaluated
using snook's color contrast checker (https://snook.ca/technical/colour_contrast/colour.html) to be WCAG 2 AAA
compliant against a background color of #f8f9fa.

syntaxhighlight colors were also evaluated using the same tool; see comments below.

{{para}} cannot use the classes defined for <syntaxhighlight>.  See discussion under 'dark mode colors'.

*/

																				/* minerva only; set undark-mode background-color to match syntaxhighlight */
body.skin-minerva .para-code {background-color:#f8f8f8}							/* minerva does not set background-color for <code> tag */

.para-red {color:DarkRed}
.para-green {color:DarkGreen}
.para-syn {color:#767600}														/* syntaxhighlight color; not WCAG 2 AAA compliant */
.para-pipe, .para-value {color:#333}											/* syntaxhighlight color */
.para-assign {color:#666}														/* syntaxhighlight color; not WCAG 2 AAA compliant */
.para-plain {
	border: none;
	background-color: inherit;
}


/*----------------------------< D A R K   M O D E   C O L O R S >----------------------------------------------

colors for dark mode cannot be the same as for undark mode.  colors here chosen from named colors
([[Web_colors#Extended_colors]]) and evaluated using snook's color contrast checker
(https://snook.ca/technical/colour_contrast/colour.html) to be WCAG 2 AAA compliant against a background color
of #202122.

At the time of this writing, 2024-09-13, {{para}} cannot use the classes defined for <syntaxhighlight> because
to do so breaks <syntaxhighlight> renderings when in dark mode.  Perhaps when <syntaxhighlight> is updated to
support dark mode ... See phabricator https://phabricator.wikimedia.org/T365926 and https://phabricator.wikimedia.org/T285859

*/

@media screen {
	html.skin-theme-clientpref-night body.skin-minerva .para-code {				/* minerva does not set background-color for <code> tag so we must override our setting */
		background-color: var(--background-color-notice-subtle, #202122)
	}

    html.skin-theme-clientpref-night span.para-red {color:LightPink}
    html.skin-theme-clientpref-night span.para-green {color:PaleGreen}			/* color difference slightly under spec (496, should be >=500) */
	html.skin-theme-clientpref-night span.para-syn {color:Khaki}

	html.skin-theme-clientpref-night span.para-pipe,
	html.skin-theme-clientpref-night span.para-value
		{color:LightGray}

	html.skin-theme-clientpref-night span.para-assign {color:Gainsboro}
    html.skin-theme-clientpref-night span.para-plain {
		border: none;
		background-color: var(--background-color-neutral-subtle, #f8f9fa);
		color:Gainsboro;
    }
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os body.skin-minerva .para-code  {				/* minerva does not set background-color for <code> tag so we must override our setting */
		background-color: var(--background-color-notice-subtle, #202122)
	}

	html.skin-theme-clientpref-os span.para-red {color:LightPink}
    html.skin-theme-clientpref-os span.para-green {color:PaleGreen}				/* color difference slightly under spec (496, should be >=500) */
    html.skin-theme-clientpref-os span.para-syn {color:Khaki}

    html.skin-theme-clientpref-os span.para-pipe,
    html.skin-theme-clientpref-os spa.para-value
    	{color:LightGray}

    html.skin-theme-clientpref-os span.para-assign {color:Gainsboro}
    html.skin-theme-clientpref-os span.para-plain {
		border: none;
		background-color: var(--background-color-neutral-subtle, #f8f9fa);
		color:Gainsboro;
    }
}