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)"><rect
-   style="display:inline;opacity:1;fill:#1c2316;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.174176;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-   id="rect5100-9-3-2-5-8"
-   width="260.68741"
-   height="153.57216"
-   x="43.625"
-   y="-17425.125" />
-<rect
-   style="display:inline;fill:#1c2316;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.110483;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-   id="rect5100-9-3-2-5-8-4"
-   width="624.90057"
-   height="25.777346"
-   x="304.25485"
-   y="-17297.33" />
-<rect
    y="-17797"
    x="766"
    height="24.000004"
@@ -2343,13 +2329,6 @@
      style="display:inline;opacity:0.96;fill:#4d4d3e;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.0916092;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
      sodipodi:arc-type="arc" />
 </g>
-<rect
-   y="-17415"
-   x="274"
-   height="28.000004"
-   width="28.000015"
-   id="rect485"
-   style="opacity:0.99;fill:#666666;fill-opacity:1;stroke:#cccccc;stroke-width:0.0595361;stroke-miterlimit:4;stroke-dasharray:none" />
 <g
    style="stroke:none"
    id="binary_sensor.heat_pump"
@@ -3864,7 +3843,7 @@
    d="m 720.0222,-17679.003 a 4.5,4.5 0 0 1 4.99225,3.941 4.5,4.5 0 0 1 -3.93422,4.997 4.5,4.5 0 0 1 -5.00204,-3.928 4.5,4.5 0 0 1 3.92178,-5.007"
    inkscape:label="light.storage_room"
    sodipodi:arc-type="arc" />
-&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;       inkscape:label=&quot;light.front_porch_overhead&quot; /&gt;&#10;  <rect
+&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;       inkscape:label=&quot;light.front_porch_overhead&quot; /&gt;&#10;  <rect
    id="rect12-8-8-9-3-20-4-5-3"
    width="43.5"
    height="4.5"
@@ -4959,20 +4938,6 @@
        id="path2-3-6" />
   </g>
 </g>
-<rect
-   y="-17791"
-   x="676"
-   height="48.000004"
-   width="84.000015"
-   id="rect485-6"
-   style="opacity:0.99;fill:#666666;fill-opacity:1;stroke:#cccccc;stroke-width:0.135015;stroke-miterlimit:4;stroke-dasharray:none" />
-<rect
-   y="-17758.266"
-   x="935.08832"
-   height="48.000004"
-   width="84.000015"
-   id="rect485-6-06"
-   style="opacity:0.99;fill:#666666;fill-opacity:1;stroke:#cccccc;stroke-width:0.135015;stroke-miterlimit:4;stroke-dasharray:none" />
 <text
    style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:9.36111px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;display:inline;fill:#d4d4d4;fill-opacity:1;stroke-width:2.63435"
    transform="scale(0.93757302,1.0665836)"