Contrast

This was an experiment with using CSS custom properties to create a "dark mode" version of the CSS. It's based on the use of various contrast groups, applying text and background colours together via Sass mixins created in _theme.scss.

This button overrides the contrast mode from being automatically detected via prefers-color-scheme to being set via a CSS class. This selected mode is then remembered via localStorage and re-applied on page load with JavaScript.

This has the unfortunate effect of making any element with a CSS transition flashing if the mode is changed from the default on page load. Ideally, it would be remembered via a cookie so the page could be retrieved from the server with the correct class already in place, but because this repo is served as a static website from GitHub Pages that's not possible. To prevent the flashing, transitions are applied using a Sass mixin that requires an allow-transitions class on the body element, and that class is added shortly after the contrast mode is initialised.

Contrast Palette

This is what content looks like in the primary contrast group.

Low contrast text is available.

Highlighting the background of text, with an active colour, is possible. As is highlighting a bar of colour at the bottom of text, with an active colour.

Interactive elements in this group can use the clickable contrast group, with an active background colour.

Some areas can use an "offset" contrast group. These areas are intended to only contain text, though they can also have background or colour bar highlighting.

Offset contrast areas can also have low contrast text.

Some of these groups can have an "active" background, for example on hover, to indicate interactivity. They should also use a border or some other way to set them apart prior to becoming active.

These active areas can have background or colour bar highlighting.

They should avoid including low contrast text or clickable elements due to insufficient contrast (and general UI issues with nesting clickable elements within other clickable elements).

Hover over this next area, or focus on it, to remove the overlay.

An overlay can be used to reduce contrast on areas that are still present but cannot currently be interacted with. This overlay can appear over the top of any other element, so is applied with transparency.

This is used by the modal component, for example.

Some elements can have shadows. This is used by the tooltip component, for example.

Nesting containers:

Because of how CSS custom properties work, it is possible to nest light and dark mode containers correctly instead of having one always take precedence due to CSS specificity.

This is a light mode container, which will stay in light mode even when the main document is in dark mode.

Subsequent nesting of a dark mode container within a light mode container still works.

This is a dark mode container, which will always remain in dark mode.

This is a light mode container inside a dark mode container, which will always remain in light mode.