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 canvas = document.getElementById('clock');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
let is24HourFormat = true; 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', () => { document.getElementById('toggleFormat').addEventListener('click', () => {
is24HourFormat = !is24HourFormat; is24HourFormat = !is24HourFormat;
@ -57,9 +60,9 @@ tags:
maxSize - (lineWidth + lineGap) * 2, maxSize - (lineWidth + lineGap) * 2,
'white' 'white'
); );
drawArc(dayOfWeek, 7, maxSize - (lineWidth + lineGap) * 3, '#fad803'); drawArc(dayOfWeek, 7, maxSize - (lineWidth + lineGap) * 3, colorDayOfWeek);
drawArc(dayOfMonth, daysInCurrentMonth, maxSize - (lineWidth + lineGap) * 4, '#d30a51'); drawArc(dayOfMonth, daysInCurrentMonth, maxSize - (lineWidth + lineGap) * 4, colorDayOfMonth);
drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, '#273f8b'); drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, colorMonth);
} }
function updateCircle() { function updateCircle() {

12
source/style/modules/_clock.scss
View file

@ -1,5 +1,17 @@
@use "../../hippie-style/hippie"; @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 { .body_clock {
main { main {
@extend .sec_main_center; @extend .sec_main_center;