Template:Parameter/styles.css

/* {{subst:template for discussion|help=off}} *//*----------------------------< U N D A R K   M O D E   C O L O R S >-------------------------------

Colors for undark mode are those used by [[mw:Extension:SyntaxHighlight]] except for para-red and 
para-green which were originally intended to be the colors used by {{mxt}} and {{!mxt}}.

Colors for <code>|color=red</code> and <code>|color=green</code> chosen from 
[[Web_colors#Extended_colors|named colors]] and evaluated using 
[https://snook.ca/technical/colour_contrast/colour.html snook's color contrast checker] 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 [[mw:Extension: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 <code>|color=red</code> and <code>|color=green</code> chosen from 
[[Web_colors#Extended_colors|named colors]] and evaluated using 
[https://snook.ca/technical/colour_contrast/colour.html snook's color contrast checker] 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 
[[mw:Extension:SyntaxHighlight]] because to do so breaks [[mw:Extension:SyntaxHighlight]] renderings 
when in dark mode.  Perhaps when [[mw:Extension: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 span.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;
    }
}