## Auto, Dark & Light Mode

Docsector Reader ships three theme modes — **Auto**, **Light** and **Dark** — selectable in the Settings dialog. **Auto is the default**: the site follows the reader's operating system colour scheme and switches live when the OS setting changes, without a reload.

The choice is stored in `localStorage` under `setting.theme` and applied before the first paint, so readers never see a flash of the wrong theme. Rendering is driven by the **Quasar Dark Plugin** through the `body--light` / `body--dark` classes described below — no configuration is required.

See [Theme](/manual/basic/theme) for how detection and persistence work.

## Quasar Variables

Theme colors are defined in `src/css/quasar.variables.scss`:

```css
$primary: #027BE3;
$secondary: #26A69A;
$accent: #9C27B0;
$dark: #1D1D1D;
$dark-page: #121212;
$positive: #21BA45;
$negative: #C10015;
$info: #31CCEC;
$warning: #F2C037;
```

Override these variables to customize the entire color scheme.

## Global Styles

Global styles live in `src/css/app.sass`. This file is loaded automatically by Quasar and applies to all pages.

## Component-Level Styles

Each Docsector component has its own scoped `style` block using SASS. Dark/light mode variants use the CSS selector pattern:

```css
body.body--dark
  .my-element
    color: white

body.body--light
  .my-element
    color: black
```

## CSS Variables

Components use CSS custom properties for theme-aware styling:

- `--d-menu-subheader-txt-color` — Menu subheader text color
- `--d-menu-expansion-bg-color` — Menu expansion panel background
- `--d-menu-item-opacity` — Menu item hover opacity

## Customizing Code Block Colors

The `DBlockSourceCode` component has separate color schemes for light and dark modes, using Prism.js token classes. Override `token.*` classes in the `.source-code` SASS block to customize syntax highlighting colors.

## Font Families

Code blocks use `"Fira Code Nerd Font"` with `"Consolas"` as fallback. To use a different monospace font, override the `.source-code` font-family declarations.