From 0f815c268b89f10de86924d69df5e7de2fc324e5 Mon Sep 17 00:00:00 2001 From: CeeWeasel Date: Wed, 17 Sep 2025 22:24:37 -0400 Subject: [PATCH] updating themes and colors --- .../{ => batteries}/hue_batteries.yaml | 1 - .../plant_sensor_batteries.yaml | 2 - .../{ => batteries}/zigbee_batteries.yaml | 4 - .../{ => batteries}/zwave_batteries.yaml | 1 - configuration.yaml | 5 + customizations/entities/batteries.yaml | 23 + lovelace/appliances/dishwasher.yaml | 1 - lovelace/appliances/keurig.yaml | 1 - lovelace/appliances/stove.yaml | 1 - lovelace/appliances/tumble-dryer.yaml | 1 - lovelace/appliances/washing-machine.yaml | 1 - lovelace/phone/back-yard.yaml | 1 - lovelace/phone/blue-room.yaml | 1 - lovelace/phone/cctv.yaml | 1 - lovelace/phone/computer-area.yaml | 1 - lovelace/phone/dining-room.yaml | 1 - lovelace/phone/entryway.yaml | 1 - lovelace/phone/front-room.yaml | 1 - lovelace/phone/front-yard.yaml | 1 - lovelace/phone/furnace-room.yaml | 1 - lovelace/phone/garage.yaml | 1 - lovelace/phone/great-room.yaml | 1 - lovelace/phone/home.yaml | 1 - lovelace/phone/kitchen.yaml | 1 - lovelace/phone/lights.yaml | 1 - lovelace/phone/lyrics.yaml | 1 - lovelace/phone/mancave.yaml | 1 - lovelace/phone/master-bathroom.yaml | 1 - lovelace/phone/master-bedroom.yaml | 1 - lovelace/phone/nursery.yaml | 1 - lovelace/phone/plants.yaml | 1 - lovelace/phone/utility-room.yaml | 1 - lovelace/view-floor-all.yaml | 1 - lovelace/view-ha-floorplan.yaml | 24 +- themes/catppuccin/catppuccin.yaml | 1808 +++++++++++++++++ themes/rose-pine-moon/rose-pine-moon.yaml | 248 +++ themes/rose-pine/rose-pine.yaml | 248 +++ www/floorplan/floorplan.css | 209 +- www/floorplan/fullsized_floorplan.svg | 45 +- 39 files changed, 2439 insertions(+), 206 deletions(-) rename components/packages/{ => batteries}/hue_batteries.yaml (92%) rename components/packages/{ => batteries}/plant_sensor_batteries.yaml (90%) rename components/packages/{ => batteries}/zigbee_batteries.yaml (94%) rename components/packages/{ => batteries}/zwave_batteries.yaml (95%) create mode 100644 customizations/entities/batteries.yaml create mode 100644 themes/catppuccin/catppuccin.yaml create mode 100644 themes/rose-pine-moon/rose-pine-moon.yaml create mode 100644 themes/rose-pine/rose-pine.yaml diff --git a/components/packages/hue_batteries.yaml b/components/packages/batteries/hue_batteries.yaml similarity index 92% rename from components/packages/hue_batteries.yaml rename to components/packages/batteries/hue_batteries.yaml index 56b2af8..ea77766 100644 --- a/components/packages/hue_batteries.yaml +++ b/components/packages/batteries/hue_batteries.yaml @@ -1,6 +1,5 @@ sensor: - platform: min_max - icon: mdi:battery-20 unique_id: sensor_lowest_hue_device_battery name: Lowest Hue Device Battery type: min diff --git a/components/packages/plant_sensor_batteries.yaml b/components/packages/batteries/plant_sensor_batteries.yaml similarity index 90% rename from components/packages/plant_sensor_batteries.yaml rename to components/packages/batteries/plant_sensor_batteries.yaml index 129a22d..178c8b6 100644 --- a/components/packages/plant_sensor_batteries.yaml +++ b/components/packages/batteries/plant_sensor_batteries.yaml @@ -1,6 +1,5 @@ sensor: - platform: min_max - icon: mdi:battery-20 unique_id: sensor_lowest_xiaomi_device_battery name: Lowest Xiaomi Plant Sensor Battery type: min @@ -10,7 +9,6 @@ sensor: - sensor.plant_sensor_cea4_battery - platform: min_max - icon: mdi:battery-20 unique_id: sensor_lowest_ecowitt_device_battery name: Lowest Ecowitt Battery type: min diff --git a/components/packages/zigbee_batteries.yaml b/components/packages/batteries/zigbee_batteries.yaml similarity index 94% rename from components/packages/zigbee_batteries.yaml rename to components/packages/batteries/zigbee_batteries.yaml index 31529d8..3922077 100644 --- a/components/packages/zigbee_batteries.yaml +++ b/components/packages/batteries/zigbee_batteries.yaml @@ -1,6 +1,5 @@ sensor: - platform: min_max - icon: mdi:battery-20 unique_id: sensor_lowest_window_device_battery name: Lowest Window Battery type: min @@ -12,7 +11,6 @@ sensor: - sensor.master_bedroom_window_battery - platform: min_max - icon: mdi:battery-20 unique_id: sensor_lowest_thermostat_device_battery name: Lowest Thermostat Battery type: min @@ -25,7 +23,6 @@ sensor: - sensor.utility_room_thermostat_battery - platform: min_max - icon: mdi:battery-20 unique_id: sensor_lowest_door_device_battery name: Lowest Door Battery type: min @@ -45,7 +42,6 @@ sensor: - sensor.pantry_door_battery - platform: min_max - icon: mdi:battery-20 unique_id: sensor_lowest_zigbee_device_battery name: Lowest Zigbee Device Battery type: min diff --git a/components/packages/zwave_batteries.yaml b/components/packages/batteries/zwave_batteries.yaml similarity index 95% rename from components/packages/zwave_batteries.yaml rename to components/packages/batteries/zwave_batteries.yaml index 3a60c22..1b897be 100644 --- a/components/packages/zwave_batteries.yaml +++ b/components/packages/batteries/zwave_batteries.yaml @@ -1,6 +1,5 @@ sensor: - platform: min_max - icon: mdi:battery-20 unique_id: sensor_lowest_zwave_device_battery name: Lowest ZWave Device Battery type: min diff --git a/configuration.yaml b/configuration.yaml index f9c847f..86c3be2 100644 --- a/configuration.yaml +++ b/configuration.yaml @@ -44,6 +44,7 @@ homeassistant: - ::1 - 172.21.0.0/24 + http: #ssl_certificate: /ssl/origin.pem #ssl_key: /ssl/privkey.pem @@ -52,6 +53,10 @@ http: use_x_forwarded_for: true trusted_proxies: - 192.168.1.0/24 + - 172.18.0.0/24 + - fe80::/64 + - fe00::/64 + - fd00::/64 - 127.0.0.1 - 172.30.32.0/23 - 172.16.0.0/12 diff --git a/customizations/entities/batteries.yaml b/customizations/entities/batteries.yaml new file mode 100644 index 0000000..bebf6d3 --- /dev/null +++ b/customizations/entities/batteries.yaml @@ -0,0 +1,23 @@ +sensor.lowest_zwave_device_battery: + icon: mdi:battery-20 + +sensor.lowest_window_battery: + icon: mdi:battery-20 + +sensor.lowest_thermostat_battery: + icon: mdi:battery-20 + +sensor.lowest_door_battery: + icon: mdi:battery-20 + +sensor.lowest_zigbee_device_battery: + icon: mdi:battery-20 + +sensor.lowest_xiaomi_plant_sensor_battery: + icon: mdi:battery-20 + +sensor.lowest_ecowitt_battery: + icon: mdi:battery-20 + +sensor.lowest_hue_device_battery: + icon: mdi:battery-20 diff --git a/lovelace/appliances/dishwasher.yaml b/lovelace/appliances/dishwasher.yaml index ddeb067..1a1dd93 100644 --- a/lovelace/appliances/dishwasher.yaml +++ b/lovelace/appliances/dishwasher.yaml @@ -1,4 +1,3 @@ -theme: Mushroom title: Dishwasher path: dishwasher icon: mdi:dishwasher diff --git a/lovelace/appliances/keurig.yaml b/lovelace/appliances/keurig.yaml index 52dcea4..e79be5f 100644 --- a/lovelace/appliances/keurig.yaml +++ b/lovelace/appliances/keurig.yaml @@ -1,4 +1,3 @@ -theme: Mushroom title: Keurig path: keurig icon: mdi:coffee-maker diff --git a/lovelace/appliances/stove.yaml b/lovelace/appliances/stove.yaml index cd2e4f8..a87480d 100644 --- a/lovelace/appliances/stove.yaml +++ b/lovelace/appliances/stove.yaml @@ -1,4 +1,3 @@ -theme: Mushroom title: Stove path: stove icon: mdi:stove diff --git a/lovelace/appliances/tumble-dryer.yaml b/lovelace/appliances/tumble-dryer.yaml index a21211c..fe0dfd7 100644 --- a/lovelace/appliances/tumble-dryer.yaml +++ b/lovelace/appliances/tumble-dryer.yaml @@ -1,4 +1,3 @@ -theme: Mushroom title: Tumble Dryer path: tumble-dryer icon: mdi:tumble-dryer diff --git a/lovelace/appliances/washing-machine.yaml b/lovelace/appliances/washing-machine.yaml index 546af6a..1b8ac4d 100644 --- a/lovelace/appliances/washing-machine.yaml +++ b/lovelace/appliances/washing-machine.yaml @@ -1,4 +1,3 @@ -theme: Mushroom title: Washing Machine path: washing-machine icon: mdi:washing-machine diff --git a/lovelace/phone/back-yard.yaml b/lovelace/phone/back-yard.yaml index 06de6f4..8ab0684 100644 --- a/lovelace/phone/back-yard.yaml +++ b/lovelace/phone/back-yard.yaml @@ -1,4 +1,3 @@ -theme: Mushroom subview: true title: Back Yard path: back-yard diff --git a/lovelace/phone/blue-room.yaml b/lovelace/phone/blue-room.yaml index a423583..fd106a6 100644 --- a/lovelace/phone/blue-room.yaml +++ b/lovelace/phone/blue-room.yaml @@ -1,4 +1,3 @@ -theme: Mushroom subview: true title: Blue Room path: blue-room diff --git a/lovelace/phone/cctv.yaml b/lovelace/phone/cctv.yaml index 6948ed0..8f5a95a 100644 --- a/lovelace/phone/cctv.yaml +++ b/lovelace/phone/cctv.yaml @@ -1,4 +1,3 @@ -theme: Mushroom title: CCTV path: cctv icon: mdi:cctv diff --git a/lovelace/phone/computer-area.yaml b/lovelace/phone/computer-area.yaml index 50b8467..c0c8461 100644 --- a/lovelace/phone/computer-area.yaml +++ b/lovelace/phone/computer-area.yaml @@ -1,4 +1,3 @@ -theme: Mushroom subview: true title: Computer Area path: computer-area diff --git a/lovelace/phone/dining-room.yaml b/lovelace/phone/dining-room.yaml index 3703525..575077f 100644 --- a/lovelace/phone/dining-room.yaml +++ b/lovelace/phone/dining-room.yaml @@ -1,4 +1,3 @@ -theme: Mushroom subview: true title: Dining Room path: dining-room diff --git a/lovelace/phone/entryway.yaml b/lovelace/phone/entryway.yaml index c2459df..f70a248 100644 --- a/lovelace/phone/entryway.yaml +++ b/lovelace/phone/entryway.yaml @@ -1,4 +1,3 @@ -theme: Mushroom subview: true title: Entryway path: entryway diff --git a/lovelace/phone/front-room.yaml b/lovelace/phone/front-room.yaml index 28fcbb9..d64e434 100644 --- a/lovelace/phone/front-room.yaml +++ b/lovelace/phone/front-room.yaml @@ -1,4 +1,3 @@ -theme: Mushroom subview: true title: Front Room path: front-room diff --git a/lovelace/phone/front-yard.yaml b/lovelace/phone/front-yard.yaml index 24cb3b5..89b3c4a 100644 --- a/lovelace/phone/front-yard.yaml +++ b/lovelace/phone/front-yard.yaml @@ -1,4 +1,3 @@ -theme: Mushroom subview: true title: Front Yard path: front-yard diff --git a/lovelace/phone/furnace-room.yaml b/lovelace/phone/furnace-room.yaml index b9f3a41..75a22a5 100644 --- a/lovelace/phone/furnace-room.yaml +++ b/lovelace/phone/furnace-room.yaml @@ -1,4 +1,3 @@ -theme: Mushroom subview: true title: Furnace Room path: furnace-room diff --git a/lovelace/phone/garage.yaml b/lovelace/phone/garage.yaml index 53e06d7..72030dc 100644 --- a/lovelace/phone/garage.yaml +++ b/lovelace/phone/garage.yaml @@ -1,4 +1,3 @@ -theme: Mushroom subview: true title: Garage path: garage diff --git a/lovelace/phone/great-room.yaml b/lovelace/phone/great-room.yaml index a19a12b..e422f68 100644 --- a/lovelace/phone/great-room.yaml +++ b/lovelace/phone/great-room.yaml @@ -1,4 +1,3 @@ -theme: Mushroom subview: true title: Great Room path: great-room diff --git a/lovelace/phone/home.yaml b/lovelace/phone/home.yaml index f5d28db..d296b2d 100644 --- a/lovelace/phone/home.yaml +++ b/lovelace/phone/home.yaml @@ -1,4 +1,3 @@ -theme: Mushroom title: Home icon: mdi:home path: home diff --git a/lovelace/phone/kitchen.yaml b/lovelace/phone/kitchen.yaml index 6697d15..a5268cd 100644 --- a/lovelace/phone/kitchen.yaml +++ b/lovelace/phone/kitchen.yaml @@ -1,4 +1,3 @@ -theme: Mushroom subview: true title: Kitchen path: kitchen diff --git a/lovelace/phone/lights.yaml b/lovelace/phone/lights.yaml index 116cd45..a9bdf97 100644 --- a/lovelace/phone/lights.yaml +++ b/lovelace/phone/lights.yaml @@ -1,4 +1,3 @@ -theme: Mushroom title: Lights path: lights icon: mdi:lightbulb-group diff --git a/lovelace/phone/lyrics.yaml b/lovelace/phone/lyrics.yaml index 01d2afb..05cb627 100644 --- a/lovelace/phone/lyrics.yaml +++ b/lovelace/phone/lyrics.yaml @@ -1,4 +1,3 @@ -theme: Mushroom title: Lyrics path: lyrics icon: mdi:book-music diff --git a/lovelace/phone/mancave.yaml b/lovelace/phone/mancave.yaml index a4f9d9e..d9053e8 100644 --- a/lovelace/phone/mancave.yaml +++ b/lovelace/phone/mancave.yaml @@ -1,4 +1,3 @@ -theme: Mushroom subview: true title: Mancave path: mancave diff --git a/lovelace/phone/master-bathroom.yaml b/lovelace/phone/master-bathroom.yaml index 267a62d..e45c450 100644 --- a/lovelace/phone/master-bathroom.yaml +++ b/lovelace/phone/master-bathroom.yaml @@ -1,4 +1,3 @@ -theme: Mushroom subview: true title: Master Bathroom path: master-bathroom diff --git a/lovelace/phone/master-bedroom.yaml b/lovelace/phone/master-bedroom.yaml index dfe89de..c5f5591 100644 --- a/lovelace/phone/master-bedroom.yaml +++ b/lovelace/phone/master-bedroom.yaml @@ -1,4 +1,3 @@ -theme: Mushroom subview: true title: Master Bedroom path: master-bedroom diff --git a/lovelace/phone/nursery.yaml b/lovelace/phone/nursery.yaml index 8babbac..729806b 100644 --- a/lovelace/phone/nursery.yaml +++ b/lovelace/phone/nursery.yaml @@ -1,4 +1,3 @@ -theme: Mushroom subview: true title: Nursery path: nursery diff --git a/lovelace/phone/plants.yaml b/lovelace/phone/plants.yaml index ce2dd0c..28d4eb8 100644 --- a/lovelace/phone/plants.yaml +++ b/lovelace/phone/plants.yaml @@ -1,4 +1,3 @@ -theme: Mushroom title: Plants path: plants icon: mdi:flower diff --git a/lovelace/phone/utility-room.yaml b/lovelace/phone/utility-room.yaml index dcd49a8..61ea672 100644 --- a/lovelace/phone/utility-room.yaml +++ b/lovelace/phone/utility-room.yaml @@ -1,4 +1,3 @@ -theme: Mushroom subview: true title: Utility Room path: utility-room diff --git a/lovelace/view-floor-all.yaml b/lovelace/view-floor-all.yaml index b070630..4533e8c 100644 --- a/lovelace/view-floor-all.yaml +++ b/lovelace/view-floor-all.yaml @@ -1,7 +1,6 @@ title: All Floors path: all-floors icon: mdi:alpha-a-box -theme: Mushroom Shadow cards: - !include /config/lovelace/room_cards/front_room.yaml diff --git a/lovelace/view-ha-floorplan.yaml b/lovelace/view-ha-floorplan.yaml index 0f4e1b1..bd2ff48 100644 --- a/lovelace/view-ha-floorplan.yaml +++ b/lovelace/view-ha-floorplan.yaml @@ -568,18 +568,18 @@ cards: return "info-text"; ' - - entities: - - switch.shelly_sliding_glass_door - states: - - state: "on" - class: "light-on" - - state: "off" - class: "camera-streaming" - - state: "unavailable" - class: "light-unavailable" - action: - domain: homeassistant - service: homeassistant.toggle + # - entities: + # - switch.shelly_sliding_glass_door + # states: + # - state: "on" + # class: "light-on" + # - state: "off" + # class: "camera-streaming" + # - state: "unavailable" + # class: "light-unavailable" + # action: + # domain: homeassistant + # service: homeassistant.toggle - entities: - light.front_room_splash_left diff --git a/themes/catppuccin/catppuccin.yaml b/themes/catppuccin/catppuccin.yaml new file mode 100644 index 0000000..df3f320 --- /dev/null +++ b/themes/catppuccin/catppuccin.yaml @@ -0,0 +1,1808 @@ +Catppuccin Latte: + modes: + light: &latte + ##################### + # Catppuccin Colors # + ##################### + catppuccin-rosewater: "#dc8a78" + catppuccin-rosewater-rgb: 220, 138, 120 + catppuccin-flamingo: "#dd7878" + catppuccin-flamingo-rgb: 221, 120, 120 + catppuccin-pink: "#ea76cb" + catppuccin-pink-rgb: 234, 118, 203 + catppuccin-mauve: "#8839ef" + catppuccin-mauve-rgb: 136, 57, 239 + catppuccin-red: "#d20f39" + catppuccin-red-rgb: 210, 15, 57 + catppuccin-maroon: "#e64553" + catppuccin-maroon-rgb: 230, 69, 83 + catppuccin-peach: "#fe640b" + catppuccin-peach-rgb: 254, 100, 11 + catppuccin-yellow: "#df8e1d" + catppuccin-yellow-rgb: 223, 142, 29 + catppuccin-green: "#40a02b" + catppuccin-green-rgb: 64, 160, 43 + catppuccin-teal: "#179299" + catppuccin-teal-rgb: 23, 146, 153 + catppuccin-sky: "#04a5e5" + catppuccin-sky-rgb: 4, 165, 229 + catppuccin-sapphire: "#209fb5" + catppuccin-sapphire-rgb: 32, 159, 181 + catppuccin-blue: "#1e66f5" + catppuccin-blue-rgb: 30, 102, 245 + catppuccin-lavender: "#7287fd" + catppuccin-lavender-rgb: 114, 135, 253 + catppuccin-text: "#4c4f69" + catppuccin-text-rgb: 76, 79, 105 + catppuccin-subtext1: "#5c5f77" + catppuccin-subtext1-rgb: 92, 95, 119 + catppuccin-subtext0: "#6c6f85" + catppuccin-subtext0-rgb: 108, 111, 133 + catppuccin-overlay2: "#7c7f93" + catppuccin-overlay2-rgb: 124, 127, 147 + catppuccin-overlay1: "#8c8fa1" + catppuccin-overlay1-rgb: 140, 143, 161 + catppuccin-overlay0: "#9ca0b0" + catppuccin-overlay0-rgb: 156, 160, 176 + catppuccin-surface2: "#acb0be" + catppuccin-surface2-rgb: 172, 176, 190 + catppuccin-surface1: "#bcc0cc" + catppuccin-surface1-rgb: 188, 192, 204 + catppuccin-surface0: "#ccd0da" + catppuccin-surface0-rgb: 204, 208, 218 + catppuccin-base: "#eff1f5" + catppuccin-base-rgb: 239, 241, 245 + catppuccin-mantle: "#e6e9ef" + catppuccin-mantle-rgb: 230, 233, 239 + catppuccin-crust: "#dce0e8" + catppuccin-crust-rgb: 220, 224, 232 + + ################################ + # Home Assistant color palette # + ################################ + # List from the "core.globals.ts" file in home-assistant/frontend. + # TODO: Update these once Whiskers has variant (tint / shade) support. + + # Primary + # NOTE: This centers around `primary-40` rather than `primary-50` because + # HA uses `-40` as the default brand color for some reason. + ha-color-primary-05: rgb(84, 76, 122) + ha-color-primary-10: rgb(91, 73, 139) + ha-color-primary-20: rgb(106, 68, 172) + ha-color-primary-30: rgb(121, 63, 205) + ha-color-primary-40: rgb(136, 57, 239) + ha-color-primary-50: rgb(153, 88, 240) + ha-color-primary-60: rgb(170, 117, 241) + ha-color-primary-70: rgb(186, 147, 242) + ha-color-primary-80: rgb(205, 181, 243) + ha-color-primary-90: rgb(222, 210, 244) + ha-color-primary-95: rgb(231, 226, 245) + + # Neutral + ha-color-neutral-05: rgb(84, 87, 112) + ha-color-neutral-10: rgb(92, 96, 119) + ha-color-neutral-20: rgb(109, 111, 133) + ha-color-neutral-30: rgb(125, 128, 147) + ha-color-neutral-40: rgb(142, 143, 161) + ha-color-neutral-50: rgb(158, 160, 175) + ha-color-neutral-60: rgb(173, 177, 189) + ha-color-neutral-70: rgb(191, 193, 203) + ha-color-neutral-80: rgb(206, 209, 217) + ha-color-neutral-90: rgb(223, 225, 231) + ha-color-neutral-95: rgb(231, 233, 238) + + # Orange + ha-color-orange-05: rgb(94, 81, 95) + ha-color-orange-10: rgb(112, 83, 86) + ha-color-orange-20: rgb(148, 87, 67) + ha-color-orange-30: rgb(182, 92, 49) + ha-color-orange-40: rgb(218, 96, 30) + ha-color-orange-50: rgb(254, 100, 11) + ha-color-orange-60: rgb(251, 128, 58) + ha-color-orange-70: rgb(248, 156, 105) + ha-color-orange-80: rgb(245, 185, 151) + ha-color-orange-90: rgb(242, 213, 198) + ha-color-orange-95: rgb(241, 226, 221) + + # Red + ha-color-red-05: rgb(89, 73, 100) + ha-color-red-10: rgb(103, 66, 95) + ha-color-red-20: rgb(130, 53, 86) + ha-color-red-30: rgb(156, 41, 76) + ha-color-red-40: rgb(183, 28, 67) + ha-color-red-50: rgb(210, 15, 57) + ha-color-red-60: rgb(216, 60, 95) + ha-color-red-70: rgb(222, 105, 132) + ha-color-red-80: rgb(227, 151, 170) + ha-color-red-90: rgb(233, 196, 207) + ha-color-red-95: rgb(236, 218, 226) + + # Green + ha-color-green-05: rgb(75, 87, 98) + ha-color-green-10: rgb(74, 95, 93) + ha-color-green-20: rgb(72, 111, 80) + ha-color-green-30: rgb(68, 128, 68) + ha-color-green-40: rgb(66, 144, 55) + ha-color-green-50: rgb(64, 160, 43) + ha-color-green-60: rgb(99, 176, 83) + ha-color-green-70: rgb(134, 192, 124) + ha-color-green-80: rgb(169, 209, 164) + ha-color-green-90: rgb(204, 225, 205) + ha-color-green-95: rgb(222, 232, 224) + + ###################### + # HA Semantic Colors # + ###################### + # List from the "semantic.globals.ts" file in home-assistant/frontend. + + ha-color-focus: var(--ha-color-orange-60) + + # Text + ha-color-text-primary: var(--catppuccin-text) + ha-color-text-secondary: var(--catppuccin-subtext1) + ha-color-text-disabled: var(--catppuccin-overlay1) + ha-color-text-link: var(--catppuccin-blue) + + # Border primary + ha-color-border-primary-quiet: var(--ha-color-primary-80) + ha-color-border-primary-normal: var(--ha-color-primary-70) + ha-color-border-primary-loud: var(--ha-color-primary-40) + + # Border neutral + ha-color-border-neutral-quiet: var(--ha-color-neutral-80) + ha-color-border-neutral-normal: var(--ha-color-neutral-60) + ha-color-border-neutral-loud: var(--ha-color-neutral-40) + + # Border danger + ha-color-border-danger-quiet: var(--ha-color-red-80) + ha-color-border-danger-normal: var(--ha-color-red-70) + ha-color-border-danger-loud: var(--ha-color-red-40) + + # Border warning + ha-color-border-warning-quiet: var(--ha-color-orange-80) + ha-color-border-warning-normal: var(--ha-color-orange-70) + ha-color-border-warning-loud: var(--ha-color-orange-40) + + # Border success + ha-color-border-success-quiet: var(--ha-color-green-80) + ha-color-border-success-normal: var(--ha-color-green-70) + ha-color-border-success-loud: var(--ha-color-green-40) + + # Fill primary quiet + ha-color-fill-primary-quiet-resting: var(--ha-color-primary-95) + ha-color-fill-primary-quiet-hover: var(--ha-color-primary-90) + ha-color-fill-primary-quiet-active: var(--ha-color-primary-95) + + # Fill primary normal + ha-color-fill-primary-normal-resting: var(--ha-color-primary-90) + ha-color-fill-primary-normal-hover: var(--ha-color-primary-80) + ha-color-fill-primary-normal-active: var(--ha-color-primary-90) + + # Fill primary loud + ha-color-fill-primary-loud-resting: var(--ha-color-primary-40) + ha-color-fill-primary-loud-hover: var(--ha-color-primary-30) + ha-color-fill-primary-loud-active: var(--ha-color-primary-40) + + # Fill neutral quiet + ha-color-fill-neutral-quiet-resting: var(--ha-color-neutral-95) + ha-color-fill-neutral-quiet-hover: var(--ha-color-neutral-90) + ha-color-fill-neutral-quiet-active: var(--ha-color-neutral-95) + + # Fill neutral normal + ha-color-fill-neutral-normal-resting: var(--ha-color-neutral-90) + ha-color-fill-neutral-normal-hover: var(--ha-color-neutral-80) + ha-color-fill-neutral-normal-active: var(--ha-color-neutral-90) + + # Fill neutral loud + ha-color-fill-neutral-loud-resting: var(--ha-color-neutral-40) + ha-color-fill-neutral-loud-hover: var(--ha-color-neutral-30) + ha-color-fill-neutral-loud-active: var(--ha-color-neutral-40) + + # Fill disabled quiet + ha-color-fill-disabled-quiet-resting: var(--ha-color-neutral-95) + + # Fill disabled normal + ha-color-fill-disabled-normal-resting: var(--ha-color-neutral-95) + + # Fill disabled loud + ha-color-fill-disabled-loud-resting: var(--ha-color-neutral-80) + + # Fill danger quiet + ha-color-fill-danger-quiet-resting: var(--ha-color-red-95) + ha-color-fill-danger-quiet-hover: var(--ha-color-red-90) + ha-color-fill-danger-quiet-active: var(--ha-color-red-95) + + # Fill danger normal + ha-color-fill-danger-normal-resting: var(--ha-color-red-90) + ha-color-fill-danger-normal-hover: var(--ha-color-red-80) + ha-color-fill-danger-normal-active: var(--ha-color-red-90) + + # Fill danger loud + ha-color-fill-danger-loud-resting: var(--ha-color-red-50) + ha-color-fill-danger-loud-hover: var(--ha-color-red-40) + ha-color-fill-danger-loud-active: var(--ha-color-red-50) + + # Fill warning quiet + ha-color-fill-warning-quiet-resting: var(--ha-color-orange-95) + ha-color-fill-warning-quiet-hover: var(--ha-color-orange-90) + ha-color-fill-warning-quiet-active: var(--ha-color-orange-95) + + # Fill warning normal + ha-color-fill-warning-normal-resting: var(--ha-color-orange-90) + ha-color-fill-warning-normal-hover: var(--ha-color-orange-80) + ha-color-fill-warning-normal-active: var(--ha-color-orange-90) + + # Fill warning loud + ha-color-fill-warning-loud-resting: var(--ha-color-orange-70) + ha-color-fill-warning-loud-hover: var(--ha-color-orange-50) + ha-color-fill-warning-loud-active: var(--ha-color-orange-70) + + # Fill success quiet + ha-color-fill-success-quiet-resting: var(--ha-color-green-95) + ha-color-fill-success-quiet-hover: var(--ha-color-green-90) + ha-color-fill-success-quiet-active: var(--ha-color-green-95) + + # Fill success normal + ha-color-fill-success-normal-resting: var(--ha-color-green-90) + ha-color-fill-success-normal-hover: var(--ha-color-green-80) + ha-color-fill-success-normal-active: var(--ha-color-green-90) + + # Fill success loud + ha-color-fill-success-loud-resting: var(--ha-color-green-50) + ha-color-fill-success-loud-hover: var(--ha-color-green-40) + ha-color-fill-success-loud-active: var(--ha-color-green-50) + + # On primary + ha-color-on-primary-quiet: var(--ha-color-primary-50) + ha-color-on-primary-normal: var(--ha-color-primary-40) + ha-color-on-primary-loud: var(--white-color) + + # On neutral + ha-color-on-neutral-quiet: var(--ha-color-neutral-50) + ha-color-on-neutral-normal: var(--ha-color-neutral-40) + ha-color-on-neutral-loud: var(--white-color) + + # On disabled + ha-color-on-disabled-quiet: var(--ha-color-neutral-80) + ha-color-on-disabled-normal: var(--ha-color-neutral-70) + ha-color-on-disabled-loud: var(--ha-color-neutral-95) + + # On danger + ha-color-on-danger-quiet: var(--ha-color-red-50) + ha-color-on-danger-normal: var(--ha-color-red-40) + ha-color-on-danger-loud: var(--white-color) + + # On warning + ha-color-on-warning-quiet: var(--ha-color-orange-50) + ha-color-on-warning-normal: var(--ha-color-orange-40) + ha-color-on-warning-loud: var(--white-color) + + # On success + ha-color-on-success-quiet: var(--ha-color-green-50) + ha-color-on-success-normal: var(--ha-color-green-40) + ha-color-on-success-loud: var(--white-color) + + ################### + # HA Other Colors # + ################### + # List from the "color.globals.ts" file in home-assistant/frontend. + + # Text + primary-text-color: var(--ha-color-text-primary) + secondary-text-color: var(--ha-color-text-secondary) + text-primary-color: var(--catppuccin-crust) + text-light-primary-color: var(--catppuccin-crust) + disabled-text-color: var(--catppuccin-overlay1) + + # Main interface colors + # primary-color: var(--ha-color-primary-40) + dark-primary-color: var(--ha-color-primary-30) + darker-primary-color: var(--ha-color-primary-20) + light-primary-color: var(--ha-color-primary-50) + accent-color: var(--primary-color) + divider-color: rgba(var(--catppuccin-overlay1-rgb), 0.15) + outline-color: var(--catppuccin-crust) + outline-hover-color: var(--catppuccin-surface2) + + # RGB + rgb-primary-color: var(--catppuccin-mauve-rgb) + rgb-accent-color: var(--catppuccin-mauve-rgb) + rgb-primary-text-color: var(--catppuccin-text-rgb) + rgb-secondary-text-color: var(--catppuccin-subtext1-rgb) + rgb-text-primary-color: var(--catppuccin-text-rgb) + rgb-card-background-color: var(--catppuccin-base-rgb) + + rgb-warning-color: var(--catppuccin-yellow-rgb) + rgb-error-color: var(--catppuccin-red-rgb) + rgb-success-color: var(--catppuccin-green-rgb) + rgb-info-color: var(--catppuccin-blue-rgb) + + scrollbar-thumb-color: var(--primary-color) + + error-color: var(--catppuccin-red) + warning-color: var(--catppuccin-yellow) + success-color: var(--catppuccin-green) + info-color: var(--catppuccin-blue) + + # Backgrounds + card-background-color: var(--catppuccin-base) + primary-background-color: var(--catppuccin-mantle) + secondary-background-color: var(--catppuccin-mantle) + clear-background-color: var(--card-background-color) + + # For label-badge + label-badge-grey: var(--secondary-text-color) + + # States icon + state-icon-color: var(--primary-color) + + # Energy + energy-grid-consumption-color: var(--catppuccin-lavender) + energy-grid-return-color: var(--catppuccin-mauve) + energy-solar-color: var(--catppuccin-yellow) + energy-non-fossil-color: var(--catppuccin-green) + energy-battery-out-color: var(--catppuccin-teal) + energy-battery-in-color: var(--catppuccin-pink) + energy-gas-color: var(--catppuccin-red) + energy-water-color: var(--catppuccin-sky) + + # Color + disabled-color: var(--catppuccin-overlay1) + red-color: var(--catppuccin-red) + pink-color: var(--catppuccin-pink) + purple-color: var(--catppuccin-mauve) + deep-purple-color: var(--catppuccin-mauve) + indigo-color: var(--catppuccin-lavender) + blue-color: var(--catppuccin-blue) + light-blue-color: var(--catppuccin-sky) + cyan-color: var(--catppuccin-teal) + teal-color: var(--catppuccin-teal) + green-color: var(--catppuccin-green) + light-green-color: var(--catppuccin-green) + lime-color: var(--catppuccin-green) + yellow-color: var(--catppuccin-yellow) + amber-color: var(--catppuccin-yellow) + orange-color: var(--catppuccin-peach) + deep-orange-color: var(--catppuccin-maroon) + brown-color: var(--catppuccin-flamingo) + light-grey-color: var(--catppuccin-surface0) + grey-color: var(--catppuccin-surface2) + dark-grey-color: var(--catppuccin-overlay1) + blue-grey-color: var(--dark-grey-color) + black-color: var(--catppuccin-text) + white-color: var(--catppuccin-crust) + + # Input components + input-idle-line-color: var(--primary-text-color) + input-hover-line-color: var(--accent-color) + input-disabled-line-color: var(--disabled-text-color) + input-outlined-idle-border-color: var(--disabled-text-color) + input-outlined-hover-border-color: var(--disabled-text-color) + input-outlined-disabled-border-color: var(--disabled-text-color) + input-fill-color: var(--primary-background-color) + input-disabled-fill-color: var(--catppuccin-surface1) + input-ink-color: var(--primary-text-color) + input-label-ink-color: var(--secondary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--secondary-text-color) + + # State color + state-active-color: var(--catppuccin-mauve) + + sidebar-background-color: var(--catppuccin-crust) + switch-unchecked-color: var(--catppuccin-overlay0) + switch-unchecked-button-color: var(--switch-unchecked-color) + switch-unchecked-track-color: var(--switch-unchecked-color) + + app-header-text-color: var(--primary-text-color) + app-header-background-color: var(--catppuccin-crust) + + # Codemirror + codemirror-keyword: var(--catppuccin-mauve) + codemirror-operator: var(--catppuccin-sky) + codemirror-variable: var(--catppuccin-blue) # Functions + codemirror-variable-2: var(--catppuccin-text) # "Special variable"s + codemirror-variable-3: var(--catppuccin-text) # Currently unused + codemirror-builtin: var(--catppuccin-red) + codemirror-atom: var(--catppuccin-red) + codemirror-number: var(--catppuccin-peach) + codemirror-def: var(--catppuccin-text) + codemirror-string: var(--catppuccin-green) + codemirror-string-2: var(--catppuccin-green) # Currently unused + codemirror-comment: var(--catppuccin-overlay2) + codemirror-tag: var(--catppuccin-blue) # Currently unused + codemirror-meta: var(--catppuccin-overlay2) + codemirror-attribute: var(--catppuccin-yellow) + codemirror-property: var(--catppuccin-blue) + codemirror-qualifier: var(--catppuccin-peach) + codemirror-type: var(--catppuccin-yellow) # Currently unused + + ################ + # Other colors # + ################ + # These colors are respected by Home Assistant (currently), but aren't + # defined directly in the main theme. + text-accent-color: var(--catppuccin-crust) + md-slider-inactive-track-color: var(--catppuccin-overlay0) + app-header-edit-background-color: var(--catppuccin-surface2) + app-header-edit-text-color: var(--primary-text-color) + + mdc-ripple-color: "#aaaaaa" + mdc-linear-progress-buffer-color: "#f00" + + ########## + # Graphs # + ########## + graph-color-1: var(--catppuccin-mauve) + graph-color-2: var(--catppuccin-green) + graph-color-3: var(--catppuccin-red) + graph-color-4: var(--catppuccin-blue) + graph-color-5: var(--catppuccin-pink) + graph-color-6: var(--catppuccin-yellow) + graph-color-7: var(--catppuccin-sky) + graph-color-8: var(--catppuccin-maroon) + graph-color-9: var(--catppuccin-lavender) + graph-color-10: var(--catppuccin-peach) + graph-color-11: var(--catppuccin-teal) + graph-color-12: var(--catppuccin-rosewater) + graph-color-13: var(--catppuccin-sapphire) + graph-color-14: var(--catppuccin-flamingo) +Catppuccin Frappe: + modes: + dark: &frappe + ##################### + # Catppuccin Colors # + ##################### + catppuccin-rosewater: "#f2d5cf" + catppuccin-rosewater-rgb: 242, 213, 207 + catppuccin-flamingo: "#eebebe" + catppuccin-flamingo-rgb: 238, 190, 190 + catppuccin-pink: "#f4b8e4" + catppuccin-pink-rgb: 244, 184, 228 + catppuccin-mauve: "#ca9ee6" + catppuccin-mauve-rgb: 202, 158, 230 + catppuccin-red: "#e78284" + catppuccin-red-rgb: 231, 130, 132 + catppuccin-maroon: "#ea999c" + catppuccin-maroon-rgb: 234, 153, 156 + catppuccin-peach: "#ef9f76" + catppuccin-peach-rgb: 239, 159, 118 + catppuccin-yellow: "#e5c890" + catppuccin-yellow-rgb: 229, 200, 144 + catppuccin-green: "#a6d189" + catppuccin-green-rgb: 166, 209, 137 + catppuccin-teal: "#81c8be" + catppuccin-teal-rgb: 129, 200, 190 + catppuccin-sky: "#99d1db" + catppuccin-sky-rgb: 153, 209, 219 + catppuccin-sapphire: "#85c1dc" + catppuccin-sapphire-rgb: 133, 193, 220 + catppuccin-blue: "#8caaee" + catppuccin-blue-rgb: 140, 170, 238 + catppuccin-lavender: "#babbf1" + catppuccin-lavender-rgb: 186, 187, 241 + catppuccin-text: "#c6d0f5" + catppuccin-text-rgb: 198, 208, 245 + catppuccin-subtext1: "#b5bfe2" + catppuccin-subtext1-rgb: 181, 191, 226 + catppuccin-subtext0: "#a5adce" + catppuccin-subtext0-rgb: 165, 173, 206 + catppuccin-overlay2: "#949cbb" + catppuccin-overlay2-rgb: 148, 156, 187 + catppuccin-overlay1: "#838ba7" + catppuccin-overlay1-rgb: 131, 139, 167 + catppuccin-overlay0: "#737994" + catppuccin-overlay0-rgb: 115, 121, 148 + catppuccin-surface2: "#626880" + catppuccin-surface2-rgb: 98, 104, 128 + catppuccin-surface1: "#51576d" + catppuccin-surface1-rgb: 81, 87, 109 + catppuccin-surface0: "#414559" + catppuccin-surface0-rgb: 65, 69, 89 + catppuccin-base: "#303446" + catppuccin-base-rgb: 48, 52, 70 + catppuccin-mantle: "#292c3c" + catppuccin-mantle-rgb: 41, 44, 60 + catppuccin-crust: "#232634" + catppuccin-crust-rgb: 35, 38, 52 + + ################################ + # Home Assistant color palette # + ################################ + # List from the "core.globals.ts" file in home-assistant/frontend. + # TODO: Update these once Whiskers has variant (tint / shade) support. + + # Primary + # NOTE: This centers around `primary-40` rather than `primary-50` because + # HA uses `-40` as the default brand color for some reason. + ha-color-primary-05: rgb(198, 201, 243) + ha-color-primary-10: rgb(199, 196, 242) + ha-color-primary-20: rgb(200, 183, 237) + ha-color-primary-30: rgb(201, 170, 233) + ha-color-primary-40: rgb(202, 158, 230) + ha-color-primary-50: rgb(176, 140, 203) + ha-color-primary-60: rgb(151, 123, 177) + ha-color-primary-70: rgb(127, 106, 151) + ha-color-primary-80: rgb(99, 87, 123) + ha-color-primary-90: rgb(74, 70, 97) + ha-color-primary-95: rgb(60, 60, 83) + + # Neutral + ha-color-neutral-05: rgb(190, 200, 237) + ha-color-neutral-10: rgb(183, 192, 227) + ha-color-neutral-20: rgb(168, 176, 210) + ha-color-neutral-30: rgb(152, 161, 192) + ha-color-neutral-40: rgb(138, 146, 175) + ha-color-neutral-50: rgb(123, 130, 157) + ha-color-neutral-60: rgb(108, 114, 140) + ha-color-neutral-70: rgb(93, 99, 122) + ha-color-neutral-80: rgb(78, 84, 105) + ha-color-neutral-90: rgb(62, 67, 87) + ha-color-neutral-95: rgb(56, 60, 78) + + # Orange + ha-color-orange-05: rgb(202, 203, 232) + ha-color-orange-10: rgb(206, 198, 220) + ha-color-orange-20: rgb(215, 189, 194) + ha-color-orange-30: rgb(222, 178, 169) + ha-color-orange-40: rgb(231, 169, 143) + ha-color-orange-50: rgb(239, 159, 118) + ha-color-orange-60: rgb(201, 137, 108) + ha-color-orange-70: rgb(162, 116, 99) + ha-color-orange-80: rgb(125, 95, 89) + ha-color-orange-90: rgb(86, 74, 80) + ha-color-orange-95: rgb(67, 63, 75) + + # Red + ha-color-red-05: rgb(202, 200, 233) + ha-color-red-10: rgb(204, 192, 222) + ha-color-red-20: rgb(211, 177, 200) + ha-color-red-30: rgb(218, 161, 177) + ha-color-red-40: rgb(225, 146, 155) + ha-color-red-50: rgb(231, 130, 132) + ha-color-red-60: rgb(195, 114, 120) + ha-color-red-70: rgb(158, 99, 107) + ha-color-red-80: rgb(121, 83, 95) + ha-color-red-90: rgb(84, 68, 82) + ha-color-red-95: rgb(67, 60, 76) + + # Green + ha-color-green-05: rgb(195, 208, 234) + ha-color-green-10: rgb(191, 208, 223) + ha-color-green-20: rgb(185, 209, 202) + ha-color-green-30: rgb(179, 208, 180) + ha-color-green-40: rgb(173, 209, 159) + ha-color-green-50: rgb(166, 209, 137) + ha-color-green-60: rgb(143, 177, 124) + ha-color-green-70: rgb(119, 146, 110) + ha-color-green-80: rgb(95, 115, 97) + ha-color-green-90: rgb(71, 84, 83) + ha-color-green-95: rgb(60, 68, 77) + + ###################### + # HA Semantic Colors # + ###################### + # List from the "semantic.globals.ts" file in home-assistant/frontend. + + ha-color-focus: var(--ha-color-orange-60) + + # Text + ha-color-text-primary: var(--catppuccin-text) + ha-color-text-secondary: var(--catppuccin-subtext1) + ha-color-text-disabled: var(--catppuccin-overlay1) + ha-color-text-link: var(--catppuccin-blue) + + # Border primary + ha-color-border-primary-quiet: var(--ha-color-primary-80) + ha-color-border-primary-normal: var(--ha-color-primary-70) + ha-color-border-primary-loud: var(--ha-color-primary-40) + + # Border neutral + ha-color-border-neutral-quiet: var(--ha-color-neutral-80) + ha-color-border-neutral-normal: var(--ha-color-neutral-60) + ha-color-border-neutral-loud: var(--ha-color-neutral-40) + + # Border danger + ha-color-border-danger-quiet: var(--ha-color-red-80) + ha-color-border-danger-normal: var(--ha-color-red-70) + ha-color-border-danger-loud: var(--ha-color-red-40) + + # Border warning + ha-color-border-warning-quiet: var(--ha-color-orange-80) + ha-color-border-warning-normal: var(--ha-color-orange-70) + ha-color-border-warning-loud: var(--ha-color-orange-40) + + # Border success + ha-color-border-success-quiet: var(--ha-color-green-80) + ha-color-border-success-normal: var(--ha-color-green-70) + ha-color-border-success-loud: var(--ha-color-green-40) + + # Fill primary quiet + ha-color-fill-primary-quiet-resting: var(--ha-color-primary-95) + ha-color-fill-primary-quiet-hover: var(--ha-color-primary-90) + ha-color-fill-primary-quiet-active: var(--ha-color-primary-95) + + # Fill primary normal + ha-color-fill-primary-normal-resting: var(--ha-color-primary-90) + ha-color-fill-primary-normal-hover: var(--ha-color-primary-80) + ha-color-fill-primary-normal-active: var(--ha-color-primary-90) + + # Fill primary loud + ha-color-fill-primary-loud-resting: var(--ha-color-primary-40) + ha-color-fill-primary-loud-hover: var(--ha-color-primary-30) + ha-color-fill-primary-loud-active: var(--ha-color-primary-40) + + # Fill neutral quiet + ha-color-fill-neutral-quiet-resting: var(--ha-color-neutral-95) + ha-color-fill-neutral-quiet-hover: var(--ha-color-neutral-90) + ha-color-fill-neutral-quiet-active: var(--ha-color-neutral-95) + + # Fill neutral normal + ha-color-fill-neutral-normal-resting: var(--ha-color-neutral-90) + ha-color-fill-neutral-normal-hover: var(--ha-color-neutral-80) + ha-color-fill-neutral-normal-active: var(--ha-color-neutral-90) + + # Fill neutral loud + ha-color-fill-neutral-loud-resting: var(--ha-color-neutral-40) + ha-color-fill-neutral-loud-hover: var(--ha-color-neutral-30) + ha-color-fill-neutral-loud-active: var(--ha-color-neutral-40) + + # Fill disabled quiet + ha-color-fill-disabled-quiet-resting: var(--ha-color-neutral-95) + + # Fill disabled normal + ha-color-fill-disabled-normal-resting: var(--ha-color-neutral-95) + + # Fill disabled loud + ha-color-fill-disabled-loud-resting: var(--ha-color-neutral-80) + + # Fill danger quiet + ha-color-fill-danger-quiet-resting: var(--ha-color-red-95) + ha-color-fill-danger-quiet-hover: var(--ha-color-red-90) + ha-color-fill-danger-quiet-active: var(--ha-color-red-95) + + # Fill danger normal + ha-color-fill-danger-normal-resting: var(--ha-color-red-90) + ha-color-fill-danger-normal-hover: var(--ha-color-red-80) + ha-color-fill-danger-normal-active: var(--ha-color-red-90) + + # Fill danger loud + ha-color-fill-danger-loud-resting: var(--ha-color-red-50) + ha-color-fill-danger-loud-hover: var(--ha-color-red-40) + ha-color-fill-danger-loud-active: var(--ha-color-red-50) + + # Fill warning quiet + ha-color-fill-warning-quiet-resting: var(--ha-color-orange-95) + ha-color-fill-warning-quiet-hover: var(--ha-color-orange-90) + ha-color-fill-warning-quiet-active: var(--ha-color-orange-95) + + # Fill warning normal + ha-color-fill-warning-normal-resting: var(--ha-color-orange-90) + ha-color-fill-warning-normal-hover: var(--ha-color-orange-80) + ha-color-fill-warning-normal-active: var(--ha-color-orange-90) + + # Fill warning loud + ha-color-fill-warning-loud-resting: var(--ha-color-orange-70) + ha-color-fill-warning-loud-hover: var(--ha-color-orange-50) + ha-color-fill-warning-loud-active: var(--ha-color-orange-70) + + # Fill success quiet + ha-color-fill-success-quiet-resting: var(--ha-color-green-95) + ha-color-fill-success-quiet-hover: var(--ha-color-green-90) + ha-color-fill-success-quiet-active: var(--ha-color-green-95) + + # Fill success normal + ha-color-fill-success-normal-resting: var(--ha-color-green-90) + ha-color-fill-success-normal-hover: var(--ha-color-green-80) + ha-color-fill-success-normal-active: var(--ha-color-green-90) + + # Fill success loud + ha-color-fill-success-loud-resting: var(--ha-color-green-50) + ha-color-fill-success-loud-hover: var(--ha-color-green-40) + ha-color-fill-success-loud-active: var(--ha-color-green-50) + + # On primary + ha-color-on-primary-quiet: var(--ha-color-primary-50) + ha-color-on-primary-normal: var(--ha-color-primary-40) + ha-color-on-primary-loud: var(--white-color) + + # On neutral + ha-color-on-neutral-quiet: var(--ha-color-neutral-50) + ha-color-on-neutral-normal: var(--ha-color-neutral-40) + ha-color-on-neutral-loud: var(--white-color) + + # On disabled + ha-color-on-disabled-quiet: var(--ha-color-neutral-80) + ha-color-on-disabled-normal: var(--ha-color-neutral-70) + ha-color-on-disabled-loud: var(--ha-color-neutral-95) + + # On danger + ha-color-on-danger-quiet: var(--ha-color-red-50) + ha-color-on-danger-normal: var(--ha-color-red-40) + ha-color-on-danger-loud: var(--white-color) + + # On warning + ha-color-on-warning-quiet: var(--ha-color-orange-50) + ha-color-on-warning-normal: var(--ha-color-orange-40) + ha-color-on-warning-loud: var(--white-color) + + # On success + ha-color-on-success-quiet: var(--ha-color-green-50) + ha-color-on-success-normal: var(--ha-color-green-40) + ha-color-on-success-loud: var(--white-color) + + ################### + # HA Other Colors # + ################### + # List from the "color.globals.ts" file in home-assistant/frontend. + + # Text + primary-text-color: var(--ha-color-text-primary) + secondary-text-color: var(--ha-color-text-secondary) + text-primary-color: var(--catppuccin-crust) + text-light-primary-color: var(--catppuccin-crust) + disabled-text-color: var(--catppuccin-overlay1) + + # Main interface colors + # primary-color: var(--ha-color-primary-40) + dark-primary-color: var(--ha-color-primary-30) + darker-primary-color: var(--ha-color-primary-20) + light-primary-color: var(--ha-color-primary-50) + accent-color: var(--primary-color) + divider-color: rgba(var(--catppuccin-overlay1-rgb), 0.15) + outline-color: var(--catppuccin-crust) + outline-hover-color: var(--catppuccin-surface2) + + # RGB + rgb-primary-color: var(--catppuccin-mauve-rgb) + rgb-accent-color: var(--catppuccin-mauve-rgb) + rgb-primary-text-color: var(--catppuccin-text-rgb) + rgb-secondary-text-color: var(--catppuccin-subtext1-rgb) + rgb-text-primary-color: var(--catppuccin-text-rgb) + rgb-card-background-color: var(--catppuccin-base-rgb) + + rgb-warning-color: var(--catppuccin-yellow-rgb) + rgb-error-color: var(--catppuccin-red-rgb) + rgb-success-color: var(--catppuccin-green-rgb) + rgb-info-color: var(--catppuccin-blue-rgb) + + scrollbar-thumb-color: var(--primary-color) + + error-color: var(--catppuccin-red) + warning-color: var(--catppuccin-yellow) + success-color: var(--catppuccin-green) + info-color: var(--catppuccin-blue) + + # Backgrounds + card-background-color: var(--catppuccin-base) + primary-background-color: var(--catppuccin-mantle) + secondary-background-color: var(--catppuccin-mantle) + clear-background-color: var(--card-background-color) + + # For label-badge + label-badge-grey: var(--secondary-text-color) + + # States icon + state-icon-color: var(--primary-color) + + # Energy + energy-grid-consumption-color: var(--catppuccin-lavender) + energy-grid-return-color: var(--catppuccin-mauve) + energy-solar-color: var(--catppuccin-yellow) + energy-non-fossil-color: var(--catppuccin-green) + energy-battery-out-color: var(--catppuccin-teal) + energy-battery-in-color: var(--catppuccin-pink) + energy-gas-color: var(--catppuccin-red) + energy-water-color: var(--catppuccin-sky) + + # Color + disabled-color: var(--catppuccin-overlay1) + red-color: var(--catppuccin-red) + pink-color: var(--catppuccin-pink) + purple-color: var(--catppuccin-mauve) + deep-purple-color: var(--catppuccin-mauve) + indigo-color: var(--catppuccin-lavender) + blue-color: var(--catppuccin-blue) + light-blue-color: var(--catppuccin-sky) + cyan-color: var(--catppuccin-teal) + teal-color: var(--catppuccin-teal) + green-color: var(--catppuccin-green) + light-green-color: var(--catppuccin-green) + lime-color: var(--catppuccin-green) + yellow-color: var(--catppuccin-yellow) + amber-color: var(--catppuccin-yellow) + orange-color: var(--catppuccin-peach) + deep-orange-color: var(--catppuccin-maroon) + brown-color: var(--catppuccin-flamingo) + light-grey-color: var(--catppuccin-surface0) + grey-color: var(--catppuccin-surface2) + dark-grey-color: var(--catppuccin-overlay1) + blue-grey-color: var(--dark-grey-color) + black-color: var(--catppuccin-text) + white-color: var(--catppuccin-crust) + + # Input components + input-idle-line-color: var(--primary-text-color) + input-hover-line-color: var(--accent-color) + input-disabled-line-color: var(--disabled-text-color) + input-outlined-idle-border-color: var(--disabled-text-color) + input-outlined-hover-border-color: var(--disabled-text-color) + input-outlined-disabled-border-color: var(--disabled-text-color) + input-fill-color: var(--primary-background-color) + input-disabled-fill-color: var(--catppuccin-surface1) + input-ink-color: var(--primary-text-color) + input-label-ink-color: var(--secondary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--secondary-text-color) + + # State color + state-active-color: var(--catppuccin-mauve) + + sidebar-background-color: var(--catppuccin-crust) + switch-unchecked-color: var(--catppuccin-overlay0) + switch-unchecked-button-color: var(--switch-unchecked-color) + switch-unchecked-track-color: var(--switch-unchecked-color) + + app-header-text-color: var(--primary-text-color) + app-header-background-color: var(--catppuccin-crust) + + # Codemirror + codemirror-keyword: var(--catppuccin-mauve) + codemirror-operator: var(--catppuccin-sky) + codemirror-variable: var(--catppuccin-blue) # Functions + codemirror-variable-2: var(--catppuccin-text) # "Special variable"s + codemirror-variable-3: var(--catppuccin-text) # Currently unused + codemirror-builtin: var(--catppuccin-red) + codemirror-atom: var(--catppuccin-red) + codemirror-number: var(--catppuccin-peach) + codemirror-def: var(--catppuccin-text) + codemirror-string: var(--catppuccin-green) + codemirror-string-2: var(--catppuccin-green) # Currently unused + codemirror-comment: var(--catppuccin-overlay2) + codemirror-tag: var(--catppuccin-blue) # Currently unused + codemirror-meta: var(--catppuccin-overlay2) + codemirror-attribute: var(--catppuccin-yellow) + codemirror-property: var(--catppuccin-blue) + codemirror-qualifier: var(--catppuccin-peach) + codemirror-type: var(--catppuccin-yellow) # Currently unused + + ################ + # Other colors # + ################ + # These colors are respected by Home Assistant (currently), but aren't + # defined directly in the main theme. + text-accent-color: var(--catppuccin-crust) + md-slider-inactive-track-color: var(--catppuccin-overlay0) + app-header-edit-background-color: var(--catppuccin-surface2) + app-header-edit-text-color: var(--primary-text-color) + + mdc-ripple-color: "#aaaaaa" + mdc-linear-progress-buffer-color: "#f00" + + ########## + # Graphs # + ########## + graph-color-1: var(--catppuccin-mauve) + graph-color-2: var(--catppuccin-green) + graph-color-3: var(--catppuccin-red) + graph-color-4: var(--catppuccin-blue) + graph-color-5: var(--catppuccin-pink) + graph-color-6: var(--catppuccin-yellow) + graph-color-7: var(--catppuccin-sky) + graph-color-8: var(--catppuccin-maroon) + graph-color-9: var(--catppuccin-lavender) + graph-color-10: var(--catppuccin-peach) + graph-color-11: var(--catppuccin-teal) + graph-color-12: var(--catppuccin-rosewater) + graph-color-13: var(--catppuccin-sapphire) + graph-color-14: var(--catppuccin-flamingo) +Catppuccin Macchiato: + modes: + dark: &macchiato + ##################### + # Catppuccin Colors # + ##################### + catppuccin-rosewater: "#f4dbd6" + catppuccin-rosewater-rgb: 244, 219, 214 + catppuccin-flamingo: "#f0c6c6" + catppuccin-flamingo-rgb: 240, 198, 198 + catppuccin-pink: "#f5bde6" + catppuccin-pink-rgb: 245, 189, 230 + catppuccin-mauve: "#c6a0f6" + catppuccin-mauve-rgb: 198, 160, 246 + catppuccin-red: "#ed8796" + catppuccin-red-rgb: 237, 135, 150 + catppuccin-maroon: "#ee99a0" + catppuccin-maroon-rgb: 238, 153, 160 + catppuccin-peach: "#f5a97f" + catppuccin-peach-rgb: 245, 169, 127 + catppuccin-yellow: "#eed49f" + catppuccin-yellow-rgb: 238, 212, 159 + catppuccin-green: "#a6da95" + catppuccin-green-rgb: 166, 218, 149 + catppuccin-teal: "#8bd5ca" + catppuccin-teal-rgb: 139, 213, 202 + catppuccin-sky: "#91d7e3" + catppuccin-sky-rgb: 145, 215, 227 + catppuccin-sapphire: "#7dc4e4" + catppuccin-sapphire-rgb: 125, 196, 228 + catppuccin-blue: "#8aadf4" + catppuccin-blue-rgb: 138, 173, 244 + catppuccin-lavender: "#b7bdf8" + catppuccin-lavender-rgb: 183, 189, 248 + catppuccin-text: "#cad3f5" + catppuccin-text-rgb: 202, 211, 245 + catppuccin-subtext1: "#b8c0e0" + catppuccin-subtext1-rgb: 184, 192, 224 + catppuccin-subtext0: "#a5adcb" + catppuccin-subtext0-rgb: 165, 173, 203 + catppuccin-overlay2: "#939ab7" + catppuccin-overlay2-rgb: 147, 154, 183 + catppuccin-overlay1: "#8087a2" + catppuccin-overlay1-rgb: 128, 135, 162 + catppuccin-overlay0: "#6e738d" + catppuccin-overlay0-rgb: 110, 115, 141 + catppuccin-surface2: "#5b6078" + catppuccin-surface2-rgb: 91, 96, 120 + catppuccin-surface1: "#494d64" + catppuccin-surface1-rgb: 73, 77, 100 + catppuccin-surface0: "#363a4f" + catppuccin-surface0-rgb: 54, 58, 79 + catppuccin-base: "#24273a" + catppuccin-base-rgb: 36, 39, 58 + catppuccin-mantle: "#1e2030" + catppuccin-mantle-rgb: 30, 32, 48 + catppuccin-crust: "#181926" + catppuccin-crust-rgb: 24, 25, 38 + + ################################ + # Home Assistant color palette # + ################################ + # List from the "core.globals.ts" file in home-assistant/frontend. + # TODO: Update these once Whiskers has variant (tint / shade) support. + + # Primary + # NOTE: This centers around `primary-40` rather than `primary-50` because + # HA uses `-40` as the default brand color for some reason. + ha-color-primary-05: rgb(202, 205, 245) + ha-color-primary-10: rgb(201, 198, 246) + ha-color-primary-20: rgb(200, 185, 245) + ha-color-primary-30: rgb(199, 173, 245) + ha-color-primary-40: rgb(198, 160, 246) + ha-color-primary-50: rgb(171, 140, 215) + ha-color-primary-60: rgb(145, 120, 184) + ha-color-primary-70: rgb(119, 101, 153) + ha-color-primary-80: rgb(89, 79, 120) + ha-color-primary-90: rgb(63, 59, 89) + ha-color-primary-95: rgb(49, 49, 72) + + # Neutral + ha-color-neutral-05: rgb(194, 202, 236) + ha-color-neutral-10: rgb(185, 193, 226) + ha-color-neutral-20: rgb(169, 177, 208) + ha-color-neutral-30: rgb(152, 159, 189) + ha-color-neutral-40: rgb(135, 143, 170) + ha-color-neutral-50: rgb(119, 125, 151) + ha-color-neutral-60: rgb(103, 107, 133) + ha-color-neutral-70: rgb(85, 90, 114) + ha-color-neutral-80: rgb(69, 73, 95) + ha-color-neutral-90: rgb(52, 56, 76) + ha-color-neutral-95: rgb(44, 48, 67) + + # Orange + ha-color-orange-05: rgb(206, 206, 233) + ha-color-orange-10: rgb(211, 203, 221) + ha-color-orange-20: rgb(219, 195, 198) + ha-color-orange-30: rgb(228, 185, 174) + ha-color-orange-40: rgb(236, 177, 151) + ha-color-orange-50: rgb(245, 169, 127) + ha-color-orange-60: rgb(203, 143, 114) + ha-color-orange-70: rgb(161, 117, 99) + ha-color-orange-80: rgb(120, 91, 86) + ha-color-orange-90: rgb(78, 65, 71) + ha-color-orange-95: rgb(57, 52, 65) + + # Red + ha-color-red-05: rgb(205, 203, 235) + ha-color-red-10: rgb(209, 196, 226) + ha-color-red-20: rgb(216, 181, 207) + ha-color-red-30: rgb(223, 165, 188) + ha-color-red-40: rgb(230, 150, 169) + ha-color-red-50: rgb(237, 135, 150) + ha-color-red-60: rgb(197, 116, 132) + ha-color-red-70: rgb(156, 97, 113) + ha-color-red-80: rgb(117, 77, 95) + ha-color-red-90: rgb(76, 58, 76) + ha-color-red-95: rgb(56, 49, 67) + + # Green + ha-color-green-05: rgb(198, 211, 235) + ha-color-green-10: rgb(195, 213, 226) + ha-color-green-20: rgb(187, 214, 207) + ha-color-green-30: rgb(181, 215, 187) + ha-color-green-40: rgb(173, 216, 168) + ha-color-green-50: rgb(166, 218, 149) + ha-color-green-60: rgb(140, 182, 131) + ha-color-green-70: rgb(114, 147, 112) + ha-color-green-80: rgb(88, 110, 95) + ha-color-green-90: rgb(62, 75, 76) + ha-color-green-95: rgb(49, 57, 67) + + ###################### + # HA Semantic Colors # + ###################### + # List from the "semantic.globals.ts" file in home-assistant/frontend. + + ha-color-focus: var(--ha-color-orange-60) + + # Text + ha-color-text-primary: var(--catppuccin-text) + ha-color-text-secondary: var(--catppuccin-subtext1) + ha-color-text-disabled: var(--catppuccin-overlay1) + ha-color-text-link: var(--catppuccin-blue) + + # Border primary + ha-color-border-primary-quiet: var(--ha-color-primary-80) + ha-color-border-primary-normal: var(--ha-color-primary-70) + ha-color-border-primary-loud: var(--ha-color-primary-40) + + # Border neutral + ha-color-border-neutral-quiet: var(--ha-color-neutral-80) + ha-color-border-neutral-normal: var(--ha-color-neutral-60) + ha-color-border-neutral-loud: var(--ha-color-neutral-40) + + # Border danger + ha-color-border-danger-quiet: var(--ha-color-red-80) + ha-color-border-danger-normal: var(--ha-color-red-70) + ha-color-border-danger-loud: var(--ha-color-red-40) + + # Border warning + ha-color-border-warning-quiet: var(--ha-color-orange-80) + ha-color-border-warning-normal: var(--ha-color-orange-70) + ha-color-border-warning-loud: var(--ha-color-orange-40) + + # Border success + ha-color-border-success-quiet: var(--ha-color-green-80) + ha-color-border-success-normal: var(--ha-color-green-70) + ha-color-border-success-loud: var(--ha-color-green-40) + + # Fill primary quiet + ha-color-fill-primary-quiet-resting: var(--ha-color-primary-95) + ha-color-fill-primary-quiet-hover: var(--ha-color-primary-90) + ha-color-fill-primary-quiet-active: var(--ha-color-primary-95) + + # Fill primary normal + ha-color-fill-primary-normal-resting: var(--ha-color-primary-90) + ha-color-fill-primary-normal-hover: var(--ha-color-primary-80) + ha-color-fill-primary-normal-active: var(--ha-color-primary-90) + + # Fill primary loud + ha-color-fill-primary-loud-resting: var(--ha-color-primary-40) + ha-color-fill-primary-loud-hover: var(--ha-color-primary-30) + ha-color-fill-primary-loud-active: var(--ha-color-primary-40) + + # Fill neutral quiet + ha-color-fill-neutral-quiet-resting: var(--ha-color-neutral-95) + ha-color-fill-neutral-quiet-hover: var(--ha-color-neutral-90) + ha-color-fill-neutral-quiet-active: var(--ha-color-neutral-95) + + # Fill neutral normal + ha-color-fill-neutral-normal-resting: var(--ha-color-neutral-90) + ha-color-fill-neutral-normal-hover: var(--ha-color-neutral-80) + ha-color-fill-neutral-normal-active: var(--ha-color-neutral-90) + + # Fill neutral loud + ha-color-fill-neutral-loud-resting: var(--ha-color-neutral-40) + ha-color-fill-neutral-loud-hover: var(--ha-color-neutral-30) + ha-color-fill-neutral-loud-active: var(--ha-color-neutral-40) + + # Fill disabled quiet + ha-color-fill-disabled-quiet-resting: var(--ha-color-neutral-95) + + # Fill disabled normal + ha-color-fill-disabled-normal-resting: var(--ha-color-neutral-95) + + # Fill disabled loud + ha-color-fill-disabled-loud-resting: var(--ha-color-neutral-80) + + # Fill danger quiet + ha-color-fill-danger-quiet-resting: var(--ha-color-red-95) + ha-color-fill-danger-quiet-hover: var(--ha-color-red-90) + ha-color-fill-danger-quiet-active: var(--ha-color-red-95) + + # Fill danger normal + ha-color-fill-danger-normal-resting: var(--ha-color-red-90) + ha-color-fill-danger-normal-hover: var(--ha-color-red-80) + ha-color-fill-danger-normal-active: var(--ha-color-red-90) + + # Fill danger loud + ha-color-fill-danger-loud-resting: var(--ha-color-red-50) + ha-color-fill-danger-loud-hover: var(--ha-color-red-40) + ha-color-fill-danger-loud-active: var(--ha-color-red-50) + + # Fill warning quiet + ha-color-fill-warning-quiet-resting: var(--ha-color-orange-95) + ha-color-fill-warning-quiet-hover: var(--ha-color-orange-90) + ha-color-fill-warning-quiet-active: var(--ha-color-orange-95) + + # Fill warning normal + ha-color-fill-warning-normal-resting: var(--ha-color-orange-90) + ha-color-fill-warning-normal-hover: var(--ha-color-orange-80) + ha-color-fill-warning-normal-active: var(--ha-color-orange-90) + + # Fill warning loud + ha-color-fill-warning-loud-resting: var(--ha-color-orange-70) + ha-color-fill-warning-loud-hover: var(--ha-color-orange-50) + ha-color-fill-warning-loud-active: var(--ha-color-orange-70) + + # Fill success quiet + ha-color-fill-success-quiet-resting: var(--ha-color-green-95) + ha-color-fill-success-quiet-hover: var(--ha-color-green-90) + ha-color-fill-success-quiet-active: var(--ha-color-green-95) + + # Fill success normal + ha-color-fill-success-normal-resting: var(--ha-color-green-90) + ha-color-fill-success-normal-hover: var(--ha-color-green-80) + ha-color-fill-success-normal-active: var(--ha-color-green-90) + + # Fill success loud + ha-color-fill-success-loud-resting: var(--ha-color-green-50) + ha-color-fill-success-loud-hover: var(--ha-color-green-40) + ha-color-fill-success-loud-active: var(--ha-color-green-50) + + # On primary + ha-color-on-primary-quiet: var(--ha-color-primary-50) + ha-color-on-primary-normal: var(--ha-color-primary-40) + ha-color-on-primary-loud: var(--white-color) + + # On neutral + ha-color-on-neutral-quiet: var(--ha-color-neutral-50) + ha-color-on-neutral-normal: var(--ha-color-neutral-40) + ha-color-on-neutral-loud: var(--white-color) + + # On disabled + ha-color-on-disabled-quiet: var(--ha-color-neutral-80) + ha-color-on-disabled-normal: var(--ha-color-neutral-70) + ha-color-on-disabled-loud: var(--ha-color-neutral-95) + + # On danger + ha-color-on-danger-quiet: var(--ha-color-red-50) + ha-color-on-danger-normal: var(--ha-color-red-40) + ha-color-on-danger-loud: var(--white-color) + + # On warning + ha-color-on-warning-quiet: var(--ha-color-orange-50) + ha-color-on-warning-normal: var(--ha-color-orange-40) + ha-color-on-warning-loud: var(--white-color) + + # On success + ha-color-on-success-quiet: var(--ha-color-green-50) + ha-color-on-success-normal: var(--ha-color-green-40) + ha-color-on-success-loud: var(--white-color) + + ################### + # HA Other Colors # + ################### + # List from the "color.globals.ts" file in home-assistant/frontend. + + # Text + primary-text-color: var(--ha-color-text-primary) + secondary-text-color: var(--ha-color-text-secondary) + text-primary-color: var(--catppuccin-crust) + text-light-primary-color: var(--catppuccin-crust) + disabled-text-color: var(--catppuccin-overlay1) + + # Main interface colors + # primary-color: var(--ha-color-primary-40) + dark-primary-color: var(--ha-color-primary-30) + darker-primary-color: var(--ha-color-primary-20) + light-primary-color: var(--ha-color-primary-50) + accent-color: var(--primary-color) + divider-color: rgba(var(--catppuccin-overlay1-rgb), 0.15) + outline-color: var(--catppuccin-crust) + outline-hover-color: var(--catppuccin-surface2) + + # RGB + rgb-primary-color: var(--catppuccin-mauve-rgb) + rgb-accent-color: var(--catppuccin-mauve-rgb) + rgb-primary-text-color: var(--catppuccin-text-rgb) + rgb-secondary-text-color: var(--catppuccin-subtext1-rgb) + rgb-text-primary-color: var(--catppuccin-text-rgb) + rgb-card-background-color: var(--catppuccin-base-rgb) + + rgb-warning-color: var(--catppuccin-yellow-rgb) + rgb-error-color: var(--catppuccin-red-rgb) + rgb-success-color: var(--catppuccin-green-rgb) + rgb-info-color: var(--catppuccin-blue-rgb) + + scrollbar-thumb-color: var(--primary-color) + + error-color: var(--catppuccin-red) + warning-color: var(--catppuccin-yellow) + success-color: var(--catppuccin-green) + info-color: var(--catppuccin-blue) + + # Backgrounds + card-background-color: var(--catppuccin-base) + primary-background-color: var(--catppuccin-mantle) + secondary-background-color: var(--catppuccin-mantle) + clear-background-color: var(--card-background-color) + + # For label-badge + label-badge-grey: var(--secondary-text-color) + + # States icon + state-icon-color: var(--primary-color) + + # Energy + energy-grid-consumption-color: var(--catppuccin-lavender) + energy-grid-return-color: var(--catppuccin-mauve) + energy-solar-color: var(--catppuccin-yellow) + energy-non-fossil-color: var(--catppuccin-green) + energy-battery-out-color: var(--catppuccin-teal) + energy-battery-in-color: var(--catppuccin-pink) + energy-gas-color: var(--catppuccin-red) + energy-water-color: var(--catppuccin-sky) + + # Color + disabled-color: var(--catppuccin-overlay1) + red-color: var(--catppuccin-red) + pink-color: var(--catppuccin-pink) + purple-color: var(--catppuccin-mauve) + deep-purple-color: var(--catppuccin-mauve) + indigo-color: var(--catppuccin-lavender) + blue-color: var(--catppuccin-blue) + light-blue-color: var(--catppuccin-sky) + cyan-color: var(--catppuccin-teal) + teal-color: var(--catppuccin-teal) + green-color: var(--catppuccin-green) + light-green-color: var(--catppuccin-green) + lime-color: var(--catppuccin-green) + yellow-color: var(--catppuccin-yellow) + amber-color: var(--catppuccin-yellow) + orange-color: var(--catppuccin-peach) + deep-orange-color: var(--catppuccin-maroon) + brown-color: var(--catppuccin-flamingo) + light-grey-color: var(--catppuccin-surface0) + grey-color: var(--catppuccin-surface2) + dark-grey-color: var(--catppuccin-overlay1) + blue-grey-color: var(--dark-grey-color) + black-color: var(--catppuccin-text) + white-color: var(--catppuccin-crust) + + # Input components + input-idle-line-color: var(--primary-text-color) + input-hover-line-color: var(--accent-color) + input-disabled-line-color: var(--disabled-text-color) + input-outlined-idle-border-color: var(--disabled-text-color) + input-outlined-hover-border-color: var(--disabled-text-color) + input-outlined-disabled-border-color: var(--disabled-text-color) + input-fill-color: var(--primary-background-color) + input-disabled-fill-color: var(--catppuccin-surface1) + input-ink-color: var(--primary-text-color) + input-label-ink-color: var(--secondary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--secondary-text-color) + + # State color + state-active-color: var(--catppuccin-mauve) + + sidebar-background-color: var(--catppuccin-crust) + switch-unchecked-color: var(--catppuccin-overlay0) + switch-unchecked-button-color: var(--switch-unchecked-color) + switch-unchecked-track-color: var(--switch-unchecked-color) + + app-header-text-color: var(--primary-text-color) + app-header-background-color: var(--catppuccin-crust) + + # Codemirror + codemirror-keyword: var(--catppuccin-mauve) + codemirror-operator: var(--catppuccin-sky) + codemirror-variable: var(--catppuccin-blue) # Functions + codemirror-variable-2: var(--catppuccin-text) # "Special variable"s + codemirror-variable-3: var(--catppuccin-text) # Currently unused + codemirror-builtin: var(--catppuccin-red) + codemirror-atom: var(--catppuccin-red) + codemirror-number: var(--catppuccin-peach) + codemirror-def: var(--catppuccin-text) + codemirror-string: var(--catppuccin-green) + codemirror-string-2: var(--catppuccin-green) # Currently unused + codemirror-comment: var(--catppuccin-overlay2) + codemirror-tag: var(--catppuccin-blue) # Currently unused + codemirror-meta: var(--catppuccin-overlay2) + codemirror-attribute: var(--catppuccin-yellow) + codemirror-property: var(--catppuccin-blue) + codemirror-qualifier: var(--catppuccin-peach) + codemirror-type: var(--catppuccin-yellow) # Currently unused + + ################ + # Other colors # + ################ + # These colors are respected by Home Assistant (currently), but aren't + # defined directly in the main theme. + text-accent-color: var(--catppuccin-crust) + md-slider-inactive-track-color: var(--catppuccin-overlay0) + app-header-edit-background-color: var(--catppuccin-surface2) + app-header-edit-text-color: var(--primary-text-color) + + mdc-ripple-color: "#aaaaaa" + mdc-linear-progress-buffer-color: "#f00" + + ########## + # Graphs # + ########## + graph-color-1: var(--catppuccin-mauve) + graph-color-2: var(--catppuccin-green) + graph-color-3: var(--catppuccin-red) + graph-color-4: var(--catppuccin-blue) + graph-color-5: var(--catppuccin-pink) + graph-color-6: var(--catppuccin-yellow) + graph-color-7: var(--catppuccin-sky) + graph-color-8: var(--catppuccin-maroon) + graph-color-9: var(--catppuccin-lavender) + graph-color-10: var(--catppuccin-peach) + graph-color-11: var(--catppuccin-teal) + graph-color-12: var(--catppuccin-rosewater) + graph-color-13: var(--catppuccin-sapphire) + graph-color-14: var(--catppuccin-flamingo) +Catppuccin Mocha: + modes: + dark: &mocha + ##################### + # Catppuccin Colors # + ##################### + catppuccin-rosewater: "#f5e0dc" + catppuccin-rosewater-rgb: 245, 224, 220 + catppuccin-flamingo: "#f2cdcd" + catppuccin-flamingo-rgb: 242, 205, 205 + catppuccin-pink: "#f5c2e7" + catppuccin-pink-rgb: 245, 194, 231 + catppuccin-mauve: "#cba6f7" + catppuccin-mauve-rgb: 203, 166, 247 + catppuccin-red: "#f38ba8" + catppuccin-red-rgb: 243, 139, 168 + catppuccin-maroon: "#eba0ac" + catppuccin-maroon-rgb: 235, 160, 172 + catppuccin-peach: "#fab387" + catppuccin-peach-rgb: 250, 179, 135 + catppuccin-yellow: "#f9e2af" + catppuccin-yellow-rgb: 249, 226, 175 + catppuccin-green: "#a6e3a1" + catppuccin-green-rgb: 166, 227, 161 + catppuccin-teal: "#94e2d5" + catppuccin-teal-rgb: 148, 226, 213 + catppuccin-sky: "#89dceb" + catppuccin-sky-rgb: 137, 220, 235 + catppuccin-sapphire: "#74c7ec" + catppuccin-sapphire-rgb: 116, 199, 236 + catppuccin-blue: "#89b4fa" + catppuccin-blue-rgb: 137, 180, 250 + catppuccin-lavender: "#b4befe" + catppuccin-lavender-rgb: 180, 190, 254 + catppuccin-text: "#cdd6f4" + catppuccin-text-rgb: 205, 214, 244 + catppuccin-subtext1: "#bac2de" + catppuccin-subtext1-rgb: 186, 194, 222 + catppuccin-subtext0: "#a6adc8" + catppuccin-subtext0-rgb: 166, 173, 200 + catppuccin-overlay2: "#9399b2" + catppuccin-overlay2-rgb: 147, 153, 178 + catppuccin-overlay1: "#7f849c" + catppuccin-overlay1-rgb: 127, 132, 156 + catppuccin-overlay0: "#6c7086" + catppuccin-overlay0-rgb: 108, 112, 134 + catppuccin-surface2: "#585b70" + catppuccin-surface2-rgb: 88, 91, 112 + catppuccin-surface1: "#45475a" + catppuccin-surface1-rgb: 69, 71, 90 + catppuccin-surface0: "#313244" + catppuccin-surface0-rgb: 49, 50, 68 + catppuccin-base: "#1e1e2e" + catppuccin-base-rgb: 30, 30, 46 + catppuccin-mantle: "#181825" + catppuccin-mantle-rgb: 24, 24, 37 + catppuccin-crust: "#11111b" + catppuccin-crust-rgb: 17, 17, 27 + + ################################ + # Home Assistant color palette # + ################################ + # List from the "core.globals.ts" file in home-assistant/frontend. + # TODO: Update these once Whiskers has variant (tint / shade) support. + + # Primary + # NOTE: This centers around `primary-40` rather than `primary-50` because + # HA uses `-40` as the default brand color for some reason. + ha-color-primary-05: rgb(204, 207, 244) + ha-color-primary-10: rgb(205, 202, 245) + ha-color-primary-20: rgb(204, 190, 246) + ha-color-primary-30: rgb(203, 178, 246) + ha-color-primary-40: rgb(203, 166, 247) + ha-color-primary-50: rgb(174, 143, 213) + ha-color-primary-60: rgb(146, 121, 181) + ha-color-primary-70: rgb(118, 100, 149) + ha-color-primary-80: rgb(87, 75, 112) + ha-color-primary-90: rgb(59, 53, 80) + ha-color-primary-95: rgb(44, 41, 61) + + # Neutral + ha-color-neutral-05: rgb(197, 205, 234) + ha-color-neutral-10: rgb(187, 195, 224) + ha-color-neutral-20: rgb(170, 177, 204) + ha-color-neutral-30: rgb(152, 158, 184) + ha-color-neutral-40: rgb(135, 140, 164) + ha-color-neutral-50: rgb(117, 122, 145) + ha-color-neutral-60: rgb(100, 104, 126) + ha-color-neutral-70: rgb(82, 85, 105) + ha-color-neutral-80: rgb(65, 67, 86) + ha-color-neutral-90: rgb(47, 48, 65) + ha-color-neutral-95: rgb(38, 39, 56) + + # Orange + ha-color-orange-05: rgb(209, 210, 233) + ha-color-orange-10: rgb(214, 207, 222) + ha-color-orange-20: rgb(223, 200, 200) + ha-color-orange-30: rgb(232, 193, 179) + ha-color-orange-40: rgb(241, 186, 157) + ha-color-orange-50: rgb(250, 179, 135) + ha-color-orange-60: rgb(206, 149, 117) + ha-color-orange-70: rgb(162, 119, 99) + ha-color-orange-80: rgb(118, 90, 82) + ha-color-orange-90: rgb(74, 60, 64) + ha-color-orange-95: rgb(52, 45, 55) + + # Red + ha-color-red-05: rgb(209, 206, 236) + ha-color-red-10: rgb(213, 199, 229) + ha-color-red-20: rgb(220, 184, 213) + ha-color-red-30: rgb(228, 169, 199) + ha-color-red-40: rgb(235, 154, 183) + ha-color-red-50: rgb(243, 139, 168) + ha-color-red-60: rgb(200, 117, 143) + ha-color-red-70: rgb(158, 95, 119) + ha-color-red-80: rgb(115, 74, 95) + ha-color-red-90: rgb(73, 52, 71) + ha-color-red-95: rgb(52, 41, 58) + + # Green + ha-color-green-05: rgb(201, 215, 235) + ha-color-green-10: rgb(197, 216, 227) + ha-color-green-20: rgb(189, 219, 210) + ha-color-green-30: rgb(182, 222, 195) + ha-color-green-40: rgb(174, 225, 178) + ha-color-green-50: rgb(166, 227, 161) + ha-color-green-60: rgb(139, 188, 138) + ha-color-green-70: rgb(112, 148, 115) + ha-color-green-80: rgb(84, 109, 92) + ha-color-green-90: rgb(57, 69, 69) + ha-color-green-95: rgb(44, 50, 57) + + ###################### + # HA Semantic Colors # + ###################### + # List from the "semantic.globals.ts" file in home-assistant/frontend. + + ha-color-focus: var(--ha-color-orange-60) + + # Text + ha-color-text-primary: var(--catppuccin-text) + ha-color-text-secondary: var(--catppuccin-subtext1) + ha-color-text-disabled: var(--catppuccin-overlay1) + ha-color-text-link: var(--catppuccin-blue) + + # Border primary + ha-color-border-primary-quiet: var(--ha-color-primary-80) + ha-color-border-primary-normal: var(--ha-color-primary-70) + ha-color-border-primary-loud: var(--ha-color-primary-40) + + # Border neutral + ha-color-border-neutral-quiet: var(--ha-color-neutral-80) + ha-color-border-neutral-normal: var(--ha-color-neutral-60) + ha-color-border-neutral-loud: var(--ha-color-neutral-40) + + # Border danger + ha-color-border-danger-quiet: var(--ha-color-red-80) + ha-color-border-danger-normal: var(--ha-color-red-70) + ha-color-border-danger-loud: var(--ha-color-red-40) + + # Border warning + ha-color-border-warning-quiet: var(--ha-color-orange-80) + ha-color-border-warning-normal: var(--ha-color-orange-70) + ha-color-border-warning-loud: var(--ha-color-orange-40) + + # Border success + ha-color-border-success-quiet: var(--ha-color-green-80) + ha-color-border-success-normal: var(--ha-color-green-70) + ha-color-border-success-loud: var(--ha-color-green-40) + + # Fill primary quiet + ha-color-fill-primary-quiet-resting: var(--ha-color-primary-95) + ha-color-fill-primary-quiet-hover: var(--ha-color-primary-90) + ha-color-fill-primary-quiet-active: var(--ha-color-primary-95) + + # Fill primary normal + ha-color-fill-primary-normal-resting: var(--ha-color-primary-90) + ha-color-fill-primary-normal-hover: var(--ha-color-primary-80) + ha-color-fill-primary-normal-active: var(--ha-color-primary-90) + + # Fill primary loud + ha-color-fill-primary-loud-resting: var(--ha-color-primary-40) + ha-color-fill-primary-loud-hover: var(--ha-color-primary-30) + ha-color-fill-primary-loud-active: var(--ha-color-primary-40) + + # Fill neutral quiet + ha-color-fill-neutral-quiet-resting: var(--ha-color-neutral-95) + ha-color-fill-neutral-quiet-hover: var(--ha-color-neutral-90) + ha-color-fill-neutral-quiet-active: var(--ha-color-neutral-95) + + # Fill neutral normal + ha-color-fill-neutral-normal-resting: var(--ha-color-neutral-90) + ha-color-fill-neutral-normal-hover: var(--ha-color-neutral-80) + ha-color-fill-neutral-normal-active: var(--ha-color-neutral-90) + + # Fill neutral loud + ha-color-fill-neutral-loud-resting: var(--ha-color-neutral-40) + ha-color-fill-neutral-loud-hover: var(--ha-color-neutral-30) + ha-color-fill-neutral-loud-active: var(--ha-color-neutral-40) + + # Fill disabled quiet + ha-color-fill-disabled-quiet-resting: var(--ha-color-neutral-95) + + # Fill disabled normal + ha-color-fill-disabled-normal-resting: var(--ha-color-neutral-95) + + # Fill disabled loud + ha-color-fill-disabled-loud-resting: var(--ha-color-neutral-80) + + # Fill danger quiet + ha-color-fill-danger-quiet-resting: var(--ha-color-red-95) + ha-color-fill-danger-quiet-hover: var(--ha-color-red-90) + ha-color-fill-danger-quiet-active: var(--ha-color-red-95) + + # Fill danger normal + ha-color-fill-danger-normal-resting: var(--ha-color-red-90) + ha-color-fill-danger-normal-hover: var(--ha-color-red-80) + ha-color-fill-danger-normal-active: var(--ha-color-red-90) + + # Fill danger loud + ha-color-fill-danger-loud-resting: var(--ha-color-red-50) + ha-color-fill-danger-loud-hover: var(--ha-color-red-40) + ha-color-fill-danger-loud-active: var(--ha-color-red-50) + + # Fill warning quiet + ha-color-fill-warning-quiet-resting: var(--ha-color-orange-95) + ha-color-fill-warning-quiet-hover: var(--ha-color-orange-90) + ha-color-fill-warning-quiet-active: var(--ha-color-orange-95) + + # Fill warning normal + ha-color-fill-warning-normal-resting: var(--ha-color-orange-90) + ha-color-fill-warning-normal-hover: var(--ha-color-orange-80) + ha-color-fill-warning-normal-active: var(--ha-color-orange-90) + + # Fill warning loud + ha-color-fill-warning-loud-resting: var(--ha-color-orange-70) + ha-color-fill-warning-loud-hover: var(--ha-color-orange-50) + ha-color-fill-warning-loud-active: var(--ha-color-orange-70) + + # Fill success quiet + ha-color-fill-success-quiet-resting: var(--ha-color-green-95) + ha-color-fill-success-quiet-hover: var(--ha-color-green-90) + ha-color-fill-success-quiet-active: var(--ha-color-green-95) + + # Fill success normal + ha-color-fill-success-normal-resting: var(--ha-color-green-90) + ha-color-fill-success-normal-hover: var(--ha-color-green-80) + ha-color-fill-success-normal-active: var(--ha-color-green-90) + + # Fill success loud + ha-color-fill-success-loud-resting: var(--ha-color-green-50) + ha-color-fill-success-loud-hover: var(--ha-color-green-40) + ha-color-fill-success-loud-active: var(--ha-color-green-50) + + # On primary + ha-color-on-primary-quiet: var(--ha-color-primary-50) + ha-color-on-primary-normal: var(--ha-color-primary-40) + ha-color-on-primary-loud: var(--white-color) + + # On neutral + ha-color-on-neutral-quiet: var(--ha-color-neutral-50) + ha-color-on-neutral-normal: var(--ha-color-neutral-40) + ha-color-on-neutral-loud: var(--white-color) + + # On disabled + ha-color-on-disabled-quiet: var(--ha-color-neutral-80) + ha-color-on-disabled-normal: var(--ha-color-neutral-70) + ha-color-on-disabled-loud: var(--ha-color-neutral-95) + + # On danger + ha-color-on-danger-quiet: var(--ha-color-red-50) + ha-color-on-danger-normal: var(--ha-color-red-40) + ha-color-on-danger-loud: var(--white-color) + + # On warning + ha-color-on-warning-quiet: var(--ha-color-orange-50) + ha-color-on-warning-normal: var(--ha-color-orange-40) + ha-color-on-warning-loud: var(--white-color) + + # On success + ha-color-on-success-quiet: var(--ha-color-green-50) + ha-color-on-success-normal: var(--ha-color-green-40) + ha-color-on-success-loud: var(--white-color) + + ################### + # HA Other Colors # + ################### + # List from the "color.globals.ts" file in home-assistant/frontend. + + # Text + primary-text-color: var(--ha-color-text-primary) + secondary-text-color: var(--ha-color-text-secondary) + text-primary-color: var(--catppuccin-crust) + text-light-primary-color: var(--catppuccin-crust) + disabled-text-color: var(--catppuccin-overlay1) + + # Main interface colors + # primary-color: var(--ha-color-primary-40) + dark-primary-color: var(--ha-color-primary-30) + darker-primary-color: var(--ha-color-primary-20) + light-primary-color: var(--ha-color-primary-50) + accent-color: var(--primary-color) + divider-color: rgba(var(--catppuccin-overlay1-rgb), 0.15) + outline-color: var(--catppuccin-crust) + outline-hover-color: var(--catppuccin-surface2) + + # RGB + rgb-primary-color: var(--catppuccin-mauve-rgb) + rgb-accent-color: var(--catppuccin-mauve-rgb) + rgb-primary-text-color: var(--catppuccin-text-rgb) + rgb-secondary-text-color: var(--catppuccin-subtext1-rgb) + rgb-text-primary-color: var(--catppuccin-text-rgb) + rgb-card-background-color: var(--catppuccin-base-rgb) + + rgb-warning-color: var(--catppuccin-yellow-rgb) + rgb-error-color: var(--catppuccin-red-rgb) + rgb-success-color: var(--catppuccin-green-rgb) + rgb-info-color: var(--catppuccin-blue-rgb) + + scrollbar-thumb-color: var(--primary-color) + + error-color: var(--catppuccin-red) + warning-color: var(--catppuccin-yellow) + success-color: var(--catppuccin-green) + info-color: var(--catppuccin-blue) + + # Backgrounds + card-background-color: var(--catppuccin-base) + primary-background-color: var(--catppuccin-mantle) + secondary-background-color: var(--catppuccin-mantle) + clear-background-color: var(--card-background-color) + + # For label-badge + label-badge-grey: var(--secondary-text-color) + + # States icon + state-icon-color: var(--primary-color) + + # Energy + energy-grid-consumption-color: var(--catppuccin-lavender) + energy-grid-return-color: var(--catppuccin-mauve) + energy-solar-color: var(--catppuccin-yellow) + energy-non-fossil-color: var(--catppuccin-green) + energy-battery-out-color: var(--catppuccin-teal) + energy-battery-in-color: var(--catppuccin-pink) + energy-gas-color: var(--catppuccin-red) + energy-water-color: var(--catppuccin-sky) + + # Color + disabled-color: var(--catppuccin-overlay1) + red-color: var(--catppuccin-red) + pink-color: var(--catppuccin-pink) + purple-color: var(--catppuccin-mauve) + deep-purple-color: var(--catppuccin-mauve) + indigo-color: var(--catppuccin-lavender) + blue-color: var(--catppuccin-blue) + light-blue-color: var(--catppuccin-sky) + cyan-color: var(--catppuccin-teal) + teal-color: var(--catppuccin-teal) + green-color: var(--catppuccin-green) + light-green-color: var(--catppuccin-green) + lime-color: var(--catppuccin-green) + yellow-color: var(--catppuccin-yellow) + amber-color: var(--catppuccin-yellow) + orange-color: var(--catppuccin-peach) + deep-orange-color: var(--catppuccin-maroon) + brown-color: var(--catppuccin-flamingo) + light-grey-color: var(--catppuccin-surface0) + grey-color: var(--catppuccin-surface2) + dark-grey-color: var(--catppuccin-overlay1) + blue-grey-color: var(--dark-grey-color) + black-color: var(--catppuccin-text) + white-color: var(--catppuccin-crust) + + # Input components + input-idle-line-color: var(--primary-text-color) + input-hover-line-color: var(--accent-color) + input-disabled-line-color: var(--disabled-text-color) + input-outlined-idle-border-color: var(--disabled-text-color) + input-outlined-hover-border-color: var(--disabled-text-color) + input-outlined-disabled-border-color: var(--disabled-text-color) + input-fill-color: var(--primary-background-color) + input-disabled-fill-color: var(--catppuccin-surface1) + input-ink-color: var(--primary-text-color) + input-label-ink-color: var(--secondary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--secondary-text-color) + + # State color + state-active-color: var(--catppuccin-mauve) + + sidebar-background-color: var(--catppuccin-crust) + switch-unchecked-color: var(--catppuccin-overlay0) + switch-unchecked-button-color: var(--switch-unchecked-color) + switch-unchecked-track-color: var(--switch-unchecked-color) + + app-header-text-color: var(--primary-text-color) + app-header-background-color: var(--catppuccin-crust) + + # Codemirror + codemirror-keyword: var(--catppuccin-mauve) + codemirror-operator: var(--catppuccin-sky) + codemirror-variable: var(--catppuccin-blue) # Functions + codemirror-variable-2: var(--catppuccin-text) # "Special variable"s + codemirror-variable-3: var(--catppuccin-text) # Currently unused + codemirror-builtin: var(--catppuccin-red) + codemirror-atom: var(--catppuccin-red) + codemirror-number: var(--catppuccin-peach) + codemirror-def: var(--catppuccin-text) + codemirror-string: var(--catppuccin-green) + codemirror-string-2: var(--catppuccin-green) # Currently unused + codemirror-comment: var(--catppuccin-overlay2) + codemirror-tag: var(--catppuccin-blue) # Currently unused + codemirror-meta: var(--catppuccin-overlay2) + codemirror-attribute: var(--catppuccin-yellow) + codemirror-property: var(--catppuccin-blue) + codemirror-qualifier: var(--catppuccin-peach) + codemirror-type: var(--catppuccin-yellow) # Currently unused + + ################ + # Other colors # + ################ + # These colors are respected by Home Assistant (currently), but aren't + # defined directly in the main theme. + text-accent-color: var(--catppuccin-crust) + md-slider-inactive-track-color: var(--catppuccin-overlay0) + app-header-edit-background-color: var(--catppuccin-surface2) + app-header-edit-text-color: var(--primary-text-color) + + mdc-ripple-color: "#aaaaaa" + mdc-linear-progress-buffer-color: "#f00" + + ########## + # Graphs # + ########## + graph-color-1: var(--catppuccin-mauve) + graph-color-2: var(--catppuccin-green) + graph-color-3: var(--catppuccin-red) + graph-color-4: var(--catppuccin-blue) + graph-color-5: var(--catppuccin-pink) + graph-color-6: var(--catppuccin-yellow) + graph-color-7: var(--catppuccin-sky) + graph-color-8: var(--catppuccin-maroon) + graph-color-9: var(--catppuccin-lavender) + graph-color-10: var(--catppuccin-peach) + graph-color-11: var(--catppuccin-teal) + graph-color-12: var(--catppuccin-rosewater) + graph-color-13: var(--catppuccin-sapphire) + graph-color-14: var(--catppuccin-flamingo) +Catppuccin Auto Latte Frappe: + modes: + light: *latte + dark: *frappe +Catppuccin Auto Latte Macchiato: + modes: + light: *latte + dark: *macchiato +Catppuccin Auto Latte Mocha: + modes: + light: *latte + dark: *mocha diff --git a/themes/rose-pine-moon/rose-pine-moon.yaml b/themes/rose-pine-moon/rose-pine-moon.yaml new file mode 100644 index 0000000..0c940b8 --- /dev/null +++ b/themes/rose-pine-moon/rose-pine-moon.yaml @@ -0,0 +1,248 @@ +Rosé Pine Moon: + modes: + dark: + # Header: + app-header-background-color: rgb(35, 33, 54) + app-header-text-color: var(--primary-text-color) + app-header-selection-bar-color: var(--primary-color) + # Main Interface Colors + primary-color: rgb(235, 111, 146) + lovelace-background: rgb(42, 39, 63) + primary-background-color: rgb(42, 39, 63) + secondary-background-color: rgb(35, 33, 54) + divider-color: rgb(57, 53, 82) + accent-color: var(--primary-color) + # Text + primary-text-color: rgb(224, 222, 244) + secondary-text-color: rgb(144, 140, 170) + text-primary-color: var(--primary-text-color) + disabled-text-color: rgb(110, 106, 134) + # Sidebar Menu + sidebar-icon-color: rgb(144, 140, 170) + sidebar-text-color: rgb(224, 222, 244) + sidebar-background-color: var(--app-header-background-color) + sidebar-selected-icon-color: var(--primary-color) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # Buttons + paper-item-icon-color: rgb(144, 140, 170) + paper-item-icon-active-color: var(--primary-color) + # States and Badges + state-icon-color: var(--paper-item-icon-color) + state-icon-active-color: var(--paper-item-icon-active-color) + state-icon-unavailable-color: rgb(110, 106, 134) + # Sliders + paper-slider-knob-color: rgb(144, 140, 170) + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-active-color) + paper-slider-active-color: rgb(246, 193, 119) + paper-slider-secondary-color: var(--paper-slider-active-color) + slider-track-color: rgb(85 85 87) + # Labels + label-badge-background-color: var(--secondary-background-color) + label-badge-text-color: var(--primary-text-color) + label-badge-red: rgb(235, 111, 146) + label-badge-green: rgb(156, 207, 216) + label-badge-blue: rgb(62, 143, 176) + label-badge-yellow: rgb(246, 193, 119) + label-badge-gray: rgb(68, 65, 90) + # Cards + card-background-color: rgb(57, 53, 82) + ha-card-background: rgb(57, 53, 82) + ha-card-border-color: none + ha-card-border-width: 0px + paper-dialog-background-color: var(--card-background-color) + paper-listbox-background-color: var(--card-background-color) + paper-card-background-color: var(--card-background-color) + # Switches + switch-checked-button-color: rgb(144, 140, 170) + switch-checked-track-color: rgb(62, 143, 176) + switch-unchecked-button-color: var(--switch-checked-button-color) + switch-unchecked-track-color: rgb(57, 53, 82) + # Toggles + paper-toggle-button-checked-button-color: var(--switch-checked-button-color) + paper-toggle-button-checked-bar-color: var(--switch-checked-track-color) + paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color) + paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color) + # Table + table-row-background-color: rgb(68, 65, 90) + table-row-alternative-background-color: rgb(86, 82, 110) + data-table-background-color: rgb(42, 40, 62) + # Dropdowns + material-background-color: var(--table-row-background-color) + material-secondary-background-color: var(--table-row-alternative-background-color) + mdc-theme-surface: var(--secondary-background-color) + # Pre/Code + markdown-code-background-color: rgb(86, 82, 110) + # Checkboxes + mdc-checkbox-unchecked-color: rgb(144, 140, 170) + mdc-checkbox-disable-color: var(--disabled-text-color) + mdc-select-fill-color: rgb(42, 40, 62) + mdc-select-ink-color: var(--primary-text-color) + mdc-select-label-ink-color: var(--secondary-text-color) + mdc-select-idle-line-color: var(--primary-text-color) + mdc-select-dropdown-icon-color: rgb(144, 140, 170) + mdc-select-hover-line-color: var(--accent-color) + mdc-text-field-fill-color: var(--mdc-select-fill-color) + # Input + input-fill-color: var(--secondary-background-color) + input-dropdown-icon-color: var(--secondary-text-color) + input-ink-color: var(--primary-text-color) + input-label-ink-color: var(--secondary-text-color) + input-idle-line-color: var(--primary-text-color) + input-hover-line-color: var(--accent-color) + # Error, Warning, Success and Info colors + error-color: rgb(235, 111, 146) + warning-color: rgb(246, 193, 119) + sucess-color: rgb(62, 143, 176) + info-color: rgb(234, 154, 151) + # Progress bar + ha-bar-background-color: var(--slider-track-color) + # Mushroom Custom cards + mush-rgb-state-entity: 156, 207, 216 + mush-rgb-green: 62, 143, 176 + mush-rgb-yellow: 246, 193, 119 + mush-rgb-orange: 234, 154, 151 + mush-rgb-cyan: 156, 207, 216 + mush-rgb-purple: 196, 167, 231 + mush-rgb-pink: 235, 111, 146 + mush-rgb-red: 235, 111, 146 + mush-rgb-gray: 68, 65, 90 + mush-rgb-disabled: 110, 106, 134 + mush-icon-border-radius: 25% + mush-rgb-state-media-player: 156, 207, 216 + #RGB + rgb-primary-text-color: 224, 222, 244 + rgb-primary-color: 224, 222, 244 + rgb-accent-color: 156, 207, 216 + rgb-state-switch-color: var(--rgb-accent-color) + rgb-state-light-color: var(--rgb-accent-color) + rgb-state-fan-color: var(--rgb-accent-color) + rgb-state-script-color: var(--rgb-accent-color) + rgb-state-vacuum-color: var(--rgb-accent-color) + rgb-state-remote-color: var(--rgb-accent-color) + rgb-state-input-boolean-color: var(--rgb-accent-color) + rgb-state-humidifier-color: var(--rgb-accent-color) + rgb-state-cover-color: var(--rgb-accent-color) + light: + # Header: + app-header-background-color: rgb(250, 244, 237) + app-header-text-color: var(--primary-text-color) + app-header-selection-bar-color: var(--primary-color) + # Main Interface Colors + primary-color: rgb(180, 99, 122) + lovelace-background: rgb(255, 250, 243) + primary-background-color: rgb(255, 250, 243) + secondary-background-color: rgb(250, 244, 237) + divider-color: rgb(242, 233, 222) + accent-color: var(--primary-color) + # Text + primary-text-color: rgb(87, 82, 121) + secondary-text-color: rgb(121, 117, 147) + text-primary-color: var(--primary-text-color) + disabled-text-color: rgb(152, 147, 165) + # Sidebar Menu + sidebar-icon-color: rgb(121, 117, 147) + sidebar-text-color: rgb(87, 82, 121) + sidebar-background-color: var(--app-header-background-color) + sidebar-selected-icon-color: var(--primary-color) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # Buttons + paper-item-icon-color: rgb(121, 117, 147) + paper-item-icon-active-color: var(--primary-color) + # States and Badges + state-icon-color: var(--paper-item-icon-color) + state-icon-active-color: var(--paper-item-icon-active-color) + state-icon-unavailable-color: rgb(152, 147, 165) + # Sliders + paper-slider-knob-color: rgb(121, 117, 147) + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-active-color) + paper-slider-active-color: rgb(234, 157, 52) + paper-slider-secondary-color: var(--paper-slider-active-color) + slider-track-color: rgb(85 85 87) + # Labels + label-badge-background-color: var(--secondary-background-color) + label-badge-text-color: var(--primary-text-color) + label-badge-red: rgb(180, 99, 122) + label-badge-green: rgb(86, 148, 159) + label-badge-blue: rgb(40, 105, 131) + label-badge-yellow: rgb(234, 157, 52) + label-badge-gray: rgb(223, 218, 217) + # Cards + card-background-color: rgb(242, 233, 222) + ha-card-background: rgb(242, 233, 222) + ha-card-border-color: none + ha-card-border-width: 0px + paper-dialog-background-color: var(--card-background-color) + paper-listbox-background-color: var(--card-background-color) + paper-card-background-color: var(--card-background-color) + # Switches + switch-checked-button-color: rgb(121, 117, 147) + switch-checked-track-color: rgb(40, 105, 131) + switch-unchecked-button-color: var(--switch-checked-button-color) + switch-unchecked-track-color: rgb(242, 233, 222) + # Toggles + paper-toggle-button-checked-button-color: var(--switch-checked-button-color) + paper-toggle-button-checked-bar-color: var(--switch-checked-track-color) + paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color) + paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color) + # Table + table-row-background-color: rgb(223, 218, 217) + table-row-alternative-background-color: rgb(206, 202, 205) + data-table-background-color: rgb(244, 237, 232) + # Dropdowns + material-background-color: var(--table-row-background-color) + material-secondary-background-color: var(--table-row-alternative-background-color) + mdc-theme-surface: var(--secondary-background-color) + # Pre/Code + markdown-code-background-color: rgb(206, 202, 205) + # Checkboxes + mdc-checkbox-unchecked-color: rgb(121, 117, 147) + mdc-checkbox-disable-color: var(--disabled-text-color) + mdc-select-fill-color: rgb(244, 237, 232) + mdc-select-ink-color: var(--primary-text-color) + mdc-select-label-ink-color: var(--secondary-text-color) + mdc-select-idle-line-color: var(--primary-text-color) + mdc-select-dropdown-icon-color: rgb(121, 117, 147) + mdc-select-hover-line-color: var(--accent-color) + mdc-text-field-fill-color: var(--mdc-select-fill-color) + # Input + input-fill-color: var(--secondary-background-color) + input-dropdown-icon-color: var(--secondary-text-color) + input-ink-color: var(--primary-text-color) + input-label-ink-color: var(--secondary-text-color) + input-idle-line-color: var(--primary-text-color) + input-hover-line-color: var(--accent-color) + # Error, Warning, Success and Info colors + error-color: rgb(180, 99, 122) + warning-color: rgb(234, 157, 52) + sucess-color: rgb(40, 105, 131) + info-color: rgb(215, 130, 126) + # Progress bar + ha-bar-background-color: var(--slider-track-color) + # Mushroom Custom cards + mush-rgb-state-entity: 86, 148, 159 + mush-rgb-green: 40, 105, 131 + mush-rgb-yellow: 234, 157, 52 + mush-rgb-orange: 215, 130, 126 + mush-rgb-cyan: 86, 148, 159 + mush-rgb-purple: 144, 122, 169 + mush-rgb-pink: 180, 99, 122 + mush-rgb-red: 180, 99, 122 + mush-rgb-gray: 223, 218, 217 + mush-rgb-disabled: 152, 147, 165 + mush-icon-border-radius: 25% + mush-rgb-state-media-player: 86, 148, 159 + #RGB + rgb-primary-text-color: 87, 82, 121 + rgb-primary-color: 87, 82, 121 + rgb-accent-color: 86, 148, 159 + rgb-state-switch-color: var(--rgb-accent-color) + rgb-state-light-color: var(--rgb-accent-color) + rgb-state-fan-color: var(--rgb-accent-color) + rgb-state-script-color: var(--rgb-accent-color) + rgb-state-vacuum-color: var(--rgb-accent-color) + rgb-state-remote-color: var(--rgb-accent-color) + rgb-state-input-boolean-color: var(--rgb-accent-color) + rgb-state-humidifier-color: var(--rgb-accent-color) + rgb-state-cover-color: var(--rgb-accent-color) \ No newline at end of file diff --git a/themes/rose-pine/rose-pine.yaml b/themes/rose-pine/rose-pine.yaml new file mode 100644 index 0000000..555638c --- /dev/null +++ b/themes/rose-pine/rose-pine.yaml @@ -0,0 +1,248 @@ +Rosé Pine: + modes: + dark: + # Header: + app-header-background-color: rgb(25, 23, 36) + app-header-text-color: var(--primary-text-color) + app-header-selection-bar-color: var(--primary-color) + # Main Interface Colors + primary-color: rgb(235, 111, 146) + lovelace-background: rgb(31, 29, 46) + primary-background-color: rgb(31, 29, 46) + secondary-background-color: rgb(25, 23, 36) + divider-color: rgb(38, 35, 58) + accent-color: var(--primary-color) + # Text + primary-text-color: rgb(224, 222, 244) + secondary-text-color: rgb(144, 140, 170) + text-primary-color: var(--primary-text-color) + disabled-text-color: rgb(110, 106, 134) + # Sidebar Menu + sidebar-icon-color: rgb(144, 140, 170) + sidebar-text-color: rgb(224, 222, 244) + sidebar-background-color: var(--app-header-background-color) + sidebar-selected-icon-color: var(--primary-color) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # Buttons + paper-item-icon-color: rgb(144, 140, 170) + paper-item-icon-active-color: var(--primary-color) + # States and Badges + state-icon-color: var(--paper-item-icon-color) + state-icon-active-color: var(--paper-item-icon-active-color) + state-icon-unavailable-color: rgb(110, 106, 134) + # Sliders + paper-slider-knob-color: rgb(144, 140, 170) + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-active-color) + paper-slider-active-color: rgb(246, 193, 119) + paper-slider-secondary-color: var(--paper-slider-active-color) + slider-track-color: rgb(85 85 87) + # Labels + label-badge-background-color: var(--secondary-background-color) + label-badge-text-color: var(--primary-text-color) + label-badge-red: rgb(235, 111, 146) + label-badge-green: rgb(156, 207, 216) + label-badge-blue: rgb(49, 116, 143) + label-badge-yellow: rgb(246, 193, 119) + label-badge-gray: rgb(64, 61, 82) + # Cards + card-background-color: rgb(38, 35, 58) + ha-card-background: rgb(38, 35, 58) + ha-card-border-color: none + ha-card-border-width: 0px + paper-dialog-background-color: var(--card-background-color) + paper-listbox-background-color: var(--card-background-color) + paper-card-background-color: var(--card-background-color) + # Switches + switch-checked-button-color: rgb(144, 140, 170) + switch-checked-track-color: rgb(49, 116, 143) + switch-unchecked-button-color: var(--switch-checked-button-color) + switch-unchecked-track-color: rgb(38, 35, 58) + # Toggles + paper-toggle-button-checked-button-color: var(--switch-checked-button-color) + paper-toggle-button-checked-bar-color: var(--switch-checked-track-color) + paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color) + paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color) + # Table + table-row-background-color: rgb(64, 61, 82) + table-row-alternative-background-color: rgb(82, 79, 103) + data-table-background-color: rgb(33, 32, 46) + # Dropdowns + material-background-color: var(--table-row-background-color) + material-secondary-background-color: var(--table-row-alternative-background-color) + mdc-theme-surface: var(--secondary-background-color) + # Pre/Code + markdown-code-background-color: rgb(82, 79, 103) + # Checkboxes + mdc-checkbox-unchecked-color: rgb(144, 140, 170) + mdc-checkbox-disable-color: var(--disabled-text-color) + mdc-select-fill-color: rgb(33, 32, 46) + mdc-select-ink-color: var(--primary-text-color) + mdc-select-label-ink-color: var(--secondary-text-color) + mdc-select-idle-line-color: var(--primary-text-color) + mdc-select-dropdown-icon-color: rgb(144, 140, 170) + mdc-select-hover-line-color: var(--accent-color) + mdc-text-field-fill-color: var(--mdc-select-fill-color) + # Input + input-fill-color: var(--secondary-background-color) + input-dropdown-icon-color: var(--secondary-text-color) + input-ink-color: var(--primary-text-color) + input-label-ink-color: var(--secondary-text-color) + input-idle-line-color: var(--primary-text-color) + input-hover-line-color: var(--accent-color) + # Error, Warning, Success and Info colors + error-color: rgb(235, 111, 146) + warning-color: rgb(246, 193, 119) + sucess-color: rgb(49, 116, 143) + info-color: rgb(235, 188, 186) + # Progress bar + ha-bar-background-color: var(--slider-track-color) + # Mushroom Custom cards + mush-rgb-state-entity: 156, 207, 216 + mush-rgb-green: 49, 116, 143 + mush-rgb-yellow: 246, 193, 119 + mush-rgb-orange: 235, 188, 186 + mush-rgb-cyan: 156, 207, 216 + mush-rgb-purple: 196, 167, 231 + mush-rgb-pink: 235, 111, 146 + mush-rgb-red: 235, 111, 146 + mush-rgb-gray: 64, 61, 82 + mush-rgb-disabled: 110, 106, 134 + mush-icon-border-radius: 25% + mush-rgb-state-media-player: 156, 207, 216 + #RGB + rgb-primary-text-color: 224, 222, 244 + rgb-primary-color: 224, 222, 244 + rgb-accent-color: 156, 207, 216 + rgb-state-switch-color: var(--rgb-accent-color) + rgb-state-light-color: var(--rgb-accent-color) + rgb-state-fan-color: var(--rgb-accent-color) + rgb-state-script-color: var(--rgb-accent-color) + rgb-state-vacuum-color: var(--rgb-accent-color) + rgb-state-remote-color: var(--rgb-accent-color) + rgb-state-input-boolean-color: var(--rgb-accent-color) + rgb-state-humidifier-color: var(--rgb-accent-color) + rgb-state-cover-color: var(--rgb-accent-color) + light: + # Header: + app-header-background-color: rgb(250, 244, 237) + app-header-text-color: var(--primary-text-color) + app-header-selection-bar-color: var(--primary-color) + # Main Interface Colors + primary-color: rgb(180, 99, 122) + lovelace-background: rgb(255, 250, 243) + primary-background-color: rgb(255, 250, 243) + secondary-background-color: rgb(250, 244, 237) + divider-color: rgb(242, 233, 222) + accent-color: var(--primary-color) + # Text + primary-text-color: rgb(87, 82, 121) + secondary-text-color: rgb(121, 117, 147) + text-primary-color: var(--primary-text-color) + disabled-text-color: rgb(152, 147, 165) + # Sidebar Menu + sidebar-icon-color: rgb(121, 117, 147) + sidebar-text-color: rgb(87, 82, 121) + sidebar-background-color: var(--app-header-background-color) + sidebar-selected-icon-color: var(--primary-color) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # Buttons + paper-item-icon-color: rgb(121, 117, 147) + paper-item-icon-active-color: var(--primary-color) + # States and Badges + state-icon-color: var(--paper-item-icon-color) + state-icon-active-color: var(--paper-item-icon-active-color) + state-icon-unavailable-color: rgb(152, 147, 165) + # Sliders + paper-slider-knob-color: rgb(121, 117, 147) + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-active-color) + paper-slider-active-color: rgb(234, 157, 52) + paper-slider-secondary-color: var(--paper-slider-active-color) + slider-track-color: rgb(85 85 87) + # Labels + label-badge-background-color: var(--secondary-background-color) + label-badge-text-color: var(--primary-text-color) + label-badge-red: rgb(180, 99, 122) + label-badge-green: rgb(86, 148, 159) + label-badge-blue: rgb(40, 105, 131) + label-badge-yellow: rgb(234, 157, 52) + label-badge-gray: rgb(223, 218, 217) + # Cards + card-background-color: rgb(242, 233, 222) + ha-card-background: rgb(242, 233, 222) + ha-card-border-color: none + ha-card-border-width: 0px + paper-dialog-background-color: var(--card-background-color) + paper-listbox-background-color: var(--card-background-color) + paper-card-background-color: var(--card-background-color) + # Switches + switch-checked-button-color: rgb(121, 117, 147) + switch-checked-track-color: rgb(40, 105, 131) + switch-unchecked-button-color: var(--switch-checked-button-color) + switch-unchecked-track-color: rgb(242, 233, 222) + # Toggles + paper-toggle-button-checked-button-color: var(--switch-checked-button-color) + paper-toggle-button-checked-bar-color: var(--switch-checked-track-color) + paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color) + paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color) + # Table + table-row-background-color: rgb(223, 218, 217) + table-row-alternative-background-color: rgb(206, 202, 205) + data-table-background-color: rgb(244, 237, 232) + # Dropdowns + material-background-color: var(--table-row-background-color) + material-secondary-background-color: var(--table-row-alternative-background-color) + mdc-theme-surface: var(--secondary-background-color) + # Pre/Code + markdown-code-background-color: rgb(206, 202, 205) + # Checkboxes + mdc-checkbox-unchecked-color: rgb(121, 117, 147) + mdc-checkbox-disable-color: var(--disabled-text-color) + mdc-select-fill-color: rgb(244, 237, 232) + mdc-select-ink-color: var(--primary-text-color) + mdc-select-label-ink-color: var(--secondary-text-color) + mdc-select-idle-line-color: var(--primary-text-color) + mdc-select-dropdown-icon-color: rgb(121, 117, 147) + mdc-select-hover-line-color: var(--accent-color) + mdc-text-field-fill-color: var(--mdc-select-fill-color) + # Input + input-fill-color: var(--secondary-background-color) + input-dropdown-icon-color: var(--secondary-text-color) + input-ink-color: var(--primary-text-color) + input-label-ink-color: var(--secondary-text-color) + input-idle-line-color: var(--primary-text-color) + input-hover-line-color: var(--accent-color) + # Error, Warning, Success and Info colors + error-color: rgb(180, 99, 122) + warning-color: rgb(234, 157, 52) + sucess-color: rgb(40, 105, 131) + info-color: rgb(215, 130, 126) + # Progress bar + ha-bar-background-color: var(--slider-track-color) + # Mushroom Custom cards + mush-rgb-state-entity: 86, 148, 159 + mush-rgb-green: 40, 105, 131 + mush-rgb-yellow: 234, 157, 52 + mush-rgb-orange: 215, 130, 126 + mush-rgb-cyan: 86, 148, 159 + mush-rgb-purple: 144, 122, 169 + mush-rgb-pink: 180, 99, 122 + mush-rgb-red: 180, 99, 122 + mush-rgb-gray: 223, 218, 217 + mush-rgb-disabled: 152, 147, 165 + mush-icon-border-radius: 25% + mush-rgb-state-media-player: 86, 148, 159 + #RGB + rgb-primary-text-color: 87, 82, 121 + rgb-primary-color: 87, 82, 121 + rgb-accent-color: 86, 148, 159 + rgb-state-switch-color: var(--rgb-accent-color) + rgb-state-light-color: var(--rgb-accent-color) + rgb-state-fan-color: var(--rgb-accent-color) + rgb-state-script-color: var(--rgb-accent-color) + rgb-state-vacuum-color: var(--rgb-accent-color) + rgb-state-remote-color: var(--rgb-accent-color) + rgb-state-input-boolean-color: var(--rgb-accent-color) + rgb-state-humidifier-color: var(--rgb-accent-color) + rgb-state-cover-color: var(--rgb-accent-color) \ No newline at end of file diff --git a/www/floorplan/floorplan.css b/www/floorplan/floorplan.css index acadedd..a9e7e3b 100644 --- a/www/floorplan/floorplan.css +++ b/www/floorplan/floorplan.css @@ -12,16 +12,16 @@ svg * { /* Hover over */ .entity:hover { - stroke: #FFFFFF !important; + stroke: var(--text-primary-color) !important; stroke-width: 1px !important; stroke-opacity: 1 !important; } -/* Bootstrap succsss */ +/* Bootstrap succssss */ .success-text { - fill: #3c763d !important; + fill: var(--green-color) !important; } .success-background, @@ -36,7 +36,7 @@ svg * { /* Bootstrap info */ .info-text { - fill: #d4d4d4 !important; + fill: var(--info-color) !important; } .awake { @@ -57,28 +57,28 @@ svg * { .room-empty { /*fill: #5d5b5b !important;*/ - fill: #888888 !important; + fill: var(--card-background-color) !important; fill-opacity: 1 !important; } .room-occupied { - fill: #596170 !important; + fill: var(--grey-color) !important; fill-opacity: 1 !important; /* fill: #5d5d6f !important;*/ } .water-dry { - fill: #81D9a7 !important; + fill: var(--green-color) !important; fill-opacity: 1 !important; } .water-wet { - fill: #FF0000 !important; + fill: var(--error-color) !important; fill-opacity: 1 !important; } .door-closed { - /* fill: #77FF77 !important; */ + /* fill: var(--green-color) !important; */ /* fill: #81c9a7 !important; */ fill: #81D9a7 !important; fill-opacity: 1 !important; @@ -89,9 +89,9 @@ svg * { } .door-open { - fill: #FF0000 !important; + fill: var(--error-color) !important; fill-opacity: 1 !important; - stroke: #FFFF00 !important; + stroke: var(--warning-color) !important; stroke-dasharray: 10, 4 !important; stroke-width: 2px !important; stroke-opacity: 0.8 !important; @@ -101,7 +101,7 @@ svg * { } .appliance-off { - /* fill: #77FF77 !important; */ + /* fill: var(--green-color) !important; */ /* fill: #81c9a7 !important; */ fill: #81D9a7 !important; fill-opacity: 1 !important; @@ -120,7 +120,7 @@ svg * { } .appliance-pending { - fill: #6b0000 !important; + fill: var(--error-color) !important; fill-opacity: 1 !important; /* animation-duration: 4s; animation-name: rotate90; @@ -128,7 +128,7 @@ svg * { } .window-closed { - /* fill: #77FF77 !important; */ + /* fill: var(--green-color) !important; */ /* fill: #81c9a7 !important; */ fill: #CCCCCC !important; fill-opacity: 1 !important; @@ -139,18 +139,18 @@ svg * { } .window-open { - fill: #FF0000 !important; + fill: var(--error-color) !important; fill-opacity: 1 !important; - stroke: #FFFF00 !important; + stroke: var(--warning-color) !important; stroke-dasharray: 10, 4 !important; stroke-width: 2px !important; stroke-opacity: 0.8 !important; } .window-unavailable { - fill: #FFFF00 !important; + fill: var(--warning-color) !important; fill-opacity: 1 !important; - stroke: #FF0000 !important; + stroke: var(--error-color) !important; stroke-dasharray: 10, 4 !important; stroke-width: 2px !important; stroke-opacity: 0.8 !important; @@ -164,9 +164,9 @@ svg * { } .alarm-triggered { - fill: #FF0000 !important; + fill: var(--error-color) !important; fill-opacity: 1 !important; - stroke: #FFFF00 !important; + stroke: var(--warning-color) !important; } .alarm-armed_night { @@ -188,7 +188,7 @@ svg * { .closed-background, .closed-text-background { - /* fill: #77FF77 !important; */ + /* fill: var(--green-color) !important; */ fill: #81D9a7 !important; fill-opacity: 1 !important; /* stroke: #82caa8 !important; @@ -197,9 +197,9 @@ svg * { .open-background, .open-text-background { - fill: #FF0000 !important; + fill: var(--error-color) !important; fill-opacity: 1 !important; - stroke: #FFFF00 !important; + stroke: var(--warning-color) !important; stroke-dasharray: 10, 4 !important; stroke-width: 2px !important; stroke-opacity: 0.8 !important; @@ -207,7 +207,7 @@ svg * { .interior-closed-background, .interior-closed-text-background { - fill: #81c9a7 !important; + fill: var(--light-green-color) !important; fill-opacity: 1 !important; /* stroke: #82caa8 !important; stroke-width: 1px !important; */ @@ -233,9 +233,9 @@ svg * { .window-open-background, .window-open-text-background { - fill: #FF0000 !important; + fill: var(--error-color) !important; fill-opacity: 1 !important; - stroke: #FFFF00 !important; + stroke: var(--warning-color) !important; stroke-dasharray: 10, 4 !important; stroke-width: 2px !important; stroke-opacity: 0.8 !important; @@ -243,7 +243,7 @@ svg * { .motion-background, .motion-text-background { - fill: #81c9a7 !important; + fill: var(--green-color) !important; /* fill-opacity: 1 !important; */ /* stroke: #82caa8 !important; stroke-width: 1px !important; */ @@ -254,7 +254,7 @@ svg * { .info-background { /* fill: #D2D0ED !important; */ - fill: #81c9a7 !important; + fill: var(--lime-color) !important; /* fill-opacity: 1 !important; */ /* stroke: #82caa8 !important; stroke-width: 1px !important; */ @@ -264,14 +264,14 @@ svg * { /* Bootstrap warning */ .warning-text { - fill: #8a6d3b !important; + fill: var(--warning-color) !important; } .warning-background, .warning-text-background { - fill: #FFFF00 !important; + fill: var(--warning-color) !important; fill-opacity: 1 !important; - stroke: #FF0000 !important; + stroke: var(--error-color) !important; stroke-width: 4px !important; stroke-opacity: 0.5 !important; } @@ -286,7 +286,7 @@ svg * { /* Bootstrap danger */ .danger-text { - fill: #a94442 !important; + fill: var(--error-color) !important; } .danger-background, @@ -321,21 +321,15 @@ svg * { /* Camera */ .camera-idle { - /* fill: #B9CEF7 !important; */ - /* fill: #6FAECE !important; */ - fill: #8270A2 !important; + fill: var(--purple-color) !important; } .camera-unavailable { - fill: #B9CEF7 !important; - /* fill: #6FAECE !important; */ - /* fill: #8270A2 !important; */ + fill: var(--disabled-color) !important; } .camera-streaming { - /* fill: #B9CEF7 !important; */ - fill: #6FAECE !important; - /* fill: #8270A2 !important; */ + fill: var(--light-blue-color) !important; } @@ -349,34 +343,34 @@ svg * { .light-off, .light-off * { - fill: #4d4d3e !important; + fill: var(--ha-color-fill-neutral-loud-active) !important; } .light-on, .light-on * { - fill: #FFF27F !important; - stroke: #FFF27F !important; + fill: var(--yellow-color) !important; + stroke: var(--yellow-color) !important; stroke-width: 7px !important; stroke-opacity: 0.25 !important; } .sun-on { - fill: #FFF27F !important; - stroke: #FFF27F !important; + fill: var(--yellow-color) !important; + stroke: var(--yellow-color) !important; stroke-width: 2px !important; stroke-opacity: 0.25 !important; } .light-strip-on { - fill: #FFF27F !important; - stroke: #FFF27F !important; + fill: var(--yellow-color) !important; + stroke: var(--yellow-color) !important; stroke-width: 3px !important; stroke-opacity: 0.25 !important; } .indicator-on { - fill: #FFE500 !important; - /* stroke: #FFE500 !important; + fill: var(--yellow-color) !important; + /* stroke: var(--yellow-color) !important; stroke-width: 20px !important; stroke-opacity: 0.25 !important; */ } @@ -390,7 +384,7 @@ svg * { } .doorbell-on { - fill: #FFE500 !important; + fill: var(--yellow-color) !important; } @@ -419,41 +413,24 @@ svg * { /* Media player */ -.homehub-off { - fill: #515151 !important; -} - -.homehub-paused { - fill: #518151 !important; -} - -.homehub-on { - fill: #F1F1F1 !important; -} - .squeezebox-off { - fill: #8270A2 !important; + fill: var(--purple-color) !important; } .squeezebox-idle { - fill: #BBBBBB !important; + fill: var(--light-grey-color) !important; } .squeezebox-paused { - /* fill: #B9C999 !important; */ - fill: #8da6c9 !important; + fill: var(--amber-color) !important; } .squeezebox-on { - /* fill: #2baaa6 !important; */ - /* fill: #E0E276 !important; */ - /* fill: #A7B349 !important; */ - /* fill: #03a9f4 !important; */ - fill: #40a2cf !important; + fill: var(--light-blue-color) !important; } .squeezebox-unknown { - fill: #A99999 !important; + fill: var(--disabled-color) !important; } @@ -485,7 +462,7 @@ svg * { } .tracker-work { - fill: #9963a6 !important; + fill: var(--brown-color) !important; } .tracker-other { @@ -493,130 +470,124 @@ svg * { } .tracker-home { - /* fill: #2baaa6 !important; */ - /* fill: #D0D266 !important; */ - /* fill: #77FF77 !important; */ - fill: #40a2cf !important; + fill: var(--info-color) !important; } .hvac-heating { - fill: #5e0202 + fill: var(--red-color) } .hvac-fan { - fill: #6d6d02 + fill: var(--yellow-color) } .hvac-cooling { - fill: #010194 + fill: var(--blue-color) } .hvac-idle { - fill: #8270A2 + fill: var(--disabled-color) } .fridge-low { - fill: #7777FF !important; - /* stroke-width: 2px !important; */ - /* stroke-opacity: 1 !important; */ + fill: var(--blue-color) !important; } .fridge-medium { - fill: #81D9a7 !important; + fill: var(--green-color) !important; /* stroke-width: 2px !important; stroke-opacity: 1 !important; */ } .fridge-high { - fill: #ff8800 !important; + fill: var(--error-color) !important; /* stroke-width: 2px !important; stroke-opacity: 1 !important; */ } .temp-freeze { - fill: #FFFFFF !important; + fill: var(--white-color) !important; text-align: right; } .temp-low { - fill: #6969ff !important; + fill: var(--blue-color) !important; text-align: right; } .temp-medium { - fill: #77FF77 !important; + fill: var(--green-color) !important; text-align: right; } .temp-high { - fill: #FF7700 !important; + fill: var(--orange-color) !important; text-align: right; } .temp-hot { - fill: #FF0000 !important; + fill: var(--error-color) !important; text-align: right; } .temp-unknown { - fill: #777777 !important; + fill: var(--disabled-color) !important; } .health-critical { - fill: #FF0000 !important; + fill: var(--error-color) !important; } .health-warning { - fill: #ffa500 !important; + fill: var(--warning-color) !important; } .health-info { - fill: #ffff00 !important; + fill: var(--info-color) !important; } .health-good { - fill: #77FF77 !important; + fill: var(--green-color) !important; } .health-unknown { - fill: #0000FF !important; + fill: var(--disabled-color) !important; } .humid-low { - fill: #300330 !important; + fill: var(--purple-color) !important; } .humid-med-low { - fill: #cfb837 !important; + fill: var(--yellow-color) !important; } .humid-medium { - fill: #77FF77 !important; + fill: var(--green-color) !important; } .humid-med-high { - fill: #C8AB37 !important; + fill: var(--ha-color-orange-50) !important; } .humid-high { - fill: #FF0000 !important; + fill: var(--error-color) !important; } .light-low { - /* fill: #000083 !important; */ - fill: #1D2375 !important; + fill: var(--ha-color-neutral-95) !important; } .light-medium-low { - fill: #A7B349 !important; + fill: var(--ha-color-orange-30) !important; } .light-medium { - fill: #e4ff24 !important; + fill: var(--ha-color-orange-50) !important; } .light-high { - fill: #FFFFFF !important; + fill: var(--ha-color-neutral-05) !important; } .tv-on { @@ -629,43 +600,43 @@ svg * { } .bin-today { - fill: #FF0000 !important; + fill: var(--error-color) !important; } .bin-tomorrow { - fill: #FFFF00 !important; + fill: var(--warning-color) !important; } .bin-future { - fill: #00FF00 !important; + fill: var(--ha-color-green-50) !important; } .bin-false { - fill: #000000 !important; + fill: var(--black-color) !important; } .bags-five { - fill: #00FF00 !important; + fill: var(--graph-color-1) !important; } .bags-four { - fill: #33CC00 !important; + fill: var(--graph-color-4) !important; } .bags-three { - fill: #669900 !important; + fill: var(--graph-color-7) !important; } .bags-two { - fill: #996600 !important; + fill: var(--graph-color-10) !important; } .bags-one { - fill: #CC3300 !important; + fill: var(--graph-color-14) !important; } .bags-zero { - fill: #FF0000 !important; + fill: var(--error-color) !important; } .visible-entity { @@ -841,7 +812,7 @@ svg * { } .green-to-red-grad-18 { - fill: #ff0000 !important; + fill: var(--error-color) !important; } diff --git a/www/floorplan/fullsized_floorplan.svg b/www/floorplan/fullsized_floorplan.svg index 1a51c07..2447d6e 100644 --- a/www/floorplan/fullsized_floorplan.svg +++ b/www/floorplan/fullsized_floorplan.svg @@ -38,9 +38,9 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="0.02" - inkscape:cx="56275" - inkscape:cy="10675" + inkscape:zoom="0.01" + inkscape:cx="46550" + inkscape:cy="29250" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="true" @@ -49,7 +49,7 @@ showborder="true" inkscape:window-width="1920" inkscape:window-height="1009" - inkscape:window-x="-8" + inkscape:window-x="1912" inkscape:window-y="-8" inkscape:window-maximized="1" showguides="true" @@ -124,20 +124,6 @@ inkscape:groupmode="layer" id="layer1" transform="translate(0,17815)"> - - - - inkscape:label="light.front_porch_overhead" /> - -