interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Update clock to use color from CSS

Browse source
This commit is contained in:
sthag 2025-11-16 13:27:46 +01:00
parent 86fce27554
commit 1a1badc786
2 changed files with 18 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

9
source/screens/demo/examples/clock.liquid
View file

@ -23,6 +23,9 @@ tags:
const canvas = document.getElementById('clock');
const ctx = canvas.getContext('2d');
let is24HourFormat = true;
const colorDayOfWeek = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-yellow').trim();
const colorDayOfMonth = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-orange').trim();
const colorMonth = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-pink').trim();
document.getElementById('toggleFormat').addEventListener('click', () => {
is24HourFormat = !is24HourFormat;
@ -57,9 +60,9 @@ tags:
maxSize - (lineWidth + lineGap) * 2,
'white'
);
drawArc(dayOfWeek, 7, maxSize - (lineWidth + lineGap) * 3, '#fad803');
drawArc(dayOfMonth, daysInCurrentMonth, maxSize - (lineWidth + lineGap) * 4, '#d30a51');
drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, '#273f8b');
drawArc(dayOfWeek, 7, maxSize - (lineWidth + lineGap) * 3, colorDayOfWeek);
drawArc(dayOfMonth, daysInCurrentMonth, maxSize - (lineWidth + lineGap) * 4, colorDayOfMonth);
drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, colorMonth);
}
function updateCircle() {