<![CDATA[Can't change color of analog clock in default clock module]]>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–

]]>https://forum.magicmirror.builders/topic/14946/can-t-change-color-of-analog-clock-in-default-clock-moduleRSS for NodeSat, 12 Sep 2026 03:00:26 GMTFri, 16 Apr 2021 20:46:05 GMT60<![CDATA[Reply to Can't change color of analog clock in default clock module on Sat, 17 Apr 2021 20:11:57 GMT]]>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;
}
  1. 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”.
]]>https://forum.magicmirror.builders/post/90801https://forum.magicmirror.builders/post/90801Sat, 17 Apr 2021 20:11:57 GMT<![CDATA[Reply to Can't change color of analog clock in default clock module on Sat, 17 Apr 2021 12:27:37 GMT]]>@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.

]]>https://forum.magicmirror.builders/post/90791https://forum.magicmirror.builders/post/90791Sat, 17 Apr 2021 12:27:37 GMT<![CDATA[Reply to Can't change color of analog clock in default clock module on Sat, 17 Apr 2021 02:34:22 GMT]]>@jjd
Its seem to have write [ code name , such as #11111111 ] , not the color name as red .

]]>https://forum.magicmirror.builders/post/90778https://forum.magicmirror.builders/post/90778Sat, 17 Apr 2021 02:34:22 GMT