Color Scheme Control
How to control the color scheme of the <keymap-ui> web component.
The color-scheme Attribute
The <keymap-ui> element supports a color-scheme attribute that allows you to override the default color scheme behavior. This gives you programmatic control over whether the keymap displays in light or dark mode, regardless of the user’s system preferences.
Here are two UI elements, one in light mode and one in dark mode:
Usage
By default, it uses the system’s prefers-color-scheme media query,
but you can override this to show the dark mode colors on the light mode page and vice versa.
<!-- Force light mode -->
<keymap-ui color-scheme="light" keymap-id="ergodox"></keymap-ui>
<!-- Force dark mode -->
<keymap-ui color-scheme="dark" keymap-id="ergodox"></keymap-ui>
<!-- Use system preference (default behavior) -->
<keymap-ui keymap-id="ergodox"></keymap-ui>One thing to note: the component doesn’t set an overall background color,
so on pages like this one that show both modes,
you need to make sure the container for the keymap-ui element has an appropriate background color set,
e.g. black for dark mode and white for light mode.
Dynamic Color Scheme Control
You can also change the color scheme dynamically using JavaScript:
const keymapUi = document.querySelector("keymap-ui");
// Switch to dark mode
keymapUi.setAttribute("color-scheme", "dark");
// Switch to light mode
keymapUi.setAttribute("color-scheme", "light");
// Return to system preference
keymapUi.removeAttribute("color-scheme");