diff --git a/themes/metro/metro.yaml b/themes/metro/metro.yaml
new file mode 100644
index 0000000..de8ab19
--- /dev/null
+++ b/themes/metro/metro.yaml
@@ -0,0 +1,953 @@
+# Metrology Themes for Home Assistant
+# Created by Madelena Mak 2022 https://mmak.es
+# https://github.com/Madelena/Metrology-for-Hass
+
+# To add your own custom color, see the examples at the end of this file.
+
+
+############################################
+############################################
+############################################
+
+# BASE THEME
+
+________________________________________Common Base (Do Not Use): &common-colors
+
+  # Text Colors
+  text-primary-color: var(--primary-text-color)
+  accent-text-color: "rgb(255,255,255)"
+  text-accent-color: var(--accent-text-color)
+
+  # Main Interface Colors
+  divider-color: transparent
+  disabled-color: "rgba(255,255,255,.55)"
+  rgb-disabled-color: "128,128,128"
+  error-color: "#FF4400"
+  rgb-error-color: "255,64,0"
+  warning-color: "#ffa600"
+  success-color: "#008a17"
+  rgb-success-color: "0, 138, 23"
+  info-color: "#039be5"
+
+  # Main Interface Colors
+  lovelace-background: var(--primary-background-color)
+  ha-card-background: var(--card-background-color)
+
+  app-header-background-color: "rgba(var(--rgb-primary-background-color),1)"
+  app-header-text-color: var(--primary-text-color)
+  app-header-selection-bar-color: var(--primary-color)
+  app-header-edit-background-color: rgb(var(--rgb-primary-color-darker))
+  app-header-edit-text-color: var(--accent-text-color)
+  app-header-border-bottom: none
+
+  # Material and Paper
+  light-theme-disabled-color: var(--disabled-color)
+  dark-theme-disabled-color: var(--disabled-color)
+
+  material-disabled-color: var(--disabled-color)
+  material-divider-color: var(--divider-color)
+
+  light-theme-base-color: var(--primary-color)
+  dark-theme-base-color: var(--primary-color)
+
+  dark-primary-color: var(--primary-color)
+  light-primary-color: var(--primary-color)
+
+  mdc-theme-primary: var(--accent-color)
+  mdc-theme-on-primary: var(--accent-text-color)
+
+  # Typography
+  font-stack: &font-stack "Segoe UI Variable Static Text, Segoe UI, SegoeUI, -apple-system,BlinkMacSystemFont, system-ui, sans-serif"
+  display-font-stack: &display-font-stack "Segoe UI Variable Static Display, Segoe UI, SegoeUI, -apple-system,BlinkMacSystemFont, system-ui, sans-serif"
+  mdc-typography-button-font-family: var(--font-stack)
+  mdc-typography-font-family: var(--font-stack)
+  paper-font-common-base_-_font-family: var(--font-stack)
+  paper-font-title_-_font-family: var(--display-font-stack)
+  paper-font-headline_-_font-family: var(--display-font-stack)
+  paper-font-subhead_-_font-family: var(--display-font-stack)
+  paper-font-display1_-_font-family: var(--display-font-stack)
+  paper-font-display2_-_font-family: var(--display-font-stack)
+  paper-font-display3_-_font-family: var(--display-font-stack)
+  paper-font-display4_-_font-family: var(--display-font-stack)
+
+  # Body at 14px = 10.5pt = 1rem
+  body-font-size: 1rem
+  body-font-weight: normal
+  body-line-height: normal
+  card-title-font-size: 1.5rem
+  card-title-font-weight: 500
+  card-title-line-height: normal
+  title-font-size: 3.5rem
+  subtitle-font-size: 1rem
+  small-font-size: 0.9rem
+  
+  h1-font-size: 2.85rem
+  h2-font-size: 2.25rem
+  h3-font-size: 2rem
+  h4-font-size: 1.5rem
+  h5-font-size: 1.15rem
+  h6-font-size: .7rem
+
+  h1-font-weight: 100
+  h2-font-weight: 100
+  h3-font-weight: 100
+  h4-font-weight: 500
+  h5-font-weight: 400
+  h6-font-weight: 400
+
+  body-font: "var(--body-font-weight) var(--body-font-size) var(--font-stack)"
+  card-title-font: "var(--card-title-font-weight) var(--card-title-font-size) var(--display-font-stack)"
+  h1-font: "var(--h1-font-weight) var(--h1-font-size) var(--display-font-stack)"
+  h2-font: "var(--h2-font-weight) var(--h2-font-size) var(--display-font-stack)"
+  h3-font: "var(--h3-font-weight) var(--h3-font-size) var(--display-font-stack)"
+  h4-font: "var(--h4-font-weight) var(--h4-font-size) var(--display-font-stack)"
+  h5-font: "var(--h5-font-weight) var(--h5-font-size) var(--font-stack)"
+  h6-font: "var(--h6-font-weight) var(--h6-font-size) var(--font-stack)"
+
+  paper-font-headline_-_font-size: 3.5rem
+  paper-font-headline_-_font-weight: 500
+  paper-font-headline_-_letter-spacing: 0
+  paper-font-headline_-_line-height: 5rem
+
+  material-small-font-size: 0.875rem
+  material-caption-font-size: 0.7rem
+  material-button-font-size: 1rem
+
+  mush-title-font-size: var(--title-font-size)
+  mush-title-font-weight: 500
+  mush-title-padding: 24px 16px 16px
+  mush-subtitle-font-size: var(--subtitle-font-size)
+  mush-subtitle-font-weight: 500
+  mush-card-primary-font-size: var(--body-font-size)
+  mush-card-secondary-font-size: var(--small-font-size)
+  mush-card-primary-font-weight: 500
+  mush-card-secondary-font-weight: normal
+  mush-chip-font-size: var(--body-font-size)
+  mush-chip-font-weight: normal
+
+  # Layout
+  masonry-view-card-margin: "2px 1px"
+  grid-card-gap: "2px"
+  stack-card-margin: "1px"
+  horizontal-stack-card-margin: "1px"
+
+  mush-spacing: 16px
+  mush-icon-border-radius: 32px
+
+  mdc-icon-size: 24px
+  header-height: 56px
+  mdc-shape-small: 0
+
+  expansion-panel-summary-padding: 0
+  expansion-panel-content-padding: 0
+
+  mush-badge-size: 16px
+  mush-badge-icon-size: 10px
+  mush-button-size: 32px
+  mush-button-icon-size: 20px
+  mush-shape-size: 48px
+  mush-shape-avatar-size: 48px
+  mush-shape-icon-size: 20px
+  #mush-shape-animation:
+  mush-slider-height: 16px
+
+
+  # Color Reset
+  # Map all the colors to the defaults above
+
+  # Icons
+  state-icon-color: var(--primary-text-color)
+  state-icon-active-color: var(--primary-color)
+  state-icon-unavailable-color: var(--disabled-color)
+
+  # Sidebar Menu
+  sidebar-text-color: var(--primary-text-color)
+  sidebar-selected-background-color: var(--primary-background-color)
+  sidebar-selected-icon-color: var(--primary-color)
+  sidebar-selected-text-color: var(--sidebar-selected-icon-color))
+
+  # Sliders
+  paper-slider-knob-color: var(--accent-color)
+  paper-slider-knob-start-color: var(--paper-slider-knob-color)
+  paper-slider-pin-color: var(--paper-slider-knob-color)
+  paper-slider-active-color: var(--paper-slider-knob-color)
+  paper-slider-secondary-color: rgb(var(--rgb-primary-color-darker))
+
+  # Labels
+  label-badge-background-color: var(--primary-background-color)
+  label-badge-text-color: var(--primary-text-color)
+  label-badge-red: "#BE3A3E"
+  label-badge-green: "#5CB861"
+  label-badge-blue: "#44A4CD"
+  label-badge-yellow: "#D5AE43"
+  label-badge-gray: "#5F6267"
+
+  # Cards
+  paper-dialog-background-color: var(--card-background-color)
+  paper-listbox-background-color: var(--secondary-background-color)
+  paper-card-background-color: var(--card-background-color)
+
+  # Switches
+  switch-checked-button-color: var(--primary-color)
+  switch-checked-track-color: var(--primary-text-color)
+  switch-unchecked-button-color: rgb(var(--rgb-primary-color-darker))
+  switch-unchecked-track-color: var(--primary-text-color)
+  mdc-radio-unchecked-color: var(--primary-text-color)
+
+  # Color Picker
+  ha-color-picker-wheel-borderwidth: 4
+  ha-color-picker-wheel-bordercolor: var(--primary-text-color)
+  ha-color-picker-wheel-shadow: none
+  ha-color-picker-marker-borderwidth: 4
+  ha-color-picker-marker-bordercolor: var(--accent-text-color)
+
+  # 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: var(--primary-background-color)
+  table-row-alternative-background-color: var(--secondary-background-color)
+  data-table-background-color: var(--primary-background-color)
+
+  # Dropdowns
+  material-background-color: var(--secondary-background-color)
+  material-secondary-background-color: var(--primary-background-color)
+  mdc-text-field-idle-line-color: var(--secondary-text-color)
+
+  # HACS
+  hacs-chip-background-color: var(--primary-color)
+
+  # Code
+  markdown-code-background-color: var(--primary-background-color)
+
+  # Checkboxes
+  mdc-select-fill-color: var(--primary-background-color)
+  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: var(--secondary-text-color)
+  mdc-select-hover-line-color: var(--primary-color)
+
+  # Input
+  input-fill-color: var(--primary-background-color)
+  input-disabled-fill-color: var(--disabled-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-disabled-ink-color: var(--disabled-text-color)
+
+  input-idle-line-color: var(--primary-text-color)
+  input-hover-line-color: var(--primary-color)
+  input-disabled-line-color: var(--disabled-text-color)
+
+  input-outlined-idle-border-color: none
+  input-outlined-hover-border-color: none
+  input-outlined-disabled-border-color: var(--disabled-text-color)
+
+  code-editor-background-color: var(--primary-background-color)
+  mdc-text-field-fill-color: var(--primary-background-color)
+
+  # Buttons
+  btn-bg-color-off: var(--primary-background-color)
+  mdc-button-disabled-fill-color: var(--disabled-color)
+  mdc-button-disabled-ink-color: var(--disabled-text-color)
+
+  # Home Assistant override
+  ha-card-box-shadow: "none"
+
+  # Mushroom
+  mush-rgb-pink: var(--rgb-primary-color)
+  mush-rgb-state-entity: var(--rgb-pink)
+
+  # Swiper
+  swiper-theme-color: var(--primary-color)
+
+
+________________________________________Common Base 2 (Do Not Use):
+
+  modes:
+    dark: &common-dark
+      <<: *common-colors
+
+      # Background Colors
+      mdc-ripple-color: "#AAAAAA"
+      rgb-mdc-ripple-color: "170,170,170"
+
+      # Text Colors
+      primary-text-color: "rgb(255,255,255)"
+      rgb-primary-text-color: "255,255,255"
+      secondary-text-color: "rgba(255,255,255,.75)"
+      disabled-text-color: "rgba(255,255,255,.55)"
+
+      # Other Mode Specific Variables
+      mdc-dialog-scrim-color: "rgba(0, 0, 0, 0.5)"
+      dialog-backdrop-filter: none
+      dialog-box-shadow: var(--rgb-accent-color)
+      slider-thumb-color: "#121212"
+
+      sidebar-icon-color: var(--secondary-text-color)
+      sidebar-background-color: var(--secondary-background-color)
+
+      # Custom
+      dark-mode-filter: "invert(1) hue-rotate(.5turn)"
+
+    light: &common-light
+      <<: *common-colors
+
+      # Background Colors
+      mdc-ripple-color: "#222222"
+      rgb-mdc-ripple-color: "32,32,32"
+
+      # Text Colors
+      primary-text-color: "rgba(0,0,0,.95)"
+      rgb-primary-text-color: "0,0,0"
+      secondary-text-color: "rgba(0,0,0,.66)"
+      disabled-text-color: "rgba(0,0,0,.6)"
+
+      # Other Mode Specific Variables
+      mdc-dialog-scrim-color: rgba(var(--rgb-primary-background-color),.667)
+      dialog-backdrop-filter: none
+      dialog-box-shadow: var(--rgb-primary-text-color)
+      slider-thumb-color: "#E8E8E8"
+
+      sidebar-icon-color: rgba(0,0,0,.5)
+      sidebar-background-color: var(--primary-background-color)
+
+      # Custom
+      dark-mode-filter: "invert(0)"
+
+
+############################################
+############################################
+############################################
+
+
+________________________________________Common Base 3 (Do Not Use): &common-card-mods
+
+  # Card Mod
+  card-mod-row-yaml: &card-mod-row |
+    .: |
+      hui-generic-entity-row {
+        padding-top: 4px;
+        padding-bottom: 4px;
+      }
+      .info, .info > * {
+        white-space: normal !important;
+      }
+      .secondary {
+        font-size: var(--small-font-size);
+        line-height: 1.4;
+      }
+      .state, .entity div {
+        font-size: var(--h5-font-size);
+        font-weight: 400;
+      }
+    hui-generic-entity-row$: |
+      .info, .info > * {
+        white-space: normal !important;
+      }
+      .secondary {
+        font-size: var(--small-font-size);
+        line-height: 1.4;
+      }                  
+      .state, .entity div {
+        font-size: var(--h5-font-size);
+        font-weight: 400;
+      }
+      
+  card-mod-card: &card-mod-card |
+    ha-card {
+      --mdc-icon-size: 20px
+    }
+    ha-card .value {
+      font-size: var(--h1-font-size);
+      font-weight: var(--h1-font-weight);
+      margin-right: 0;
+    }
+    ha-card .name {
+      font-size: var(--body-font-size);
+      line-height: var(--body-line-height);
+      font-weight: var(--body-font-weight);
+      color: var(--primary-text-color);
+    }
+    ha-card .info {
+      line-height: 32px;
+      padding-top: 8px;
+    }
+    ha-card .header {
+      padding-top: 16px !important;
+    }
+    .icon {
+      line-height: 16px !important;
+    }
+    ha-card .measurement {
+      font-size: var(--h6-font-size);
+      font-weight: 700;
+      color: var(--secondary-text-color);
+      text-transform: uppercase;
+    }
+    .card-header, .card-header .name {
+      font-size: var(--card-title-font-size);
+      line-height: var(--card-title-line-height);
+      font-weight: var(--card-title-font-weight);
+      letter-spacing: 0;
+    }
+    .card-header {
+      margin-bottom: 8px;
+      padding: 12px 16px;
+    }
+    :host ::slotted(.card-content:not(:first-child)), slot:not(:first-child)::slotted(.card-content) {
+      margin-top: 0;
+    }
+    .entities {
+      align-items: flex-start !important;
+    }
+
+  card-mod-glance-yaml: &card-mod-glance |
+    .: |
+      state-badge {
+        --mdc-icon-size: 32px;
+        order: 0;
+      }
+      div.name {
+        font-size: var(--body-font-size);
+        color: var(--primary-font-color);
+        order: 1 !important;
+      }
+      div {
+        order: 2;
+        font-size: var(--small-font-size);
+        color: var(--secondary-text-color);
+        line-height: 1.33;
+        white-space: unset !important;
+      }
+
+  card-mod-more-info-yaml: &card-mod-more-info-yaml |
+    $: |
+      @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
+        .mdc-dialog__surface {
+          backdrop-filter: blur(16px);
+          -webkit-backdrop-filter: blur(16px);
+          background-color: rgba(var(--rgb-mdc-theme-surface), .5) !important;
+        }
+      }
+      .mdc-dialog__surface {
+        box-shadow: 0 0px 16px 4px rgba(var(--dialog-box-shadow), .15), 0 16px 64px 32px rgba(var(--dialog-box-shadow), .5) !important;
+      }
+    ha-header-bar$: |
+      .mdc-top-app-bar {
+        background: none !important;
+      }
+    .: |
+      .mdc-top-app-bar__title, .main-title {
+        text-transform: uppercase;
+        font-size: var(--body-font-size);
+        font-weight: 500;
+        line-height: 1.1;
+        overflow: inherit;
+        white-space: normal;
+        margin-left: -6px;
+      }
+      .content {
+        xmargin-top: -8px;
+      }
+    state-card-display$: |
+      .state {
+        margin-left: 46px !important;
+        font-size: var(--h1-font-size);
+        font-weight: var(--h1-font-weight);
+        text-align: left !important;
+        line-height: 1.1;
+      }
+      .layout.horizontal {
+        flex-direction: column-reverse !important;
+      }
+      state-info { margin-left: -8px; margin-top: -42px; }
+    state-card-display$state-info$: |
+      .name { display: none; }
+      .time-ago { margin-top: 42px; 
+        font-size: var(--h6-font-size);
+        text-transform: uppercase;}
+      state-badge {
+        width: 32px !important;
+        height: 32px !important;
+        border-radius: 0 !important;
+        margin: 4px 8px 8px 8px;
+      }
+      state-badge[icon] {
+        margin: 0 0 0 8px !important;
+      }
+    more-info-default$ha-attributes$: |
+      .data-entry { flex-direction: column !important; }
+      .key {
+        font-size: var(--h6-font-size);
+        text-transform: uppercase;
+        line-height: 1.1;
+      }
+      .data-entry .value {
+        text-align: left !important;
+        font-size: var(--h2-font-size);
+        font-weight: var(--h2-font-weight);
+        line-height: 1.1;
+        margin-bottom: 16px;
+        max-width: none !important;
+      }
+    ha-more-info-history$state-history-charts:
+      $:
+        state-history-chart-timeline$: |
+          .chartTooltip {
+            margin-top: -200px;
+          }
+    ha-more-info-history:
+      $:
+        state-history-charts:
+          $:
+            state-history-chart-line:
+              $:
+                ha-chart-base:
+                  $: |
+                    .chartContainer {
+                      filter: hue-rotate(var(--hue-primary-color)) saturate(3) brightness(0.66)
+                    }
+
+  card-mod-root-yaml: &card-mod-root |
+    .: |
+      @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
+        app-header, app-toolbar {
+          background-color: "rgba(var(--rgb-primary-background-color),.33)"
+          backdrop-filter: blur(8px);
+          -webkit-backdrop-filter: blur(8px);
+        }
+      }
+      app-toolbar [main-title] {
+        font-size: var(--h5-font-size);
+        line-height: 1.1;
+        font-weight: var(--h5-font-weight);
+        text-transform: uppercase;
+        margin-left: 8px !important;
+      }
+    app-header$: |
+      :host::before {
+        box-shadow: inset 0px 4px 6px -4px rgb(0 0 0 / 10%) !important;
+      }
+
+  card-mod-sidebar: &card-mod-sidebar |
+    .menu .title {
+      font-weight: 500;
+    }
+    :host([expanded]) paper-icon-item {
+      width: 100%;
+    }
+    .iron-selected paper-icon-item {
+      border-left: 3px solid var(--accent-color) !important;
+      border-radius: var(--ha-card-border-radius) !important;
+      padding-left: 9px !important;
+    }
+    .profile.iron-selected paper-icon-item {
+      padding-left: 1px !important;
+    }
+    paper-icon-item span {
+      font-weight: normal !important;
+    }
+
+  card-mod-view: &card-mod-view |
+    .main-title {
+      font-size: 10pt;
+      font-weight: 500;
+      text-transform: uppercase;
+    }
+    #tabbar {
+      font-size: 10pt;
+      text-transform: uppercase;
+      font-weight: 500;
+    }
+    #tabbar:not(.bottom-bar) {
+      justify-content: left;
+    }
+
+
+# Base Metro Theme
+
+________________________________________Common Base 4 (Do Not Use):
+
+  modes:
+    dark: &metro-common-dark
+      <<: *common-dark
+      primary-background-color: "rgb(0,0,0)"
+      rgb-primary-background-color: "0,0,0"
+      secondary-background-color: "rgb(24,24,24)"
+      card-background-color: "rgba(255,255,255,.075)"
+      rgb-card-background-color: "255,255,255"
+
+      ha-card-border-radius: 0
+      ha-config-card-border-radius: 0
+      ha-dialog-border-radius: 0
+      vertical-stack-card-margin: "1px 0px 1px 0px"
+      mush-control-border-radius: 0px
+
+      mdc-theme-surface: "rgb(24,24,24)"
+      rgb-mdc-theme-surface: "24,24,24"
+
+    light: &metro-common-light
+      <<: *common-light
+      primary-background-color: "rgb(255,255,255)"
+      rgb-primary-background-color: "255,255,255"
+      secondary-background-color: "rgb(232,232,232)"
+      card-background-color: "rgba(0,0,0,.033)"
+      rgb-card-background-color: "0,0,0"
+
+      ha-card-border-radius: 0
+      ha-config-card-border-radius: 0
+      ha-dialog-border-radius: 0
+      vertical-stack-card-margin: "1px 0px 1px 0px"
+      mush-control-border-radius: 0px
+
+      mdc-theme-surface: var(--primary-background-color)
+      rgb-mdc-theme-surface: var(--rgb-primary-background-color)
+
+
+
+# Base Fluent Theme
+
+________________________________________Common Base 5 (Do Not Use):
+
+  modes:
+    dark: &fluent-common-dark
+      <<: *common-dark
+      ha-card-border-radius: "4px"
+      ha-config-card-border-radius: "4px"
+      ha-dialog-border-radius: "8px"
+      vertical-stack-card-margin: "1px 0px 1px 0px"
+      mush-control-border-radius: 4px      
+
+      mdc-theme-surface: var(--primary-background-color)
+      rgb-mdc-theme-surface: var(--rgb-primary-background-color)
+
+    light: &fluent-common-light
+      <<: *common-light
+      primary-background-color: "rgb(255,255,255)"
+      rgb-primary-background-color: "255,255,255"
+
+      ha-card-border-radius: "4px"
+      ha-config-card-border-radius: "4px"
+      ha-dialog-border-radius: "8px"
+      vertical-stack-card-margin: "1px 0px 1px 0px"
+      mush-control-border-radius: 4px
+
+      mdc-theme-surface: var(--card-background-color)
+      rgb-mdc-theme-surface: var(--rgb-card-background-color)
+
+
+
+############################################
+############################################
+############################################
+
+# Color Variations
+
+# So happy that YAML Anchors work so I don't need to duplicate code a billion times.
+# It's relatively easy to create your own theme. You just need to provide the colors.
+
+
+Metro Red:
+  <<: *common-card-mods
+  card-mod-theme: "Metro Red"
+
+  primary-color: "#C30052"
+  rgb-primary-color: "195,0,82"
+  rgb-primary-color-darker: "144, 0, 60"
+  rgb-primary-color-lighter: "233, 0, 98"
+  hue-primary-color: "335deg"
+
+  accent-color: "#e90062"
+  rgb-accent-color: "233, 0, 98"
+
+  modes:
+    dark:
+      <<: *metro-common-dark
+    light:
+      <<: *metro-common-light
+
+Fluent Red:
+  <<: *common-card-mods
+  card-mod-theme: "Fluent Red"
+
+  primary-color: "#C30052"
+  rgb-primary-color: "195,0,82"
+  rgb-primary-color-darker: "144, 0, 60"
+  rgb-primary-color-lighter: "233, 0, 98"
+  hue-primary-color: "335deg"
+
+  accent-color: "#e90062"
+  rgb-accent-color: "233, 0, 98"
+
+  modes:
+    dark:
+      <<: *fluent-common-dark
+      primary-background-color: "rgb(27,24,25)"
+      rgb-primary-background-color: "27,24,25"
+      secondary-background-color: "rgb(67,61,63)"
+      card-background-color: "rgb(40,36,38)"
+      rgb-card-background-color: "40,36,38"
+
+    light:
+      <<: *fluent-common-light
+      secondary-background-color: "rgb(249,210,226)"
+      card-background-color: "rgb(245,239,242)"
+      rgb-card-background-color: "245,239,242"
+
+
+
+Metro Blue:
+  <<: *common-card-mods
+  card-mod-theme: "Metro Blue"
+
+  primary-color: "#0078d7"
+  rgb-primary-color: "0,120,215"
+  rgb-primary-color-darker: "0,91,163"
+  rgb-primary-color-lighter: "0,141,253"
+  hue-primary-color: "207deg"
+
+  accent-color: "#008dfd"
+  rgb-accent-color: "0,141,253"
+
+  modes:
+    dark:
+      <<: *metro-common-dark
+    light:
+      <<: *metro-common-light
+
+Fluent Blue:
+  <<: *common-card-mods
+  card-mod-theme: "Fluent Blue"
+
+  primary-color: "#0078d7"
+  rgb-primary-color: "0,120,215"
+  rgb-primary-color-darker: "0,91,163"
+  rgb-primary-color-lighter: "0,141,253"
+  hue-primary-color: "207deg"
+
+  accent-color: "#008dfd"
+  rgb-accent-color: "0,141,253"
+
+  modes:
+    dark: 
+      <<: *fluent-common-dark
+      primary-background-color: "rgb(24,26,27)"
+      rgb-primary-background-color: "24,26,27"
+      secondary-background-color: "rgb(57,64,70)"
+      card-background-color: "rgb(36,38,40)"
+      rgb-card-background-color: "36,38,40"
+
+    light: 
+      <<: *fluent-common-light
+      secondary-background-color: "rgb(210,231,249)"
+      card-background-color: "rgb(239,243,245)"
+      rgb-card-background-color: "239,243,245"
+
+
+
+Metro Green:
+  <<: *common-card-mods
+  card-mod-theme: "Metro Green"
+
+  primary-color: "#00cb6a"
+  rgb-primary-color: "0, 203, 106"
+  rgb-primary-color-darker: "0, 151, 79"
+  rgb-primary-color-lighter: "0, 241, 125"
+  hue-primary-color: "151deg"
+
+  accent-color: "#00f17d"
+  rgb-accent-color: "0, 241, 125"
+
+  modes:
+    dark:
+      <<: *metro-common-dark
+    light:
+      <<: *metro-common-light
+
+Fluent Green:
+  <<: *common-card-mods
+  card-mod-theme: "Fluent Green"
+
+  primary-color: "#00cb6a"
+  rgb-primary-color: "0, 203, 106"
+  rgb-primary-color-darker: "0, 151, 79"
+  rgb-primary-color-lighter: "0, 241, 125"
+  hue-primary-color: "151deg"
+
+  accent-color: "#00f17d"
+  rgb-accent-color: "0, 241, 125"
+
+  modes:
+    dark: 
+      <<: *fluent-common-dark
+      primary-background-color: "rgb(24,27,26)"
+      rgb-primary-background-color: "24,27,26"
+      secondary-background-color: "rgb(57,70,64)"
+      card-background-color: "rgb(36,40,38)"
+      rgb-card-background-color: "36,40,38"
+
+    light: 
+      <<: *fluent-common-light
+      secondary-background-color: "rgb(210,249,231)"
+      card-background-color: "rgb(239,245,243)"
+      rgb-card-background-color: "239,245,243"
+
+
+
+Metro Orange:
+  <<: *common-card-mods
+  card-mod-theme: "Metro Orange"
+
+  primary-color: "#ff8c00"
+  rgb-primary-color: "255, 140, 0"
+  rgb-primary-color-darker: "204, 112, 0"
+  rgb-primary-color-lighter: "255, 157, 0"
+  hue-primary-color: "33deg"
+
+  accent-color: "#ff9d00"
+  rgb-accent-color: "255, 157, 0"
+
+  modes:
+    dark:
+      <<: *metro-common-dark
+    light:
+      <<: *metro-common-light
+
+Fluent Orange:
+  <<: *common-card-mods
+  card-mod-theme: "Fluent Orange"
+
+  primary-color: "#ff8c00"
+  rgb-primary-color: "255, 140, 0"
+  rgb-primary-color-darker: "204, 112, 0"
+  rgb-primary-color-lighter: "255, 157, 0"
+  hue-primary-color: "33deg"
+
+  accent-color: "#ff9d00"
+  rgb-accent-color: "255, 157, 0"
+
+  modes:
+    dark: 
+      <<: *fluent-common-dark
+      primary-background-color: "rgb(27,26,24)"
+      rgb-primary-background-color: "27,26,24"
+      secondary-background-color: "rgb(70,64,57)"
+      card-background-color: "rgb(40,38,36)"
+      rgb-card-background-color: "40,38,36"
+
+    light: 
+      <<: *fluent-common-light
+      secondary-background-color: "rgb(249,231,210)"
+      card-background-color: "rgb(245,243,239)"
+      rgb-card-background-color: "245,243,239"
+
+
+
+Metro Purple:
+  <<: *common-card-mods
+  card-mod-theme: "Metro Purple"
+
+  primary-color: "#6a00cb"
+  rgb-primary-color: "106, 0, 203" # hsl(hue,100,42)
+  rgb-primary-color-darker: "105, 0, 204" # hsl(hue,100,32)
+  rgb-primary-color-lighter: "169, 77, 255" # hsl(hue,100,50)
+  hue-primary-color: "271deg"
+
+  accent-color: "#A94DFF"
+  rgb-accent-color: "169, 77, 255"
+
+  modes:
+    dark:
+      <<: *metro-common-dark
+    light:
+      <<: *metro-common-light
+
+Fluent Purple:
+  <<: *common-card-mods
+  card-mod-theme: "Fluent Purple"
+
+  primary-color: "#6a00cb"
+  rgb-primary-color: "106, 0, 203" # hsl(hue,100,42)
+  rgb-primary-color-darker: "105, 0, 204" # hsl(hue,100,32)
+  rgb-primary-color-lighter: "169, 77, 255" # hsl(hue,100,50)
+  hue-primary-color: "271deg"
+
+  accent-color: "#A94DFF"
+  rgb-accent-color: "169, 77, 255"
+
+  modes:
+    dark: 
+      <<: *fluent-common-dark
+      primary-background-color: "rgb(26,24,27)" # hsl(hue,5,10)
+      rgb-primary-background-color: "26,24,27"
+      secondary-background-color: "rgb(64,57,70)" # hsl(hue,10,25)
+      card-background-color: "rgb(38,36,40)" # hsl(hue,5,15)
+      rgb-card-background-color: "38,36,40"
+
+    light: 
+      <<: *fluent-common-light
+      secondary-background-color: "rgb(230,210,249)" # hsl(hue,75,90)
+      card-background-color: "rgb(242,239,245)" # hsl(hue,25,95)
+      rgb-card-background-color: "242,239,245"
+
+
+
+# Use the following as the template for your custom color theme.
+
+Metro Slate:
+  <<: *common-card-mods
+  card-mod-theme: "Metro Slate"
+
+  primary-color: "#4f5a68"
+  rgb-primary-color: "79,90,104"
+  rgb-primary-color-darker: "57,65,76"
+  rgb-primary-color-lighter: "101,115,134"
+  hue-primary-color: "214deg"
+
+  accent-color: "#677385"
+  rgb-accent-color: "101,115,134"
+
+  modes:
+    dark:
+      <<: *metro-common-dark
+    light:
+      <<: *metro-common-light
+
+
+Fluent Slate:
+  <<: *common-card-mods
+  card-mod-theme: "Fluent Slate"
+
+  primary-color: "#4f5a68"
+  rgb-primary-color: "79,90,104"
+  rgb-primary-color-darker: "57,65,76"
+  rgb-primary-color-lighter: "101,115,134"
+  hue-primary-color: "214deg"
+
+  accent-color: "#677385"
+  rgb-accent-color: "101,115,134"
+
+  modes:
+    dark:
+      <<: *fluent-common-dark
+      primary-background-color: "rgb(24,25,27)"
+      rgb-primary-background-color: "24,25,27"
+      secondary-background-color: "rgb(57,63,70)"
+      card-background-color: "rgb(36,38,40)"
+      rgb-card-background-color: "36,38,40"
+
+    light:
+      <<: *fluent-common-light
+      secondary-background-color: "rgb(223,229,236)"
+      card-background-color: "rgb(240,242,244)"
+      rgb-card-background-color: "240,242,244"
+
+  
+
+# Paste your custom color themes here.
diff --git a/zigbee2mqtt/coordinator_backup.json b/zigbee2mqtt/coordinator_backup.json
index 8aba216..d923008 100644
--- a/zigbee2mqtt/coordinator_backup.json
+++ b/zigbee2mqtt/coordinator_backup.json
@@ -4,7 +4,7 @@
     "version": 1,
     "source": "zigbee-herdsman@0.14.62",
     "internal": {
-      "date": "2022-10-18T09:42:45.330Z",
+      "date": "2022-10-27T06:35:16.139Z",
       "znpVersion": 1
     }
   },
@@ -25,7 +25,7 @@
   "network_key": {
     "key": "01030507090b0d0f00020406080a0c0d",
     "sequence_number": 0,
-    "frame_counter": 194444
+    "frame_counter": 250500
   },
   "devices": [
     {