Um esquema de cores não é um segundo tema: é um ramo dentro do mesmo preset. Qualquer token pode levar um objeto colorScheme, e o compilador escreve os valores claros na raiz e os escuros sob o seletor do modo escuro.

preset.ts

{
    formField: {
        background: '{surface.0}',
        colorScheme: {
            dark: { background: 'rgb(255 255 255 / 0.06)' }
        }
    }
}

Escolhendo um

main.ts

createApp(App).use(Vitral, {
    theme: {
        colorScheme: 'system',        // follow the OS, and keep following it
        storageKey: 'app-scheme',     // or false, to not remember
        options: { darkModeSelector: '.vt-dark' }
    }
});

'light' e 'dark' fixam o esquema.
'system' segue prefers-color-scheme e continua seguindo, então quem muda o tema do sistema operacional vê a página mudar junto.
storageKey guarda uma escolha explícita entre visitas; false a esquece, que é o que uma captura de tela pede.

Trocando em tempo de execução

Bar.vue

const { colorScheme, isDark, toggleDark, setColorScheme } = useTheme();

<Button :icon="isDark ? 'sun' : 'moon'" @click="toggleDark()" />

toggleDark() alterna entre claro e escuro, deixando 'system' para trás na primeira vez que é usado. A barra no topo deste site é exatamente essas três linhas.

O seletor

Por padrão, o ramo escuro é escrito sob .vt-dark no elemento <html>. darkModeSelector aceita qualquer seletor de classe ou de atributo, como [data-theme="dark"], ou 'system', que emite os valores escuros dentro de uma media query prefers-color-scheme, para um site que nunca oferece a troca; false não emite esquema escuro nenhum.

Esquemas de cores

Escolhendo um

Trocando em tempo de execução

O seletor