adding new theme and some theme adjustments

homeassistant/config/lovelace_tiles/templates/cards/card_ac/card_ac.yaml

@@ -383,7 +383,7 @@ ac_curr_temp:
       - box-shadow: "none"
     custom_fields:
       curr_temp:
-        - color: 'var(--grey-color)'
+        - color: 'var(--primary-text-color)' #'var(--grey-color)'
         - background-color: 'rgba(var(--rgb-grey-color),0.2)'
         - border-radius: '50%'
         - display: flex

homeassistant/config/lovelace_tiles/templates/chips/chips.yaml

@@ -35,7 +35,7 @@ chip_base:
       - display: flex
       - justify-content: center
       - align-items: center
-      - color: 'var(--grey-color)'
+      - color: 'var(--chip-icon-disabled-color)'
     label:
       - display: flex
       - justify-content: center

homeassistant/config/themes/theme_tiles.yaml

@@ -34,6 +34,9 @@ Tiles:
       # Colors
       rgb-disabled-color: '189,189,189' #'#bdbdbd'
 
+      # Chips
+      chip-icon-disabled-color: '#646464'
+
       # Popup
       popup-backdrop-filter: "blur(10px) brightness(100%)"
 
@@ -49,6 +52,9 @@ Tiles:
       # Colors
       rgb-disabled-color: '70,70,70' #'#464646'
 
+      # Chips
+      chip-icon-disabled-color: 'var(--grey-color)'
+
       # Popup
       popup-backdrop-filter: "blur(10px) contrast(50%)"
 

homeassistant/config/themes/theme_tiles_material.yaml

@@ -0,0 +1,151 @@
+Tiles Material:
+
+  # Theme
+  ha-card-border-width: 0
+
+  # Layout
+  view-margins: "0px"
+  grid-layout-margins: "-10px -2px 12px"
+
+  # Colors
+  yellow-color: '#ffc107'
+  rgb-yellow-color: '255,193,7' #'#ffc107'
+  rgb-blue-color: '33,150,243' #'#2196f3'
+  rgb-purple-color: '146,107,199' #'#926BC7'
+  rgb-green-color: '76,175,80' #'#4caf50'
+  red-color: '#F54436'
+  rgb-red-color: "245, 68, 54" # Original HA red -> '244,67,54' #'#f44336'
+
+  # Climate Colors
+  rgb-climate-heat-color: '255,111,34'
+  rgb-climate-cool-color: '33,150,243'
+  rgb-climate-auto-color: '255,111,34'
+  rgb-climate-fan-only-color: '0,188,212'
+  rgb-climate-dry-color: '255,152,0'
+
+  # Control Button
+  control-button-border-radius: '10px'
+
+  # Chips
+  chips-left-margin: "2px"
+
+  modes:
+
+    light:
+
+      # Theme
+      ha-card-box-shadow: 'rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px' #rgba(0,0,0,0.06) 0 0 10px
+      card-background-color: "#FAFAFA"
+      primary-background-color: "#F5F5F5"
+      secondary-background-color: "#F5F5F5"
+
+      # Chips
+      chip-icon-disabled-color: '#787878'
+
+      # Colors
+      grey-color: "#C3C3C3"
+      rgb-grey-color: "195,195,195"
+      disabled-color: '#C8C8C8'
+      rgb-disabled-color: '200,200,200'
+
+      # Popup
+      popup-backdrop-filter: "blur(10px) brightness(100%)"
+
+      # Printer colors
+      printer-black-color: 'rgba(150,150,150,1)'
+      printer-yellow-color: 'rgba(250,255,0,0.2)'
+      printer-magenta-color: 'rgba(248,0,255,0.2)'
+      printer-cyan-color: 'rgba(0,255,255,0.2)'  
+
+
+    dark:
+
+      # Theme
+      ha-card-box-shadow: rgba(0,0,0,0.1) 0 1 10px
+      card-background-color: "#1C1E22"
+      primary-background-color: "#000000"
+      secondary-background-color: "#000000"
+      app-header-background-color: 'var(--card-background-color)'
+      app-header-text-color: 'var(--primary-text-color)'      
+
+      # Chips
+      chip-icon-disabled-color: 'var(--grey-color)'
+
+      # Colors
+      grey-color: '#787878' #'#9e9e9e'
+      rgb-grey-color: '120,120,120' 
+      disabled-color: '#464646'
+      rgb-disabled-color: '70,70,70' 
+
+      # Popup
+      popup-backdrop-filter: "blur(10px) contrast(50%)"
+
+      # Printer colors
+      printer-black-color: 'rgba(50,50,50,1)'
+      printer-yellow-color: 'rgba(250,255,0,0.2)'
+      printer-magenta-color: 'rgba(248,0,255,0.2)'
+      printer-cyan-color: 'rgba(0,255,255,0.2)'      
+
+
+# Card-Mod
+  card-mod-theme: "Tiles Material"
+
+  card-mod-more-info-yaml: |
+    .: |
+      @media (max-width: 450px), (max-height: 500px) {
+        ha-dialog {
+          --mdc-dialog-min-width: 100vw !important;
+        }
+      }
+      ha-dialog {
+        direction: rtl !important;
+      }
+    $: |
+      .mdc-dialog__scrim {
+        backdrop-filter: var(--popup-backdrop-filter);
+        -webkit-backdrop-filter: var(--popup-backdrop-filter);
+      }        
+      @media (max-width: 450px), (max-height: 500px) {
+        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
+          border-radius: 0px !important;
+        }
+      }
+    ha-dialog$: |
+      .mdc-dialog__scrim {
+        backdrop-filter: var(--popup-backdrop-filter);
+        -webkit-backdrop-filter: var(--popup-backdrop-filter);
+      }
+      @media (max-width: 450px), (max-height: 500px) {
+        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
+          border-radius: 0px !important;
+        }
+      }
+
+
+  card-mod-view-yaml: |
+    "*:first-child$": |
+      #columns .column > * {
+        padding-left: 5px;
+        padding-right: 5px;
+        padding-bottom: 5px;
+      }
+    grid-layout$: |
+      #root {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+      }
+
+  # Fixing Sidebar profile right padding, in case of RTL
+  card-mod-sidebar: |
+    a.profile {
+      paper-icon-item {
+        padding-right: 4px !important;
+      }
+    }
+
+  # Fixing the tile cards height in case of 2 rows span in layout
+  card-mod-card: |
+    ha-card {
+      height: fit-content !important;
+    }   
+

homeassistant/config/ui-wallpanel-tiles.yaml

@@ -153,7 +153,7 @@ sidebar:
       :host {
         width: 100%;
         height:100%;
-        --card-background-color: rgba(var(--rgb-disabled-color),0.2);
+        --card-background-color: rgba(var(--rgb-disabled-color),0.4);
       }
 
 views: