Empezar

En esta página

`ThemeConfig`

interfaz Desde 1.4.0

Opciones de theme en meeko.config.ts. Todas son opcionales; theme: true usa los valores por defecto: temas light y dark, "system" por defecto, atributo data-theme y cookie meeko-theme.

ts

import type { ThemeConfig } from "@meekojs/meeko/framework";

Código fuente src/shared/theme.ts:26

Declaración #

ts

interface ThemeConfig {
	readonly themes?: readonly string[]
	readonly default?: string
	readonly system?: boolean | { readonly light: string; readonly dark: string }
	readonly darkThemes?: readonly string[]
	readonly attribute?: 'class' | `data-${string}`
	readonly colorScheme?: boolean
	readonly cookie?: string
	readonly storageKey?: string | false
	readonly clientHints?: boolean
}

Ejemplo #

ts

// meeko.config.ts
import { defineMeekoConfig } from "@meekojs/meeko/framework";

export default defineMeekoConfig({
  theme: {
    themes: ["light", "dark", "sepia"],
    default: "system",
    darkThemes: ["dark"],
    attribute: "data-theme",
  },
});

Propiedades #

`themes` #

propiedad sólo lectura opcional

readonly themes?: readonly string[]

Temas disponibles, como ["light", "dark", "sepia"]. Cada nombre usa letras, dígitos, - o _ y no puede ser "system". Por defecto, ["light", "dark"].

`default` #

propiedad sólo lectura opcional

readonly default?: string

Elección de quien todavía no eligió: "system" (por defecto si system está activo) o uno de themes (por defecto, el primero si system es false).

`system` #

propiedad sólo lectura opcional

readonly system?: boolean | { readonly light: string; readonly dark: string }

Modo "system", que sigue a prefers-color-scheme: true (por defecto) usa los temas light y dark; un objeto elige qué tema corresponde a cada preferencia; false lo desactiva.

`darkThemes` #

propiedad sólo lectura opcional

readonly darkThemes?: readonly string[]

Temas oscuros, que reciben color-scheme: dark; los demás, light. Por defecto, el tema oscuro de system o, sin system, dark si existe.

`attribute` #

propiedad sólo lectura opcional

readonly attribute?: 'class' | `data-${string}`

Dónde se escribe el tema en <html>: un atributo data-* (por defecto, "data-theme") o "class", que añade el nombre del tema a las clases.

`colorScheme` #

propiedad sólo lectura opcional

readonly colorScheme?: boolean

Aplica color-scheme a <html> (light, o dark en los temas de darkThemes) para que el navegador pinte el fondo, las barras de desplazamiento y los controles con el esquema del tema. Lo escriben el script de <head>, antes del primer pintado, y el runtime del navegador por CSSOM (style.colorScheme), que una CSP sin 'unsafe-inline' en style-src permite; el HTML del servidor no lleva un atributo style. Por defecto, true. Declárelo también en su CSS (:root[data-theme="dark"] { color-scheme: dark }) si la página debe verse bien sin JavaScript.

`cookie` #

propiedad sólo lectura opcional

readonly cookie?: string

Nombre de la cookie que guarda la elección. Por defecto, "meeko-theme".

`storageKey` #

propiedad sólo lectura opcional

readonly storageKey?: string | false

Clave de localStorage que guarda también la elección y avisa a las otras pestañas. Por defecto, el nombre de la cookie (cookie, "meeko-theme" si no se cambia); false usa sólo la cookie.

`clientHints` #

propiedad sólo lectura opcional

readonly clientHints?: boolean

Pide el client hint Sec-CH-Prefers-Color-Scheme (Accept-CH, y Critical-CH en modo "system") para resolver ese modo en el servidor desde la primera visita en Chromium. Por defecto, true.

Véase también #

Tema claro/oscuro sin parpadeo Framework full-stack

Editar en GitHub: packages/meeko/src/shared/theme.ts