diff --git a/client/src/tokens/colorThemes.js b/client/src/tokens/colorThemes.js
new file mode 100644
index 0000000000..0cb582aaa5
--- /dev/null
+++ b/client/src/tokens/colorThemes.js
@@ -0,0 +1,687 @@
+/** @typedef {{
+    value: svar(--w-color-trin)g;
+    bgUtility: string;
+    textUtility: string;
+    cssVariable: string;
+}} Token */
+
+/** @typedef {{
+    [token: string]: Token;
+}} CategoryTokens */
+
+/** @typedef {{
+    label: string;
+    tokens: CategoryTokens;
+}} ThemeCategory */
+
+// The focus outline color is defined without reusing a named color variable
+// because it shouldn’t be reused for anything else in the UI.
+const focusToken = {
+  value: '#009072',
+  bgUtility: 'w-bg-focus',
+  textUtility: 'w-text-focus',
+  cssVariable: '--w-color-focus',
+};
+
+/** @type {ThemeCategory[]} */
+const light = [
+  {
+    label: 'Surfaces - General',
+    tokens: {
+      'surface-page': {
+        value: 'var(--w-color-white)',
+        bgUtility: 'w-bg-surface-page',
+        textUtility: 'w-text-surface-page',
+        cssVariable: '--w-color-surface-page',
+      },
+      'surface-field': {
+        value: 'var(--w-color-white)',
+        bgUtility: 'w-bg-surface-field',
+        textUtility: 'w-text-surface-field',
+        cssVariable: '--w-color-surface-field',
+      },
+      'surface-field-inactive': {
+        value: 'var(--w-color-grey-50)',
+        bgUtility: 'w-bg-surface-field-inactive',
+        textUtility: 'w-text-surface-field-inactive',
+        cssVariable: '--w-color-surface-field-inactive',
+      },
+      'surface-header': {
+        value: 'var(--w-color-grey-50)',
+        bgUtility: 'w-bg-surface-header',
+        textUtility: 'w-text-surface-header',
+        cssVariable: '--w-color-surface-header',
+      },
+      'surface-menus': {
+        value: 'var(--w-color-primary)',
+        bgUtility: 'w-bg-surface-menus',
+        textUtility: 'w-text-surface-menus',
+        cssVariable: '--w-color-surface-menus',
+      },
+      'surface-menu-item-active': {
+        value: 'var(--w-color-primary-200)',
+        bgUtility: 'w-bg-surface-menu-item-active',
+        textUtility: 'w-text-surface-menu-item-active',
+        cssVariable: '--w-color-surface-menu-item-active',
+      },
+      'surface-tooltip': {
+        value: 'var(--w-color-primary-200)',
+        bgUtility: 'w-bg-surface-tooltip',
+        textUtility: 'w-text-surface-tooltip',
+        cssVariable: '--w-color-surface-tooltip',
+      },
+      'surface-button-default': {
+        value: 'var(--w-color-secondary)',
+        bgUtility: 'w-bg-surface-button-default',
+        textUtility: 'w-text-surface-button-default',
+        cssVariable: '--w-color-surface-button-default',
+      },
+      'surface-button-hover': {
+        value: 'var(--w-color-secondary-400)',
+        bgUtility: 'w-bg-surface-button-hover',
+        textUtility: 'w-text-surface-button-hover',
+        cssVariable: '--w-color-surface-button-hover',
+      },
+      'surface-button-inactive': {
+        value: 'var(--w-color-grey-400)',
+        bgUtility: 'w-bg-surface-button-inactive',
+        textUtility: 'w-text-surface-button-inactive',
+        cssVariable: '--w-color-surface-button-inactive',
+      },
+      'surface-button-outline-hover': {
+        value: 'var(--w-color-secondary-50)',
+        bgUtility: 'w-bg-surface-button-outline-hover',
+        textUtility: 'w-text-surface-button-outline-hover',
+        cssVariable: '--w-color-surface-button-outline-hover',
+      },
+      'surface-panel-information': {
+        value: 'var(--w-color-info-50)',
+        bgUtility: 'w-bg-surface-panel-information',
+        textUtility: 'w-text-surface-panel-information',
+        cssVariable: '--w-color-surface-panel-information',
+      },
+    },
+  },
+  {
+    label: 'Surfaces - Alerts',
+    tokens: {
+      'surface-alert-modal-information': {
+        value: 'var(--w-color-info-50)',
+        bgUtility: 'w-bg-surface-alert-modal-information',
+        textUtility: 'w-text-surface-alert-modal-information',
+        cssVariable: '--w-color-surface-alert-modal-information',
+      },
+      'surface-alert-information': {
+        value: 'var(--w-color-info-100)',
+        bgUtility: 'w-bg-surface-alert-information',
+        textUtility: 'w-text-surface-alert-information',
+        cssVariable: '--w-color-surface-alert-information',
+      },
+      'surface-alert-modal-confirmation': {
+        value: 'var(--w-color-positive-50)',
+        bgUtility: 'w-bg-surface-alert-modal-confirmation',
+        textUtility: 'w-text-surface-alert-modal-confirmation',
+        cssVariable: '--w-color-surface-alert-modal-confirmation',
+      },
+      'surface-alert-confirmation': {
+        value: 'var(--w-color-positive-100)',
+        bgUtility: 'w-bg-surface-alert-confirmation',
+        textUtility: 'w-text-surface-alert-confirmation',
+        cssVariable: '--w-color-surface-alert-confirmation',
+      },
+      'surface-alert-modal-warning': {
+        value: 'var(--w-color-warning-50)',
+        bgUtility: 'w-bg-surface-alert-modal-warning',
+        textUtility: 'w-text-surface-alert-modal-warning',
+        cssVariable: '--w-color-surface-alert-modal-warning',
+      },
+      'surface-alert-warning': {
+        value: 'var(--w-color-warning-100)',
+        bgUtility: 'w-bg-surface-alert-warning',
+        textUtility: 'w-text-surface-alert-warning',
+        cssVariable: '--w-color-surface-alert-warning',
+      },
+      'surface-alert-modal-danger': {
+        value: 'var(--w-color-critical-50)',
+        bgUtility: 'w-bg-surface-alert-modal-danger',
+        textUtility: 'w-text-surface-alert-modal-danger',
+        cssVariable: '--w-color-surface-alert-modal-danger',
+      },
+      'surface-alert-danger': {
+        value: 'var(--w-color-critical-200)',
+        bgUtility: 'w-bg-surface-alert-danger',
+        textUtility: 'w-text-surface-alert-danger',
+        cssVariable: '--w-color-surface-alert-danger',
+      },
+    },
+  },
+  {
+    label: 'Text',
+    tokens: {
+      'text-button': {
+        value: 'var(--w-color-white)',
+        bgUtility: 'w-bg-text-button',
+        textUtility: 'w-text-text-button',
+        cssVariable: '--w-color-text-button',
+      },
+      'text-label-menus-default': {
+        value: 'var(--w-color-white-80)',
+        bgUtility: 'w-bg-text-label-menus-default',
+        textUtility: 'w-text-text-label-menus-default',
+        cssVariable: '--w-color-text-label-menus-default',
+      },
+      'text-label-menus-active': {
+        value: 'var(--w-color-white)',
+        bgUtility: 'w-bg-text-label-menus-active',
+        textUtility: 'w-text-text-label-menus-active',
+        cssVariable: '--w-color-text-label-menus-active',
+      },
+      'text-label': {
+        value: 'var(--w-color-primary)',
+        bgUtility: 'w-bg-text-label',
+        textUtility: 'w-text-text-label',
+        cssVariable: '--w-color-text-label',
+      },
+      'text-context': {
+        value: 'var(--w-color-grey-600)',
+        bgUtility: 'w-bg-text-context',
+        textUtility: 'w-text-text-context',
+        cssVariable: '--w-color-text-context',
+      },
+      'text-meta': {
+        value: 'var(--w-color-grey-400)',
+        bgUtility: 'w-bg-text-meta',
+        textUtility: 'w-text-text-meta',
+        cssVariable: '--w-color-text-meta',
+      },
+      'text-placeholder': {
+        value: 'var(--w-color-grey-400)',
+        bgUtility: 'w-bg-text-placeholder',
+        textUtility: 'w-text-text-placeholder',
+        cssVariable: '--w-color-text-placeholder',
+      },
+      'text-link-default': {
+        value: 'var(--w-color-secondary)',
+        bgUtility: 'w-bg-text-link-default',
+        textUtility: 'w-text-text-link-default',
+        cssVariable: '--w-color-text-link-default',
+      },
+      'text-link-hover': {
+        value: 'var(--w-color-secondary-400)',
+        bgUtility: 'w-bg-text-link-hover',
+        textUtility: 'w-text-text-link-hover',
+        cssVariable: '--w-color-text-link-hover',
+      },
+      'text-button-outline-default': {
+        value: 'var(--w-color-secondary)',
+        bgUtility: 'w-bg-text-button-outline-default',
+        textUtility: 'w-text-text-button-outline-default',
+        cssVariable: '--w-color-text-button-outline-default',
+      },
+      'text-highlight': {
+        value: 'var(--w-color-secondary-75)',
+        bgUtility: 'w-bg-text-highlight',
+        textUtility: 'w-text-text-highlight',
+        cssVariable: '--w-color-text-highlight',
+      },
+    },
+  },
+  {
+    label: 'Icons',
+    tokens: {
+      'icon-menus-default': {
+        value: 'var(--w-color-white-80)',
+        bgUtility: 'w-bg-icon-menus-default',
+        textUtility: 'w-text-icon-menus-default',
+        cssVariable: '--w-color-icon-menus-default',
+      },
+      'icon-primary': {
+        value: 'var(--w-color-primary)',
+        bgUtility: 'w-bg-icon-primary',
+        textUtility: 'w-text-icon-primary',
+        cssVariable: '--w-color-icon-primary',
+      },
+      'icon-primary-hover': {
+        value: 'var(--w-color-primary-200)',
+        bgUtility: 'w-bg-icon-primary-hover',
+        textUtility: 'w-text-icon-primary-hover',
+        cssVariable: '--w-color-icon-primary-hover',
+      },
+      'icon-secondary': {
+        value: 'var(--w-color-grey-400)',
+        bgUtility: 'w-bg-icon-secondary',
+        textUtility: 'w-text-icon-secondary',
+        cssVariable: '--w-color-icon-secondary',
+      },
+      'icon-secondary-hover': {
+        value: 'var(--w-color-primary-200)',
+        bgUtility: 'w-bg-icon-secondary-hover',
+        textUtility: 'w-text-icon-secondary-hover',
+        cssVariable: '--w-color-icon-secondary-hover',
+      },
+      'icon-alert-modal-information': {
+        value: 'var(--w-color-info-100)',
+        bgUtility: 'w-bg-icon-alert-modal-information',
+        textUtility: 'w-text-icon-alert-modal-information',
+        cssVariable: '--w-color-icon-alert-modal-information',
+      },
+      'icon-alert-modal-confirmation': {
+        value: 'var(--w-color-positive-100)',
+        bgUtility: 'w-bg-icon-alert-modal-confirmation',
+        textUtility: 'w-text-icon-alert-modal-confirmation',
+        cssVariable: '--w-color-icon-alert-modal-confirmation',
+      },
+      'icon-alert-modal-warning': {
+        value: 'var(--w-color-warning-100)',
+        bgUtility: 'w-bg-icon-alert-modal-warning',
+        textUtility: 'w-text-icon-alert-modal-warning',
+        cssVariable: '--w-color-icon-alert-modal-warning',
+      },
+      'icon-alert-modal-danger': {
+        value: 'var(--w-color-critical-200)',
+        bgUtility: 'w-bg-icon-alert-modal-danger',
+        textUtility: 'w-text-icon-alert-modal-danger',
+        cssVariable: '--w-color-icon-alert-modal-danger',
+      },
+    },
+  },
+  {
+    label: 'Borders',
+    tokens: {
+      'border-furniture': {
+        value: 'var(--w-color-grey-100)',
+        bgUtility: 'w-bg-border-furniture',
+        textUtility: 'w-text-border-furniture',
+        cssVariable: '--w-color-border-furniture',
+      },
+      'border-dashed-block': {
+        value: 'var(--w-color-grey-100)',
+        bgUtility: 'w-bg-border-dashed-block',
+        textUtility: 'w-text-border-dashed-block',
+        cssVariable: '--w-color-border-dashed-block',
+      },
+      'border-button-small-outline-default': {
+        value: 'var(--w-color-grey-150)',
+        bgUtility: 'w-bg-border-button-small-outline-default',
+        textUtility: 'w-text-border-button-small-outline-default',
+        cssVariable: '--w-color-border-button-small-outline-default',
+      },
+      'border-field-default': {
+        value: 'var(--w-color-grey-150)',
+        bgUtility: 'w-bg-border-field-default',
+        textUtility: 'w-text-border-field-default',
+        cssVariable: '--w-color-border-field-default',
+      },
+      'border-field-inactive': {
+        value: 'var(--w-color-grey-150)',
+        bgUtility: 'w-bg-border-field-inactive',
+        textUtility: 'w-text-border-field-inactive',
+        cssVariable: '--w-color-border-field-inactive',
+      },
+      'border-field-hover': {
+        value: 'var(--w-color-grey-200)',
+        bgUtility: 'w-bg-border-field-hover',
+        textUtility: 'w-text-border-field-hover',
+        cssVariable: '--w-color-border-field-hover',
+      },
+      'border-button-outline-default': {
+        value: 'var(--w-color-secondary)',
+        bgUtility: 'w-bg-border-button-outline-default',
+        textUtility: 'w-text-border-button-outline-default',
+        cssVariable: '--w-color-border-button-outline-default',
+      },
+    },
+  },
+  {
+    label: 'Misc',
+    tokens: {
+      'wagtail-logo-circle': {
+        value: 'var(--w-color-white-10)',
+        bgUtility: 'w-bg-wagtail-logo-circle',
+        textUtility: 'w-text-wagtail-logo-circle',
+        cssVariable: '--w-color-wagtail-logo-circle',
+      },
+      'wagtail-logo-bird-hover': {
+        value: 'var(--w-color-black)',
+        bgUtility: 'w-bg-wagtail-logo-bird-hover',
+        textUtility: 'w-text-wagtail-logo-bird-hover',
+        cssVariable: '--w-color-wagtail-logo-bird-hover',
+      },
+      'focus': focusToken,
+    },
+  },
+];
+
+/** @type {ThemeCategory[]} */
+const dark = [
+  {
+    label: 'Surfaces - General',
+    tokens: {
+      'surface-page': {
+        value: 'var(--w-color-grey-600)',
+        bgUtility: 'w-bg-surface-page',
+        textUtility: 'w-text-surface-page',
+        cssVariable: '--w-color-surface-page',
+      },
+      'surface-field': {
+        value: 'var(--w-color-grey-600)',
+        bgUtility: 'w-bg-surface-field',
+        textUtility: 'w-text-surface-field',
+        cssVariable: '--w-color-surface-field',
+      },
+      'surface-field-inactive': {
+        value: 'var(--w-color-grey-500)',
+        bgUtility: 'w-bg-surface-field-inactive',
+        textUtility: 'w-text-surface-field-inactive',
+        cssVariable: '--w-color-surface-field-inactive',
+      },
+      'surface-header': {
+        value: 'var(--w-color-grey-600)',
+        bgUtility: 'w-bg-surface-header',
+        textUtility: 'w-text-surface-header',
+        cssVariable: '--w-color-surface-header',
+      },
+      'surface-menus': {
+        value: 'var(--w-color-grey-500)',
+        bgUtility: 'w-bg-surface-menus',
+        textUtility: 'w-text-surface-menus',
+        cssVariable: '--w-color-surface-menus',
+      },
+      'surface-menu-item-active': {
+        value: 'var(--w-color-grey-600)',
+        bgUtility: 'w-bg-surface-menu-item-active',
+        textUtility: 'w-text-surface-menu-item-active',
+        cssVariable: '--w-color-surface-menu-item-active',
+      },
+      'surface-tooltip': {
+        value: 'var(--w-color-grey-500)',
+        bgUtility: 'w-bg-surface-tooltip',
+        textUtility: 'w-text-surface-tooltip',
+        cssVariable: '--w-color-surface-tooltip',
+      },
+      'surface-button-default': {
+        value: 'var(--w-color-secondary)',
+        bgUtility: 'w-bg-surface-button-default',
+        textUtility: 'w-text-surface-button-default',
+        cssVariable: '--w-color-surface-button-default',
+      },
+      'surface-button-hover': {
+        value: 'var(--w-color-secondary-400)',
+        bgUtility: 'w-bg-surface-button-hover',
+        textUtility: 'w-text-surface-button-hover',
+        cssVariable: '--w-color-surface-button-hover',
+      },
+      'surface-button-inactive': {
+        value: 'var(--w-color-grey-400)',
+        bgUtility: 'w-bg-surface-button-inactive',
+        textUtility: 'w-text-surface-button-inactive',
+        cssVariable: '--w-color-surface-button-inactive',
+      },
+      'surface-button-outline-hover': {
+        value: 'var(--w-color-grey-500)',
+        bgUtility: 'w-bg-surface-button-outline-hover',
+        textUtility: 'w-text-surface-button-outline-hover',
+        cssVariable: '--w-color-surface-button-outline-hover',
+      },
+      'surface-panel-information': {
+        value: 'var(--w-color-info-50)',
+        bgUtility: 'w-bg-surface-panel-information',
+        textUtility: 'w-text-surface-panel-information',
+        cssVariable: '--w-color-surface-panel-information',
+      },
+    },
+  },
+  {
+    label: 'Surfaces - Alerts',
+    tokens: {
+      'surface-alert-modal-information': {
+        value: 'var(--w-color-info-50)',
+        bgUtility: 'w-bg-surface-alert-modal-information',
+        textUtility: 'w-text-surface-alert-modal-information',
+        cssVariable: '--w-color-surface-alert-modal-information',
+      },
+      'surface-alert-information': {
+        value: 'var(--w-color-info-100)',
+        bgUtility: 'w-bg-surface-alert-information',
+        textUtility: 'w-text-surface-alert-information',
+        cssVariable: '--w-color-surface-alert-information',
+      },
+      'surface-alert-modal-confirmation': {
+        value: 'var(--w-color-positive-50)',
+        bgUtility: 'w-bg-surface-alert-modal-confirmation',
+        textUtility: 'w-text-surface-alert-modal-confirmation',
+        cssVariable: '--w-color-surface-alert-modal-confirmation',
+      },
+      'surface-alert-confirmation': {
+        value: 'var(--w-color-positive-100)',
+        bgUtility: 'w-bg-surface-alert-confirmation',
+        textUtility: 'w-text-surface-alert-confirmation',
+        cssVariable: '--w-color-surface-alert-confirmation',
+      },
+      'surface-alert-modal-warning': {
+        value: 'var(--w-color-warning-50)',
+        bgUtility: 'w-bg-surface-alert-modal-warning',
+        textUtility: 'w-text-surface-alert-modal-warning',
+        cssVariable: '--w-color-surface-alert-modal-warning',
+      },
+      'surface-alert-warning': {
+        value: 'var(--w-color-warning-100)',
+        bgUtility: 'w-bg-surface-alert-warning',
+        textUtility: 'w-text-surface-alert-warning',
+        cssVariable: '--w-color-surface-alert-warning',
+      },
+      'surface-alert-modal-danger': {
+        value: 'var(--w-color-critical-50)',
+        bgUtility: 'w-bg-surface-alert-modal-danger',
+        textUtility: 'w-text-surface-alert-modal-danger',
+        cssVariable: '--w-color-surface-alert-modal-danger',
+      },
+      'surface-alert-danger': {
+        value: 'var(--w-color-critical-200)',
+        bgUtility: 'w-bg-surface-alert-danger',
+        textUtility: 'w-text-surface-alert-danger',
+        cssVariable: '--w-color-surface-alert-danger',
+      },
+    },
+  },
+  {
+    label: 'Text',
+    tokens: {
+      'text-button': {
+        value: 'var(--w-color-white)',
+        bgUtility: 'w-bg-text-button',
+        textUtility: 'w-text-text-button',
+        cssVariable: '--w-color-text-button',
+      },
+      'text-label-menus-default': {
+        value: 'var(--w-color-white-80)',
+        bgUtility: 'w-bg-text-label-menus-default',
+        textUtility: 'w-text-text-label-menus-default',
+        cssVariable: '--w-color-text-label-menus-default',
+      },
+      'text-label-menus-active': {
+        value: 'var(--w-color-white)',
+        bgUtility: 'w-bg-text-label-menus-active',
+        textUtility: 'w-text-text-label-menus-active',
+        cssVariable: '--w-color-text-label-menus-active',
+      },
+      'text-label': {
+        value: 'var(--w-color-grey-150)',
+        bgUtility: 'w-bg-text-label',
+        textUtility: 'w-text-text-label',
+        cssVariable: '--w-color-text-label',
+      },
+      'text-context': {
+        value: 'var(--w-color-grey-50)',
+        bgUtility: 'w-bg-text-context',
+        textUtility: 'w-text-text-context',
+        cssVariable: '--w-color-text-context',
+      },
+      'text-meta': {
+        value: 'var(--w-color-grey-150)',
+        bgUtility: 'w-bg-text-meta',
+        textUtility: 'w-text-text-meta',
+        cssVariable: '--w-color-text-meta',
+      },
+      'text-placeholder': {
+        value: 'var(--w-color-grey-200)',
+        bgUtility: 'w-bg-text-placeholder',
+        textUtility: 'w-text-text-placeholder',
+        cssVariable: '--w-color-text-placeholder',
+      },
+      'text-link-default': {
+        value: 'var(--w-color-secondary-100)',
+        bgUtility: 'w-bg-text-link-default',
+        textUtility: 'w-text-text-link-default',
+        cssVariable: '--w-color-text-link-default',
+      },
+      'text-link-hover': {
+        value: 'var(--w-color-secondary-75)',
+        bgUtility: 'w-bg-text-link-hover',
+        textUtility: 'w-text-text-link-hover',
+        cssVariable: '--w-color-text-link-hover',
+      },
+      'text-button-outline-default': {
+        value: 'var(--w-color-secondary-100)',
+        bgUtility: 'w-bg-text-button-outline-default',
+        textUtility: 'w-text-text-button-outline-default',
+        cssVariable: '--w-color-text-button-outline-default',
+      },
+      'text-highlight': {
+        value: 'var(--w-color-secondary-400)',
+        bgUtility: 'w-bg-text-highlight',
+        textUtility: 'w-text-text-highlight',
+        cssVariable: '--w-color-text-highlight',
+      },
+    },
+  },
+  {
+    label: 'Icons',
+    tokens: {
+      'icon-menus-default': {
+        value: 'var(--w-color-white-80)',
+        bgUtility: 'w-bg-icon-menus-default',
+        textUtility: 'w-text-icon-menus-default',
+        cssVariable: '--w-color-icon-menus-default',
+      },
+      'icon-primary': {
+        value: 'var(--w-color-grey-150)',
+        bgUtility: 'w-bg-icon-primary',
+        textUtility: 'w-text-icon-primary',
+        cssVariable: '--w-color-icon-primary',
+      },
+      'icon-primary-hover': {
+        value: 'var(--w-color-grey-50)',
+        bgUtility: 'w-bg-icon-primary-hover',
+        textUtility: 'w-text-icon-primary-hover',
+        cssVariable: '--w-color-icon-primary-hover',
+      },
+      'icon-secondary': {
+        value: 'var(--w-color-grey-150)',
+        bgUtility: 'w-bg-icon-secondary',
+        textUtility: 'w-text-icon-secondary',
+        cssVariable: '--w-color-icon-secondary',
+      },
+      'icon-secondary-hover': {
+        value: 'var(--w-color-grey-50)',
+        bgUtility: 'w-bg-icon-secondary-hover',
+        textUtility: 'w-text-icon-secondary-hover',
+        cssVariable: '--w-color-icon-secondary-hover',
+      },
+      'icon-alert-modal-information': {
+        value: 'var(--w-color-info-100)',
+        bgUtility: 'w-bg-icon-alert-modal-information',
+        textUtility: 'w-text-icon-alert-modal-information',
+        cssVariable: '--w-color-icon-alert-modal-information',
+      },
+      'icon-alert-modal-confirmation': {
+        value: 'var(--w-color-positive-100)',
+        bgUtility: 'w-bg-icon-alert-modal-confirmation',
+        textUtility: 'w-text-icon-alert-modal-confirmation',
+        cssVariable: '--w-color-icon-alert-modal-confirmation',
+      },
+      'icon-alert-modal-warning': {
+        value: 'var(--w-color-warning-100)',
+        bgUtility: 'w-bg-icon-alert-modal-warning',
+        textUtility: 'w-text-icon-alert-modal-warning',
+        cssVariable: '--w-color-icon-alert-modal-warning',
+      },
+      'icon-alert-modal-danger': {
+        value: 'var(--w-color-critical-200)',
+        bgUtility: 'w-bg-icon-alert-modal-danger',
+        textUtility: 'w-text-icon-alert-modal-danger',
+        cssVariable: '--w-color-icon-alert-modal-danger',
+      },
+    },
+  },
+  {
+    label: 'Borders',
+    tokens: {
+      'border-furniture': {
+        value: 'var(--w-color-grey-500)',
+        bgUtility: 'w-bg-border-furniture',
+        textUtility: 'w-text-border-furniture',
+        cssVariable: '--w-color-border-furniture',
+      },
+      'border-dashed-block': {
+        value: 'var(--w-color-grey-500)',
+        bgUtility: 'w-bg-border-dashed-block',
+        textUtility: 'w-text-border-dashed-block',
+        cssVariable: '--w-color-border-dashed-block',
+      },
+      'border-button-small-outline-default': {
+        value: 'var(--w-color-grey-400)',
+        bgUtility: 'w-bg-border-button-small-outline-default',
+        textUtility: 'w-text-border-button-small-outline-default',
+        cssVariable: '--w-color-border-button-small-outline-default',
+      },
+      'border-field-default': {
+        value: 'var(--w-color-grey-400)',
+        bgUtility: 'w-bg-border-field-default',
+        textUtility: 'w-text-border-field-default',
+        cssVariable: '--w-color-border-field-default',
+      },
+      'border-field-inactive': {
+        value: 'var(--w-color-grey-500)',
+        bgUtility: 'w-bg-border-field-inactive',
+        textUtility: 'w-text-border-field-inactive',
+        cssVariable: '--w-color-border-field-inactive',
+      },
+      'border-field-hover': {
+        value: 'var(--w-color-grey-200)',
+        bgUtility: 'w-bg-border-field-hover',
+        textUtility: 'w-text-border-field-hover',
+        cssVariable: '--w-color-border-field-hover',
+      },
+      'border-button-outline-default': {
+        value: 'var(--w-color-secondary-100)',
+        bgUtility: 'w-bg-border-button-outline-default',
+        textUtility: 'w-text-border-button-outline-default',
+        cssVariable: '--w-color-border-button-outline-default',
+      },
+    },
+  },
+  {
+    label: 'Misc',
+    tokens: {
+      'wagtail-logo-circle': {
+        value: 'var(--w-color-white-10)',
+        bgUtility: 'w-bg-wagtail-logo-circle',
+        textUtility: 'w-text-wagtail-logo-circle',
+        cssVariable: '--w-color-wagtail-logo-circle',
+      },
+      'wagtail-logo-bird-hover': {
+        value: 'var(--w-color-black)',
+        bgUtility: 'w-bg-wagtail-logo-bird-hover',
+        textUtility: 'w-text-wagtail-logo-bird-hover',
+        cssVariable: '--w-color-wagtail-logo-bird-hover',
+      },
+      'focus': focusToken,
+    },
+  },
+];
+
+module.exports = {
+  light,
+  dark,
+};
diff --git a/client/src/tokens/colorVariables.js b/client/src/tokens/colorVariables.js
index 27a196af87..43f792b8aa 100644
--- a/client/src/tokens/colorVariables.js
+++ b/client/src/tokens/colorVariables.js
@@ -85,6 +85,19 @@ const generateColorVariables = (colors) => {
   return colorVariables;
 };
 
+const generateThemeColorVariables = (themeCategories) => {
+  const colorVariables = {};
+
+  themeCategories.forEach((category) => {
+    Object.values(category.tokens).forEach((token) => {
+      colorVariables[token.cssVariable] = token.value;
+    });
+  });
+
+  return colorVariables;
+};
+
 module.exports = {
   generateColorVariables,
+  generateThemeColorVariables,
 };
diff --git a/client/src/tokens/colorVariables.test.js b/client/src/tokens/colorVariables.test.js
index d27b2d95cf..f96ae63266 100644
--- a/client/src/tokens/colorVariables.test.js
+++ b/client/src/tokens/colorVariables.test.js
@@ -59,6 +59,10 @@ describe('generateColorVariables', () => {
         "--w-color-grey-50-hue": "calc(var(--w-color-grey-600-hue) + 240)",
         "--w-color-grey-50-lightness": "calc(var(--w-color-grey-600-lightness) + 82%)",
         "--w-color-grey-50-saturation": "calc(var(--w-color-grey-600-saturation) + 12.5%)",
+        "--w-color-grey-500": "hsl(var(--w-color-grey-500-hue) var(--w-color-grey-500-saturation) var(--w-color-grey-500-lightness))",
+        "--w-color-grey-500-hue": "var(--w-color-grey-600-hue)",
+        "--w-color-grey-500-lightness": "calc(var(--w-color-grey-600-lightness) + 5.1%)",
+        "--w-color-grey-500-saturation": "var(--w-color-grey-600-saturation)",
         "--w-color-grey-600": "hsl(var(--w-color-grey-600-hue) var(--w-color-grey-600-saturation) var(--w-color-grey-600-lightness))",
         "--w-color-grey-600-hue": "0",
         "--w-color-grey-600-lightness": "14.9%",
diff --git a/client/src/tokens/colors.js b/client/src/tokens/colors.js
index 57c9f71746..e1cf6996c4 100644
--- a/client/src/tokens/colors.js
+++ b/client/src/tokens/colors.js
@@ -39,6 +39,15 @@ const colors = {
       usage: 'Body copy, user content',
       contrastText: 'white',
     },
+    500: {
+      hex: '#333333',
+      hsl: 'hsl(0 0% 20%)',
+      bgUtility: 'w-bg-grey-500',
+      textUtility: 'w-text-grey-500',
+      cssVariable: '--w-color-grey-500',
+      usage: 'Panels, dividers in dark mode',
+      contrastText: 'white',
+    },
     400: {
       hex: '#5C5C5C',
       hsl: 'hsl(0 0% 36.1%)',
@@ -224,7 +233,7 @@ const colors = {
       contrastText: 'primary',
     },
     50: {
-      hex: '#FAECD5',
+      hex: '#FFF5D8',
       hsl: 'hsl(37.3 78.7% 90.8%)',
       bgUtility: 'w-bg-warning-50',
       textUtility: 'w-text-warning-50',
diff --git a/client/src/tokens/colors.stories.tsx b/client/src/tokens/colors.stories.tsx
index 7ef2cb0708..dd5adb5341 100644
--- a/client/src/tokens/colors.stories.tsx
+++ b/client/src/tokens/colors.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import colors, { Hues, Shade } from './colors';
+import colorThemes, { Token, ThemeCategory } from './colorThemes';
 import { generateColorVariables } from './colorVariables';
 
 const description = `
@@ -85,6 +86,50 @@ export const ColorPalette = () => (
   </>
 );
 
+const TokenSwatch = ({ name, token }: { name: string; token: Token }) => (
+  <div className="w-shadow w-border w-border-border-furniture w-rounded w-w-36 w-p-2.5">
+    <div
+      className={`w-w-12 w-h-10 w-rounded ${token.bgUtility}${
+        token.value.includes('white') || token.value.includes('grey-600')
+          ? ' w-border w-border-border-furniture'
+          : ''
+      }`}
+    />
+    <h4 className="w-label-3">{name}</h4>
+    <p className="w-help-text">
+      {token.value.replace('var(--w-color-', '').replace(')', '')}
+    </p>
+  </div>
+);
+
+const CategorySwatches = ({ category }: { category: ThemeCategory }) => (
+  <div key={category.label}>
+    <h3 className="w-h3">{category.label}</h3>
+    <div className="w-grid w-grid-flow-col w-gap-2.5">
+      {Object.entries(category.tokens).map(([name, token]) => (
+        <TokenSwatch key={token} name={name} token={token} />
+      ))}
+    </div>
+  </div>
+);
+
+export const ColorThemes = () => (
+  <>
+    <section className="w-bg-surface-page w-pt-6 w-mt-6 -w-mx-4 w-px-4">
+      <h2 className="w-h2">Light</h2>
+      {colorThemes.light.map((category: ThemeCategory) => (
+        <CategorySwatches key={category.label} category={category} />
+      ))}
+    </section>
+    <section className="w-bg-surface-page w-pt-6 w-mt-6 -w-mx-4 w-px-4 w-theme-dark">
+      <h2 className="w-h2">Dark</h2>
+      {colorThemes.dark.map((category: ThemeCategory) => (
+        <CategorySwatches key={category.label} category={category} />
+      ))}
+    </section>
+  </>
+);
+
 const variablesMap = Object.entries(generateColorVariables(colors))
   .map(([cssVar, val]) => `${cssVar}: ${val};`)
   .join('');
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 67266466a6..861dc298b6 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -4,7 +4,11 @@ const vanillaRTL = require('tailwindcss-vanilla-rtl');
  * Design Tokens
  */
 const colors = require('./src/tokens/colors');
-const { generateColorVariables } = require('./src/tokens/colorVariables');
+const {
+  generateColorVariables,
+  generateThemeColorVariables,
+} = require('./src/tokens/colorVariables');
+const colorThemes = require('./src/tokens/colorThemes');
 const {
   fontFamily,
   fontSize,
@@ -43,6 +47,14 @@ const themeColors = Object.fromEntries(
   }),
 );
 
+const lightThemeColors = colorThemes.light.reduce((colorTokens, category) => {
+  Object.entries(category.tokens).forEach(([name, token]) => {
+    // eslint-disable-next-line no-param-reassign
+    colorTokens[name] = `var(${token.cssVariable})`;
+  });
+  return colorTokens;
+}, {});
+
 /**
  * Root Tailwind config, reusable for other projects.
  */
@@ -54,14 +66,17 @@ module.exports = {
     },
     colors: {
       ...themeColors,
-      // Fades of white and black are not customisable.
-      'white-15': 'rgba(255, 255, 255, 0.15)',
-      'white-50': 'rgba(255, 255, 255, 0.50)',
-      'white-80': 'rgba(255, 255, 255, 0.80)',
-      'black-10': 'rgba(0, 0, 0, 0.10)',
-      'black-20': 'rgba(0, 0, 0, 0.20)',
-      'black-35': 'rgba(0, 0, 0, 0.35)',
-      'black-50': 'rgba(0, 0, 0, 0.50)',
+      ...lightThemeColors,
+      'white-10': 'var(--w-color-white-10)',
+      'white-15': 'var(--w-color-white-15)',
+      'white-50': 'var(--w-color-white-50)',
+      'white-80': 'var(--w-color-white-80)',
+      'black-5': 'var(--w-color-black-5)',
+      'black-10': 'var(--w-color-black-10)',
+      'black-20': 'var(--w-color-black-20)',
+      'black-25': 'var(--w-color-black-25)',
+      'black-35': 'var(--w-color-black-35)',
+      'black-50': 'var(--w-color-black-50)',
       // Color keywords.
       'inherit': 'inherit',
       'current': 'currentColor',
@@ -150,8 +165,25 @@ module.exports = {
         ':root, :host': {
           '--w-font-sans': fontFamily.sans.join(', '),
           '--w-font-mono': fontFamily.mono.join(', '),
+          '--w-color-white-10': 'rgba(255, 255, 255, 0.10)',
+          '--w-color-white-15': 'rgba(255, 255, 255, 0.15)',
+          '--w-color-white-50': 'rgba(255, 255, 255, 0.50)',
+          '--w-color-white-80': 'rgba(255, 255, 255, 0.80)',
+          '--w-color-black-5': 'rgba(0, 0, 0, 0.05)',
+          '--w-color-black-10': 'rgba(0, 0, 0, 0.10)',
+          '--w-color-black-20': 'rgba(0, 0, 0, 0.20)',
+          '--w-color-black-25': 'rgba(0, 0, 0, 0.25)',
+          '--w-color-black-35': 'rgba(0, 0, 0, 0.35)',
+          '--w-color-black-50': 'rgba(0, 0, 0, 0.50)',
           ...generateColorVariables(colors),
+          ...generateThemeColorVariables(colorThemes.light),
         },
+        '.w-theme-system': {
+          '@media (prefers-color-scheme: dark)': generateThemeColorVariables(
+            colorThemes.dark,
+          ),
+        },
+        '.w-theme-dark': generateThemeColorVariables(colorThemes.dark),
       });
     }),
     /** Support for aria-expanded=true variant */
diff --git a/docs/advanced_topics/customisation/admin_templates.md b/docs/advanced_topics/customisation/admin_templates.md
index bb986addee..bc3ed91842 100644
--- a/docs/advanced_topics/customisation/admin_templates.md
+++ b/docs/advanced_topics/customisation/admin_templates.md
@@ -108,7 +108,7 @@ The default Wagtail colours conform to the WCAG2.1 AA level colour contrast requ
 
 To customise the colours used in the admin user interface, inject a CSS file using the hook [](insert_global_admin_css) and set the desired variables within the `:root` selector. There are two ways to customisation options: either set each colour separately (for example `--w-color-primary: #2E1F5E;`); or separately set [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV) (`--w-color-primary-hue`, `--w-color-primary-saturation`, `--w-color-primary-lightness`) variables so all shades are customised at once. For example, setting `--w-color-secondary-hue: 180;` will customise all of the secondary shades at once.
 
-<section><div><!-- Auto-generated with Storybook. See https://github.com/wagtail/wagtail/blob/main/client/src/tokens/colors.stories.tsx. Copy this comment’s parent section to update the `custom_user_interface_colours` documentation. --></div><p>Make sure to test any customisations against our <a href="https://contrast-grid.eightshapes.com/?version=1.1.0&amp;es-color-form__tile-size=compact&amp;es-color-form__show-contrast=aaa&amp;es-color-form__show-contrast=aa&amp;es-color-form__show-contrast=aa18&amp;background-colors=%23000000%2C%20black%0D%0A%23F6F6F8%2C%20grey-50%0D%0A%23E0E0E0%2C%20grey-100%0D%0A%23C8C8C8%2C%20grey-150%0D%0A%23929292%2C%20grey-200%0D%0A%235C5C5C%2C%20grey-400%0D%0A%23262626%2C%20grey-600%0D%0A%23FFFFFF%2C%20white%0D%0A%23261A4E%2C%20primary-200%0D%0A%232E1F5E%2C%20primary%0D%0A%23F2FCFC%2C%20secondary-50%0D%0A%2380D7D8%2C%20secondary-75%0D%0A%2300B0B1%2C%20secondary-100%0D%0A%23005B5E%2C%20secondary-400%0D%0A%23004345%2C%20secondary-600%0D%0A%23007D7E%2C%20secondary%0D%0A%23E2F5FC%2C%20info-50%0D%0A%231F7E9A%2C%20info-100%0D%0A%23E0FBF4%2C%20positive-50%0D%0A%231B8666%2C%20positive-100%0D%0A%23FAECD5%2C%20warning-50%0D%0A%23FAA500%2C%20warning-100%0D%0A%23FDE9E9%2C%20critical-50%0D%0A%23FD5765%2C%20critical-100%0D%0A%23CD4444%2C%20critical-200&amp;foreground-colors=%23000000%2C%20black%0D%0A%23F6F6F8%2C%20grey-50%0D%0A%23E0E0E0%2C%20grey-100%0D%0A%23C8C8C8%2C%20grey-150%0D%0A%23929292%2C%20grey-200%0D%0A%235C5C5C%2C%20grey-400%0D%0A%23262626%2C%20grey-600%0D%0A%23FFFFFF%2C%20white%0D%0A%23261A4E%2C%20primary-200%0D%0A%232E1F5E%2C%20primary%0D%0A%23F2FCFC%2C%20secondary-50%0D%0A%2380D7D8%2C%20secondary-75%0D%0A%2300B0B1%2C%20secondary-100%0D%0A%23005B5E%2C%20secondary-400%0D%0A%23004345%2C%20secondary-600%0D%0A%23007D7E%2C%20secondary%0D%0A%231F7E9A%2C%20info-100%0D%0A%231B8666%2C%20positive-100%0D%0A%23FAA500%2C%20warning-100%0D%0A%23FD5765%2C%20critical-100%0D%0A%23CD4444%2C%20critical-200">Contrast Grid</a>. Try out your own customisations with this interactive style editor:</p><style> :root {--w-color-black-hue: 0;--w-color-black-saturation: 0%;--w-color-black-lightness: 0%;--w-color-black: hsl(var(--w-color-black-hue) var(--w-color-black-saturation) var(--w-color-black-lightness));--w-color-grey-50-hue: calc(var(--w-color-grey-600-hue) + 240);--w-color-grey-50-saturation: calc(var(--w-color-grey-600-saturation) + 12.5%);--w-color-grey-50-lightness: calc(var(--w-color-grey-600-lightness) + 82%);--w-color-grey-50: hsl(var(--w-color-grey-50-hue) var(--w-color-grey-50-saturation) var(--w-color-grey-50-lightness));--w-color-grey-100-hue: var(--w-color-grey-600-hue);--w-color-grey-100-saturation: var(--w-color-grey-600-saturation);--w-color-grey-100-lightness: calc(var(--w-color-grey-600-lightness) + 72.9%);--w-color-grey-100: hsl(var(--w-color-grey-100-hue) var(--w-color-grey-100-saturation) var(--w-color-grey-100-lightness));--w-color-grey-150-hue: var(--w-color-grey-600-hue);--w-color-grey-150-saturation: var(--w-color-grey-600-saturation);--w-color-grey-150-lightness: calc(var(--w-color-grey-600-lightness) + 63.5%);--w-color-grey-150: hsl(var(--w-color-grey-150-hue) var(--w-color-grey-150-saturation) var(--w-color-grey-150-lightness));--w-color-grey-200-hue: var(--w-color-grey-600-hue);--w-color-grey-200-saturation: var(--w-color-grey-600-saturation);--w-color-grey-200-lightness: calc(var(--w-color-grey-600-lightness) + 42.4%);--w-color-grey-200: hsl(var(--w-color-grey-200-hue) var(--w-color-grey-200-saturation) var(--w-color-grey-200-lightness));--w-color-grey-400-hue: var(--w-color-grey-600-hue);--w-color-grey-400-saturation: var(--w-color-grey-600-saturation);--w-color-grey-400-lightness: calc(var(--w-color-grey-600-lightness) + 21.2%);--w-color-grey-400: hsl(var(--w-color-grey-400-hue) var(--w-color-grey-400-saturation) var(--w-color-grey-400-lightness));--w-color-grey-600-hue: 0;--w-color-grey-600-saturation: 0%;--w-color-grey-600-lightness: 14.9%;--w-color-grey-600: hsl(var(--w-color-grey-600-hue) var(--w-color-grey-600-saturation) var(--w-color-grey-600-lightness));--w-color-white-hue: 0;--w-color-white-saturation: 0%;--w-color-white-lightness: 100%;--w-color-white: hsl(var(--w-color-white-hue) var(--w-color-white-saturation) var(--w-color-white-lightness));--w-color-primary-200-hue: calc(var(--w-color-primary-hue) - 0.5);--w-color-primary-200-saturation: calc(var(--w-color-primary-saturation) - 0.4%);--w-color-primary-200-lightness: calc(var(--w-color-primary-lightness) - 4.1%);--w-color-primary-200: hsl(var(--w-color-primary-200-hue) var(--w-color-primary-200-saturation) var(--w-color-primary-200-lightness));--w-color-primary-hue: 254.3;--w-color-primary-saturation: 50.4%;--w-color-primary-lightness: 24.5%;--w-color-primary: hsl(var(--w-color-primary-hue) var(--w-color-primary-saturation) var(--w-color-primary-lightness));--w-color-secondary-50-hue: calc(var(--w-color-secondary-hue) - 0.5);--w-color-secondary-50-saturation: calc(var(--w-color-secondary-saturation) - 37.5%);--w-color-secondary-50-lightness: calc(var(--w-color-secondary-lightness) + 72.2%);--w-color-secondary-50: hsl(var(--w-color-secondary-50-hue) var(--w-color-secondary-50-saturation) var(--w-color-secondary-50-lightness));--w-color-secondary-75-hue: calc(var(--w-color-secondary-hue) + 0.2);--w-color-secondary-75-saturation: calc(var(--w-color-secondary-saturation) - 47%);--w-color-secondary-75-lightness: calc(var(--w-color-secondary-lightness) + 42.8%);--w-color-secondary-75: hsl(var(--w-color-secondary-75-hue) var(--w-color-secondary-75-saturation) var(--w-color-secondary-75-lightness));--w-color-secondary-100-hue: calc(var(--w-color-secondary-hue) - 0.2);--w-color-secondary-100-saturation: var(--w-color-secondary-saturation);--w-color-secondary-100-lightness: calc(var(--w-color-secondary-lightness) + 10%);--w-color-secondary-100: hsl(var(--w-color-secondary-100-hue) var(--w-color-secondary-100-saturation) var(--w-color-secondary-100-lightness));--w-color-secondary-400-hue: calc(var(--w-color-secondary-hue) + 1.4);--w-color-secondary-400-saturation: var(--w-color-secondary-saturation);--w-color-secondary-400-lightness: calc(var(--w-color-secondary-lightness) - 6.3%);--w-color-secondary-400: hsl(var(--w-color-secondary-400-hue) var(--w-color-secondary-400-saturation) var(--w-color-secondary-400-lightness));--w-color-secondary-600-hue: calc(var(--w-color-secondary-hue) + 1.2);--w-color-secondary-600-saturation: var(--w-color-secondary-saturation);--w-color-secondary-600-lightness: calc(var(--w-color-secondary-lightness) - 11.2%);--w-color-secondary-600: hsl(var(--w-color-secondary-600-hue) var(--w-color-secondary-600-saturation) var(--w-color-secondary-600-lightness));--w-color-secondary-hue: 180.5;--w-color-secondary-saturation: 100%;--w-color-secondary-lightness: 24.7%;--w-color-secondary: hsl(var(--w-color-secondary-hue) var(--w-color-secondary-saturation) var(--w-color-secondary-lightness));--w-color-info-50-hue: calc(var(--w-color-info-100-hue) + 2.5);--w-color-info-50-saturation: calc(var(--w-color-info-100-saturation) + 14.8%);--w-color-info-50-lightness: calc(var(--w-color-info-100-lightness) + 57.4%);--w-color-info-50: hsl(var(--w-color-info-50-hue) var(--w-color-info-50-saturation) var(--w-color-info-50-lightness));--w-color-info-100-hue: 193.7;--w-color-info-100-saturation: 66.5%;--w-color-info-100-lightness: 36.3%;--w-color-info-100: hsl(var(--w-color-info-100-hue) var(--w-color-info-100-saturation) var(--w-color-info-100-lightness));--w-color-positive-50-hue: calc(var(--w-color-positive-100-hue) + 2.3);--w-color-positive-50-saturation: calc(var(--w-color-positive-100-saturation) + 10.6%);--w-color-positive-50-lightness: calc(var(--w-color-positive-100-lightness) + 61.5%);--w-color-positive-50: hsl(var(--w-color-positive-50-hue) var(--w-color-positive-50-saturation) var(--w-color-positive-50-lightness));--w-color-positive-100-hue: 162.1;--w-color-positive-100-saturation: 66.5%;--w-color-positive-100-lightness: 31.6%;--w-color-positive-100: hsl(var(--w-color-positive-100-hue) var(--w-color-positive-100-saturation) var(--w-color-positive-100-lightness));--w-color-warning-50-hue: calc(var(--w-color-warning-100-hue) - 2.3);--w-color-warning-50-saturation: calc(var(--w-color-warning-100-saturation) - 21.3%);--w-color-warning-50-lightness: calc(var(--w-color-warning-100-lightness) + 41.8%);--w-color-warning-50: hsl(var(--w-color-warning-50-hue) var(--w-color-warning-50-saturation) var(--w-color-warning-50-lightness));--w-color-warning-100-hue: 39.6;--w-color-warning-100-saturation: 100%;--w-color-warning-100-lightness: 49%;--w-color-warning-100: hsl(var(--w-color-warning-100-hue) var(--w-color-warning-100-saturation) var(--w-color-warning-100-lightness));--w-color-critical-50-hue: var(--w-color-critical-200-hue);--w-color-critical-50-saturation: calc(var(--w-color-critical-200-saturation) + 25.5%);--w-color-critical-50-lightness: calc(var(--w-color-critical-200-lightness) + 41.8%);--w-color-critical-50: hsl(var(--w-color-critical-50-hue) var(--w-color-critical-50-saturation) var(--w-color-critical-50-lightness));--w-color-critical-100-hue: calc(var(--w-color-critical-200-hue) + 354.9);--w-color-critical-100-saturation: calc(var(--w-color-critical-200-saturation) + 39.8%);--w-color-critical-100-lightness: calc(var(--w-color-critical-200-lightness) + 13.2%);--w-color-critical-100: hsl(var(--w-color-critical-100-hue) var(--w-color-critical-100-saturation) var(--w-color-critical-100-lightness));--w-color-critical-200-hue: 0;--w-color-critical-200-saturation: 57.8%;--w-color-critical-200-lightness: 53.5%;--w-color-critical-200: hsl(var(--w-color-critical-200-hue) var(--w-color-critical-200-saturation) var(--w-color-critical-200-lightness));} .wagtail-color-swatch { border-collapse: separate; border-spacing: 4px; } .wagtail-color-swatch td:first-child { height: 1.5rem; width: 1.5rem; border: 1px solid #333; forced-color-adjust: none; } </style><pre><style contenteditable="true" style="display: block;">:root {
+<section><div><!-- Auto-generated with Storybook. See https://github.com/wagtail/wagtail/blob/main/client/src/tokens/colors.stories.tsx. Copy this comment’s parent section to update the `custom_user_interface_colours` documentation. --></div><p>Make sure to test any customisations against our <a href="https://contrast-grid.eightshapes.com/?version=1.1.0&amp;es-color-form__tile-size=compact&amp;es-color-form__show-contrast=aaa&amp;es-color-form__show-contrast=aa&amp;es-color-form__show-contrast=aa18&amp;background-colors=%23000000%2C%20black%0D%0A%23F6F6F8%2C%20grey-50%0D%0A%23E0E0E0%2C%20grey-100%0D%0A%23C8C8C8%2C%20grey-150%0D%0A%23929292%2C%20grey-200%0D%0A%235C5C5C%2C%20grey-400%0D%0A%23333333%2C%20grey-500%0D%0A%23262626%2C%20grey-600%0D%0A%23FFFFFF%2C%20white%0D%0A%23261A4E%2C%20primary-200%0D%0A%232E1F5E%2C%20primary%0D%0A%23F2FCFC%2C%20secondary-50%0D%0A%2380D7D8%2C%20secondary-75%0D%0A%2300B0B1%2C%20secondary-100%0D%0A%23005B5E%2C%20secondary-400%0D%0A%23004345%2C%20secondary-600%0D%0A%23007D7E%2C%20secondary%0D%0A%23E2F5FC%2C%20info-50%0D%0A%231F7E9A%2C%20info-100%0D%0A%23E0FBF4%2C%20positive-50%0D%0A%231B8666%2C%20positive-100%0D%0A%23FFF5D8%2C%20warning-50%0D%0A%23FAA500%2C%20warning-100%0D%0A%23FDE9E9%2C%20critical-50%0D%0A%23FD5765%2C%20critical-100%0D%0A%23CD4444%2C%20critical-200&amp;foreground-colors=%23000000%2C%20black%0D%0A%23F6F6F8%2C%20grey-50%0D%0A%23E0E0E0%2C%20grey-100%0D%0A%23C8C8C8%2C%20grey-150%0D%0A%23929292%2C%20grey-200%0D%0A%235C5C5C%2C%20grey-400%0D%0A%23333333%2C%20grey-500%0D%0A%23262626%2C%20grey-600%0D%0A%23FFFFFF%2C%20white%0D%0A%23261A4E%2C%20primary-200%0D%0A%232E1F5E%2C%20primary%0D%0A%23F2FCFC%2C%20secondary-50%0D%0A%2380D7D8%2C%20secondary-75%0D%0A%2300B0B1%2C%20secondary-100%0D%0A%23005B5E%2C%20secondary-400%0D%0A%23004345%2C%20secondary-600%0D%0A%23007D7E%2C%20secondary%0D%0A%231F7E9A%2C%20info-100%0D%0A%231B8666%2C%20positive-100%0D%0A%23FAA500%2C%20warning-100%0D%0A%23FD5765%2C%20critical-100%0D%0A%23CD4444%2C%20critical-200">Contrast Grid</a>. Try out your own customisations with this interactive style editor:</p><style> :root {--w-color-black-hue: 0;--w-color-black-saturation: 0%;--w-color-black-lightness: 0%;--w-color-black: hsl(var(--w-color-black-hue) var(--w-color-black-saturation) var(--w-color-black-lightness));--w-color-grey-50-hue: calc(var(--w-color-grey-600-hue) + 240);--w-color-grey-50-saturation: calc(var(--w-color-grey-600-saturation) + 12.5%);--w-color-grey-50-lightness: calc(var(--w-color-grey-600-lightness) + 82%);--w-color-grey-50: hsl(var(--w-color-grey-50-hue) var(--w-color-grey-50-saturation) var(--w-color-grey-50-lightness));--w-color-grey-100-hue: var(--w-color-grey-600-hue);--w-color-grey-100-saturation: var(--w-color-grey-600-saturation);--w-color-grey-100-lightness: calc(var(--w-color-grey-600-lightness) + 72.9%);--w-color-grey-100: hsl(var(--w-color-grey-100-hue) var(--w-color-grey-100-saturation) var(--w-color-grey-100-lightness));--w-color-grey-150-hue: var(--w-color-grey-600-hue);--w-color-grey-150-saturation: var(--w-color-grey-600-saturation);--w-color-grey-150-lightness: calc(var(--w-color-grey-600-lightness) + 63.5%);--w-color-grey-150: hsl(var(--w-color-grey-150-hue) var(--w-color-grey-150-saturation) var(--w-color-grey-150-lightness));--w-color-grey-200-hue: var(--w-color-grey-600-hue);--w-color-grey-200-saturation: var(--w-color-grey-600-saturation);--w-color-grey-200-lightness: calc(var(--w-color-grey-600-lightness) + 42.4%);--w-color-grey-200: hsl(var(--w-color-grey-200-hue) var(--w-color-grey-200-saturation) var(--w-color-grey-200-lightness));--w-color-grey-400-hue: var(--w-color-grey-600-hue);--w-color-grey-400-saturation: var(--w-color-grey-600-saturation);--w-color-grey-400-lightness: calc(var(--w-color-grey-600-lightness) + 21.2%);--w-color-grey-400: hsl(var(--w-color-grey-400-hue) var(--w-color-grey-400-saturation) var(--w-color-grey-400-lightness));--w-color-grey-500-hue: var(--w-color-grey-600-hue);--w-color-grey-500-saturation: var(--w-color-grey-600-saturation);--w-color-grey-500-lightness: calc(var(--w-color-grey-600-lightness) + 5.1%);--w-color-grey-500: hsl(var(--w-color-grey-500-hue) var(--w-color-grey-500-saturation) var(--w-color-grey-500-lightness));--w-color-grey-600-hue: 0;--w-color-grey-600-saturation: 0%;--w-color-grey-600-lightness: 14.9%;--w-color-grey-600: hsl(var(--w-color-grey-600-hue) var(--w-color-grey-600-saturation) var(--w-color-grey-600-lightness));--w-color-white-hue: 0;--w-color-white-saturation: 0%;--w-color-white-lightness: 100%;--w-color-white: hsl(var(--w-color-white-hue) var(--w-color-white-saturation) var(--w-color-white-lightness));--w-color-primary-200-hue: calc(var(--w-color-primary-hue) - 0.5);--w-color-primary-200-saturation: calc(var(--w-color-primary-saturation) - 0.4%);--w-color-primary-200-lightness: calc(var(--w-color-primary-lightness) - 4.1%);--w-color-primary-200: hsl(var(--w-color-primary-200-hue) var(--w-color-primary-200-saturation) var(--w-color-primary-200-lightness));--w-color-primary-hue: 254.3;--w-color-primary-saturation: 50.4%;--w-color-primary-lightness: 24.5%;--w-color-primary: hsl(var(--w-color-primary-hue) var(--w-color-primary-saturation) var(--w-color-primary-lightness));--w-color-secondary-50-hue: calc(var(--w-color-secondary-hue) - 0.5);--w-color-secondary-50-saturation: calc(var(--w-color-secondary-saturation) - 37.5%);--w-color-secondary-50-lightness: calc(var(--w-color-secondary-lightness) + 72.2%);--w-color-secondary-50: hsl(var(--w-color-secondary-50-hue) var(--w-color-secondary-50-saturation) var(--w-color-secondary-50-lightness));--w-color-secondary-75-hue: calc(var(--w-color-secondary-hue) + 0.2);--w-color-secondary-75-saturation: calc(var(--w-color-secondary-saturation) - 47%);--w-color-secondary-75-lightness: calc(var(--w-color-secondary-lightness) + 42.8%);--w-color-secondary-75: hsl(var(--w-color-secondary-75-hue) var(--w-color-secondary-75-saturation) var(--w-color-secondary-75-lightness));--w-color-secondary-100-hue: calc(var(--w-color-secondary-hue) - 0.2);--w-color-secondary-100-saturation: var(--w-color-secondary-saturation);--w-color-secondary-100-lightness: calc(var(--w-color-secondary-lightness) + 10%);--w-color-secondary-100: hsl(var(--w-color-secondary-100-hue) var(--w-color-secondary-100-saturation) var(--w-color-secondary-100-lightness));--w-color-secondary-400-hue: calc(var(--w-color-secondary-hue) + 1.4);--w-color-secondary-400-saturation: var(--w-color-secondary-saturation);--w-color-secondary-400-lightness: calc(var(--w-color-secondary-lightness) - 6.3%);--w-color-secondary-400: hsl(var(--w-color-secondary-400-hue) var(--w-color-secondary-400-saturation) var(--w-color-secondary-400-lightness));--w-color-secondary-600-hue: calc(var(--w-color-secondary-hue) + 1.2);--w-color-secondary-600-saturation: var(--w-color-secondary-saturation);--w-color-secondary-600-lightness: calc(var(--w-color-secondary-lightness) - 11.2%);--w-color-secondary-600: hsl(var(--w-color-secondary-600-hue) var(--w-color-secondary-600-saturation) var(--w-color-secondary-600-lightness));--w-color-secondary-hue: 180.5;--w-color-secondary-saturation: 100%;--w-color-secondary-lightness: 24.7%;--w-color-secondary: hsl(var(--w-color-secondary-hue) var(--w-color-secondary-saturation) var(--w-color-secondary-lightness));--w-color-info-50-hue: calc(var(--w-color-info-100-hue) + 2.5);--w-color-info-50-saturation: calc(var(--w-color-info-100-saturation) + 14.8%);--w-color-info-50-lightness: calc(var(--w-color-info-100-lightness) + 57.4%);--w-color-info-50: hsl(var(--w-color-info-50-hue) var(--w-color-info-50-saturation) var(--w-color-info-50-lightness));--w-color-info-100-hue: 193.7;--w-color-info-100-saturation: 66.5%;--w-color-info-100-lightness: 36.3%;--w-color-info-100: hsl(var(--w-color-info-100-hue) var(--w-color-info-100-saturation) var(--w-color-info-100-lightness));--w-color-positive-50-hue: calc(var(--w-color-positive-100-hue) + 2.3);--w-color-positive-50-saturation: calc(var(--w-color-positive-100-saturation) + 10.6%);--w-color-positive-50-lightness: calc(var(--w-color-positive-100-lightness) + 61.5%);--w-color-positive-50: hsl(var(--w-color-positive-50-hue) var(--w-color-positive-50-saturation) var(--w-color-positive-50-lightness));--w-color-positive-100-hue: 162.1;--w-color-positive-100-saturation: 66.5%;--w-color-positive-100-lightness: 31.6%;--w-color-positive-100: hsl(var(--w-color-positive-100-hue) var(--w-color-positive-100-saturation) var(--w-color-positive-100-lightness));--w-color-warning-50-hue: calc(var(--w-color-warning-100-hue) - 2.3);--w-color-warning-50-saturation: calc(var(--w-color-warning-100-saturation) - 21.3%);--w-color-warning-50-lightness: calc(var(--w-color-warning-100-lightness) + 41.8%);--w-color-warning-50: hsl(var(--w-color-warning-50-hue) var(--w-color-warning-50-saturation) var(--w-color-warning-50-lightness));--w-color-warning-100-hue: 39.6;--w-color-warning-100-saturation: 100%;--w-color-warning-100-lightness: 49%;--w-color-warning-100: hsl(var(--w-color-warning-100-hue) var(--w-color-warning-100-saturation) var(--w-color-warning-100-lightness));--w-color-critical-50-hue: var(--w-color-critical-200-hue);--w-color-critical-50-saturation: calc(var(--w-color-critical-200-saturation) + 25.5%);--w-color-critical-50-lightness: calc(var(--w-color-critical-200-lightness) + 41.8%);--w-color-critical-50: hsl(var(--w-color-critical-50-hue) var(--w-color-critical-50-saturation) var(--w-color-critical-50-lightness));--w-color-critical-100-hue: calc(var(--w-color-critical-200-hue) + 354.9);--w-color-critical-100-saturation: calc(var(--w-color-critical-200-saturation) + 39.8%);--w-color-critical-100-lightness: calc(var(--w-color-critical-200-lightness) + 13.2%);--w-color-critical-100: hsl(var(--w-color-critical-100-hue) var(--w-color-critical-100-saturation) var(--w-color-critical-100-lightness));--w-color-critical-200-hue: 0;--w-color-critical-200-saturation: 57.8%;--w-color-critical-200-lightness: 53.5%;--w-color-critical-200: hsl(var(--w-color-critical-200-hue) var(--w-color-critical-200-saturation) var(--w-color-critical-200-lightness));} .wagtail-color-swatch { border-collapse: separate; border-spacing: 4px; } .wagtail-color-swatch td:first-child { height: 1.5rem; width: 1.5rem; border: 1px solid #333; forced-color-adjust: none; } </style><pre><style contenteditable="true" style="display: block;">:root {
   --w-color-primary: #2E1F5E;
   /* Any valid CSS format is supported. */
   --w-color-primary-200: hsl(253.8 50% 20.4%);
@@ -116,7 +116,14 @@ To customise the colours used in the admin user interface, inject a CSS file usi
   --w-color-secondary-hue: 180.5;
   --w-color-secondary-saturation: 100%;
   --w-color-secondary-lightness: 24.7%;
-}</style></pre><table class="wagtail-color-swatch"><thead><tr><th aria-label="Swatch"></th><th>Variable</th><th>Usage</th></tr></thead><tbody><tr><td style="background-color: var(--w-color-black);"></td><td><code>--w-color-black</code></td><td>Shadows only</td></tr><tr><td style="background-color: var(--w-color-grey-600);"></td><td><code>--w-color-grey-600</code></td><td>Body copy, user content</td></tr><tr><td style="background-color: var(--w-color-grey-400);"></td><td><code>--w-color-grey-400</code></td><td>Help text, placeholders, meta text, neutral state indicators</td></tr><tr><td style="background-color: var(--w-color-grey-200);"></td><td><code>--w-color-grey-200</code></td><td>Dividers, button borders</td></tr><tr><td style="background-color: var(--w-color-grey-150);"></td><td><code>--w-color-grey-150</code></td><td>Field borders</td></tr><tr><td style="background-color: var(--w-color-grey-100);"></td><td><code>--w-color-grey-100</code></td><td>Dividers, panel borders</td></tr><tr><td style="background-color: var(--w-color-grey-50);"></td><td><code>--w-color-grey-50</code></td><td>Background for panels, row highlights</td></tr><tr><td style="background-color: var(--w-color-white);"></td><td><code>--w-color-white</code></td><td>Page backgrounds, Panels, Button text</td></tr><tr><td style="background-color: var(--w-color-primary);"></td><td><code>--w-color-primary</code></td><td>Wagtail branding, Panels, Headings, Buttons, Labels</td></tr><tr><td style="background-color: var(--w-color-primary-200);"></td><td><code>--w-color-primary-200</code></td><td>Accent for elements used in conjunction with primary colour in sidebar</td></tr><tr><td style="background-color: var(--w-color-secondary);"></td><td><code>--w-color-secondary</code></td><td>Primary buttons, action links</td></tr><tr><td style="background-color: var(--w-color-secondary-600);"></td><td><code>--w-color-secondary-600</code></td><td>Hover states for two-tone buttons</td></tr><tr><td style="background-color: var(--w-color-secondary-400);"></td><td><code>--w-color-secondary-400</code></td><td>Two-tone buttons, hover states</td></tr><tr><td style="background-color: var(--w-color-secondary-100);"></td><td><code>--w-color-secondary-100</code></td><td>UI element highlights over dark backgrounds</td></tr><tr><td style="background-color: var(--w-color-secondary-75);"></td><td><code>--w-color-secondary-75</code></td><td>UI element highlights over dark text</td></tr><tr><td style="background-color: var(--w-color-secondary-50);"></td><td><code>--w-color-secondary-50</code></td><td>Button backgrounds, highlighted fields background</td></tr><tr><td style="background-color: var(--w-color-info-100);"></td><td><code>--w-color-info-100</code></td><td>Background and icons for information messages</td></tr><tr><td style="background-color: var(--w-color-info-50);"></td><td><code>--w-color-info-50</code></td><td>Background only, for information messages</td></tr><tr><td style="background-color: var(--w-color-positive-100);"></td><td><code>--w-color-positive-100</code></td><td>Positive states</td></tr><tr><td style="background-color: var(--w-color-positive-50);"></td><td><code>--w-color-positive-50</code></td><td>Background only, for positive states</td></tr><tr><td style="background-color: var(--w-color-warning-100);"></td><td><code>--w-color-warning-100</code></td><td>Background and icons for potentially dangerous states</td></tr><tr><td style="background-color: var(--w-color-warning-50);"></td><td><code>--w-color-warning-50</code></td><td>Background only, for potentially dangerous states</td></tr><tr><td style="background-color: var(--w-color-critical-200);"></td><td><code>--w-color-critical-200</code></td><td>Dangerous actions or states (over light background), errors</td></tr><tr><td style="background-color: var(--w-color-critical-100);"></td><td><code>--w-color-critical-100</code></td><td>Dangerous actions or states (over dark background)</td></tr><tr><td style="background-color: var(--w-color-critical-50);"></td><td><code>--w-color-critical-50</code></td><td>Background only, for dangerous states</td></tr></tbody></table></section>
+}</style></pre><table class="wagtail-color-swatch"><thead><tr><th aria-label="Swatch"></th><th>Variable</th><th>Usage</th></tr></thead><tbody><tr><td style="background-color: var(--w-color-black);"></td><td><code>--w-color-black</code></td><td>Shadows only</td></tr><tr><td style="background-color: var(--w-color-grey-600);"></td><td><code>--w-color-grey-600</code></td><td>Body copy, user content</td></tr><tr><td style="background-color: var(--w-color-grey-500);"></td><td><code>--w-color-grey-500</code></td><td>Panels, dividers in dark mode</td></tr><tr><td style="background-color: var(--w-color-grey-400);"></td><td><code>--w-color-grey-400</code></td><td>Help text, placeholders, meta text, neutral state indicators</td></tr><tr><td style="background-color: var(--w-color-grey-200);"></td><td><code>--w-color-grey-200</code></td><td>Dividers, button borders</td></tr><tr><td style="background-color: var(--w-color-grey-150);"></td><td><code>--w-color-grey-150</code></td><td>Field borders</td></tr><tr><td style="background-color: var(--w-color-grey-100);"></td><td><code>--w-color-grey-100</code></td><td>Dividers, panel borders</td></tr><tr><td style="background-color: var(--w-color-grey-50);"></td><td><code>--w-color-grey-50</code></td><td>Background for panels, row highlights</td></tr><tr><td style="background-color: var(--w-color-white);"></td><td><code>--w-color-white</code></td><td>Page backgrounds, Panels, Button text</td></tr><tr><td style="background-color: var(--w-color-primary);"></td><td><code>--w-color-primary</code></td><td>Wagtail branding, Panels, Headings, Buttons, Labels</td></tr><tr><td style="background-color: var(--w-color-primary-200);"></td><td><code>--w-color-primary-200</code></td><td>Accent for elements used in conjunction with primary colour in sidebar</td></tr><tr><td style="background-color: var(--w-color-secondary);"></td><td><code>--w-color-secondary</code></td><td>Primary buttons, action links</td></tr><tr><td style="background-color: var(--w-color-secondary-600);"></td><td><code>--w-color-secondary-600</code></td><td>Hover states for two-tone buttons</td></tr><tr><td style="background-color: var(--w-color-secondary-400);"></td><td><code>--w-color-secondary-400</code></td><td>Two-tone buttons, hover states</td></tr><tr><td style="background-color: var(--w-color-secondary-100);"></td><td><code>--w-color-secondary-100</code></td><td>UI element highlights over dark backgrounds</td></tr><tr><td style="background-color: var(--w-color-secondary-75);"></td><td><code>--w-color-secondary-75</code></td><td>UI element highlights over dark text</td></tr><tr><td style="background-color: var(--w-color-secondary-50);"></td><td><code>--w-color-secondary-50</code></td><td>Button backgrounds, highlighted fields background</td></tr><tr><td style="background-color: var(--w-color-info-100);"></td><td><code>--w-color-info-100</code></td><td>Background and icons for information messages</td></tr><tr><td style="background-color: var(--w-color-info-50);"></td><td><code>--w-color-info-50</code></td><td>Background only, for information messages</td></tr><tr><td style="background-color: var(--w-color-positive-100);"></td><td><code>--w-color-positive-100</code></td><td>Positive states</td></tr><tr><td style="background-color: var(--w-color-positive-50);"></td><td><code>--w-color-positive-50</code></td><td>Background only, for positive states</td></tr><tr><td style="background-color: var(--w-color-warning-100);"></td><td><code>--w-color-warning-100</code></td><td>Background and icons for potentially dangerous states</td></tr><tr><td style="background-color: var(--w-color-warning-50);"></td><td><code>--w-color-warning-50</code></td><td>Background only, for potentially dangerous states</td></tr><tr><td style="background-color: var(--w-color-critical-200);"></td><td><code>--w-color-critical-200</code></td><td>Dangerous actions or states (over light background), errors</td></tr><tr><td style="background-color: var(--w-color-critical-100);"></td><td><code>--w-color-critical-100</code></td><td>Dangerous actions or states (over dark background)</td></tr><tr><td style="background-color: var(--w-color-critical-50);"></td><td><code>--w-color-critical-50</code></td><td>Background only, for dangerous states</td></tr></tbody></table></section>
+
+Colour variables are reused across both the light and dark themes of the admin interface. To change the colours of a specific theme, use:
+
+- `.w-theme-light` for the light theme.
+- `.w-theme-dark` for the dark theme.
+- `@media (prefers-color-scheme: light) { .w-theme-system { […] }}` for the light theme via system settings.
+- `@media (prefers-color-scheme: dark) { .w-theme-system { […] }}` for the dark theme via system settings.
 
 ## Specifying a site or page in the branding