𝗗𝘆𝗻𝗮𝗺𝗶𝘀𝗰𝗵𝗲 𝗧𝗵𝗲𝗺𝗮𝘁𝗶𝘀𝗲𝗿𝗶𝗻𝗴 𝘇𝗼𝗻𝗱𝗲 𝗖𝗦𝗦-𝗶𝗻-𝗝𝗦

Ik was vroeger een enorme fan van styled-components. Ik hield van de flexibiliteit. Toen liep ik tegen een muur aan.

Eén project moest de runtime-omvang verkleinen. Ik besloot CSS Modules en native CSS te proberen. Het resultaat verraste me. Ik heb styled-components, Emotion en goober uit mijn projecten verwijderd. Ik ben niets kwijt wat ik daadwerkelijk nodig had.

De grootste winst was niet alleen de prestaties. Het was het verwijderen van de styling-afhankelijkheid. In één project nam de CSS-in-JS runtime 30% van de client bundle in beslag.

Gewone CSS is volwassen geworden. Je hebt geen zware JS-libraries meer nodig voor deze taken:

• Nesting: Gebruik native CSS nesting. • Kleurverschuivingen: Gebruik color-mix(). • Specificiteitscontrole: Gebruik @layer. • Responsieve componenten: Gebruik container queries.

Hier lees je hoe je een thema bouwt met slechts één bestand en custom properties.

  1. Definieer tokens in een CSS-bestand.
:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-accent: #3c7dc4;
}

[data-theme="dark"] {
  --color-bg: #14161a;
  --color-text: #f5f5f0;
  --color-accent: #6aa6e8;
}
  1. Gebruik die variabelen in je componenten.
.button {
  background: var(--color-accent);
  color: var(--color-bg);
}
  1. Wissel van thema door één enkel attribuut te wijzigen.
function setTheme(theme) {
  document.documentElement.dataset.theme = theme;
  localStorage.setItem("theme", theme);
}

Componenten hebben geen ThemeProvider nodig. Ze hoeven niet opnieuw te renderen. De browser handelt de update af via de cascade. Hierdoor blijft het grootste deel van je app in Server Components.

Om de "flash" van het verkeerde thema bij het laden van de pagina te voorkomen, gebruik je een klein inline script in je HTML-head:

<script>
  const t = localStorage.getItem("theme") || 
  (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  document.documentElement.dataset.theme = t;
</script>

Stop met het gebruik van JS om tijdens runtime stijlen te genereren. Gebruik native CSS-variabelen voor je tokens. Dit resulteert in minder code en snellere laadtijden.

Bron: https://dev.to/kirill_c_7b35589230/dynamic-theming-without-css-in-js-d7e