Color mode by time of day

Code

Copy the markup

import "@luz-ds/catalog/components/theme-time.css";

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/theme-time.min.css" integrity="sha384-/WCzE4qOwaMLwa1OiKNhEtfjsdMiAEvBH1CD0NyQC54KfWSvfCtlVtGxG9Womi9X" crossorigin="anonymous">

Wrap core's <luz-theme-mode> in <luz-theme-time> and add the moments of the day after it, one radio each, in the order of the day. Its value is the name of the moment; its label is what a reader sees.

<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/catalog.min.js"></script>

<luz-theme-time>
  <luz-theme-mode>
    …the fieldset and the four radios of core's page…
  </luz-theme-mode>
  <fieldset class="luz-theme-time__moments">
    <legend class="luz-theme-time__legend">Time of day</legend>
    <label class="luz-theme-time__moment"><input class="luz-theme-time__input" type="radio" name="luz-theme-moment" value="dawn" data-from="05:00" data-theme="dark">Dawn</label>
    <label class="luz-theme-time__moment"><input class="luz-theme-time__input" type="radio" name="luz-theme-moment" value="morning" data-from="07:30" data-theme="light">Morning</label>
    <label class="luz-theme-time__moment"><input class="luz-theme-time__input" type="radio" name="luz-theme-moment" value="afternoon" data-from="12:00" data-theme="light" data-default>Afternoon</label>
    <label class="luz-theme-time__moment"><input class="luz-theme-time__input" type="radio" name="luz-theme-moment" value="sunset" data-from="17:30" data-theme="light">Sunset</label>
    <label class="luz-theme-time__moment"><input class="luz-theme-time__input" type="radio" name="luz-theme-moment" value="dusk" data-from="20:30" data-theme="dark">Dusk</label>
    <label class="luz-theme-time__moment"><input class="luz-theme-time__input" type="radio" name="luz-theme-moment" value="night" data-from="22:30" data-theme="dark" data-default>Night</label>
  </fieldset>
</luz-theme-time>

catalog.min.js loads theme-time.min.js when the browser is idle and the page has the element. To load it on its own, import @luz-ds/catalog/theme-time and link components/theme-time.css after core's.

Variants and options

A bar with a place, and the texts it needs:

<luz-theme-time variant="bar" show="time place saved" place="Madrid" latitude="40.42" longitude="-3.7"
                 data-luz-label-scrub="Hour of the day" data-luz-label-saved="Saved">
  <luz-theme-mode inline>
    …the fieldset and the four radios of core's page…
  </luz-theme-mode>
</luz-theme-time>

Properties, methods and event

A method returns false when it does nothing: no moments, or an hour outside 0 to 24.

How it works

theme-time.js adds the moments of the day to <luz-theme-mode>, as a choice the reader makes. Core does the rest, and the button alone if the catalog does not load.

• Auto is the system's, as in core: dark, high contrast, or light. The clock moves nothing. data-moment takes the default moment of that mode (data-default), and no moment radio is checked. The mode radio checked is the one in use, Light or Dark, and the button is named after it; nothing is stored, and the choice is still Auto. Auto itself is checked only while an hour or a moment is chosen. Auto does not follow the hour: a page that wants a moment sets it, with the slider, a moment option or pin(hour).
• A moment the reader chose is the last one that has started at that hour (night runs through midnight): its name goes to data-moment, its radio is checked and the page takes its base. The visitor's location is never asked.
• A mode the reader chose shows its default moment. High contrast always wins: data-theme is high-contrast, so a rule for "light" or "dark" does not match.
• With a place, latitude and longitude give today's real sunrise and sunset, worked out in the page with no network, in place of the two turns of the day; if the sun does not rise or set there, the declared hours stand.
• A pinned hour is the moment at that hour kept in Auto, stored under luz-light to five minutes; choosing a mode, or Auto, in <luz-theme-mode> lets it go, back to the system.
• The slider (variant="bar"): dragging previews the hour; letting go pins and stores it and writes the note “Saved”. Its track is painted with --luz-theme-time-sky-<value>, one for each moment: Paint the track.
• Two files: theme-time.min.js and theme-time-bar.min.js, which only variant="bar" loads. For a bar added after the scan, import @luz-ds/catalog/theme-time-bar and call initThemeTimeBar(root).

Without JavaScript

There is no bar and the moments are not shown. Core's radios still change the mode; Auto follows the system, and data-moment is not written.

Keyboard and ARIA

• Slider: a native range in steps of 5 minutes: Tab reaches it, the arrow keys move one step, Home goes to 00:00 and End to 23:55. Each press previews the hour.
• Escape on the slider lets go of a pinned hour, and then does not close a dialog around the bar.
• Name and value: the name is data-luz-label-scrub; aria-valuetext is the moment and the hour, “Afternoon, 13:00”. When an hour is pinned a role="status" region says your data-luz-label-saved, shown or not.
• Moments as options (show="moments") are radios in a fieldset: the arrow keys choose one. The mode button is core's: its keyboard and ARIA. With the system in use it steps on from the mode shown, so the first press never repeats it.

Script for the head

Optional, after core's. It writes the moment before the first paint. Copy node_modules/@luz-ds/catalog/dist/theme-time-boot.min.js to your own origin. The moments travel on its tag, as data-moments: the body is not read yet.

<head>
  <script src="/theme-boot.min.js"></script>
  <script src="/theme-time-boot.min.js"
          data-moments="dawn@05:00=dark morning@07:30=light afternoon@12:00=light* sunset@17:30=light dusk@20:30=dark night@22:30=dark*"></script>
  <link rel="stylesheet" href="…">
</head>

• data-moments: value@HH:MM=base for each moment, in markup order; * marks data-default.
• What it writes: data-moment on <html> and, for a pinned hour (luz-light), data-mode (and data-theme, with no brand) of that moment's base. A stored mode, or Auto with no pinned hour, shows the default moment of its mode; prefers-contrast: more wins. It never writes the storage. It blocks rendering as core's does, under the same exception (EX-012).

The six example moments

By the visitor's clock, as the markup above and the footer of this site declare them. Night runs through midnight, and data-moment on <html> takes the name.

Paint each moment

The colours are yours: set only the tokens that differ, over the base the moment names, as a theme of your own does, and measure each pair with the contrast check. Always write the base next to the moment: a rule with [data-moment] alone also matches high contrast and breaks its contrast.

/* Painted over the base the moment names: only the tokens that differ */
:root[data-theme="light"][data-moment="morning"] {
  --luz-surface-page: #fdf3dc;
  --luz-surface: #fffaf0;
}

:root[data-theme="dark"][data-moment="dawn"] {
  --luz-surface-page: #0f1520;
  --luz-surface: #172030;
}

/* With a brand of your own: */
:root[data-theme="my-brand"][data-mode="light"][data-moment="morning"] { … }

Paint the track

Set one property for each moment, once, on :root:

:root {
  --luz-theme-time-sky-night: #171b36;
  --luz-theme-time-sky-dawn: #6b3f5f;
  --luz-theme-time-sky-afternoon: #cfe1f6;
}

• Without them, a bar gets a neutral ramp of tokens. It reads which properties are set when it is built; the colours stay variables, so a mode that changes them repaints the track.
• High contrast: under :root[data-theme="high-contrast"] set every moment to var(--luz-text-primary): one solid fill that keeps its contrast. In forced colors the track is CanvasText. In right to left the day runs from the right.

Contrast and focus are in the Design tab.

Design

When to use

Use it when a site has a look for each part of the day, or when readers should be able to try the light at another hour.

• The moments alone, in a footer or a navbar, for a site that changes its look with the day.
• The bar, where the light is part of the page, such as a home page.

When not to use

Do not use it when the site has one look in one mode: core's color mode is enough.

• Do not promise the real sunrise without a place: the declared hours are fixed.
• Do not use the bar as the only control: keep core's button.
• Do not ask for the visitor's location: write the place yourself.

Do and don't

Writing the content

Call the moments by the light they show: “Dawn”, “Morning”, “Afternoon”, “Sunset”, “Dusk” and “Night”.

• The labels are in the language of the page: the slider reads them with the hour.
• Name the slider for what it does, “Hour of the day”, and the note “Saved”.
• Say near the control what Auto follows: “Auto follows your system”, and that a moment is a choice.

Contrast and focus

The bar reads the semantic tokens of the page. The colours you give each moment are yours to measure, in the light and in the dark.

Measured from the token values of each mode, rounded down. Needs is the WCAG 2.2 AA minimum: 4.5:1 for text, 3:1 for focus rings, borders and icons.

• Focus: a 2 px outline, 2 px outside the slider or the moment, in --luz-focus-ring.
• Track against the page: the ring uses --luz-text-secondary on --luz-surface-page, the pair in the table. Read on the pixels of the worst stretch of the track, which is a gradient and a soft edge the table cannot measure, the implementer found 3.48:1 in light, 4.63:1 in dark and 21:1 in high contrast.
• Not colour alone: the track has a soft ring in --luz-text-secondary around its gradient, the hour is written as text, and by night the thumb is a crescent. In forced colors the track is CanvasText with a 1 px outline of the same colour, and the checked moment is a system highlight.
• Target: the slider is 2.75rem high over a track 6 px high: the target is the slider, the track only draws.
• Motion: the note fades in and out; there is no other motion.
• Print: the element is not printed.

Tokens it uses

The 22 tokens that components/theme-time.css reads, by family. Each family links to its page, with the values in every mode. The button is core's: its tokens are on Color mode. In Figma they are variables with the same names: see Tokens in Figma.

Color

--luz-brand-fill, --luz-brand-primary, --luz-color-success, --luz-focus-ring, --luz-outline, --luz-sidebar-active-bg, --luz-sidebar-bg, --luz-surface, --luz-surface-hover, --luz-surface-page, --luz-text-on-fill, --luz-text-primary, --luz-text-secondary

Spacing and sizing

--luz-space-2xs, --luz-space-3xs, --luz-space-md, --luz-space-sm

Typography

--luz-text-3xl, --luz-text-sm

Radius

--luz-radius-full

Motion

--luz-duration-fast, --luz-duration-slow

Keyboard and ARIA are in the Code tab.