This was previously happening in the empires client, but now we move
this up to the top-level.
Note that we don't use the selected text color at minimal font sizes
(such as in the "body" element in general). This is because we want a
high contrast there for maximal legibility. So we introduce an
additional named --text-fo-color-max-contrast which is set to pure
black.
-h1 {
- color: #333738;
-}
-
-h2 {
- color: #333738;
-}
-
p,dl,dd {
margin-bottom: 1em;
}
:root {
/* Standard colors for text. */
--text-fg-color: #333738;
+ --text-fg-color-max-contrast: black;
--text-bg-color: white;
--outside-page-bg-color: #333738;
/*\
|*|
-|*| Core elements: Sizing and padding
+|*| Core elements: Sizing, padding, and application of theme colors
|*|
\*/
body {
line-height: 1.25;
font-family: sans-serif;
+ color: var(--text-fg-color-max-contrast);
}
h1 {
+ color: var(--text-fg-color);
font-size: 150%;
font-weight: bold;
}
h2 {
+ color: var(--text-fg-color);
font-size: 110%;
font-weight: bold;
}