General

Inactive segment color

.widget.clock .digit svg path {
  fill: #979ca1;
}

Active segment color

.widget.clock .digit svg path.active {
  fill: #ff0000;
}

According to currently used time zone

The solution compares the current UTC offset with the UTC offset set on the clock widget. If those are the same, it sets the CSS class to local. A CSS rule in the dashboard style colors the local active paths accordingly.

Clock widget settings

 ${moment().utcOffset() == moment().tz("europe/zurich").utcOffset() ? "local" : ""}

Add the CSS class to each clock widget on the dashboard. The time zones in the time zone setting and the CSS class (europe/zurich in this example) have to match.

Dashboard style

.widget.clock.local .digit svg path.active {
  fill: #0a87f0;
}