Buttons

Drop-in top-bar controls. They own their own state and take no required props, which is why the shell around this page uses the same ButtonDark you see here.

@alepha/ui/components/button-dark, button-theme, button-language, brand-icon

Colour mode

ButtonDark toggles light and dark. Pass withSystem to cycle light, dark and system instead.

Theme picker

ButtonTheme renders nothing here, and that is the component behaving correctly: it reads its list from uiThemeListAtom and hides itself when the list has fewer than two entries. This site registers no themes.

alepha.store.set(uiThemeListAtom, [
  { id: "default", label: "Default", swatch: ["#0a0a0a", "#f4f4f5"] },
  { id: "claude", label: "Claude", swatch: ["#b85434", "#f0eee6"] },
]);

Language picker

ButtonLanguage hides itself the same way, returning null while one dictionary or fewer is registered. This site ships English only.

export class AppI18n {
  en = $dictionary({ lazy: async () => ({ default: { ... } }) });
  de = $dictionary({ lazy: async () => ({ default: { ... } }) });
}

Brand icons

The identity-provider marks the auth block's social buttons use. An unknown provider falls back to a generic globe rather than rendering nothing.