inline dark mode

<h1>change your color preferences or edit the media query</h1>

:root {
  --prefer-dark: initial;
  
  --light-surface: hsl(0 0% 90%);
  --dark-surface: var(--prefer-dark) hsl(0 0% 10%);
  --light-text: hsl(0 0% 10%);
  --dark-text: var(--prefer-dark) hsl(0 0% 90%);
  
  --surface: var(--dark-surface, var(--light-surface));
  --text: var(--dark-text, var(--light-text));
}

@media (prefers-color-scheme: dark) {
  :root {
    --prefer-dark: ;
  }
}

html {
  block-size: 100%;
  inline-size: 100%;
}

body {
  background: var(--surface);
  color: var(--text);
  
  min-block-size: 100%;
  min-inline-size: 100%;
  box-sizing: border-box;
  display: grid;
  place-content: center;
  font-family: system-ui;
  text-align: center;
  padding: 15vw;
}

https://codepen.io/argyleink/pen/LYGXVPr

ergenekonyigit/inline-dark-mode.md