95 lines
2.1 KiB
CSS
95 lines
2.1 KiB
CSS
/* ==========================================================================
|
|
theme/base.css — thème neutre de départ.
|
|
À CLONER pour créer le thème d'un nouveau site :
|
|
cp theme/base.css theme/mon-site.css
|
|
Un thème ne surcharge QUE la palette et le couple de polices.
|
|
Jamais les échelles, le spacing, les rayons, le motion, le layout.
|
|
Structure obligatoire : bloc clair + bloc [data-theme="dark"]
|
|
+ duplication dans @media (prefers-color-scheme: dark).
|
|
========================================================================== */
|
|
|
|
:root {
|
|
/* Polices du site (charger les @font-face côté site, fallbacks ici) */
|
|
--font-heading: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
--font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
|
|
/* Palette claire — remplacer par la palette du site */
|
|
--bg: #ffffff;
|
|
--bg-alt: #f5f5f3;
|
|
--surface: #ffffff;
|
|
--surface-2: #eeeeeb;
|
|
|
|
--text: #1b1b1f;
|
|
--text-muted: #4b4b52;
|
|
--text-subtle: #6e6e76;
|
|
|
|
--border: #e0e0dd;
|
|
--border-strong: #a8a8a2;
|
|
|
|
--primary: #1b1b1f;
|
|
--primary-hover: #333338;
|
|
--on-primary: #ffffff;
|
|
|
|
--accent: #1b1b1f;
|
|
--on-accent: #ffffff;
|
|
|
|
--link: #1d4ed8;
|
|
--link-hover: #1e40af;
|
|
|
|
--focus-ring: #2563eb;
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
--bg: #121214;
|
|
--bg-alt: #18181b;
|
|
--surface: #1e1e21;
|
|
--surface-2: #26262a;
|
|
|
|
--text: #ededf0;
|
|
--text-muted: #b4b4bb;
|
|
--text-subtle: #8b8b93;
|
|
|
|
--border: #2f2f34;
|
|
--border-strong: #4d4d55;
|
|
|
|
--primary: #ededf0;
|
|
--primary-hover: #ffffff;
|
|
--on-primary: #121214;
|
|
|
|
--accent: #ededf0;
|
|
--on-accent: #121214;
|
|
|
|
--link: #8ab4f8;
|
|
--link-hover: #aecbfa;
|
|
|
|
--focus-ring: #8ab4f8;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) {
|
|
--bg: #121214;
|
|
--bg-alt: #18181b;
|
|
--surface: #1e1e21;
|
|
--surface-2: #26262a;
|
|
|
|
--text: #ededf0;
|
|
--text-muted: #b4b4bb;
|
|
--text-subtle: #8b8b93;
|
|
|
|
--border: #2f2f34;
|
|
--border-strong: #4d4d55;
|
|
|
|
--primary: #ededf0;
|
|
--primary-hover: #ffffff;
|
|
--on-primary: #121214;
|
|
|
|
--accent: #ededf0;
|
|
--on-accent: #121214;
|
|
|
|
--link: #8ab4f8;
|
|
--link-hover: #aecbfa;
|
|
|
|
--focus-ring: #8ab4f8;
|
|
}
|
|
}
|