From 1a1badc78679657d61928fd87a939ea2ce1af8d5 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 16 Nov 2025 13:27:46 +0100 Subject: [PATCH] feat: Update clock to use color from CSS --- source/screens/demo/examples/clock.liquid | 9 ++++++--- source/style/modules/_clock.scss | 12 ++++++++++++ 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index ad98667..3a36cbd 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -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() { diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss index 537190f..17a1f88 100644 --- a/source/style/modules/_clock.scss +++ b/source/style/modules/_clock.scss @@ -1,5 +1,17 @@ @use "../../hippie-style/hippie"; +:root { + --clock-color-yellow: rgb(250, 216, 3); + --clock-color-orange: rgb(242, 175, 19); + --clock-color-pink: rgb(211, 10, 81); + --clock-color-purple: rgb(142, 31, 104); + --clock-color-blue: rgb(39, 63, 139); + --clock-color-pblue: rgb(60, 87, 154); + --clock-color-lblue: rgb(183, 224, 240); + --clock-color-lcyan: rgb(107, 199, 217); + --clock-color-cyan: rgb(82, 190, 209); +} + .body_clock { main { @extend .sec_main_center;