Light and dark appearance

Choose the initial color mode

Each theme supports a light and dark palette. Set the mode on the document's <html> element before the stylesheet is rendered:

<html lang="en" data-sk-mode="light">

Use dark instead of light for the dark palette. If you omit the attribute, the theme uses its default mode.

Keep or remove the sample toggle

The sample JavaScript looks for a button with data-sk-mode-toggle. Keep that button and load the theme script to let visitors change modes. The script saves their choice in local storage for that theme.

<button type="button" data-sk-mode-toggle aria-pressed="false">
  Use light mode
</button>

If you do not need a toggle, remove the button and leave out the JavaScript. The CSS alone controls the page style.

Switch to another theme

Replace the stylesheet link with the CSS for another theme. Keep your HTML and shared component classes in place.

<link rel="stylesheet" href="/css/verdant.css">

The data-sk-mode value only selects light or dark colors. It does not select a theme, and no theme marker is needed on <body>.

Check readability and motion

Use sufficient text contrast in both modes, keep focus indicators visible, and test controls with a keyboard. SkinKit theme samples honor the reduced-motion preference. If you add animation, preserve that behavior for your own content too.