MagicMirror: Changing font colors

sandyh10

OK…I am new and I know it probably has been answered already but I can’t find it so how do I change the Time or the temperature to be the color green or whatever?

j.e.f.f

@sandyh10 You can write rules css/custom.css to change all sorts of stuff. Here’s an example for the time:

.module.clock .time {
  color: #82bae5; /* nice, light blue colour */
}

You can figure out the class names of the various items by starting MagicMirror in developer mode with npm start dev. At the top-left of the white window you’ll see an icon that looks like a square with an arrow pointing into it. Click it, then click an element in MagicMirror’s layout. That will highlight its HTML markup in the white window, where you can see class names you can target, and what the parent elements are.

If you need help with CSS, there are plenty of resources on the web. You can Google for “CSS 101”. Here’s a good one to start with:
http://www.css-101.org/