From 85caa9b237aeedc714c950a7cb9271ab7953ca3d Mon Sep 17 00:00:00 2001 From: dmatik Date: Thu, 15 Feb 2024 16:21:04 +0200 Subject: [PATCH] adding new theme and some theme adjustments --- .../templates/cards/card_ac/card_ac.yaml | 2 +- .../lovelace_tiles/templates/chips/chips.yaml | 2 +- homeassistant/config/themes/theme_tiles.yaml | 6 + .../config/themes/theme_tiles_material.yaml | 151 ++++++++++++++++++ homeassistant/config/ui-wallpanel-tiles.yaml | 2 +- 5 files changed, 160 insertions(+), 3 deletions(-) create mode 100644 homeassistant/config/themes/theme_tiles_material.yaml diff --git a/homeassistant/config/lovelace_tiles/templates/cards/card_ac/card_ac.yaml b/homeassistant/config/lovelace_tiles/templates/cards/card_ac/card_ac.yaml index 26f26dcb..ef78a4ee 100644 --- a/homeassistant/config/lovelace_tiles/templates/cards/card_ac/card_ac.yaml +++ b/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 diff --git a/homeassistant/config/lovelace_tiles/templates/chips/chips.yaml b/homeassistant/config/lovelace_tiles/templates/chips/chips.yaml index 5ea93da1..a04dc18f 100644 --- a/homeassistant/config/lovelace_tiles/templates/chips/chips.yaml +++ b/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 diff --git a/homeassistant/config/themes/theme_tiles.yaml b/homeassistant/config/themes/theme_tiles.yaml index a0a95645..455d855f 100644 --- a/homeassistant/config/themes/theme_tiles.yaml +++ b/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%)" diff --git a/homeassistant/config/themes/theme_tiles_material.yaml b/homeassistant/config/themes/theme_tiles_material.yaml new file mode 100644 index 00000000..4a7a563e --- /dev/null +++ b/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; + } + diff --git a/homeassistant/config/ui-wallpanel-tiles.yaml b/homeassistant/config/ui-wallpanel-tiles.yaml index 43969994..4cfed0ce 100644 --- a/homeassistant/config/ui-wallpanel-tiles.yaml +++ b/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: