world-clock

Multiple timezones shown together in a dropdown.

Add it to your layout with world-clock:

bar:
  layout:
    - monitor: "*"
      right: [world-clock]

General

Field	Type	Default	Description
format	string	"{{ tz('UTC', '%H:%M %Z') }}"	Format string with embedded timezone blocks.
icon-name	string	"ld-globe-symbolic"	Symbolic icon name.
border-show	bool	false	Display border around button.
icon-show	bool	true	Display module icon.
label-show	bool	true	Display text label.
label-max-length	u32	0	Max label characters before truncation with ellipsis. Set to 0 to disable.

More about format

Use {{ tz('timezone', 'strftime') }} to insert a formatted time. Anything outside a placeholder stays as literal text.

Examples

Format string	Renders as
"{{ tz('UTC', '%H:%M %Z') }}"	14:30 UTC
"NYC {{ tz('America/New_York', '%H:%M') }} TYO {{ tz('Asia/Tokyo', '%H:%M') }}"	NYC 09:30 TYO 23:30
"{{ tz('America/New_York', '%H:%M %Z') }} | {{ tz('Europe/London', '%H:%M %Z') }}"	09:30 EST | 14:30 GMT

Colors

Field	Type	Default	Description
border-color	ColorValue	"yellow"	Border color token.
icon-color	ColorValue	"auto"	Icon foreground color. Auto selects based on variant for contrast.
icon-bg-color	ColorValue	"yellow"	Icon container background color token.
label-color	ColorValue	"fg-default"	Label text color token.
button-bg-color	ColorValue	"bg-surface-elevated"	Button background color token.

Click actions

Field	Type	Default	Description
left-click	ClickAction	""	Action on left click.
right-click	ClickAction	""	Action on right click.
middle-click	ClickAction	""	Action on middle click.
scroll-up	ClickAction	""	Action on scroll up.
scroll-down	ClickAction	""	Action on scroll down.

Default configuration

modules:
  world-clock:
    format: '{{ tz(''UTC'', ''%H:%M %Z'') }}'
    icon-name: ld-globe-symbolic
    border-show: false
    border-color: yellow
    icon-show: true
    icon-color: auto
    icon-bg-color: yellow
    label-show: true
    label-color: fg-default
    label-max-length: 0
    button-bg-color: bg-surface-elevated
    left-click: ""
    right-click: ""
    middle-click: ""
    scroll-up: ""
    scroll-down: ""