Dark mode

[CatalinFrancu]

Because one can never have enough glitter! See for example Duck Duck Go, which obeys the browser's dark mode setting.

See prefers-color-scheme.

[CatalinFrancu]

We decided to put this on hold until Bootstrap adds support for this (likely in v6).

Without it we cannot, for example, do this:

:root {
  --link-color: blue;
}

@media (prefers-color-scheme: dark) {
  :root {
    --link-color: red;
  }
}

$link-color: var(--link-color);

because then $link-hover-color tries to call a function on a not-yet-defined color:

Error: argument `$color` of `darken($color, $amount)` must be a color
        on line 178:43 of www/scss/third-party/bootstrap/_variables.scss, in function `darken`
        from line 178:43 of www/scss/third-party/bootstrap/_variables.scss
        from line 9:9 of www/scss/third-party/bootstrap/bootstrap.scss
        from line 53:9 of www/scss/main.scss
>> $link-hover-color:                        darken($link-color, 15%) !default;

[sandriu]

Here's the list of colours used in the UI and their assignment per components, in light theme and dark theme (WIP). See Google Material Design Color system for terminology.

Comparison between Light and dark theme.pdf

BELOW tables are updated.

Light theme:

type of colour	HEX value	known as	used on these components	observations
primary	#232429	"earthy black", custom	hero section, global nav menu	used only on big main areas
secondary	#0d6efd	blue, 'Bootstrap primary button'	background colour for primary buttons, outline colour for secondary buttons, links, some icons	used only on action areas
primary variant	#495057	lighter "earthy black"	headings, body text
secondary variant	#4d87ff	lighter blue, based on 'Bootstrap primary button'	not currently used	this value SHOULD replace the default blue for tags (#1e83c2)
background	#FFFFFF	white	background colour for all pages
surface	#FFFFFF	white	background colour for statements cards, dashboard cards	in case we add some depth for these cards, then the surface colour will change
error	#F8D7DA	light red, "Bootstrap danger alert"	background for error messages
on primary	#f3e6d7	butter (custom), aka "pinky beige"	text on global nav menu, headings placed on 'earthy black' areas
on secondary	#FFFFFF	white	text on 'Bootstrap primary buttons'
on background	#495057	lighter "earthy black"	??
on surface	#495057	lighter "earthy black"	??
on error	#721c24	red, "Bootstrap danger alert"	text on error areas	not used?
alternative grey	#eee	light grey	"no verdict" card
alternative darker grey	#aaa	medium grey	"undecidable" verdict card
alternative red	#d90404	red	"false" verdict card
alternative red-yellow	gradient from #d90404 to #ffeb3b	gradient	"in general false" verdict card
alternative yelow	#ffeb3b	yellow	"mixt" verdict card
alternative green-yellow	gradient from #37700a to #ffeb3b	gradient	"in general true" verdict card
alternative green	#37700a	green	"true" verdict card

Dark theme:

type of colour	HEX value	known as	used on these components	observations
background	#232429	"earthy black", custom	background for all pages, INCLUDING hero section	'earthy black' is NOT the primary colour anymore (as in Light theme)
surface	#303035	lighter "earthy black"	not used yet	SHOULD be used on global nav menu
primary	#599AFD	desaturated blue, derived from 'Bootstrap primary button'	not used yet	this colour MUST REPLACE the current blue (#0d6efd) used for links, for example, because that colour fails WCAG AA standard for accessibility
secondary	#C9BCAE	desaturated 'butter', aka medium beige	not used yet	should be used on secondary buttons
primary variant	#4273BD	darker primary	not used yet	ok with WCAG AA when used with WHITE text
secondary variant	#8A8178	darker secondary	not used yet	ok with WCAG AA when used with BLACK text
error	#FF7579	desaturated red, derived from 'error red' from Light theme	text for error messages	passes WCAG AA standard when used on #232429 and #303035 areas
on primary	#232429	"earthy black"	not used yet on #599AFD areas	to be used for text on primary buttons; passes WCAG AA standard when used on #599AFD areas
on secondary	#232429	"earthy black"	not used yet on #C9BCAE areas	to be used for text on secondary buttons; passes WCAG AA standard when used on #C9BCAE areas
on background	#c4c5c6	light grey	body text, already in used	passes WCAG AA standard when used on #232429 areas
on surface	#c4c5c6	light grey	body text, already in used	passes WCAG AA standard when used on #303035 areas
on error	#232429	"earthy black", custom	text only (not areas); not used yet on #FF7579 areas	passes WCAG AA standard when used on #FF7579 areas
alternative grey	#303035	lighter "earthy black"	"no verdict" card
alternative darker grey	#3c3c42	even lighter "earthy black"	"undecidable" verdict card
alternative red	#5d1717	desaturated red	"false" verdict card
alternative red-yellow	gradient from #5d1717 to #b7a92d	gradient	"in general false" verdict card
alternative yelow	#b7a92d	desaturated yellow	"mixt" verdict card
alternative green-yellow	gradient from #285206 to #b7a92d	gradient	"in general true" verdict card
alternative green	#285206	desaturated green	"true" verdict card

[CatalinFrancu]

In case it helps, here are all the existing uses of Bootstrap's theme colors.

success, info, light, dark: unused

We don't use these. I actually removed them from the Bootstrap CSS.

butter (our custom color)

• home page (e.g. "Contribute" header)
• navbar (including its dropdowns)

primary

• many buttons and outline buttons

secondary

• many buttons and outline buttons
• statement region badge
• answer verdict badge
• user reputation badge on navbar
• deleted answers and comments

danger

• many outline buttons
• feedback for invalid form data
  • this includes some icons on the nav pills on the help page / help category edit pages
• deleted statements and entities
• review resolution: delete (e.g. when viewing a deleted object's version history)
• notification and review icons on the navbar
• remaining chars on fields with size limit (this shouldn't happen with normal use)

warning

• closed (e.g. as duplicates) statements and answers
• editing statements, answers and entities when you can only suggest edits (you can test it with a reputation of 1,000)
• viewing statements and entities with pending edits
• review page, e.g. when the object is a duplicate
• draft indicator
• fake login button (in development only)
• date picker clear button

[CatalinFrancu]

Is the white background a way to warn the user that he/she is using a previously used value?

Yes, apparently that is Chrome/Chromium's autocomplete feature. I managed to style it using this hack.

[sandriu]

I changed 3 colours in the Dark theme and 1 colour in the Light theme, see below PDFs:

Comparison between Light and dark theme - v2.pdf
Dignitas - Light & Dark theme v2.pdf