OK, I finally succeeded in changing the analog clock to red. It wasn’t pretty and I don’t know if there is a better way. But here’s what I did, for the record:

1. In modules/default/clock/faces, I copied face-010.svg to face-013.svg to create a new face.

2. I edited face-013.svg to modify the style to have a fill color:
   <style>.cls-1{fill:#f00;}</style>

3. Added the following to my custom.css:

/* for the date display */
.nightclock .date.normal.medium {
    color: #f00;
}

/* for the hour hand */
.nightclock .clockHour {
    background: #f00;
}

/* for the minute hand */
.nightclock .clockMinute {
    background: #f00;
}

4. Edit the config: section of the clock module in config.js.

• Added secondsColor: “#f00” to the config: section of the clock module in config.js to change the color of the second hand
• Change the analogFace config to the newly edited “face-013”.

@peterpang said in Can't change color of analog clock in default clock module:

@jjd
Its seem to have write [ code name , such as #11111111 ] , not the color name as red .

Thanks, but no luck. I tried #ff0000 and everything’s still white.

I’m not an expert CSS guy, but I thought I was doing the right thing. Can someone let me know what I’m doing wrong? I want the entire analog face red for night time.

In my config/config.js, I have this for the clock module:

	{
	    module: "clock",
	    position: "middle_center",
	    classes: "nightclock",
	    config: {
	    displaySeconds: true,
	    displayType: "analog",
	    analogSize: "400px",
            analogFace: "face-010"
	    }
	},

and then in my css/custom.css I have:

.clock .nightclock {
    color: red;
}

to no effect – the clock is still white.

I tried bringing MagicMirror up inside Chrome and using dev tools to mess with the css, but nothing I could do there would seem to have an effect on the color either.

Thanks for any help,

–Jim–