Lovelace Analog Clock (HTML Version)

This is a fork of the original Analog Clock card, reimplemented using SVG + HTML/CSS rendering instead of Canvas 2D for sharper display on HiDPI screens.

Improvements over Original

• Sharper display: SVG + HTML/CSS rendering, always crisp on any DPI
• Auto theme adaptation: Default use var(--primary-text-color) for automatic light/dark mode switching via browser

Not Implemented

The following features from the original are not yet available:

Feature	Workaround
style_hourhand / style_minutehand / style_secondhand	Fixed to display a single hand style
Custom watch face (picture-elements)	-

Original Repository Instruction

An analog clock card for Home Assistant Lovelace. Colors are fully customizable, weekday names and date formats are localizable. This one accepts vw % and variable --clock-size

Installation

Add https://github.com/ATFieldBeast/analog-clock-html as a custom repository of type Dashboard in HACS.

Search and install the 'Analog Clock HTML'.

Configuration of the Example Picture Above

type: custom:analog-clock-html
diameter: 260
locale: zh
timezone: Asia/Shanghai
dateformat: yy年mm月dd日
hide_facedigits: true
hide_hourhand: true
hide_minutehand: true

Configuration

For a list of available options for dateformat and timeformat, see Formats.

Name	Type	Default	Description
color_background	String	rgba(0, 0, 0, 0)	Background color of the clock (default: transparent)
color_ticks	String	var(--primary-text-color)	Color of the border ticks
color_facedigits	String	var(--primary-text-color)	Color of the face digits
color_digitaltime	String	var(--primary-text-color)	Color of the digital time
color_hourhand	String	var(--primary-text-color)	Color of the hour hand
color_minutehand	String	var(--primary-text-color)	Color of the minute hand
color_secondhand	String	var(--primary-text-color)	Color of the second hand
color_text	String	var(--primary-text-color)	Color of all texts (date, weekday, weeknumber)
color_date	String	color_text	Color of the date
color_weekday	String	color_text	Color of the weekday
color_weeknumber	String	color_text	Color of the week number
dateformat	String	HA / browser	Format for the date
timeformat	String	HA / browser	Format for the time
locale	String	HA / browser	Locale for date and week day
timezone	String	Browser	Time zone, for example Europe/Stockholm Time zones
timezonedisplayname	String		Custom name for the displayed time zone
hide_timezone	Boolean	true	If true, hide time zone (show weekday instead)
hide_minorticks	Boolean	false	If true, hide the minor ticks
hide_majorticks	Boolean	false	If true, hide the major ticks
hide_facedigits	Boolean	false	If true, hide the hour numbers
hide_date	Boolean	false	If true, hide the date
hide_weekday	Boolean	false	If true, hide the weekday
hide_weeknumber	Boolean	true	If true, hide the week number
hide_digitaltime	Boolean	false	If true, hide the digital time
hide_hourhand	Boolean	false	If true, hide the hour hand
hide_minutehand	Boolean	false	If true, hide the minute hand
hide_secondhand	Boolean	false	If true, hide the second hand
diameter	Integer	220	Diameter of the clock

Colors

All colors can be entered in one of four different ways:

• "green" The color in plain text. Available colors
• "#3273a8" The first two digits are the level of Red in hex, 00 - FF. The second two Green, and the last two Blue. "#000000" is black, "#FF00FF" is bright pink and "#FFFFFF" is white.
• rgba(0,0,0,0) The first two number is the level of Red in decimal, 0 - 255. The second Green, the third Blue and the last is alpha. Alpha is in decimal 0 - 1, where 0 is transparent. rgba(0,0,0,1) is black, rgba(255,0,255,1) is bright pink, rgba(0,0,0,1) is white and rgba(0,0,0,0.5) is semi transparent. Note that the value should not be quoted.
• "--secondary-text-color" Refers to Home Assistant CSS variables.