# KLIGO light and dark appearance

Both appearances are implemented across the responsive website: public marketplace and listing pages, new and surplus materials, customer and provider workspaces, forms, messages, overlays, maps, authentication screens and Developer Kit. This is the responsive website source; a native application remains a separate implementation.

## Try it

Use the moon/sun button in the desktop header, provider sidebar, sign-in screen or mobile navigation menu. Customer and provider Settings → Preferences also have an Appearance selector. The Developer Kit Color section also has named Light mode and Dark mode buttons and a palette reference. English, Hebrew and Arabic share the same appearance behavior.

Light is the first-visit default. The browser remembers an explicit choice under `kligo-theme`. The pre-paint bootstrap applies `html.dark` and `color-scheme` before rendering. ThemeProvider updates the page and synchronizes other tabs through the storage event. Blocked storage does not prevent the switch working for the current session. There is no account-level sync or follow-system option.

## Source and reuse

- `app/globals.css`: semantic light/dark tokens, fonts and shared dimensions.
- `app/theme-surfaces.css`: adaptations for existing neutral utilities, yellow/inverse surfaces, interactive states, overlays and mobile patterns. Keep this imported with globals.css.
- `components/theme-provider.tsx`, `components/theme-toggle.tsx`, `lib/theme-bootstrap.ts`: state, switch and early initialization. Use the shared provider instead of creating page-specific themes.
- `components/marketplace/map-theme.ts`: dark vector-map paint with original light paint restored on switching. Camera, labels and markers are retained.
- `components/ui/chart.tsx`: chart colors follow `.dark`, including when device preference differs.
- `components/kligo/logo.tsx`: supplied primary logo for light surfaces; supplied reversed vector for dark. Original assets are not modified.
- `public/brand/kligo-tokens.css`: portable CSS contains both `:root` and `.dark` tokens. Copy tokens and Download CSS use this same file.

The full website ZIP and the component reference ZIP both contain theme source and this guide. Prefer the full website ZIP to run the complete prototype.

## Design rules

Dark canvas #111111, cards #171717, raised controls #272725, text #F4F4EF, secondary text #B9B9B1. Keep KLIGO yellow #FBB104 and black #0A0A09 as brand pigments. Yellow panels and controls retain dark text; a nested dark control restores its own light text. Do not globally invert images or redefine the brand black as white. The ten homepage equipment previews use paired white/charcoal image files that blend with their card surface. Ordinary listing photographs retain their original colors and scene backgrounds. See IMAGE_THEME_HANDOFF.md. Vector-library proof panels retain the intended background for each supplied file.

Keep rest, hover, pressed, disabled, focus, selected, loading, error and empty states visible. Use the same component sizes, layout and language direction in both themes. For new screens prefer semantic tokens; when adding a literal light color, provide its dark adaptation too.

## Developer acceptance before production

- Check the complete launch route inventory in both modes at phone and desktop widths, including open menus, dialogs and form errors.
- Confirm text, icons, borders, status indicators and focus remain readable; inspect yellow sponsored cards and nested controls.
- Toggle, navigate and reload. Verify the saved choice wins over device appearance and other tabs update.
- Check keyboard operation, English/Hebrew/Arabic labels and RTL, and storage-unavailable behavior.
- Validate maps, charts, photo carousels, file previews and generated/printed documents on target browsers.
- Reuse these tokens and interaction rules when implementing the later native application; test that separate implementation independently.

Existing production work for accounts, data, subscriptions and paid placements remains in the integration checklist. Dark mode does not change those boundaries.