Personalizzare i colori del tema senza rompere la dark mode

Astro Narrow stila i componenti con token semantici come primary, background, muted e border. I componenti non hanno bisogno di conoscere la palette di colori effettiva, quindi l’aggiornamento di un singolo token può influire in modo coerente su navigazione, card, prose, filtri e dock.

Registra un tema selezionabile#

Il dock legge le sue opzioni da src/config/theme.ts. Aggiungi un ID stabile e un nome visibile all’utente:

export const themes = [
  { id: 'default', name: 'Default' },
  { id: 'ocean', name: 'Ocean' }
] as const

L’ID diventa il valore dell’attributo data-theme del documento, quindi deve corrispondere esattamente al selettore CSS.

Definisci i colori semantici#

Aggiungi la palette chiara in src/styles/themes.css invece di modificare le classi dei componenti:

[data-theme="ocean"] {
  --color-primary: oklch(0.58 0.13 235);
  --color-primary-foreground: oklch(0.98 0.01 235);
  --color-background: oklch(0.98 0.01 225);
  --color-foreground: oklch(0.25 0.03 235);
  --color-muted: oklch(0.93 0.02 225);
  --color-muted-foreground: oklch(0.48 0.04 235);
  --color-border: oklch(0.87 0.03 225);
  --color-card: oklch(1 0 0);
  --color-card-foreground: oklch(0.25 0.03 235);
}

Poi fornisci un blocco abbinato [data-theme="ocean"].dark. La dark mode non è un’inversione meccanica: il testo attenuato ha comunque bisogno di un contrasto sufficiente, i bordi dovrebbero restare sottili, e le card devono distinguersi dallo sfondo della pagina.

Verifica le superfici di contenuto reali#

Una palette non è finita dopo aver controllato uno swatch di colore. Verificala su:

• un articolo con titoli, link, codice e alert;
• i filtri dell’Archivio negli stati selezionato, hover e focus;
• le card dei progetti con e senza immagine di copertina;
• il dock e i popover in entrambe le modalità colore.

Preferisci modificare i token semantici piuttosto che aggiungere selettori specifici per tema ai singoli componenti. Questo mantiene la nuova UI compatibile con ogni palette e impedisce che un tema diventi un foglio di stile parallelo.