diff --git a/admin/src/app/theme.ts b/admin/src/app/theme.ts new file mode 100644 index 0000000..8ba825a --- /dev/null +++ b/admin/src/app/theme.ts @@ -0,0 +1,25 @@ +// Colour scheme (D-06, flagged assumption A6): the admin follows the system +// preference only, with no toggle. The .dark class on the document element +// swaps the design's dark tokens in main.css; the sidebar stays dark in both +// modes and gains its #222b40 right border in dark mode. +export const DARK_QUERY = '(prefers-color-scheme: dark)' + +/** + * Applies the current preference and follows changes. Returns the + * unsubscribe function. + */ +export function applyColorScheme(win: Window = window): () => void { + const root = win.document.documentElement + if (typeof win.matchMedia !== 'function') { + root.classList.remove('dark') + return () => undefined + } + const query = win.matchMedia(DARK_QUERY) + const apply = (dark: boolean): void => { + root.classList.toggle('dark', dark) + } + apply(query.matches) + const onChange = (event: MediaQueryListEvent): void => apply(event.matches) + query.addEventListener('change', onChange) + return () => query.removeEventListener('change', onChange) +} diff --git a/admin/src/components/form/FormGrid.vue b/admin/src/components/form/FormGrid.vue index d889ccc..42b6f5a 100644 --- a/admin/src/components/form/FormGrid.vue +++ b/admin/src/components/form/FormGrid.vue @@ -1,6 +1,7 @@