/* ============================================================================
DARK-MODE.CSS — ANALIST.COM
Orquestrador de Tema
DEPENDÊNCIAS (nessa ordem):
base.css → design-tones.css → layout.css → animate.css → componente.css → este arquivo
FILOSOFIA DESTE ARQUIVO:
Este arquivo NÃO define cores. Isso é responsabilidade de design-tones.css.
Este arquivo NÃO estiliza componentes. Isso é responsabilidade de componente.css.
Este arquivo NÃO duplica tokens. Isso é responsabilidade de base.css.
Este arquivo faz UMA COISA:
Orquestra COMO o tema muda — a transição, o timing,
os hooks de JS, o color-scheme, o meta theme-color,
e os edge cases que nenhum outro arquivo resolve.
Se você está procurando "quais cores o dark mode usa",
vá para design-tones.css — @layer themes.
ARQUITETURA:
@layer theme-transition — animação e timing da troca
@layer color-scheme — integração com o sistema do browser
@layer theme-utilities — classes utilitárias de tema
@layer theme-exceptions — edge cases e correções
============================================================================ */
@layer reset, tokens, base, brand, themes, atmosphere,
layout, navigation, hero, patterns, components,
motion-tokens, keyframes, scroll-driven, entrance,
microinteraction, motion-components,
theme-transition, color-scheme, theme-utilities, theme-exceptions,
states, utilities, overrides, reduced-motion;
/* ─────────────────────────────────────────────────
1. COLOR-SCHEME — Integração com o Browser
color-scheme: light dark permite que o browser
adapte elementos nativos (scrollbar, inputs,
select, date picker) ao tema ativo.
light-dark() — função CSS nativa para valores
que mudam entre temas sem precisar de seletor.
───────────────────────────────────────────────── */
@layer color-scheme {
/* Declaração no root — já no base.css, mas
reforçamos aqui para garantir herança correta */
html {
color-scheme: light dark;
}
/* Light mode explícito */
[data-theme="light"],
html:not([data-theme="dark"]) {
color-scheme: light;
}
/* Dark mode explícito */
[data-theme="dark"] {
color-scheme: dark;
}
/* ── light-dark() em elementos nativos ──────── */
/* Usa a função CSS nativa para adaptar elementos
que não estão no nosso design system */
/* Scrollbar de sistema (Firefox) */
* {
scrollbar-color: light-dark(var(--analist-black), var(--analist-ash))
light-dark(var(--analist-paper), var(--analist-near-black));
scrollbar-width: thin;
}
/* Meta theme-color — cor da barra do browser no mobile.
Controlado via JS, mas o CSS define os valores:
JS para usar:
const meta = document.querySelector('meta[name="theme-color"]');
meta.content = isDark ? '#111111' : '#f5f0e8';
Ou via media query no HTML:
*/
/* ── Focus ring adapta ao tema ───────────────── */
/* Já definido no base.css, mas a cor adapta */
[data-theme="dark"] :focus-visible {
outline-color: var(--analist-red-glow);
}
/* ── Seleção de texto no dark ────────────────── */
[data-theme="dark"] ::selection {
background-color: var(--analist-red-glow);
color: var(--analist-near-black);
}
/* ── Imagens no dark: contraste ajustado ─────── */
/* Imagens com fundo branco ficam estranhas no dark.
Esta regra reduz o brilho apenas de imagens decorativas. */
[data-theme="dark"] img:not([data-no-dim]) {
filter: brightness(0.92) contrast(1.05);
}
/* Exceção: imagens que não devem ser dimidas */
[data-theme="dark"] img[data-no-dim],
[data-theme="dark"] .avatar img,
[data-theme="dark"] .feature-card__visual img {
filter: none;
}
/* ── SVG inline no dark ──────────────────────── */
[data-theme="dark"] svg:not([data-no-adapt]) {
/* SVGs que usam currentColor já adaptam automaticamente.
Aqui tratamos SVGs com fill hardcoded (legados). */
color-scheme: dark;
}
}
/* ─────────────────────────────────────────────────
2. THEME-TRANSITION — Como o Tema Muda
Filosofia: a transição deve ser NOTADA mas
não deve DISTRAIR. Sem blur, sem flash,
sem animações de conteúdo — apenas a cor.
Técnica: classe .is-transitioning adicionada
por JS no momento do clique, removida após
a transição terminar.
───────────────────────────────────────────────── */
@layer theme-transition {
/* ── TRANSITION VIEW — a transição mais moderna ──
View Transition API: anima o DOM inteiro na troca.
Suporte: Chrome 111+. Progressivo enhancement.
JS para usar:
async function toggleTheme() {
const isDark = document.documentElement.dataset.theme === 'dark';
if (!document.startViewTransition) {
// fallback sem animação
document.documentElement.dataset.theme = isDark ? 'light' : 'dark';
return;
}
await document.startViewTransition(() => {
document.documentElement.dataset.theme = isDark ? 'light' : 'dark';
});
}
*/
/* Pseudo-elements da View Transition API */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: var(--duration-slow);
animation-timing-function: var(--ease-heavy);
mix-blend-mode: normal;
}
/* Entrada do novo tema — fade puro, sem blur */
::view-transition-new(root) {
animation-name: theme-enter;
}
@keyframes theme-enter {
from { opacity: 0; }
to { opacity: 1; }
}
/* Saída do tema antigo */
::view-transition-old(root) {
animation-name: theme-exit;
}
@keyframes theme-exit {
from { opacity: 1; }
to { opacity: 0; }
}
/* ── TRANSIÇÃO CLÁSSICA (fallback) ────────────── */
/* Sem View Transition API: apenas propriedades de cor
transitam — nenhuma propriedade de layout ou tamanho */
html.is-transitioning,
html.is-transitioning * {
transition:
background-color var(--duration-slow) var(--ease-heavy),
color var(--duration-slow) var(--ease-heavy),
border-color var(--duration-base) var(--ease-heavy),
fill var(--duration-base) var(--ease-heavy),
stroke var(--duration-base) var(--ease-heavy) !important;
}
/* Exceções — não transicionam nunca */
html.is-transitioning img,
html.is-transitioning video,
html.is-transitioning canvas,
html.is-transitioning [data-no-transition] {
transition: none !important;
}
/* ── JS HOOK — script mínimo ─────────────────── */
/*
Script para colocar antes do :
(function() {
const STORAGE_KEY = 'analist-theme';
const html = document.documentElement;
// Lê preferência salva
const saved = localStorage.getItem(STORAGE_KEY);
// Detecta preferência do sistema
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
// Aplica tema sem flash (antes do paint)
const theme = saved || (prefersDark ? 'dark' : 'light');
html.dataset.theme = theme;
// Toggle com View Transition
window.__toggleTheme = async function() {
const isDark = html.dataset.theme === 'dark';
const next = isDark ? 'light' : 'dark';
if (!document.startViewTransition) {
html.classList.add('is-transitioning');
html.dataset.theme = next;
localStorage.setItem(STORAGE_KEY, next);
setTimeout(() => html.classList.remove('is-transitioning'), 600);
return;
}
await document.startViewTransition(() => {
html.dataset.theme = next;
localStorage.setItem(STORAGE_KEY, next);
});
};
// Sincroniza com mudança de sistema
window.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', e => {
if (!localStorage.getItem(STORAGE_KEY)) {
html.dataset.theme = e.matches ? 'dark' : 'light';
}
});
})();
*/
/* ── ANTI-FLASH DE TEMA ──────────────────────── */
/* Evita o "flash branco" antes do JS carregar.
Adicione no