CODEWITHSUNDEEP
css
thatoneuser
thatoneuser

Reputation: 5

How do I fix this error I'm getting trying to include Dark Mode with CSS?

I am trying to make Dark Mode for my website, but my CSS file kept on saying:

Does anyone know how to fix this mess?

Thanks in advance for responding.

Here is my code for reference.

body {
  --text-color: #222;
  --bkg-color: #fff;

body.dark-theme {
  --text-color: #eee;
  --bkg-color: #121212;
}

@media (prefers-color-scheme: dark) {
  /* defaults to dark theme */
  body {
    --text-color: #eee;
    --bkg-color: #121212;
  }
  body.light-theme {
    --text-color: #222;
    --bkg-color: #fff;
  }
}

* {
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background: var(--bkg-color);
}

h1,
p {
  color: var(--text-color);
}

Upvotes: 0

Views: 520

Answers (1)

Dai
Dai

Reputation: 155145

Your top body {} rule is missing its closing }.

Change this:

body {
  --text-color: #222;
  --bkg-color: #fff;

body.dark-theme {
  --text-color: #eee;
  --bkg-color: #121212;
}

to this:

body {
  --text-color: #222;
  --bkg-color: #fff;
}                             /* <-- here */

body.dark-theme {
  --text-color: #eee;
  --bkg-color: #121212;
}
  • However, your stylesheet still has repeating values, you can normalize it somewhat by defining your actual color values only on the :root (aka html):
    • And then referencing them from within both @media (prefers-color-scheme: dark) { and body.dark-theme, which means UA-based color schemes can work as well as JS-based overrides too.
      • Because the DOM still doesn't have an API to set color scheme for some reason.
  • Also, you don't need a * { font-family: } rule, just set it on body. 

/* #region Light/Dark Scheme Properties */

:root {
  --text-color-light: #222;
  --bkg-color-light : #fff;

  --text-color-dark : #eee;
  --bkg-color-dark  : #121212;

  /* Default to the light scheme (before `prefers-color-scheme` and/or `body.dark-theme` are applied): */
  --text-color      : var(--text-color-light);
  --bkg-color       : var(--bkg-color-light);
}

@media (prefers-color-scheme: dark) {
  /* For UA color scheme: */
  body {
    --text-color: var(--text-color-dark);
    --bkg-color : var(--bkg-color-dark);
  }
}
body.dark-theme {
  /* For CSS-class/JS-based color scheme override: */
  --text-color: var(--text-color-dark);
  --bkg-color : var(--bkg-color-dark);
}

/* If you want to add a CSS clas `.light-theme` to *override* prefers-color-scheme: dark, then uncomment this: */
/*
body.light-theme {
  /* For CSS-class/JS-based color scheme override: */
  --text-color: var(--text-color-light);
  --bkg-color : var(--bkg-color-light);
}
*/

/* #endregion Light/Dark Scheme Properties */

/*
    *DO NOT* reference any of the `-dark` or `-light` properties at all below this point.
    You only need to reference the non-suffixed custom-properties, as those will always be set to the current *effective* color scheme's values, whether from  `prefers-color-scheme` or by `.dark-theme` (or `.light-theme`).
*/

body {
  background-color: var(--bkg-color);
  font-family: Helvetica, Arial, sans-serif;
}

h1,
p {
  color: var(--text-color);
}

Upvotes: 2

Related Questions