Section 49.4 Colors and Palettes
In general, styling rules should not contain hard-coded colors. A color that looks good in one theme (or set of colors for a theme) may not fit into another. And a color that works well in light mode may make something unreadable in dark mode. Instead, colors should be expressed as
CSS custom properties (variables) that a theme can be set to different values.
For example, links in a PreTeXt document are set to
color: var(--link-text-color) instead of something like
color: blue.
--link-text-color is set to a default color in
colors/_color-vars.scss, But then each color palette overrides it as needed to fit the palette’s overall color scheme. In a theme that uses the dual palette,
--link-text-color is defined as being the same as
var(--primary-color), which is set to match the color selected in the publisher file of the work.
The easiest way to guarantee that new CSS will work reasonably well with every existing theme/mode is to use the existing color variables.
colors/_color-vars.scss is the master list of every color, given semantic names (
--link-text-color, not
--pretty-blue).
palette files (such as
_palette-dual.scss) starts from that list, overrides the entries it cares about, and produces an
SCSS map named
$colors. Each theme uses one of those palettes to set the color variables it will use.
Say you are adding a feature that should look something like existing buttons. To match the existing style, first find the color variables used (
Section 49.7). Once you identify the relevant variables, such as
--button-background, you can use them in your new CSS.
If you want to add finer control over the colors used by a new feature, add a new color variable to
colors/_color-vars.scss, and use it in your CSS. To do so, you would write something like:
"dropdown-background": var(--button-background),
This ensures that the new variable has a default value (the button background color). Any palatte that targets multiple colors or dark mode will already have a value for
--button-background, so your new variable will automatically work with those. Then, to customize the new variable for a particular palette like
_palette-dual.scss, you would add an entry to the palette file, such as:
In a theme that uses the dual palette (like
default-modern), the dropdown background will now be the secondary color, which is a different color than the button background. In a theme that uses a palette that does not customize
--dropdown-background, the dropdown background will be the same as the button background.
