Skip to content
PointSav Digital Systems

Wiki dark mode

← All revisions

f3705fca · PointSav Digital Systems ·

design-system: wiki-dark-mode + wiki-typography-system + wiki-component-library — 3 bilingual TOPIC pairs from project-design batch

View the full record as of this revision →

@@ -0,0 +1,130 @@
---
schema: foundry-doc-v1
title: "Wiki Dark Mode"
slug: wiki-dark-mode
category: design-system
type: topic
quality: core
status: active
bcsc_class: vendor-public
last_edited: 2026-05-07
editor: pointsav-engineering
cites: []
paired_with: wiki-dark-mode.es.md
---

The PointSav wiki dark mode system provides a fully themed light and dark colour scheme,
controlled by a `data-theme="dark"` attribute on the `<html>` element. It reduces eye
strain in low-light environments and is preferred by a significant proportion of readers.
A 24-agent design research pass (2026-05-06) audited the full colour palette; all dark
mode colour pairs pass WCAG 2.1 AAA. The system shipped as Phase A of the wiki design
system in 2026-05-06.

## How It Works

Only semantic tokens (surfaces, ink, borders, status colours) change between modes.
Primitive tokens — the raw colour palette — remain unchanged in both modes. This means
adding dark mode support to a new component requires only using semantic tokens;
no per-component `[data-theme="dark"]` selectors are needed.

```css
/* Light (default) — defined on :root */
:root {
  --ps-surface-base: #ffffff;
  --ps-ink-primary: #0e0f12;
}

/* Dark — overrides only semantic tokens */
[data-theme="dark"] {
  --ps-surface-base: #1f2125;
  --ps-ink-primary: #f5f6f8;
}
```

## Initialisation

Theme preference is stored in `localStorage` under the key `ps-theme`. An inline script
in `<head>` reads this value before the browser renders any content, preventing the flash
of the wrong theme (FOUT-theme) that would occur if the script ran after paint:

```html
<head>
  <script>
    (function() {
      var stored = localStorage.getItem('ps-theme');
      var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      if (stored === 'dark' || (!stored && prefersDark)) {
        document.documentElement.dataset.theme = 'dark';
      }
    })();
  </script>
  <link rel="stylesheet" href="/static/tokens.css">
</head>
```

Explicit user choice (localStorage) overrides the OS preference (`prefers-color-scheme`).
If no choice has been stored, the OS preference is honoured.

## Toggle Component

The wiki dark mode toggle button is defined in the `wiki-dark-mode-toggle` component
(`dtcg-vault/components/wiki-dark-mode-toggle/recipe.json`). It uses `aria-pressed` and
updates `aria-label` to describe the pending action (not the current state):

- In light mode: label = "Switch to dark mode"
- In dark mode: label = "Switch to light mode"

On click, the toggle sets `document.documentElement.dataset.theme` and writes the new
value to `localStorage`.

## Colour Palette

### Light Mode

| Token | Value | Use |
|---|---|---|
| `--ps-surface-base` | #ffffff | Page background |
| `--ps-surface-subtle` | #f5f6f8 | Sidebar, code surface |
| `--ps-ink-primary` | #0e0f12 | Body text |
| `--ps-ink-secondary` | #4a4f59 | Secondary text, metadata |
| `--ps-wiki-link` | #234ed8 | Hyperlinks |
| `--ps-wiki-redlink` | #a52323 | Redlinks (non-existent articles) |
| `--ps-wiki-code-keyword` | #7c3aed | Code syntax keyword |

### Dark Mode

| Token | Value | Use | WCAG vs background |
|---|---|---|---|
| `--ps-surface-base` | #1f2125 | Page background | — |
| `--ps-surface-code` | #151618 | Code block background | — |
| `--ps-ink-primary` | #f5f6f8 | Body text | 14.5:1 (AAA) |
| `--ps-ink-secondary` | #aab0bb | Secondary text | 6.2:1 (AAA) |
| `--ps-wiki-link` | #6ab0f5 | Hyperlinks | 8.47:1 page / 8.22:1 code (AAA) |
| `--ps-wiki-redlink` | #f56565 | Redlinks | 6.42:1 (AA+) |
| `--ps-wiki-code-keyword` | #c792ea | Code syntax keyword | 7.85:1 vs code surface (AAA) |

All dark mode colour pairs pass WCAG 2.1 AAA, verified 2026-05-06 by hand computation
and automated audit.

### Wiki Surface Aliases

The wiki CSS uses short-form aliases that map to the semantic tokens:

```css
--color-surface-page:    var(--ps-surface-base);
--color-surface-sidebar: var(--ps-surface-subtle);
--color-surface-code:    var(--ps-surface-code);
--color-text-primary:    var(--ps-ink-primary);
--color-text-secondary:  var(--ps-ink-secondary);
--color-text-link:       var(--ps-wiki-link);
--color-text-redlink:    var(--ps-wiki-redlink);
--color-border-subtle:   var(--ps-border-subtle);
--color-accent-primary:  var(--ps-interactive-primary);
--color-code-keyword:    var(--ps-wiki-code-keyword);
```

## See Also

- [[wiki-typography-system]]
- [[wiki-component-library]]
- [[design-color]]
Important Information

Important Information

Corporate structure. PointSav Digital Systems ("PointSav") is a trade name of Woodfine Capital Projects Inc. ("Woodfine"). PointSav does not itself offer, sell, or solicit any security. Any securities offering associated with Woodfine's real-property direct-hold solutions is made exclusively by Woodfine, and only by means of the applicable Private Placement Memorandum.

No investment advice. This wiki's content is provided for engineering, operational, research, and development purposes. Nothing on this wiki constitutes investment advice or a solicitation to invest in any Woodfine partnership or direct-hold solution.

Intellectual property. The PointSav name, trade name, wordmark, and marks, together with all current and future PointSav- and Totebox-branded products, services, and offerings — and the software, source code, documentation, design system, and all related materials — are proprietary to Woodfine and its affiliates, except for components identified as open source. No rights are granted except as expressly set out in a written license or agreement. See TRADEMARK.md in this repository for the full trademark notice.

Open source components. Portions of the platform are made available under permissive open-source licenses identified in the accompanying repository. Use of those components is governed by their respective license terms.

No warranty; informational use. Content on this wiki is provided for general informational purposes only and does not constitute a representation, warranty, or commitment with respect to product functionality, availability, pricing, or roadmap. Some articles describe planned or intended features, capabilities, and milestones — language such as "planned," "intended," "targeted," "may," and "expected" marks this forward-looking content, which is subject to change and does not constitute a commitment regarding future performance.

Confidentiality. Where an article describes an operational or deployment detail that is not intended for public disclosure, that article is not published on this wiki. Content here is general-purpose engineering documentation, not customer-specific configuration.

Jurisdiction. Woodfine Capital Projects Inc. is organized in British Columbia, Canada. References to the Sovereign Data Foundation on this wiki describe a planned or intended initiative only, not a current equity holder or active governance body.

Changes to this notice. PointSav may update this notice from time to time; the version posted on this page governs.

Not a filing system. This wiki is not a securities filing system, an electronic disclosure repository, or a substitute for SEDAR+ or any other regulatory filing system. Formal securities filings are made through the applicable regulatory filing system, not through this wiki.

Full disclaimer. This notice supplements, and does not replace, the full Disclaimers article. In the event of any conflict, the full Disclaimers article governs.

Read the full disclaimer →