@byline/admin 3.11.3 → 3.12.0

package/dist/modules/admin-account/components/container.js

@@ -3,11 +3,12 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { LocalDateTime } from "@byline/admin/react";
 import { useTranslation } from "@byline/i18n/react";
-import { Button, CloseIcon, Drawer, EditIcon, IconButton } from "@byline/ui/react";
+import { CloseIcon, Drawer, EditIcon, IconButton } from "@byline/ui/react";
 import classnames from "classnames";
 import { ChangeAccountPassword } from "./change-password.js";
 import container_module from "./container.module.js";
 import { Preferences } from "./preferences.js";
+import { ThemeSwitch } from "./theme-switch.js";
 import { UpdateAccount } from "./update.js";
 const panelComponents = {
     update: UpdateAccount,
@@ -121,7 +122,7 @@ function AccountSelfContainer({ account }) {
                                         ]
                                     }),
                                     /*#__PURE__*/ jsxs("p", {
-                                        className: classnames('byline-account-cta-line', container_module["cta-line"]),
+                                        className: classnames('byline-account-line', container_module.line),
                                         children: [
                                             /*#__PURE__*/ jsx("span", {
                                                 className: "muted",
@@ -134,11 +135,6 @@ function AccountSelfContainer({ account }) {
                                             })
                                         ]
                                     }),
-                                    /*#__PURE__*/ jsx(Button, {
-                                        size: "sm",
-                                        onClick: openDrawer('update'),
-                                        children: t('account.profile.editButton')
-                                    }),
                                     /*#__PURE__*/ jsxs("div", {
                                         className: classnames('muted', 'byline-account-meta', container_module.meta),
                                         children: [
@@ -209,14 +205,6 @@ function AccountSelfContainer({ account }) {
                                             })
                                         ]
                                     }),
-                                    /*#__PURE__*/ jsx("p", {
-                                        className: classnames('byline-account-cta-line', container_module["cta-line"]),
-                                        children: /*#__PURE__*/ jsx(Button, {
-                                            size: "sm",
-                                            onClick: openDrawer('preferences'),
-                                            children: t('account.preferences.editButton')
-                                        })
-                                    }),
                                     /*#__PURE__*/ jsx("p", {
                                         className: classnames('muted', 'byline-account-status-help', container_module["status-help"]),
                                         children: t('account.preferences.help')
@@ -228,21 +216,18 @@ function AccountSelfContainer({ account }) {
                     /*#__PURE__*/ jsxs("div", {
                         className: classnames('byline-account-column', container_module.column),
                         children: [
-                            /*#__PURE__*/ jsxs(ContainerSection, {
+                            /*#__PURE__*/ jsx(ContainerSection, {
                                 title: t('account.sections.password'),
                                 onEdit: openDrawer('change_password'),
                                 editAriaLabel: editAriaFor(t('account.sections.password')),
-                                children: [
-                                    /*#__PURE__*/ jsx("p", {
-                                        className: classnames('byline-account-cta-line', container_module["cta-line"]),
-                                        children: t('account.password.intro')
-                                    }),
-                                    /*#__PURE__*/ jsx(Button, {
-                                        size: "sm",
-                                        onClick: openDrawer('change_password'),
-                                        children: t('account.password.editButton')
-                                    })
-                                ]
+                                children: /*#__PURE__*/ jsx("p", {
+                                    className: classnames('byline-account-line', container_module.line),
+                                    children: t('account.password.intro')
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(ContainerSection, {
+                                title: t('account.sections.appearance'),
+                                children: /*#__PURE__*/ jsx(ThemeSwitch, {})
                             }),
                             /*#__PURE__*/ jsxs(ContainerSection, {
                                 title: t('account.sections.status'),

package/dist/modules/admin-account/components/preferences.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { revalidateLogic, useForm } from "@tanstack/react-form-start";
 import { getClientConfig } from "@byline/core";
+import { useTranslation } from "@byline/i18n/react";
 import { Alert, Button, LoaderEllipsis, Select } from "@byline/ui/react";
 import classnames from "classnames";
 import { z } from "zod";
@@ -20,6 +21,7 @@ function defaultsFrom(account) {
     };
 }
 function Preferences({ account, onClose, onSuccess }) {
+    const { t } = useTranslation('byline-admin');
     const { setInterfaceLocale } = useBylineAdminServices();
     const [formError, setFormError] = useState(null);
     const [successMessage, setSuccessMessage] = useState(null);
@@ -36,11 +38,13 @@ function Preferences({ account, onClose, onSuccess }) {
         return [
             {
                 value: AUTO_VALUE,
-                label: 'Use browser default'
+                label: t('language.useBrowserDefault')
             },
             ...items
         ];
-    }, []);
+    }, [
+        t
+    ]);
     const form = useForm({
         defaultValues: defaultsFrom(account),
         validationLogic: revalidateLogic({
@@ -54,19 +58,17 @@ function Preferences({ account, onClose, onSuccess }) {
             setFormError(null);
             setSuccessMessage(null);
             const nextLocale = value.locale === AUTO_VALUE ? null : value.locale;
-            if (nextLocale === (account.preferred_locale ?? null)) return void setSuccessMessage('No changes to save.');
+            if (nextLocale === (account.preferred_locale ?? null)) return void setSuccessMessage(t('common.feedback.noChanges'));
             try {
                 const result = await setInterfaceLocale({
                     data: {
                         locale: nextLocale
                     }
                 });
-                if (null != result.account) {
-                    setSuccessMessage('Saved.');
-                    onSuccess?.(result.account);
-                } else setSuccessMessage('Saved.');
+                setSuccessMessage(t('common.feedback.saved'));
+                if (null != result.account) onSuccess?.(result.account);
             } catch  {
-                setFormError('Could not save changes. Please try again.');
+                setFormError(t('common.errors.couldNotSave'));
             }
         }
     });
@@ -98,12 +100,12 @@ function Preferences({ account, onClose, onSuccess }) {
                                 /*#__PURE__*/ jsx("label", {
                                     htmlFor: "preferences-locale-select",
                                     className: classnames('byline-account-preferences-label', preferences_module.label),
-                                    children: "Interface language"
+                                    children: t('account.preferences.languageLabel')
                                 }),
                                 /*#__PURE__*/ jsx(Select, {
                                     id: "preferences-locale-select",
                                     size: "sm",
-                                    ariaLabel: "Interface language",
+                                    ariaLabel: t('account.preferences.languageLabel'),
                                     value: field.state.value,
                                     items: localeItems,
                                     onValueChange: (value)=>{
@@ -112,7 +114,7 @@ function Preferences({ account, onClose, onSuccess }) {
                                 }),
                                 /*#__PURE__*/ jsx("p", {
                                     className: classnames('muted', 'byline-account-preferences-help', preferences_module.help),
-                                    children: 'Choose "Use browser default" to let your browser\'s language settings decide.'
+                                    children: t('account.preferences.languageHelp')
                                 })
                             ]
                         })
@@ -126,7 +128,7 @@ function Preferences({ account, onClose, onSuccess }) {
                             size: "sm",
                             onClick: onClose,
                             className: classnames('byline-account-preferences-action', preferences_module.action),
-                            children: successMessage ? 'Close' : 'Cancel'
+                            children: successMessage ? t('common.actions.close') : t('common.actions.cancel')
                         }),
                         /*#__PURE__*/ jsx(form.Subscribe, {
                             selector: (state)=>({
@@ -141,7 +143,7 @@ function Preferences({ account, onClose, onSuccess }) {
                                     className: classnames('byline-account-preferences-action', preferences_module.action),
                                     children: true === isSubmitting ? /*#__PURE__*/ jsx(LoaderEllipsis, {
                                         size: 42
-                                    }) : 'Save'
+                                    }) : t('common.actions.save')
                                 })
                         })
                     ]

package/dist/modules/admin-account/components/theme-switch.d.ts

@@ -0,0 +1 @@
+export declare function ThemeSwitch(): import("react").JSX.Element;

package/dist/modules/admin-account/components/theme-switch.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useTranslation } from "@byline/i18n/react";
+import { ButtonGroup, ButtonGroupItem } from "@byline/ui/react";
+import classnames from "classnames";
+import { getThemeMode, setThemeMode } from "./theme.js";
+import theme_switch_module from "./theme-switch.module.js";
+function ThemeSwitch() {
+    const { t } = useTranslation('byline-admin');
+    const [mode, setMode] = useState('system');
+    useEffect(()=>{
+        setMode(getThemeMode());
+    }, []);
+    const handleChange = (value)=>{
+        const next = Array.isArray(value) ? value[0] : value;
+        if ('light' !== next && 'dark' !== next && 'system' !== next) return;
+        setMode(next);
+        setThemeMode(next);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames('byline-account-theme-switch', theme_switch_module.wrap),
+        children: [
+            /*#__PURE__*/ jsxs(ButtonGroup, {
+                type: "single",
+                size: "sm",
+                expandToFit: true,
+                value: mode,
+                onValueChange: handleChange,
+                "aria-label": t('account.appearance.colorTheme'),
+                className: classnames('byline-account-theme-group', theme_switch_module.group),
+                children: [
+                    /*#__PURE__*/ jsx(ButtonGroupItem, {
+                        value: "light",
+                        children: t('account.appearance.light')
+                    }),
+                    /*#__PURE__*/ jsx(ButtonGroupItem, {
+                        value: "dark",
+                        children: t('account.appearance.dark')
+                    }),
+                    /*#__PURE__*/ jsx(ButtonGroupItem, {
+                        value: "system",
+                        children: t('account.appearance.system')
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("p", {
+                className: classnames('muted', 'byline-account-theme-help', theme_switch_module.help),
+                children: t('account.appearance.help')
+            })
+        ]
+    });
+}
+export { ThemeSwitch };

package/dist/modules/admin-account/components/theme-switch.module.js

@@ -0,0 +1,7 @@
+import "./theme-switch_module.css";
+const theme_switch_module = {
+    wrap: "wrap-Nbrlzw",
+    group: "group-FhIRi0",
+    help: "help-SiI4LX"
+};
+export default theme_switch_module;

package/dist/modules/admin-account/components/theme-switch_module.css

@@ -0,0 +1,16 @@
+:is(.wrap-Nbrlzw, .byline-account-theme-switch) {
+  gap: var(--spacing-8);
+  flex-direction: column;
+  display: flex;
+}
+
+:is(.group-FhIRi0, .byline-account-theme-group) {
+  width: 100%;
+}
+
+:is(.help-SiI4LX, .byline-account-theme-help) {
+  margin-top: var(--spacing-4);
+  font-size: var(--font-size-xs);
+  margin-bottom: 0;
+}
+

package/dist/modules/admin-account/components/theme.d.ts

@@ -0,0 +1,35 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+/**
+ * Client-side colour-theme control for the self-service account.
+ *
+ * Reads and writes Byline's host theme contract — the same convention
+ * the host's blocking `EarlyThemeDetector` script (rendered into
+ * `<head>`) and the host ThemeProvider already use:
+ *
+ *   - `localStorage['theme'] === 'dark' | 'light'` — an explicit choice.
+ *   - `localStorage['theme']` absent — follow the OS
+ *     (`prefers-color-scheme`), i.e. "system".
+ *   - the effective theme is applied as a `.dark` / `.light` class on
+ *     `<html>`, plus `style.colorScheme` and the `meta[name=color-scheme]`
+ *     content.
+ *
+ * A choice made here is therefore honoured by the detector on the next
+ * load and by the provider on the next route change, and is applied to
+ * the live document immediately. Deliberately tiny and dependency-free;
+ * if a host ever diverges from this convention, this is the single seam
+ * to revisit.
+ */
+export type ThemeMode = 'light' | 'dark' | 'system';
+/** The persisted choice. Absent storage resolves to `'system'`. */
+export declare function getThemeMode(): ThemeMode;
+/**
+ * Persist and apply a theme choice. `'system'` clears the stored
+ * override so the document follows `prefers-color-scheme` again.
+ */
+export declare function setThemeMode(mode: ThemeMode): void;

package/dist/modules/admin-account/components/theme.js

@@ -0,0 +1,30 @@
+const STORAGE_KEY = 'theme';
+const PREFERS_DARK = '(prefers-color-scheme: dark)';
+function getThemeMode() {
+    if ("u" < typeof localStorage) return 'system';
+    const stored = localStorage.getItem(STORAGE_KEY);
+    return 'dark' === stored || 'light' === stored ? stored : 'system';
+}
+function systemPrefersDark() {
+    return "u" > typeof window && window.matchMedia(PREFERS_DARK).matches;
+}
+function applyEffectiveTheme(effective) {
+    if ("u" < typeof document) return;
+    const root = document.documentElement;
+    root.classList.toggle('dark', 'dark' === effective);
+    root.classList.toggle('light', 'light' === effective);
+    root.style.colorScheme = effective;
+    const meta = document.querySelector('meta[name="color-scheme"]');
+    if (null != meta) meta.setAttribute('content', 'dark' === effective ? 'dark light' : 'light dark');
+}
+function setThemeMode(mode) {
+    if ("u" < typeof window) return;
+    if ('system' === mode) {
+        localStorage.removeItem(STORAGE_KEY);
+        applyEffectiveTheme(systemPrefersDark() ? 'dark' : 'light');
+    } else {
+        localStorage.setItem(STORAGE_KEY, mode);
+        applyEffectiveTheme(mode);
+    }
+}
+export { getThemeMode, setThemeMode };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@byline/admin",
   "private": false,
   "license": "MPL-2.0",
-  "version": "3.11.3",
+  "version": "3.12.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -151,10 +151,10 @@
     "uuid": "^14.0.0",
     "zod": "^4.4.3",
     "zod-form-data": "^3.0.1",
-    "@byline/auth": "3.11.3",
-    "@byline/core": "3.11.3",
-    "@byline/i18n": "3.11.3",
-    "@byline/ui": "3.11.3"
+    "@byline/ui": "3.12.0",
+    "@byline/auth": "3.12.0",
+    "@byline/core": "3.12.0",
+    "@byline/i18n": "3.12.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/modules/admin-account/components/container.tsx

@@ -29,12 +29,13 @@ import { useState } from 'react'
 
 import { LocalDateTime } from '@byline/admin/react'
 import { useTranslation } from '@byline/i18n/react'
-import { Button, CloseIcon, Drawer, EditIcon, IconButton } from '@byline/ui/react'
+import { CloseIcon, Drawer, EditIcon, IconButton } from '@byline/ui/react'
 import cx from 'classnames'
 
 import { ChangeAccountPassword } from './change-password.js'
 import styles from './container.module.css'
 import { Preferences } from './preferences.js'
+import { ThemeSwitch } from './theme-switch.js'
 import { UpdateAccount } from './update.js'
 import type { AccountResponse } from '../index.js'
 
@@ -139,7 +140,7 @@ export function AccountSelfContainer({ account }: AccountSelfContainerProps) {
                 </span>
               )}
             </p>
-            <p className={cx('byline-account-cta-line', styles['cta-line'])}>
+            <p className={cx('byline-account-line', styles.line)}>
               <span className="muted">{t('account.profile.username')}</span>{' '}
               {currentAccount.username ?? (
                 <span className={cx('muted', 'byline-account-not-set', styles['not-set'])}>
@@ -147,9 +148,6 @@ export function AccountSelfContainer({ account }: AccountSelfContainerProps) {
                 </span>
               )}
             </p>
-            <Button size="sm" onClick={openDrawer('update')}>
-              {t('account.profile.editButton')}
-            </Button>
             <div className={cx('muted', 'byline-account-meta', styles.meta)}>
               <p>
                 <span className="font-bold">{t('account.profile.created')}&nbsp;</span>
@@ -179,11 +177,6 @@ export function AccountSelfContainer({ account }: AccountSelfContainerProps) {
                 </span>
               )}
             </p>
-            <p className={cx('byline-account-cta-line', styles['cta-line'])}>
-              <Button size="sm" onClick={openDrawer('preferences')}>
-                {t('account.preferences.editButton')}
-              </Button>
-            </p>
             <p className={cx('muted', 'byline-account-status-help', styles['status-help'])}>
               {t('account.preferences.help')}
             </p>
@@ -196,12 +189,11 @@ export function AccountSelfContainer({ account }: AccountSelfContainerProps) {
             onEdit={openDrawer('change_password')}
             editAriaLabel={editAriaFor(t('account.sections.password'))}
           >
-            <p className={cx('byline-account-cta-line', styles['cta-line'])}>
-              {t('account.password.intro')}
-            </p>
-            <Button size="sm" onClick={openDrawer('change_password')}>
-              {t('account.password.editButton')}
-            </Button>
+            <p className={cx('byline-account-line', styles.line)}>{t('account.password.intro')}</p>
+          </ContainerSection>
+
+          <ContainerSection title={t('account.sections.appearance')}>
+            <ThemeSwitch />
           </ContainerSection>
 
           <ContainerSection title={t('account.sections.status')}>

package/src/modules/admin-account/components/preferences.tsx

@@ -37,6 +37,7 @@ import { useMemo, useState } from 'react'
 import { revalidateLogic, useForm } from '@tanstack/react-form-start'
 
 import { getClientConfig } from '@byline/core'
+import { useTranslation } from '@byline/i18n/react'
 import { Alert, Button, LoaderEllipsis, Select } from '@byline/ui/react'
 import cx from 'classnames'
 import { z } from 'zod'
@@ -74,6 +75,7 @@ interface PreferencesProps {
 }
 
 export function Preferences({ account, onClose, onSuccess }: PreferencesProps) {
+  const { t } = useTranslation('byline-admin')
   const { setInterfaceLocale } = useBylineAdminServices()
   const [formError, setFormError] = useState<string | null>(null)
   const [successMessage, setSuccessMessage] = useState<string | null>(null)
@@ -91,8 +93,8 @@ export function Preferences({ account, onClose, onSuccess }: PreferencesProps) {
       value: code,
       label: definitionByCode.get(code) ?? code,
     }))
-    return [{ value: AUTO_VALUE, label: 'Use browser default' }, ...items]
-  }, [])
+    return [{ value: AUTO_VALUE, label: t('language.useBrowserDefault') }, ...items]
+  }, [t])
 
   const form = useForm({
     defaultValues: defaultsFrom(account),
@@ -108,7 +110,7 @@ export function Preferences({ account, onClose, onSuccess }: PreferencesProps) {
       setSuccessMessage(null)
       const nextLocale = value.locale === AUTO_VALUE ? null : value.locale
       if (nextLocale === (account.preferred_locale ?? null)) {
-        setSuccessMessage('No changes to save.')
+        setSuccessMessage(t('common.feedback.noChanges'))
         return
       }
       try {
@@ -116,14 +118,12 @@ export function Preferences({ account, onClose, onSuccess }: PreferencesProps) {
         // Pre-auth path returns `account: null`; the form is only
         // reachable behind an admin session, so `account` should be
         // populated. Treat absence as a defensive no-op.
+        setSuccessMessage(t('common.feedback.saved'))
         if (result.account != null) {
-          setSuccessMessage('Saved.')
           onSuccess?.(result.account)
-        } else {
-          setSuccessMessage('Saved.')
         }
       } catch {
-        setFormError('Could not save changes. Please try again.')
+        setFormError(t('common.errors.couldNotSave'))
       }
     },
   })
@@ -150,12 +150,12 @@ export function Preferences({ account, onClose, onSuccess }: PreferencesProps) {
                 htmlFor="preferences-locale-select"
                 className={cx('byline-account-preferences-label', styles.label)}
               >
-                Interface language
+                {t('account.preferences.languageLabel')}
               </label>
               <Select<string>
                 id="preferences-locale-select"
                 size="sm"
-                ariaLabel="Interface language"
+                ariaLabel={t('account.preferences.languageLabel')}
                 value={field.state.value}
                 items={localeItems}
                 onValueChange={(value) => {
@@ -163,7 +163,7 @@ export function Preferences({ account, onClose, onSuccess }: PreferencesProps) {
                 }}
               />
               <p className={cx('muted', 'byline-account-preferences-help', styles.help)}>
-                Choose "Use browser default" to let your browser's language settings decide.
+                {t('account.preferences.languageHelp')}
               </p>
             </div>
           )}
@@ -177,7 +177,7 @@ export function Preferences({ account, onClose, onSuccess }: PreferencesProps) {
             onClick={onClose}
             className={cx('byline-account-preferences-action', styles.action)}
           >
-            {successMessage ? 'Close' : 'Cancel'}
+            {successMessage ? t('common.actions.close') : t('common.actions.cancel')}
           </Button>
           <form.Subscribe
             selector={(state) => ({
@@ -193,7 +193,7 @@ export function Preferences({ account, onClose, onSuccess }: PreferencesProps) {
                 disabled={!canSubmit || isSubmitting}
                 className={cx('byline-account-preferences-action', styles.action)}
               >
-                {isSubmitting === true ? <LoaderEllipsis size={42} /> : 'Save'}
+                {isSubmitting === true ? <LoaderEllipsis size={42} /> : t('common.actions.save')}
               </Button>
             )}
           </form.Subscribe>

package/src/modules/admin-account/components/theme-switch.module.css

@@ -0,0 +1,37 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+/*
+ * ThemeSwitch — the segmented control fills the card width; the help
+ * line below it matches the muted helper styling used elsewhere on the
+ * account cards.
+ *
+ * Override handles:
+ *   .byline-account-theme-switch — wrapper
+ *   .byline-account-theme-group  — the segmented control
+ *   .byline-account-theme-help   — muted helper line
+ */
+
+.wrap,
+:global(.byline-account-theme-switch) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.group,
+:global(.byline-account-theme-group) {
+  width: 100%;
+}
+
+.help,
+:global(.byline-account-theme-help) {
+  margin-top: var(--spacing-4);
+  margin-bottom: 0;
+  font-size: var(--font-size-xs);
+}

package/src/modules/admin-account/components/theme-switch.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+/**
+ * Inline colour-theme switch for the account "Appearance" card — a
+ * three-way segmented control (Light / Dark / System). Unlike the other
+ * account sections it edits in place rather than through the drawer, so
+ * there's no pencil affordance on its card. See `./theme.ts` for the
+ * host theme contract this reads and writes.
+ */
+
+import { useEffect, useState } from 'react'
+
+import { useTranslation } from '@byline/i18n/react'
+import { ButtonGroup, ButtonGroupItem } from '@byline/ui/react'
+import cx from 'classnames'
+
+import { getThemeMode, setThemeMode, type ThemeMode } from './theme.js'
+import styles from './theme-switch.module.css'
+
+export function ThemeSwitch() {
+  const { t } = useTranslation('byline-admin')
+
+  // SSR and the first client render both show 'system' — a deterministic
+  // value, so there's no hydration mismatch. The actual stored mode is
+  // read once after mount (localStorage is client-only).
+  const [mode, setMode] = useState<ThemeMode>('system')
+
+  useEffect(() => {
+    setMode(getThemeMode())
+  }, [])
+
+  const handleChange = (value: string | string[]) => {
+    // `ButtonGroup`'s union props type the callback as `string | string[]`;
+    // in single-select mode it's a string. A single-select ToggleGroup
+    // also emits '' when the active item is re-clicked (deselect) — a
+    // theme is always set, so ignore anything that isn't a known mode.
+    const next = Array.isArray(value) ? value[0] : value
+    if (next !== 'light' && next !== 'dark' && next !== 'system') return
+    setMode(next)
+    setThemeMode(next)
+  }
+
+  return (
+    <div className={cx('byline-account-theme-switch', styles.wrap)}>
+      <ButtonGroup
+        type="single"
+        size="sm"
+        expandToFit
+        value={mode}
+        onValueChange={handleChange}
+        aria-label={t('account.appearance.colorTheme')}
+        className={cx('byline-account-theme-group', styles.group)}
+      >
+        <ButtonGroupItem value="light">{t('account.appearance.light')}</ButtonGroupItem>
+        <ButtonGroupItem value="dark">{t('account.appearance.dark')}</ButtonGroupItem>
+        <ButtonGroupItem value="system">{t('account.appearance.system')}</ButtonGroupItem>
+      </ButtonGroup>
+      <p className={cx('muted', 'byline-account-theme-help', styles.help)}>
+        {t('account.appearance.help')}
+      </p>
+    </div>
+  )
+}

package/src/modules/admin-account/components/theme.ts

@@ -0,0 +1,72 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+/**
+ * Client-side colour-theme control for the self-service account.
+ *
+ * Reads and writes Byline's host theme contract — the same convention
+ * the host's blocking `EarlyThemeDetector` script (rendered into
+ * `<head>`) and the host ThemeProvider already use:
+ *
+ *   - `localStorage['theme'] === 'dark' | 'light'` — an explicit choice.
+ *   - `localStorage['theme']` absent — follow the OS
+ *     (`prefers-color-scheme`), i.e. "system".
+ *   - the effective theme is applied as a `.dark` / `.light` class on
+ *     `<html>`, plus `style.colorScheme` and the `meta[name=color-scheme]`
+ *     content.
+ *
+ * A choice made here is therefore honoured by the detector on the next
+ * load and by the provider on the next route change, and is applied to
+ * the live document immediately. Deliberately tiny and dependency-free;
+ * if a host ever diverges from this convention, this is the single seam
+ * to revisit.
+ */
+
+export type ThemeMode = 'light' | 'dark' | 'system'
+
+const STORAGE_KEY = 'theme'
+const PREFERS_DARK = '(prefers-color-scheme: dark)'
+
+/** The persisted choice. Absent storage resolves to `'system'`. */
+export function getThemeMode(): ThemeMode {
+  if (typeof localStorage === 'undefined') return 'system'
+  const stored = localStorage.getItem(STORAGE_KEY)
+  return stored === 'dark' || stored === 'light' ? stored : 'system'
+}
+
+function systemPrefersDark(): boolean {
+  return typeof window !== 'undefined' && window.matchMedia(PREFERS_DARK).matches
+}
+
+/** Apply the effective theme to `<html>`, mirroring the host detector. */
+function applyEffectiveTheme(effective: 'light' | 'dark'): void {
+  if (typeof document === 'undefined') return
+  const root = document.documentElement
+  root.classList.toggle('dark', effective === 'dark')
+  root.classList.toggle('light', effective === 'light')
+  root.style.colorScheme = effective
+  const meta = document.querySelector('meta[name="color-scheme"]')
+  if (meta != null) {
+    meta.setAttribute('content', effective === 'dark' ? 'dark light' : 'light dark')
+  }
+}
+
+/**
+ * Persist and apply a theme choice. `'system'` clears the stored
+ * override so the document follows `prefers-color-scheme` again.
+ */
+export function setThemeMode(mode: ThemeMode): void {
+  if (typeof window === 'undefined') return
+  if (mode === 'system') {
+    localStorage.removeItem(STORAGE_KEY)
+    applyEffectiveTheme(systemPrefersDark() ? 'dark' : 'light')
+  } else {
+    localStorage.setItem(STORAGE_KEY, mode)
+    applyEffectiveTheme(mode)
+  }
+}