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”.

I eventually figured this out: I hadn’t had alert listed in the modules list.

More details here: https://github.com/fewieden/MMM-AlarmClock/issues/48

Hi, I’m having a problem with MMM-AlarmClock where the popup (to dismiss the alarm) isn’t appearing when the alarm goes off.

This was working fine for me, and then I upgraded to the latest Raspbian, MagicMirror, and MMM-AlarmClock and the popup stopped appearing. I posted on the module’s github, but got no responses: https://github.com/fewieden/MMM-AlarmClock/issues/48

My (test) configuration is:

    modules: [
	{
	    module: 'MMM-AlarmClock',
	    position: 'middle_center',
	    config: {
		alarms: [
		    { 
			time: "11:19", 
			days: [0,1,2,3,4,5,6], 
			sound: 'alarm.mp3', 
			title: "title", 
			message: "message", 
		    },
		],
		touch: true, 
		popup: true,
	    }
	},
    ]

I’m using a Raspberry Pi Model B Rev 1.2 with Pi 7-inch Touchscreen running Raspbian 12 (bookworm). My node version is 20.15.0, my MagicMirror version is v2.28.0 and the MMM-AlarmClock version is 2.0.2.

Any help/advice would be appreciated.

@sdetweil I did use your script and it worked perfectly. Thank you for that!

Thank you, @sdetweil, I appreciate your reply and your opinion.

This is a Pi 3B, so I’ll start with legacy 32bit bookworm.

–Jim–

I had a working MagicMirror setup under Raspbian buster, but started having trouble with MMM-AlarmClock module streaming boston npr affiliate WBUR. It would keep dropping and stuttering (which it didn’t do before.)

I figured I would start by upgrading the system to the latest software and have effectively borked my system now, so I’m going to start from scratch.

Here’s my question: What version of Raspbian should I be using? Bookworm is the latest, but I’ve seen a bunch of posts indicating maybe it isn’t ready for prime time yet.

I’d rather use the latest release. Is there any reason I shouldn’t be using Raspbian Bookworm for a MagicMirror installation?

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–