Clean up world clock module code and add themes. (#885)

scripts/fillThemes.js

@@ -179,6 +179,7 @@ const collectBorderColors = (baseJSON) => {
 const determineBestMatchValue = (baseValue, valueToKeysMap, targetJSON, specialKeyMappings, currentKey, baseTheme) => {
     if (specialKeyMappings.hasOwnProperty(currentKey)) {
         const sourceKey = specialKeyMappings[currentKey];
+
         if (targetJSON.hasOwnProperty(sourceKey)) {
             console.log(formatMessage(COLORS.FG_CYAN, `🔍 Found source key '${sourceKey}' in target JSON.`));
             return targetJSON[sourceKey];
@@ -309,24 +310,24 @@ const processTheme = async (themePath, baseTheme, dryRun, specialKeyMappings = {
         }
     }
 
-    const extraKeys = findExtraKeys(baseTheme, themeJSON);
+    // const extraKeys = findExtraKeys(baseTheme, themeJSON);
-
+    //
-    if (extraKeys.length === 0) {
+    // if (extraKeys.length === 0) {
-        console.log(formatMessage(COLORS.FG_GREEN, `✅ No extra keys to remove in '${path.basename(themePath)}'.`));
+    //     console.log(formatMessage(COLORS.FG_GREEN, `✅ No extra keys to remove in '${path.basename(themePath)}'.`));
-    } else {
+    // } else {
-        console.log(
+    //     console.log(
-            formatMessage(
+    //         formatMessage(
-                COLORS.FG_YELLOW,
+    //             COLORS.FG_YELLOW,
-                `\n🗑️ Processing '${path.basename(themePath)}': Found ${extraKeys.length} extra key(s) to remove.`,
+    //             `\n🗑️ Processing '${path.basename(themePath)}': Found ${extraKeys.length} extra key(s) to remove.`,
-            ),
+    //         ),
-        );
+    //     );
-
+    //
-        for (const key of extraKeys) {
+    //     for (const key of extraKeys) {
-            delete themeJSON[key];
+    //         delete themeJSON[key];
-            console.log(formatMessage(COLORS.FG_RED, `➖ Removed key: "${key}"`));
+    //         console.log(formatMessage(COLORS.FG_RED, `➖ Removed key: "${key}"`));
-            hasChanges = true;
+    //         hasChanges = true;
-        }
+    //     }
-    }
+    // }
 
     if (hasChanges) {
         if (dryRun) {
@@ -402,11 +403,11 @@ const main = async () => {
     const themeFiles = (await fs.readdir(themesDir)).filter((file) => file.endsWith('.json'));
 
     const specialKeyMappings = {
-        'theme.bar.buttons.modules.cava.text': 'theme.bar.buttons.modules.submap.text',
+        'theme.bar.buttons.modules.worldclock.text': 'theme.bar.buttons.clock.text',
-        'theme.bar.buttons.modules.cava.background': 'theme.bar.buttons.modules.submap.background',
+        'theme.bar.buttons.modules.worldclock.background': 'theme.bar.buttons.clock.background',
-        'theme.bar.buttons.modules.cava.icon_background': 'theme.bar.buttons.modules.submap.icon_background',
+        'theme.bar.buttons.modules.worldclock.icon_background': 'theme.bar.buttons.clock.icon_background',
-        'theme.bar.buttons.modules.cava.icon': 'theme.bar.buttons.modules.submap.icon',
+        'theme.bar.buttons.modules.worldclock.icon': 'theme.bar.buttons.clock.icon',
-        'theme.bar.buttons.modules.cava.border': 'theme.bar.buttons.modules.submap.border',
+        'theme.bar.buttons.modules.worldclock.border': 'theme.bar.buttons.clock.border',
     };
 
     const queue = [...themeFiles].filter(

scripts/fillThemes.sh

@@ -1,86 +0,0 @@
-#!/bin/bash
-
-# Generated by our good friend Chat Jippity
-# Might be inefficient but it works
-
-# Define directories and theme files
-THEMES_DIR="$(dirname "$(realpath "$0")")/../themes"
-COMPLETE_THEME_FILE="catppuccin_mocha.json"
-COMPLETE_SPLIT_THEME_FILE="catppuccin_mocha_split.json"
-
-# Check if jq is installed
-if ! command -v jq &>/dev/null; then
-    echo "jq is required but not installed. Please install jq and try again."
-    exit 1
-fi
-
-# Function to fill missing values
-fill_missing_values() {
-    local complete_theme_file="$1"
-    local target_theme_file="$2"
-
-    # Load complete theme and target theme into variables
-    complete_theme=$(jq '.' "$complete_theme_file")
-    target_theme=$(jq '.' "$target_theme_file")
-
-    # Create associative arrays to map colors to properties for fast lookup
-    declare -A color_to_props
-    declare -A prop_to_color
-
-    # Populate color_to_props and prop_to_color arrays from complete theme
-    while IFS= read -r line; do
-        key=$(echo "$line" | awk '{print $1}')
-        value=$(echo "$line" | awk '{print $2}')
-        color_to_props["$value"]+="$key "
-        prop_to_color["$key"]="$value"
-    done < <(echo "$complete_theme" | jq -r 'to_entries[] | "\(.key) \(.value)"')
-
-    # Generate filled theme by iterating over complete theme keys
-    filled_theme="$target_theme"
-    for key in "${!prop_to_color[@]}"; do
-        if ! echo "$target_theme" | jq -e ".\"$key\"" &>/dev/null; then
-            # Find corresponding color if missing in target theme
-            value="${prop_to_color[$key]}"
-            corresponding_color=""
-
-            # Check if other properties with the same color exist in the target theme
-            for prop in ${color_to_props["$value"]}; do
-                if echo "$target_theme" | jq -e ".\"$prop\"" &>/dev/null; then
-                    corresponding_color=$(echo "$target_theme" | jq -r ".\"$prop\"")
-                    break
-                fi
-            done
-
-            # Add missing property with the corresponding color
-            if [ -n "$corresponding_color" ]; then
-                filled_theme=$(echo "$filled_theme" | jq --arg key "$key" --arg value "$corresponding_color" '.[$key] = $value')
-                echo "Added missing property: $key with value: $corresponding_color to $target_theme_file"
-            else
-                # Default action if no corresponding color is found
-                echo "No corresponding color found for $key; using value from complete theme."
-                filled_theme=$(echo "$filled_theme" | jq --arg key "$key" --arg value "$value" '.[$key] = $value')
-            fi
-        fi
-    done
-
-    # Write the filled theme back to the target file
-    echo "$filled_theme" >"$target_theme_file"
-    echo "Filled missing values in $target_theme_file"
-}
-
-# Process all theme files in the directory
-for file in "$THEMES_DIR"/*.json; do
-    filename=$(basename "$file")
-
-    # Skip the complete theme files
-    if [[ "$filename" == "$COMPLETE_THEME_FILE" ]] || [[ "$filename" == "$COMPLETE_SPLIT_THEME_FILE" ]]; then
-        continue
-    fi
-
-    # Determine whether to use split or non-split complete theme
-    if [[ "$filename" == *"_split"* ]]; then
-        fill_missing_values "$THEMES_DIR/$COMPLETE_SPLIT_THEME_FILE" "$file"
-    else
-        fill_missing_values "$THEMES_DIR/$COMPLETE_THEME_FILE" "$file"
-    fi
-done

src/components/bar/modules/worldclock/index.tsx

@@ -1,120 +1,82 @@
-import { openMenu } from '../../utils/menu';
 import options from 'src/options';
 import { BarBoxChild } from 'src/lib/types/bar.js';
-import { runAsyncCommand, throttledScrollHandler } from 'src/components/bar/utils/helpers.js';
+import { inputHandler } from 'src/components/bar/utils/helpers.js';
 import { bind, Variable } from 'astal';
-import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers';
 import { Astal } from 'astal/gtk3';
 import { systemTime } from 'src/globals/time';
 import { GLib } from 'astal';
+import { Module } from '../../shared/Module';
 
-const { format, formatDiffDate, tz, icon, showIcon, showTime, rightClick, middleClick, scrollUp, scrollDown } =
+const {
-    options.bar.customModules.worldclock;
+    format,
-const { style } = options.theme.bar.buttons;
+    formatDiffDate,
+    divider,
+    tz,
+    icon,
+    showIcon,
+    leftClick,
+    rightClick,
+    middleClick,
+    scrollUp,
+    scrollDown,
+} = options.bar.customModules.worldclock;
 
-const time = Variable.derive(
+export const WorldClock = (): BarBoxChild => {
-    [systemTime, format, formatDiffDate, tz],
+    const iconBinding = Variable.derive([bind(icon), bind(showIcon)], (timeIcon, showTimeIcon) => {
-    (c, f, fdd, tzn) =>
+        if (!showTimeIcon) {
-        tzn
+            return '';
-            .map((t) =>
-                c
-                    .to_timezone(GLib.TimeZone.new(t))
-                    .format(c.to_timezone(GLib.TimeZone.new(t)).get_day_of_year() == c.get_day_of_year() ? f : fdd),
-            )
-            .join(' | ') || '',
-);
-
-const WorldClock = (): BarBoxChild => {
-    const ClockTime = (): JSX.Element => <label className={'bar-button-label worldclock bar'} label={bind(time)} />;
-    const ClockIcon = (): JSX.Element => (
-        <label className={'bar-button-icon worldclock txt-icon bar'} label={bind(icon)} />
-    );
-
-    const componentClassName = Variable.derive(
-        [bind(style), bind(showIcon), bind(showTime)],
-        (btnStyle, shwIcn, shwLbl) => {
-            const styleMap = {
-                default: 'style1',
-                split: 'style2',
-                wave: 'style3',
-                wave2: 'style3',
-            };
-            return `worldclock-container ${styleMap[btnStyle]} ${!shwLbl ? 'no-label' : ''} ${!shwIcn ? 'no-icon' : ''}`;
-        },
-    );
-
-    const componentChildren = Variable.derive([bind(showIcon), bind(showTime)], (shIcn, shTm) => {
-        if (shIcn && !shTm) {
-            return <ClockIcon />;
-        } else if (shTm && !shIcn) {
-            return <ClockTime />;
         }
-        return (
+
-            <box>
+        return timeIcon;
-                <ClockIcon />
-                <ClockTime />
-            </box>
-        );
     });
 
-    const component = (
+    const timeBinding = Variable.derive(
-        <box
+        [systemTime, format, formatDiffDate, tz, divider],
-            className={componentClassName()}
+        (localSystemTime, timeFormat, differentDayFormat, targetTimeZones, timeDivider) =>
-            onDestroy={() => {
+            targetTimeZones
-                componentClassName.drop();
+                .map((timeZoneId) => {
-                componentChildren.drop();
+                    const targetTimezone = GLib.TimeZone.new(timeZoneId);
-            }}
+                    const timeInTargetZone = localSystemTime.to_timezone(targetTimezone);
-        >
+
-            {componentChildren()}
+                    if (timeInTargetZone === null) {
-        </box>
+                        return 'Invalid TimeZone';
+                    }
+
+                    const isTargetZoneSameDay =
+                        timeInTargetZone.get_day_of_year() === localSystemTime.get_day_of_year();
+                    const formatForTimeZone = isTargetZoneSameDay ? timeFormat : differentDayFormat;
+
+                    return timeInTargetZone.format(formatForTimeZone);
+                })
+                .join(timeDivider),
     );
 
-    return {
+    const microphoneModule = Module({
-        component,
+        textIcon: iconBinding(),
-        isVisible: true,
+        label: timeBinding(),
         boxClass: 'worldclock',
         props: {
-            setup: (self: Astal.Button): void => {
+            setup: (self: Astal.Button) => {
-                let disconnectFunctions: (() => void)[] = [];
+                inputHandler(self, {
-
+                    onPrimaryClick: {
-                Variable.derive(
+                        cmd: leftClick,
-                    [
-                        bind(rightClick),
-                        bind(middleClick),
-                        bind(scrollUp),
-                        bind(scrollDown),
-                        bind(options.bar.scrollSpeed),
-                    ],
-                    () => {
-                        disconnectFunctions.forEach((disconnect) => disconnect());
-                        disconnectFunctions = [];
-
-                        const throttledHandler = throttledScrollHandler(options.bar.scrollSpeed.get());
-
-                        disconnectFunctions.push(
-                            onPrimaryClick(self, (clicked, event) => {
-                                openMenu(clicked, event, 'calendarmenu');
-                            }),
-                        );
-
-                        disconnectFunctions.push(
-                            onSecondaryClick(self, (clicked, event) => {
-                                runAsyncCommand(rightClick.get(), { clicked, event });
-                            }),
-                        );
-
-                        disconnectFunctions.push(
-                            onMiddleClick(self, (clicked, event) => {
-                                runAsyncCommand(middleClick.get(), { clicked, event });
-                            }),
-                        );
-
-                        disconnectFunctions.push(onScroll(self, throttledHandler, scrollUp.get(), scrollDown.get()));
                     },
-                );
+                    onSecondaryClick: {
+                        cmd: rightClick,
+                    },
+                    onMiddleClick: {
+                        cmd: middleClick,
+                    },
+                    onScrollUp: {
+                        cmd: scrollUp,
+                    },
+                    onScrollDown: {
+                        cmd: scrollDown,
+                    },
+                });
             },
         },
-    };
+    });
+
+    return microphoneModule;
 };
-
-export { WorldClock };

src/components/bar/settings/config.tsx

@@ -429,13 +429,15 @@ export const CustomModuleSettings = (): JSX.Element => {
                 <Option opt={options.bar.customModules.worldclock.icon} title="Icon" type="string" />
                 <Option opt={options.bar.customModules.worldclock.showIcon} title="Show Icon" type="boolean" />
                 <Option opt={options.theme.bar.buttons.modules.worldclock.spacing} title="Spacing" type="string" />
-                <Option opt={options.bar.customModules.worldclock.showTime} title="Show Time" type="boolean" />
                 <Option opt={options.bar.customModules.worldclock.format} title="Format" type="string" />
                 <Option
                     opt={options.bar.customModules.worldclock.formatDiffDate}
-                    title="Format (when date different from local date)"
+                    title="Cross-Day Time Format"
+                    subtitle="Format to use when the timezone is on a different calendar day than the local timezone."
                     type="string"
                 />
+                <Option opt={options.bar.customModules.worldclock.divider} title="Date Divider" type="string" />
+                <Option opt={options.bar.customModules.worldclock.leftClick} title="Left Click" type="string" />
                 <Option opt={options.bar.customModules.worldclock.rightClick} title="Right Click" type="string" />
                 <Option opt={options.bar.customModules.worldclock.middleClick} title="Middle Click" type="string" />
                 <Option opt={options.bar.customModules.worldclock.scrollUp} title="Scroll Up" type="string" />

src/components/bar/settings/theme.tsx

@@ -26,7 +26,10 @@ export const CustomModuleTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.modules.microphone.icon_background}
                     title="Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.modules.microphone.border} title="Border" type="color" />
@@ -39,7 +42,10 @@ export const CustomModuleTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.modules.ram.icon_background}
                     title="Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.modules.ram.border} title="Border" type="color" />
@@ -52,7 +58,10 @@ export const CustomModuleTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.modules.cpu.icon_background}
                     title="Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.modules.cpu.border} title="Border" type="color" />
@@ -69,7 +78,10 @@ export const CustomModuleTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.modules.cpuTemp.icon_background}
                     title="Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.modules.cpuTemp.border} title="Border" type="color" />
@@ -86,7 +98,10 @@ export const CustomModuleTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.modules.storage.icon_background}
                     title="Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.modules.storage.border} title="Border" type="color" />
@@ -103,7 +118,10 @@ export const CustomModuleTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.modules.netstat.icon_background}
                     title="Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.modules.netstat.border} title="Border" type="color" />
@@ -120,7 +138,10 @@ export const CustomModuleTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.modules.kbLayout.icon_background}
                     title="Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.modules.kbLayout.border} title="Border" type="color" />
@@ -137,7 +158,10 @@ export const CustomModuleTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.modules.updates.icon_background}
                     title="Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.modules.updates.border} title="Border" type="color" />
@@ -154,7 +178,10 @@ export const CustomModuleTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.modules.submap.icon_background}
                     title="Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.modules.submap.border} title="Border" type="color" />
@@ -171,7 +198,10 @@ export const CustomModuleTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.modules.weather.icon_background}
                     title="Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.modules.weather.border} title="Border" type="color" />
@@ -188,7 +218,10 @@ export const CustomModuleTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.modules.hyprsunset.icon_background}
                     title="Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.modules.hyprsunset.border} title="Border" type="color" />
@@ -205,7 +238,10 @@ export const CustomModuleTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.modules.hypridle.icon_background}
                     title="Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.modules.hypridle.border} title="Border" type="color" />
@@ -218,14 +254,17 @@ export const CustomModuleTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.modules.cava.icon_background}
                     title="Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.modules.cava.border} title="Border" type="color" />
 
                 {/* World Clock Module Section */}
                 <Header title="World Clock" />
-                <Option opt={options.theme.bar.buttons.modules.worldclock.text} title="Bars" type="color" />
+                <Option opt={options.theme.bar.buttons.modules.worldclock.text} title="Text" type="color" />
                 <Option opt={options.theme.bar.buttons.modules.worldclock.icon} title="Icon" type="color" />
                 <Option
                     opt={options.theme.bar.buttons.modules.worldclock.background}
@@ -235,7 +274,10 @@ export const CustomModuleTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.modules.worldclock.icon_background}
                     title="Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.modules.worldclock.border} title="Border" type="color" />
@@ -251,7 +293,10 @@ export const CustomModuleTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.modules.power.icon_background}
                     title="Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.modules.power.border} title="Border" type="color" />

src/components/settings/pages/config/bar/index.tsx

@@ -313,7 +313,10 @@ export const BarSettings = (): JSX.Element => {
                 <Option
                     opt={options.bar.windowtitle.title_map}
                     title="Window Title Mappings"
-                    subtitle="Requires Custom Title.\nWiki: https://hyprpanel.com/configuration/panel.html#window-title-mappings"
+                    subtitle={
+                        'Requires Custom Title.\n' +
+                        'Wiki: https://hyprpanel.com/configuration/panel.html#window-title-mappings'
+                    }
                     type="object"
                     subtitleLink="https://hyprpanel.com/configuration/panel.html#window-title-mappings"
                 />
@@ -423,14 +426,17 @@ export const BarSettings = (): JSX.Element => {
                 <Option
                     opt={options.bar.systray.ignore}
                     title="Ignore List"
-                    subtitle="Apps to ignore\nWiki: https://hyprpanel.com/configuration/panel.html#system-tray"
+                    subtitle={'Apps to ignore\n' + 'Wiki: https://hyprpanel.com/configuration/panel.html#system-tray'}
                     subtitleLink="https://hyprpanel.com/configuration/panel.html#system-tray"
                     type="object"
                 />
                 <Option
                     opt={options.bar.systray.customIcons}
                     title="Custom Systray Icons"
-                    subtitle="Define custom icons for systray.\nWiki: https://hyprpanel.com/configuration/panel.html#custom-systray-icons"
+                    subtitle={
+                        'Define custom icons for systray.\n' +
+                        'Wiki: https://hyprpanel.com/configuration/panel.html#custom-systray-icons'
+                    }
                     subtitleLink="https://hyprpanel.com/configuration/panel.html#custom-systray-icons"
                     type="object"
                 />

src/components/settings/pages/theme/bar/index.tsx

@@ -70,7 +70,10 @@ export const BarTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.icon_background}
                     title="Button Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
 
@@ -115,7 +118,10 @@ export const BarTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.windowtitle.icon_background}
                     title="Button Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.windowtitle.border} title="Border" type="color" />
@@ -128,7 +134,10 @@ export const BarTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.media.icon_background}
                     title="Button Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.media.border} title="Border" type="color" />
@@ -141,7 +150,10 @@ export const BarTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.volume.icon_background}
                     title="Button Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.volume.border} title="Border" type="color" />
@@ -154,7 +166,10 @@ export const BarTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.network.icon_background}
                     title="Button Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.network.border} title="Border" type="color" />
@@ -167,7 +182,10 @@ export const BarTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.bluetooth.icon_background}
                     title="Button Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.bluetooth.border} title="Border" type="color" />
@@ -186,7 +204,10 @@ export const BarTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.battery.icon_background}
                     title="Button Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.battery.border} title="Border" type="color" />
@@ -199,7 +220,10 @@ export const BarTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.clock.icon_background}
                     title="Button Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.clock.border} title="Border" type="color" />
@@ -212,7 +236,10 @@ export const BarTheme = (): JSX.Element => {
                 <Option
                     opt={options.theme.bar.buttons.notifications.icon_background}
                     title="Button Icon Background"
-                    subtitle="Applies a background color to the icon section of the button.\nRequires 'split' button styling."
+                    subtitle={
+                        'Applies a background color to the icon section of the button.\n' +
+                        "Requires 'split' button styling."
+                    }
                     type="color"
                 />
                 <Option opt={options.theme.bar.buttons.notifications.border} title="Border" type="color" />

src/options.ts

@@ -1247,9 +1247,10 @@ const options = mkOptions({
             worldclock: {
                 icon: opt('󱉊'),
                 showIcon: opt(true),
-                showTime: opt(true),
                 format: opt('%I:%M:%S %p %Z'),
                 formatDiffDate: opt('%a %b %d  %I:%M:%S %p %Z'),
+                divider: opt('  '),
+                leftClick: opt('menu:calendar'),
                 rightClick: opt(''),
                 middleClick: opt(''),
                 scrollUp: opt(''),

src/scss/style/bar/clock.scss

@@ -58,69 +58,3 @@
         0em
     );
 }
-
-.bar-button-label.worldclock {
-    color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-modules-worldclock-text);
-    margin-left: $bar-buttons-modules-worldclock-spacing;
-}
-
-.bar-button-icon.worldclock {
-    font-size: 1.2em;
-    color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-modules-worldclock-icon);
-}
-
-.style2 {
-    .bar-button-icon.worldclock {
-        border-top-left-radius: $bar-buttons-radius;
-        border-bottom-left-radius: $bar-buttons-radius;
-        background: if(
-            $bar-buttons-monochrome,
-            $bar-buttons-icon_background,
-            $bar-buttons-modules-worldclock-icon_background
-        );
-        padding: $bar-buttons-padding_y 0em;
-        padding-left: $bar-buttons-padding_x;
-        padding-right: $bar-buttons-modules-worldclock-spacing;
-        border-top-left-radius: if(
-            $bar-buttons-modules-worldclock-enableBorder or $bar-buttons-enableBorders,
-            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
-            $bar-buttons-radius
-        );
-        border-bottom-left-radius: if(
-            $bar-buttons-modules-worldclock-enableBorder or $bar-buttons-enableBorders,
-            $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
-            $bar-buttons-radius
-        );
-        color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-modules-worldclock-icon);
-    }
-
-    .bar-button-label.worldclock {
-        padding: $bar-buttons-padding_y 0em;
-        padding-right: $bar-buttons-padding_x;
-        padding-left: $bar-buttons-modules-worldclock-spacing;
-        margin-left: 0em;
-    }
-    &.no-label.worldclock-container {
-        .bar-button-icon.worldclock {
-            border-top-right-radius: if(
-                $bar-buttons-modules-worldclock-enableBorder or $bar-buttons-enableBorders,
-                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
-                $bar-buttons-radius
-            );
-            border-bottom-right-radius: if(
-                $bar-buttons-modules-worldclock-enableBorder or $bar-buttons-enableBorders,
-                $bar-buttons-radius * $bar-buttons-innerRadiusMultiplier,
-                $bar-buttons-radius
-            );
-        }
-    }
-}
-
-.bar_item_box_visible.worldclock {
-    border: if(
-        $bar-buttons-modules-worldclock-enableBorder or $bar-buttons-enableBorders,
-        $bar-buttons-borderSize solid
-            if($bar-buttons-monochrome, $bar-buttons-borderColor, $bar-buttons-modules-worldclock-border),
-        0em
-    );
-}

themes/catppuccin_frappe.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#303446",
   "theme.bar.buttons.modules.microphone.text": "#a6d189",
   "theme.bar.buttons.modules.microphone.icon": "#a6d189",
-  "theme.bar.buttons.modules.microphone.icon_background": "#303446"
+  "theme.bar.buttons.modules.microphone.icon_background": "#303446",
+  "theme.bar.buttons.modules.worldclock.text": "#f4b8e4",
+  "theme.bar.buttons.modules.worldclock.background": "#303446",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#f4b8e4",
+  "theme.bar.buttons.modules.worldclock.icon": "#f4b8e4",
+  "theme.bar.buttons.modules.worldclock.border": "#f4b8e4"
 }

themes/catppuccin_frappe_split.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#303446",
   "theme.bar.buttons.modules.microphone.text": "#a6d189",
   "theme.bar.buttons.modules.microphone.icon": "#303446",
-  "theme.bar.buttons.modules.microphone.icon_background": "#a6d189"
+  "theme.bar.buttons.modules.microphone.icon_background": "#a6d189",
+  "theme.bar.buttons.modules.worldclock.text": "#f4b8e4",
+  "theme.bar.buttons.modules.worldclock.background": "#303446",
+  "theme.bar.buttons.modules.worldclock.icon": "#303446",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#f4b8e4",
+  "theme.bar.buttons.modules.worldclock.border": "#f4b8e4"
 }

themes/catppuccin_frappe_vivid.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.text": "#303446",
   "theme.bar.buttons.modules.microphone.background": "#a6d189",
   "theme.bar.buttons.modules.microphone.icon": "#303446",
-  "theme.bar.buttons.modules.microphone.icon_background": "#a6d189"
+  "theme.bar.buttons.modules.microphone.icon_background": "#a6d189",
+  "theme.bar.buttons.modules.worldclock.background": "#f4b8e4",
+  "theme.bar.buttons.modules.worldclock.text": "#303446",
+  "theme.bar.buttons.modules.worldclock.icon": "#303446",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#f4b8e4",
+  "theme.bar.buttons.modules.worldclock.border": "#f4b8e4"
 }

themes/catppuccin_latte.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#dcdfe8",
   "theme.bar.buttons.modules.microphone.text": "#40a02b",
   "theme.bar.buttons.modules.microphone.icon": "#40a02b",
-  "theme.bar.buttons.modules.microphone.icon_background": "#dcdfe8"
+  "theme.bar.buttons.modules.microphone.icon_background": "#dcdfe8",
+  "theme.bar.buttons.modules.worldclock.text": "#ea76cb",
+  "theme.bar.buttons.modules.worldclock.background": "#dcdfe8",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#ea76cb",
+  "theme.bar.buttons.modules.worldclock.icon": "#ea76cb",
+  "theme.bar.buttons.modules.worldclock.border": "#ea76cb"
 }

themes/catppuccin_latte_split.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#dcdfe8",
   "theme.bar.buttons.modules.microphone.text": "#40a02b",
   "theme.bar.buttons.modules.microphone.icon": "#dcdfe8",
-  "theme.bar.buttons.modules.microphone.icon_background": "#40a02b"
+  "theme.bar.buttons.modules.microphone.icon_background": "#40a02b",
+  "theme.bar.buttons.modules.worldclock.text": "#ea76cb",
+  "theme.bar.buttons.modules.worldclock.background": "#dcdfe8",
+  "theme.bar.buttons.modules.worldclock.icon": "#dcdee8",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#ea76cb",
+  "theme.bar.buttons.modules.worldclock.border": "#ea76cb"
 }

themes/catppuccin_latte_vivid.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.text": "#dcdfe8",
   "theme.bar.buttons.modules.microphone.background": "#40a02b",
   "theme.bar.buttons.modules.microphone.icon": "#dcdfe8",
-  "theme.bar.buttons.modules.microphone.icon_background": "#40a02b"
+  "theme.bar.buttons.modules.microphone.icon_background": "#40a02b",
+  "theme.bar.buttons.modules.worldclock.background": "#ea76cb",
+  "theme.bar.buttons.modules.worldclock.text": "#dcdfe8",
+  "theme.bar.buttons.modules.worldclock.icon": "#dcdfe8",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#ea76cb",
+  "theme.bar.buttons.modules.worldclock.border": "#ea76cb"
 }

themes/catppuccin_macchiato.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#24273a",
   "theme.bar.buttons.modules.microphone.text": "#a6da95",
   "theme.bar.buttons.modules.microphone.icon": "#a6da95",
-  "theme.bar.buttons.modules.microphone.icon_background": "#24273a"
+  "theme.bar.buttons.modules.microphone.icon_background": "#24273a",
+  "theme.bar.buttons.modules.worldclock.text": "#f5bde6",
+  "theme.bar.buttons.modules.worldclock.background": "#24273a",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#f5bde6",
+  "theme.bar.buttons.modules.worldclock.icon": "#f5bde6",
+  "theme.bar.buttons.modules.worldclock.border": "#f5bde6"
 }

themes/catppuccin_macchiato_split.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#24273a",
   "theme.bar.buttons.modules.microphone.text": "#a6da95",
   "theme.bar.buttons.modules.microphone.icon": "#24273a",
-  "theme.bar.buttons.modules.microphone.icon_background": "#a6da95"
+  "theme.bar.buttons.modules.microphone.icon_background": "#a6da95",
+  "theme.bar.buttons.modules.worldclock.text": "#f5bde6",
+  "theme.bar.buttons.modules.worldclock.background": "#24273a",
+  "theme.bar.buttons.modules.worldclock.icon": "#24273a",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#f5bde6",
+  "theme.bar.buttons.modules.worldclock.border": "#f5bde6"
 }

themes/catppuccin_macchiato_vivid.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.text": "#24273a",
   "theme.bar.buttons.modules.microphone.background": "#a6da95",
   "theme.bar.buttons.modules.microphone.icon": "#24273a",
-  "theme.bar.buttons.modules.microphone.icon_background": "#a6da95"
+  "theme.bar.buttons.modules.microphone.icon_background": "#a6da95",
+  "theme.bar.buttons.modules.worldclock.background": "#f5bde6",
+  "theme.bar.buttons.modules.worldclock.text": "#24273a",
+  "theme.bar.buttons.modules.worldclock.icon": "#24273a",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#f5bde6",
+  "theme.bar.buttons.modules.worldclock.border": "#f5bde6"
 }

themes/catppuccin_mocha.json

@@ -362,6 +362,11 @@
     "theme.bar.buttons.modules.cava.icon_background": "#242438",
     "theme.bar.buttons.modules.cava.icon": "#94e2d5",
     "theme.bar.buttons.modules.cava.border": "#94e2d5",
+    "theme.bar.buttons.modules.worldclock.text": "#f5c2e7",
+    "theme.bar.buttons.modules.worldclock.background": "#242438",
+    "theme.bar.buttons.modules.worldclock.icon_background": "#f5c2e7",
+    "theme.bar.buttons.modules.worldclock.icon": "#f5c2e7",
+    "theme.bar.buttons.modules.worldclock.border": "#f5c2e7",
     "theme.bar.buttons.modules.microphone.border": "#a6e3a1",
     "theme.bar.buttons.modules.microphone.background": "#242438",
     "theme.bar.buttons.modules.microphone.text": "#a6e3a1",

themes/catppuccin_mocha_split.json

@@ -362,6 +362,11 @@
     "theme.bar.buttons.modules.cava.icon": "#242438",
     "theme.bar.buttons.modules.cava.icon_background": "#94e2d5",
     "theme.bar.buttons.modules.cava.border": "#94e2d5",
+    "theme.bar.buttons.modules.worldclock.text": "#f5c2e7",
+    "theme.bar.buttons.modules.worldclock.background": "#242438",
+    "theme.bar.buttons.modules.worldclock.icon": "#242438",
+    "theme.bar.buttons.modules.worldclock.icon_background": "#f5c2e7",
+    "theme.bar.buttons.modules.worldclock.border": "#f5c2e7",
     "theme.bar.buttons.modules.microphone.border": "#a6e3a1",
     "theme.bar.buttons.modules.microphone.background": "#242438",
     "theme.bar.buttons.modules.microphone.text": "#a6e3a1",

themes/catppuccin_mocha_vivid.json

@@ -362,6 +362,11 @@
   "theme.bar.buttons.modules.cava.icon": "#242438",
   "theme.bar.buttons.modules.cava.icon_background": "#94e2d5",
   "theme.bar.buttons.modules.cava.border": "#94e2d5",
+  "theme.bar.buttons.modules.worldclock.background": "#f5c2e7",
+  "theme.bar.buttons.modules.worldclock.text": "#242438",
+  "theme.bar.buttons.modules.worldclock.icon": "#242438",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#f5c2e7",
+  "theme.bar.buttons.modules.worldclock.border": "#f5c2e7",
   "theme.bar.buttons.modules.microphone.border": "#a6e3a1",
   "theme.bar.buttons.modules.microphone.text": "#242438",
   "theme.bar.buttons.modules.microphone.background": "#a6e3a1",

themes/cyberpunk.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#121212",
   "theme.bar.buttons.modules.microphone.text": "#32CD32",
   "theme.bar.buttons.modules.microphone.icon": "#32CD32",
-  "theme.bar.buttons.modules.microphone.icon_background": "#121212"
+  "theme.bar.buttons.modules.microphone.icon_background": "#121212",
+  "theme.bar.buttons.modules.worldclock.text": "#5bafff",
+  "theme.bar.buttons.modules.worldclock.background": "#121212",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#FF69B4",
+  "theme.bar.buttons.modules.worldclock.icon": "#5bafff",
+  "theme.bar.buttons.modules.worldclock.border": "#5bafff"
 }

themes/cyberpunk_split.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#121212",
   "theme.bar.buttons.modules.microphone.text": "#32CD32",
   "theme.bar.buttons.modules.microphone.icon": "#121212",
-  "theme.bar.buttons.modules.microphone.icon_background": "#32CD32"
+  "theme.bar.buttons.modules.microphone.icon_background": "#32CD32",
+  "theme.bar.buttons.modules.worldclock.text": "#5bafff",
+  "theme.bar.buttons.modules.worldclock.background": "#121212",
+  "theme.bar.buttons.modules.worldclock.icon": "#121212",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#5bafff",
+  "theme.bar.buttons.modules.worldclock.border": "#5bafff"
 }

themes/cyberpunk_vivid.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.text": "#121212",
   "theme.bar.buttons.modules.microphone.background": "#32CD32",
   "theme.bar.buttons.modules.microphone.icon": "#121212",
-  "theme.bar.buttons.modules.microphone.icon_background": "#32CD32"
+  "theme.bar.buttons.modules.microphone.icon_background": "#32CD32",
+  "theme.bar.buttons.modules.worldclock.background": "#5bafff",
+  "theme.bar.buttons.modules.worldclock.text": "#121212",
+  "theme.bar.buttons.modules.worldclock.icon": "#121212",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#FF69B4",
+  "theme.bar.buttons.modules.worldclock.border": "#5bafff"
 }

themes/dracula.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#44475a",
   "theme.bar.buttons.modules.microphone.text": "#50fa7b",
   "theme.bar.buttons.modules.microphone.icon": "#50fa7b",
-  "theme.bar.buttons.modules.microphone.icon_background": "#44475a"
+  "theme.bar.buttons.modules.microphone.icon_background": "#44475a",
+  "theme.bar.buttons.modules.worldclock.text": "#ff79c6",
+  "theme.bar.buttons.modules.worldclock.background": "#44475a",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#ff79c6",
+  "theme.bar.buttons.modules.worldclock.icon": "#ff79c6",
+  "theme.bar.buttons.modules.worldclock.border": "#ff79c6"
 }

themes/dracula_split.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#44475a",
   "theme.bar.buttons.modules.microphone.text": "#50fa7b",
   "theme.bar.buttons.modules.microphone.icon": "#44475a",
-  "theme.bar.buttons.modules.microphone.icon_background": "#50fa7b"
+  "theme.bar.buttons.modules.microphone.icon_background": "#50fa7b",
+  "theme.bar.buttons.modules.worldclock.text": "#ff79c6",
+  "theme.bar.buttons.modules.worldclock.background": "#44475a",
+  "theme.bar.buttons.modules.worldclock.icon": "#44475a",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#ff79c6",
+  "theme.bar.buttons.modules.worldclock.border": "#ff79c6"
 }

themes/dracula_vivid.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.text": "#44475a",
   "theme.bar.buttons.modules.microphone.background": "#50fa7b",
   "theme.bar.buttons.modules.microphone.icon": "#44475a",
-  "theme.bar.buttons.modules.microphone.icon_background": "#50fa7b"
+  "theme.bar.buttons.modules.microphone.icon_background": "#50fa7b",
+  "theme.bar.buttons.modules.worldclock.background": "#ff79c6",
+  "theme.bar.buttons.modules.worldclock.text": "#44475a",
+  "theme.bar.buttons.modules.worldclock.icon": "#44475a",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#ff79c6",
+  "theme.bar.buttons.modules.worldclock.border": "#ff79c6"
 }

themes/everforest.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#323d43",
   "theme.bar.buttons.modules.microphone.text": "#a7c080",
   "theme.bar.buttons.modules.microphone.icon": "#a7c080",
-  "theme.bar.buttons.modules.microphone.icon_background": "#323d43"
+  "theme.bar.buttons.modules.microphone.icon_background": "#323d43",
+  "theme.bar.buttons.modules.worldclock.text": "#dbbc7f",
+  "theme.bar.buttons.modules.worldclock.background": "#323d43",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#d699b6",
+  "theme.bar.buttons.modules.worldclock.icon": "#dbbc7f",
+  "theme.bar.buttons.modules.worldclock.border": "#dbbc7f"
 }

themes/everforest_split.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#323d43",
   "theme.bar.buttons.modules.microphone.text": "#a7c080",
   "theme.bar.buttons.modules.microphone.icon": "#323d43",
-  "theme.bar.buttons.modules.microphone.icon_background": "#a7c080"
+  "theme.bar.buttons.modules.microphone.icon_background": "#a7c080",
+  "theme.bar.buttons.modules.worldclock.text": "#dbbc7f",
+  "theme.bar.buttons.modules.worldclock.background": "#323d43",
+  "theme.bar.buttons.modules.worldclock.icon": "#323d43",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#dbbc7f",
+  "theme.bar.buttons.modules.worldclock.border": "#dbbc7f"
 }

themes/everforest_vivid.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.text": "#323d43",
   "theme.bar.buttons.modules.microphone.background": "#a7c080",
   "theme.bar.buttons.modules.microphone.icon": "#323d43",
-  "theme.bar.buttons.modules.microphone.icon_background": "#a7c080"
+  "theme.bar.buttons.modules.microphone.icon_background": "#a7c080",
+  "theme.bar.buttons.modules.worldclock.background": "#dbbc7f",
+  "theme.bar.buttons.modules.worldclock.text": "#323d43",
+  "theme.bar.buttons.modules.worldclock.icon": "#323d43",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#d699b6",
+  "theme.bar.buttons.modules.worldclock.border": "#dbbc7f"
 }

themes/gruvbox.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#282828",
   "theme.bar.buttons.modules.microphone.text": "#b8bb26",
   "theme.bar.buttons.modules.microphone.icon": "#b8bb26",
-  "theme.bar.buttons.modules.microphone.icon_background": "#282828"
+  "theme.bar.buttons.modules.microphone.icon_background": "#282828",
+  "theme.bar.buttons.modules.worldclock.text": "#d3869b",
+  "theme.bar.buttons.modules.worldclock.background": "#282828",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#d3869b",
+  "theme.bar.buttons.modules.worldclock.icon": "#d3869b",
+  "theme.bar.buttons.modules.worldclock.border": "#d3869b"
 }

themes/gruvbox_split.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#282828",
   "theme.bar.buttons.modules.microphone.text": "#b8bb26",
   "theme.bar.buttons.modules.microphone.icon": "#282828",
-  "theme.bar.buttons.modules.microphone.icon_background": "#b8bb26"
+  "theme.bar.buttons.modules.microphone.icon_background": "#b8bb26",
+  "theme.bar.buttons.modules.worldclock.text": "#d3869b",
+  "theme.bar.buttons.modules.worldclock.background": "#282828",
+  "theme.bar.buttons.modules.worldclock.icon": "#282828",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#d3869b",
+  "theme.bar.buttons.modules.worldclock.border": "#d3869b"
 }

themes/gruvbox_vivid.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.text": "#282828",
   "theme.bar.buttons.modules.microphone.background": "#b8bb26",
   "theme.bar.buttons.modules.microphone.icon": "#282828",
-  "theme.bar.buttons.modules.microphone.icon_background": "#b8bb26"
+  "theme.bar.buttons.modules.microphone.icon_background": "#b8bb26",
+  "theme.bar.buttons.modules.worldclock.background": "#d3869b",
+  "theme.bar.buttons.modules.worldclock.text": "#282828",
+  "theme.bar.buttons.modules.worldclock.icon": "#282828",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#d3869b",
+  "theme.bar.buttons.modules.worldclock.border": "#d3869b"
 }

themes/monochrome.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#090909",
   "theme.bar.buttons.modules.microphone.text": "#ffffff",
   "theme.bar.buttons.modules.microphone.icon": "#ffffff",
-  "theme.bar.buttons.modules.microphone.icon_background": "#090909"
+  "theme.bar.buttons.modules.microphone.icon_background": "#090909",
+  "theme.bar.buttons.modules.worldclock.text": "#FFFFFF",
+  "theme.bar.buttons.modules.worldclock.background": "#090909",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#FFFFFF",
+  "theme.bar.buttons.modules.worldclock.icon": "#FFFFFF",
+  "theme.bar.buttons.modules.worldclock.border": "#FFFFFF"
 }

themes/monochrome_split.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#090909",
   "theme.bar.buttons.modules.microphone.text": "#ffffff",
   "theme.bar.buttons.modules.microphone.icon": "#090909",
-  "theme.bar.buttons.modules.microphone.icon_background": "#ffffff"
+  "theme.bar.buttons.modules.microphone.icon_background": "#ffffff",
+  "theme.bar.buttons.modules.worldclock.text": "#FFFFFF",
+  "theme.bar.buttons.modules.worldclock.background": "#090909",
+  "theme.bar.buttons.modules.worldclock.icon": "#000000",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#ffffff",
+  "theme.bar.buttons.modules.worldclock.border": "#FFFFFF"
 }

themes/monochrome_vivid.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.text": "#090909",
   "theme.bar.buttons.modules.microphone.background": "#ffffff",
   "theme.bar.buttons.modules.microphone.icon": "#090909",
-  "theme.bar.buttons.modules.microphone.icon_background": "#ffffff"
+  "theme.bar.buttons.modules.microphone.icon_background": "#ffffff",
+  "theme.bar.buttons.modules.worldclock.background": "#FFFFFF",
+  "theme.bar.buttons.modules.worldclock.text": "#090909",
+  "theme.bar.buttons.modules.worldclock.icon": "#090909",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#FFFFFF",
+  "theme.bar.buttons.modules.worldclock.border": "#FFFFFF"
 }

themes/nord.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#3b4252",
   "theme.bar.buttons.modules.microphone.text": "#8fbcbb",
   "theme.bar.buttons.modules.microphone.icon": "#8fbcbb",
-  "theme.bar.buttons.modules.microphone.icon_background": "#3b4252"
+  "theme.bar.buttons.modules.microphone.icon_background": "#3b4252",
+  "theme.bar.buttons.modules.worldclock.text": "#8fbcbb",
+  "theme.bar.buttons.modules.worldclock.background": "#3b4252",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#8fbcbb",
+  "theme.bar.buttons.modules.worldclock.icon": "#8fbcbb",
+  "theme.bar.buttons.modules.worldclock.border": "#8fbcbb"
 }

themes/nord_split.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#3b4252",
   "theme.bar.buttons.modules.microphone.text": "#8fbcbb",
   "theme.bar.buttons.modules.microphone.icon": "#3b4252",
-  "theme.bar.buttons.modules.microphone.icon_background": "#8fbcbb"
+  "theme.bar.buttons.modules.microphone.icon_background": "#8fbcbb",
+  "theme.bar.buttons.modules.worldclock.text": "#8fbcbb",
+  "theme.bar.buttons.modules.worldclock.background": "#3b4252",
+  "theme.bar.buttons.modules.worldclock.icon": "#3b4252",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#8fbcbb",
+  "theme.bar.buttons.modules.worldclock.border": "#8fbcbb"
 }

themes/nord_vivid.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.text": "#3b4252",
   "theme.bar.buttons.modules.microphone.background": "#8fbcbb",
   "theme.bar.buttons.modules.microphone.icon": "#3b4252",
-  "theme.bar.buttons.modules.microphone.icon_background": "#8fbcbb"
+  "theme.bar.buttons.modules.microphone.icon_background": "#8fbcbb",
+  "theme.bar.buttons.modules.worldclock.background": "#8fbcbb",
+  "theme.bar.buttons.modules.worldclock.text": "#3b4252",
+  "theme.bar.buttons.modules.worldclock.icon": "#3b4252",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#8fbcbb",
+  "theme.bar.buttons.modules.worldclock.border": "#8fbcbb"
 }

themes/one_dark.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#21252b",
   "theme.bar.buttons.modules.microphone.text": "#98c379",
   "theme.bar.buttons.modules.microphone.icon": "#98c379",
-  "theme.bar.buttons.modules.microphone.icon_background": "#21252b"
+  "theme.bar.buttons.modules.microphone.icon_background": "#21252b",
+  "theme.bar.buttons.modules.worldclock.text": "#98c379",
+  "theme.bar.buttons.modules.worldclock.background": "#21252b",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#c678dd",
+  "theme.bar.buttons.modules.worldclock.icon": "#98c379",
+  "theme.bar.buttons.modules.worldclock.border": "#98c379"
 }

themes/one_dark_split.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#21252b",
   "theme.bar.buttons.modules.microphone.text": "#98c379",
   "theme.bar.buttons.modules.microphone.icon": "#21252b",
-  "theme.bar.buttons.modules.microphone.icon_background": "#98c379"
+  "theme.bar.buttons.modules.microphone.icon_background": "#98c379",
+  "theme.bar.buttons.modules.worldclock.text": "#98c379",
+  "theme.bar.buttons.modules.worldclock.background": "#21252b",
+  "theme.bar.buttons.modules.worldclock.icon": "#21252b",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#98c379",
+  "theme.bar.buttons.modules.worldclock.border": "#98c379"
 }

themes/one_dark_vivid.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.text": "#21252b",
   "theme.bar.buttons.modules.microphone.background": "#98c379",
   "theme.bar.buttons.modules.microphone.icon": "#21252b",
-  "theme.bar.buttons.modules.microphone.icon_background": "#98c379"
+  "theme.bar.buttons.modules.microphone.icon_background": "#98c379",
+  "theme.bar.buttons.modules.worldclock.background": "#98c379",
+  "theme.bar.buttons.modules.worldclock.text": "#21252b",
+  "theme.bar.buttons.modules.worldclock.icon": "#21252b",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#c678dd",
+  "theme.bar.buttons.modules.worldclock.border": "#98c379"
 }

themes/rose_pine.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#21202e",
   "theme.bar.buttons.modules.microphone.text": "#9ccfd8",
   "theme.bar.buttons.modules.microphone.icon": "#9ccfd8",
-  "theme.bar.buttons.modules.microphone.icon_background": "#21202e"
+  "theme.bar.buttons.modules.microphone.icon_background": "#21202e",
+  "theme.bar.buttons.modules.worldclock.text": "#c4a7e7",
+  "theme.bar.buttons.modules.worldclock.background": "#21202e",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#c4a7e7",
+  "theme.bar.buttons.modules.worldclock.icon": "#c4a7e7",
+  "theme.bar.buttons.modules.worldclock.border": "#c4a7e7"
 }

themes/rose_pine_moon.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#2a283e",
   "theme.bar.buttons.modules.microphone.text": "#9ccfd8",
   "theme.bar.buttons.modules.microphone.icon": "#9ccfd8",
-  "theme.bar.buttons.modules.microphone.icon_background": "#2a283e"
+  "theme.bar.buttons.modules.microphone.icon_background": "#2a283e",
+  "theme.bar.buttons.modules.worldclock.text": "#c4a7e7",
+  "theme.bar.buttons.modules.worldclock.background": "#2a283e",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#c4a7e7",
+  "theme.bar.buttons.modules.worldclock.icon": "#c4a7e7",
+  "theme.bar.buttons.modules.worldclock.border": "#c4a7e7"
 }

themes/rose_pine_moon_split.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#2a283e",
   "theme.bar.buttons.modules.microphone.text": "#9ccfd8",
   "theme.bar.buttons.modules.microphone.icon": "#2a283e",
-  "theme.bar.buttons.modules.microphone.icon_background": "#9ccfd8"
+  "theme.bar.buttons.modules.microphone.icon_background": "#9ccfd8",
+  "theme.bar.buttons.modules.worldclock.text": "#c4a7e7",
+  "theme.bar.buttons.modules.worldclock.background": "#2a283e",
+  "theme.bar.buttons.modules.worldclock.icon": "#2a283e",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#c4a7e7",
+  "theme.bar.buttons.modules.worldclock.border": "#c4a7e7"
 }

themes/rose_pine_moon_vivid.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.text": "#2a283e",
   "theme.bar.buttons.modules.microphone.background": "#9ccfd8",
   "theme.bar.buttons.modules.microphone.icon": "#2a283e",
-  "theme.bar.buttons.modules.microphone.icon_background": "#9ccfd8"
+  "theme.bar.buttons.modules.microphone.icon_background": "#9ccfd8",
+  "theme.bar.buttons.modules.worldclock.background": "#c4a7e7",
+  "theme.bar.buttons.modules.worldclock.text": "#2a283e",
+  "theme.bar.buttons.modules.worldclock.icon": "#2a283e",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#c4a7e7",
+  "theme.bar.buttons.modules.worldclock.border": "#c4a7e7"
 }

themes/rose_pine_split.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.background": "#21202e",
   "theme.bar.buttons.modules.microphone.text": "#9ccfd8",
   "theme.bar.buttons.modules.microphone.icon": "#21202e",
-  "theme.bar.buttons.modules.microphone.icon_background": "#9ccfd8"
+  "theme.bar.buttons.modules.microphone.icon_background": "#9ccfd8",
+  "theme.bar.buttons.modules.worldclock.text": "#c4a7e7",
+  "theme.bar.buttons.modules.worldclock.background": "#21202e",
+  "theme.bar.buttons.modules.worldclock.icon": "#21202e",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#c4a7e7",
+  "theme.bar.buttons.modules.worldclock.border": "#c4a7e7"
 }

themes/rose_pine_vivid.json

@@ -366,5 +366,10 @@
   "theme.bar.buttons.modules.microphone.text": "#21202e",
   "theme.bar.buttons.modules.microphone.background": "#9ccfd8",
   "theme.bar.buttons.modules.microphone.icon": "#21202e",
-  "theme.bar.buttons.modules.microphone.icon_background": "#9ccfd8"
+  "theme.bar.buttons.modules.microphone.icon_background": "#9ccfd8",
+  "theme.bar.buttons.modules.worldclock.background": "#c4a7e7",
+  "theme.bar.buttons.modules.worldclock.text": "#21202e",
+  "theme.bar.buttons.modules.worldclock.icon": "#21202e",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#c4a7e7",
+  "theme.bar.buttons.modules.worldclock.border": "#c4a7e7"
 }

themes/tokyo_night.json

@@ -389,5 +389,10 @@
   "theme.bar.buttons.modules.microphone.background": "#272a3d",
   "theme.bar.buttons.modules.microphone.text": "#9ece6a",
   "theme.bar.buttons.modules.microphone.icon": "#9ece6a",
-  "theme.bar.buttons.modules.microphone.icon_background": "#272a3d"
+  "theme.bar.buttons.modules.microphone.icon_background": "#272a3d",
+  "theme.bar.buttons.modules.worldclock.text": "#9d7cd8",
+  "theme.bar.buttons.modules.worldclock.background": "#272a3d",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#9d7cd8",
+  "theme.bar.buttons.modules.worldclock.icon": "#9d7cd8",
+  "theme.bar.buttons.modules.worldclock.border": "#9d7cd8"
 }

themes/tokyo_night_moon.json

@@ -389,5 +389,10 @@
   "theme.bar.buttons.modules.microphone.background": "#272a3d",
   "theme.bar.buttons.modules.microphone.text": "#c3e88d",
   "theme.bar.buttons.modules.microphone.icon": "#c3e88d",
-  "theme.bar.buttons.modules.microphone.icon_background": "#272a3d"
+  "theme.bar.buttons.modules.microphone.icon_background": "#272a3d",
+  "theme.bar.buttons.modules.worldclock.text": "#fca7ea",
+  "theme.bar.buttons.modules.worldclock.background": "#272a3d",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#fca7ea",
+  "theme.bar.buttons.modules.worldclock.icon": "#fca7ea",
+  "theme.bar.buttons.modules.worldclock.border": "#fca7ea"
 }

themes/tokyo_night_moon_split.json

@@ -389,5 +389,10 @@
   "theme.bar.buttons.modules.microphone.background": "#272a3d",
   "theme.bar.buttons.modules.microphone.text": "#c3e88d",
   "theme.bar.buttons.modules.microphone.icon": "#272a3d",
-  "theme.bar.buttons.modules.microphone.icon_background": "#c3e88d"
+  "theme.bar.buttons.modules.microphone.icon_background": "#c3e88d",
+  "theme.bar.buttons.modules.worldclock.text": "#fca7ea",
+  "theme.bar.buttons.modules.worldclock.background": "#272a3d",
+  "theme.bar.buttons.modules.worldclock.icon": "#272a3d",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#fca7ea",
+  "theme.bar.buttons.modules.worldclock.border": "#fca7ea"
 }

themes/tokyo_night_moon_vivid.json

@@ -389,5 +389,10 @@
   "theme.bar.buttons.modules.microphone.text": "#272a3d",
   "theme.bar.buttons.modules.microphone.background": "#c3e88d",
   "theme.bar.buttons.modules.microphone.icon": "#272a3d",
-  "theme.bar.buttons.modules.microphone.icon_background": "#c3e88d"
+  "theme.bar.buttons.modules.microphone.icon_background": "#c3e88d",
+  "theme.bar.buttons.modules.worldclock.background": "#fca7ea",
+  "theme.bar.buttons.modules.worldclock.text": "#272a3d",
+  "theme.bar.buttons.modules.worldclock.icon": "#272a3d",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#fca7ea",
+  "theme.bar.buttons.modules.worldclock.border": "#fca7ea"
 }

themes/tokyo_night_split.json

@@ -389,5 +389,10 @@
   "theme.bar.buttons.modules.microphone.background": "#272a3d",
   "theme.bar.buttons.modules.microphone.text": "#9ece6a",
   "theme.bar.buttons.modules.microphone.icon": "#272a3d",
-  "theme.bar.buttons.modules.microphone.icon_background": "#9ece6a"
+  "theme.bar.buttons.modules.microphone.icon_background": "#9ece6a",
+  "theme.bar.buttons.modules.worldclock.text": "#9d7cd8",
+  "theme.bar.buttons.modules.worldclock.background": "#272a3d",
+  "theme.bar.buttons.modules.worldclock.icon": "#272a3d",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#9d7cd8",
+  "theme.bar.buttons.modules.worldclock.border": "#9d7cd8"
 }

themes/tokyo_night_vivid.json

@@ -389,5 +389,10 @@
   "theme.bar.buttons.modules.microphone.text": "#272a3d",
   "theme.bar.buttons.modules.microphone.background": "#9ece6a",
   "theme.bar.buttons.modules.microphone.icon": "#272a3d",
-  "theme.bar.buttons.modules.microphone.icon_background": "#9ece6a"
+  "theme.bar.buttons.modules.microphone.icon_background": "#9ece6a",
+  "theme.bar.buttons.modules.worldclock.background": "#9d7cd8",
+  "theme.bar.buttons.modules.worldclock.text": "#272a3d",
+  "theme.bar.buttons.modules.worldclock.icon": "#272a3d",
+  "theme.bar.buttons.modules.worldclock.icon_background": "#9d7cd8",
+  "theme.bar.buttons.modules.worldclock.border": "#9d7cd8"
 }