Dark and light theme: best practice

HTML-CSS
1

So, what is the best way to make my website dark and light theme compatible with user preference?

<meta name="color-scheme" content="light dark">

vs

:root {
  color-scheme: light dark;
}

and with that for changing theme what will be better to do?

:root {
  --color-bg: #f1f1f1;
  --color-primary: #0f0f0f;
}

body {
  background-color: var(--color-bg);
  color: var(--color-primary);
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f0f0f;
    --color-primary: #f1f1f1
  }
}

or like creating 2 different files named light.css and dark.css and importing theme

@media (prefers-color-scheme: light) {
  @import "css/light.css";
}

@media (prefers-color-scheme: dark) {
  @import "css/dark.css";
}

light.css

:root {
  --color-bg: #f1f1f1;
  --color-primary: #0f0f0f;
}

body {
  background-color: var(--color-bg);
  color: var(--color-primary);
}

dark.css

:root {
  --color-bg: #0f0f0f;
  --color-primary: #f1f1f1;
}

body {
  background-color: var(--color-bg);
  color: var(--color-primary);
}

or importing it with html

<link rel="stylesheet" href="css/light.css" media="screen and (prefers-color-scheme: light)">
<link rel="stylesheet" href="css/dark.css" media="screen and (prefers-color-scheme: dark)">
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.