Build: A Themed, Responsive Dashboard

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

token

A named design value in CSS, such as --chart-ink, used by every chart instead of a typed colour.

theme

One set of token values: light or dark.

size class

small, medium or large, chosen from the width by sizeClass.

onResize

The helper in resize.js that redraws a chart once at the start and once after a resize settles.

1. 1

   Add a third theme

   In theme.css add a :root[data-theme="contrast"] block with black --chart-bg, white --chart-ink and a bright --chart-accent, and add "contrast" to MODES in main.js. The button now cycles four ways and no chart file changed.

2. 2

   Change the breakpoint

   In resize.js change 480 to 640. A 600-pixel box now draws the small layout: the rides line has four month labels (Jan, Apr, Jul, Oct) and number labels like 5k, the stack has six month labels, and the heatmap has three hour labels (0, 12, 23); measured in the preview. One number moved every chart.

Your lumen-dashboard project after this topic. Click a file to see it in full.

/* Every colour a chart uses lives here, once, for both themes. Charts read these names and never hold a colour of their own. */
:root {
  color-scheme: light;
  --page-bg: #f6f7f9;
  --chart-bg: #ffffff;
  --chart-soft: #eef2f6;
  --chart-ink: #1d2b36;
  --chart-muted: #5b6b78;
  --chart-grid: #dde3e8;
  --chart-accent: #1f7a6f;
  --chart-alert: #c2410c;
  --chart-error: #7a1f16;
  --chart-error-bg: #fdeceb;
  /* six series colours for the six districts: at least 3:1 against both card colours, and apart under four kinds of colour vision */
  --chart-s1: #0072b2;
  --chart-s2: #d55e00;
  --chart-s3: #009e73;
  --chart-s4: #cc79a7;
  --chart-s5: #f0375d;
  --chart-s6: #0096ff;
}

/* Path 1: the visitor's system is set to dark and has not picked a theme on this page */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page-bg: #0f1a21;
    --chart-bg: #16222b;
    --chart-soft: #1e2d38;
    --chart-ink: #e6edf2;
    --chart-muted: #9fb0bd;
    --chart-grid: #2c3b47;
    --chart-accent: #4fd1c0;
    --chart-alert: #ff8a5c;
    --chart-error: #ffb4a8;
    --chart-error-bg: #3a1d1b;
  }
}

/* Path 2: the visitor picked dark with the button (main.js sets data-theme). The same values again: CSS cannot share them between the two rules. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #0f1a21;
  --chart-bg: #16222b;
  --chart-soft: #1e2d38;
  --chart-ink: #e6edf2;
  --chart-muted: #9fb0bd;
  --chart-grid: #2c3b47;
  --chart-accent: #4fd1c0;
  --chart-alert: #ff8a5c;
  --chart-error: #ffb4a8;
  --chart-error-bg: #3a1d1b;
}

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   Priya's need is met. On the wall screen the labels are 12 pixels and real, because the charts redraw at their width instead of being stretched. In dark mode the lines and bars keep their contrast, because every colour comes from a token with a dark value that was checked (Topic 10.2). And the rider with deutan vision can tell all six districts apart: the closest pair is 18.0 apart under simulation, and the stack also has a legend with names.

2. 2

   What it adds. src/styles/theme.css holds the tokens for light, for the system's dark preference and for the button's dark choice. src/styles/charts.css styles the page and every chart from those tokens. src/utils/resize.js has onResize and sizeClass. Each chart file now returns { update, resize } (the rides line also keeps setRange and ready), draws with CSS classes instead of hard-coded colours, and chooses ticks by sizeClass. src/parts/tooltip.js takes its colours from the tokens too. main.js adds the theme button, a finding title for the year's line, and one onResize per chart.

3. 3

   How it plugs into what exists. It starts from the Phase 9 dashboard and keeps everything it had: the crosshair tooltip, the brush and its preset buttons, the stations chart that follows the selected dates, the keyed transitions and the reduced-motion rule, and the chart plan table. Only colours, widths and the page file change. A chart caller sees that update(rows) still works and resize(width) is new. When the brush has a range and the width changes, the brush is put back at the same dates.

4. 4

   What the dashboard can do now that it could not before: switch between light, dark and system themes without redrawing; keep text at a readable size at 320 to 1920 pixels wide; show a colour-blind-checked palette on both backgrounds; state the year's finding in the title; and survive a resize storm with two redraws instead of twenty. Still missing: the charts have no keyboard or screen-reader reading order beyond their summaries (Phase 15), a data table for each chart (Phase 15), and the station map (Phase 13). Tooltips, brush and motion already exist (Phases 8 and 9).

5. 5

   Starting point. The Phase 9 dashboard: Phase 4's loader and states, Phase 5's station bars with the month menu, Phase 6's rides line with D3 axes, Phase 7's stacked months and June heatmap with their legends, Phase 8's crosshair, brush, presets and linked bars, and Phase 9's motion. The files below were rebuilt from those versions.

6. 6

   The checks inside the build. Every chart reads its colours from CSS, so a typo in a token shows as a wrong colour in one theme: a black shape where no token is defined anywhere, a dim light-theme colour where only the dark block lost its copy. Test both themes. The week's bars and the low-stations picture are still fixed hand-drawn SVGs (they scale with their box and do not redraw), and the June heatmap's darkest cells sink into the dark card (Topic 10.4). Charts redraw only when the width really changes, a hidden box (width 0) is skipped, and sizeClass treats an unknown width as small.

• ↔

  Redrawing on every width change is simple and keeps text sharp. A chart with 100,000 marks cannot do that, and Phase 12 moves such a chart to canvas.

• My project has theme.css, charts.css and resize.js, and main.js imports both CSS files.

• The theme button cycles auto, light and dark, and the charts change with it.

• At 320 pixels the rides line, the station bars, the stack and the heatmap show fewer ticks and labels, and their text is still 12 pixels (the two hand-drawn pictures scale instead).

• I can say what the dashboard still lacks and which phase adds it.