Change css colors based on body class (dark mode)

Question

I have <body class="dark"> and <body class="light">

I'm trying to edit css colors based on body class. Is there a better approach than this:

body.light .card {
  color: #292b2c;
  background-color: #CCC;
}

body.dark .card {
  color: #f7f7f7;
  background-color: #444;
}

body.light .jumbotron {
  color: #292b2c;
  background-color: #CCC;
}

body.dark .jumbotron {
  color: #f7f7f7;
  background-color: #444;
}

score 4 · Answer 1 · answered Nov 23 '20 at 00:03

I don't have enough reputation to comment, so here's an answer instead.

If you're trying to make a 'Dark Mode' variant of your css you could use a media query to achieve this

@media (prefers-color-scheme: dark) {
/* override styles here */
}

More information on Mozilla's website https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

The casper theme for Ghost CMS is an example of a stylesheet that has a dark mode added to the bottom (section 12)

thanks for the link to the css file - it's really interesting to see their execution of dark mode! — Yshmarov, Nov 23 '20 at 11:03

dippas · Accepted Answer · 2020-11-23T00:09:27.153

1

You can use CSS Variables, so you will only need to set the property once

:root {
  --darkColor: #f7f7f7;
  --darkBackground: #444;
  --lightColor: #292b2c;
  --lightBackground: #ccc;
}

body.light .card,
body.light .jumbotron {
  color: var(--lightColor);
  background-color: var(--lightBackground);
}

body.dark .card,
body.dark .jumbotron {
  color: var(--darkColor);
  background-color: var(--darkBackground);
}

Depending on the support you'll need to give, you can mix CSS Variables with @media (prefers-color-scheme: dark)

:root {
  --darkColor: #f7f7f7;
  --darkBackground: #444;
  --lightColor: #292b2c;
  --lightBackground: #ccc;
}

.card,
.jumbotron {
  color: var(--lightColor);
  background-color: var(--lightBackground);
}

@media (prefers-color-scheme: dark) {
  .card,
  .jumbotron {
    color: var(--darkColor);
    background-color: var(--darkBackground);
  }
}

edited Nov 23 '20 at 00:09

answered Nov 23 '20 at 00:04

dippas

58,591
15
114
126

but how can I let the user select `prefers-color-scheme`? – Yshmarov Nov 23 '20 at 11:04
The point of using that media query is to let the layout choose the scheme that user prefers. If you want to make a toggle for scheme then you can opt in for my 1st approach – dippas Nov 23 '20 at 11:24
oh, so the media query is kind of `magic-automatic`, meaning the browser decides what to show? – Yshmarov Nov 23 '20 at 11:33
From [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) - `The prefers-color-scheme CSS media feature is used to detect if the user has requested the system use a light or dark color theme.` – dippas Nov 23 '20 at 11:39

score 0 · Answer 3 · answered Nov 23 '20 at 00:03

0

If it look like your example (same rules on different classes) just use comma to separate classes:

body.light .jumbotron,
body.light .card {
  color: #292b2c;
  background-color: #CCC;
}

body.dark .jumbotron,
body.dark .card {
  color: #f7f7f7;
  background-color: #444;
}

If it more complex then this example, consider using framework: Sass .scss: Nesting and multiple classes?

answered Nov 23 '20 at 00:03

A. Meshu

4,053
2
20
34

thanks for showing the very interesting option of grouping! – Yshmarov Nov 23 '20 at 00:37
looking through all of them and testing right now :) – Yshmarov Nov 23 '20 at 00:44
1

@Yshmarov no problem. This is indeed a very simple solution for your question markup. Others answers here are more modern and fit to complex parameters. – A. Meshu Nov 23 '20 at 00:56

Change css colors based on body class (dark mode)

3 Answers3