clock: differentiate date and time colors

This commit is contained in:
Tyler Brown Cifu Shuster 2020-10-08 08:37:47 -07:00
parent e8e3c08050
commit b7e63fb530

View File

@ -14,18 +14,20 @@ const innerSize = 124; // clock size
// }
// }
let text = '#000000', background = '#ffffff';
let timeTextColor = '#000000', dateTextColor = '#333333', background = '#ffffff';
const dark = window.matchMedia('(prefers-color-scheme: dark)');
if (dark.matches) {
text = '#7f7f7f';
timeTextColor = '#ffffff';
dateTextColor = '#7f7f7f';
background = '#333';
}
function darkColors(dark) {
if (dark.matches) {
text = '#7f7f7f';
timeTextColor = '#ffffff';
dateTextColor = '#7f7f7f';
background = '#ffffff';
}
}
@ -344,10 +346,10 @@ class Clock extends React.Component {
: moment().format('h:mm A');
const dateText = moment().format('MMM Do');
ctx.textAlign = 'center';
ctx.fillStyle = text;
ctx.fillStyle = timeTextColor;
ctx.font = '12px Inter';
ctx.fillText(timeText, ctr, ctr + 6 - 7);
ctx.fillStyle = text;
ctx.fillStyle = dateTextColor;
ctx.font = '12px Inter';
ctx.fillText(dateText, ctr, ctr + 6 + 7);