Styling

The clock components use CSS custom properties for easy theming and customization.

CSS Custom Properties

Property	Description	Default
--cui-font-family	Font family for Arabic numerals	ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
--cui-font-family-roman	Font family for Roman numerals	ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif
--cui-bg-color	Background color	#E8EBE4
--cui-primary-color	Primary color (hands, numbers)	#13293D
--cui-secondary-color	Secondary color (face, ticks)	#E8EBE4
--cui-accent-color	Accent color (second hand)	#F55D3E

Advanced Customization

For more granular control over individual clock elements, you can use these additional CSS custom properties:

Property	Description	Default
--cui-face-color	Clock face background color	#E8EBE4
--cui-frame-color	Clock frame/border color	#13293D
--cui-tick-color	Tick marks color	#13293D
--cui-number-color	Hour numbers color	#13293D
--cui-info-color	Info slot text color	#13293D
--cui-hand-color	Base color for all clock hands	#13293D
--cui-hand-accent-color	Accent color for dual-tone hands	#E8EBE4
--cui-hour-hand-color	Hour hand color	#13293D
--cui-hour-hand-accent-color	Hour hand accent color (dual-tone)	#E8EBE4
--cui-minute-hand-color	Minute hand color	#13293D
--cui-minute-hand-accent-color	Minute hand accent color (dual-tone)	#E8EBE4
--cui-second-hand-color	Second hand color	#F55D3E
--cui-pin-color	Center pin/dot color	#13293D

Styling

The component uses CSS custom properties for theming. You can customize the appearance by overriding these variables:

/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Noto+Serif+Display:wght@400;500;600;700&display=swap");

.custom-clock-class {
  --cui-font-family: "Cinzel", serif;
  --cui-font-family-roman: "Noto Serif Display", serif;

  --cui-bg-color: #0d1b2a;
  --cui-primary-color: #ffe0b5;
  --cui-secondary-color: #251101;
  --cui-accent-color: #690500;
}

<LiveClock class="custom-clock-class" />

1

2

3

4

5

6

7

8

9

10

11

12

0

Advanced Example

For more detailed customization, you can override individual element colors:

.advanced-custom-clock {
  /* Override specific elements */
  --cui-face-color: #1a1a2e;
  --cui-frame-color: #16213e;
  --cui-tick-color: #0f3460;
  --cui-number-color: #e94560;
  --cui-info-color: #0f3460;

  /* Customize hands individually */
  --cui-hour-hand-color: #16213e;
  --cui-hour-hand-accent-color: #e94560;
  --cui-minute-hand-color: #16213e;
  --cui-minute-hand-accent-color: #e94560;
  --cui-second-hand-color: #f39c12;
  --cui-pin-color: #e94560;
}

<LiveClock class="advanced-custom-clock" />

1

2

3

4

5

6

7

8

9

10

11

12

0

Dark Mode

@media (prefers-color-scheme: dark) {
  :root {
    --cui-bg-color: #13293d;
    --cui-primary-color: #e8ebe4;
    --cui-secondary-color: #13293d;
    --cui-accent-color: #f55d3e;

    /* Advanced dark mode customization */
    --cui-face-color: #1a2633;
    --cui-frame-color: #0f1419;
    --cui-tick-color: #4a5d6a;
    --cui-number-color: #b8c5d1;
    --cui-info-color: #4a5d6a;
    --cui-hand-color: #b8c5d1;
    --cui-hand-accent-color: #1a2633;
    --cui-hour-hand-color: #b8c5d1;
    --cui-hour-hand-accent-color: #1a2633;
    --cui-minute-hand-color: #b8c5d1;
    --cui-minute-hand-accent-color: #1a2633;
    --cui-second-hand-color: #f55d3e;
    --cui-pin-color: #b8c5d1;
  }
}