make transparent theme card backgrounds truly transparent and add fix…

…es for vars used as dropdown backgrounds in pre-commit.py
Nerwyn · Aug 24, 2024 · 365b1e9 · 365b1e9
1 parent 832fc99
commit 365b1e9
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@ Relies on [card-mod](https://github.com/thomasloven/lovelace-card-mod) for toolb
 
 Don't like the blue accents? You can choose a different Material You base color! See below for more. Also requires card-mod.
 
-This theme also includes "Transparent Card" versions with card backgrounds that match the view background. It also includes separate light and dark versions of all themes for niche use cases.
+This theme also includes "Transparent Card" versions with transparent card backgrounds. It also includes separate light and dark versions of all themes for niche use cases.
 
 ## Screenshots
 
@@ -174,7 +174,7 @@ This theme was initially modified from [Graphite theme](https://github.com/Tilma
 
 Due to the multiple versions and complexity of this theme, I have split it into multiple CSS and yaml files and created a Python git pre-commit build pipeline to compile all of the files into a single Home Assistant theme file. You can either run this build pipeline by making a git commit (not to the main repo of course) running the file `build.sh`, or running the `pre-commit.py` Python file.
 
-Twelve versions of a theme are created per base theme - with card mod, without card mod, transparent cards with card mod, transparent cards without card mod, and a separate light and dark version of each. The no card mod versions of theme have the `card-mod-theme` fields removed and will have no design upgrades or custom colors. The transparent card versions of the theme use the same color for the background and cards, making them appear transparent (true transparency breaks overlays like dropdowns). The separate light and dark versions of the theme are if you need to explicitly set a device to use light or dark mode without the Home Assistant built in theme mode options.
+Twelve versions of a theme are created per base theme - with card mod, without card mod, transparent cards with card mod, transparent cards without card mod, and a separate light and dark version of each. The no card mod versions of theme have the `card-mod-theme` fields removed and will have no design upgrades or custom colors. The separate light and dark versions of the theme are if you need to explicitly set a device to use light or dark mode without the Home Assistant built in theme mode options.
 
 Any files under common that end in `.yaml` are treated as `card-mod-*-yaml` fields in the themes, and files ending in `.css` contain the actual card-mod CSS. Different overall version of the theme are included in separate folders, such as `material_rounded`. CSS files are copied into the card-mod yaml fields using jinja2 templates, allowing for repetitive styles that go in different shadow roots to all source from the same file.
 

diff --git a/githooks/pre-commit.py b/githooks/pre-commit.py
@@ -48,12 +48,15 @@ def main():
 
 			# Create a transparent card background version of theme
 			theme_title = 'Material Rounded Transparent Card'
-			transparent = 'var(--lovelace-background)'
+			transparent = 'rgb(0, 0, 0, 0)'
 			output[theme_title] = deepcopy(base_theme)
 			output[theme_title]['modes']['dark']['card-background-color'] = transparent
 			output[theme_title]['modes']['light']['card-background-color'] = transparent
 			output[theme_title]['ha-card-background'] = transparent
-			output[theme_title]['ha-card-border-color'] = transparent
+			output[theme_title]['modes']['dark']['input-background-color'] = transparent
+			output[theme_title]['modes']['light']['input-background-color'] = transparent
+			output[theme_title]['mdc-theme-surface'] = 'var(--lovelace-background)'
+			output[theme_title]['material-background-color'] = 'var(--lovelace-background)'
 
 			# Create a no mod versions of theme with fixed status and navbar colors
 			theme_title = 'Material Rounded No Mod'

diff --git a/themes/material_rounded.yaml b/themes/material_rounded.yaml
@@ -805,9 +805,9 @@ Material Rounded Transparent Card:
   divider-color: var(--navbar-background)
   font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
   footer-height: 80px
-  ha-card-background: var(--lovelace-background)
+  ha-card-background: rgb(0, 0, 0, 0)
   ha-card-border: none
-  ha-card-border-color: var(--lovelace-background)
+  ha-card-border-color: rgba(0, 0, 0, 0)
   ha-card-border-radius: var(--border-radius)
   ha-card-border-style: none
   ha-card-border-width: 0px
@@ -827,6 +827,7 @@ Material Rounded Transparent Card:
   input-label-ink-color: var(--primary-text-color)
   light-primary-color: var(--primary-color)
   link-text-color: var(--primary-color)
+  material-background-color: var(--lovelace-background)
   md-divider-color: var(--divider-color)
   mdc-dialog-scrim-color: rgba(4, 5, 7, 0.9)
   mdc-radio-unchecked-color: var(--mdc-checkbox-unchecked-color)
@@ -840,6 +841,7 @@ Material Rounded Transparent Card:
   mdc-theme-on-secondary: var(--accent-color)
   mdc-theme-primary: var(--primary-color)
   mdc-theme-secondary: var(--primary-color)
+  mdc-theme-surface: var(--lovelace-background)
   mdc-top-app-bar-fixed-box-shadow: none
   mdc-typography-body1-font-family: var(--font-family)
   mdc-typography-button-font-family: var(--font-family)
@@ -849,11 +851,11 @@ Material Rounded Transparent Card:
     dark:
       accent-color: rgb(0, 74, 119)
       accent-luminance: 23%
-      card-background-color: var(--lovelace-background)
+      card-background-color: rgb(0, 0, 0, 0)
       dark-mode: 1
       disabled-color: rgb(0, 0, 0)
       disabled-text-color: rgba(255, 255, 255, 0.5)
-      input-background-color: rgb(46, 48, 56)
+      input-background-color: rgb(0, 0, 0, 0)
       lovelace-background: rgb(19, 19, 20)
       mdc-checkbox-unchecked-color: rgb(138, 140, 153)
       mdc-switch-checked-button-color: var(--accent-color)
@@ -873,11 +875,11 @@ Material Rounded Transparent Card:
     light:
       accent-color: rgb(194, 231, 255)
       accent-luminance: 88%
-      card-background-color: var(--lovelace-background)
+      card-background-color: rgb(0, 0, 0, 0)
       dark-mode: 0
       disabled-color: rgb(173, 176, 174)
       disabled-text-color: rgb(128, 128, 128)
-      input-background-color: rgb(234, 234, 235)
+      input-background-color: rgb(0, 0, 0, 0)
       lovelace-background: rgb(255, 255, 255)
       mdc-checkbox-unchecked-color: rgb(42, 43, 51)
       mdc-switch-checked-button-color: rgb(255, 255, 255)
@@ -941,7 +943,7 @@ Material Rounded Transparent Card Dark:
   app-header-selection-bar-color: none
   app-header-text-color: var(--primary-text-color)
   border-radius: 28px
-  card-background-color: var(--lovelace-background)
+  card-background-color: rgb(0, 0, 0, 0)
   card-mod-theme: Material Rounded
   code-editor-background-color: var(--navbar-background)
   codemirror-atom: var(--codemirror-property)
@@ -957,9 +959,9 @@ Material Rounded Transparent Card Dark:
   divider-color: var(--navbar-background)
   font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
   footer-height: 80px
-  ha-card-background: var(--lovelace-background)
+  ha-card-background: rgb(0, 0, 0, 0)
   ha-card-border: none
-  ha-card-border-color: var(--lovelace-background)
+  ha-card-border-color: rgba(0, 0, 0, 0)
   ha-card-border-radius: var(--border-radius)
   ha-card-border-style: none
   ha-card-border-width: 0px
@@ -968,7 +970,7 @@ Material Rounded Transparent Card Dark:
   ha-config-card-border-radius: 16px
   header-height: 48px
   horizontal-stack-card-margin: 0px 4px
-  input-background-color: rgb(46, 48, 56)
+  input-background-color: rgb(0, 0, 0, 0)
   input-disabled-fill-color: rgba(var(--input-background-color), 0.5)
   input-disabled-ink-color: var(--disabled-text-color)
   input-disabled-label-ink-color: var(--disabled-text-color)
@@ -981,6 +983,7 @@ Material Rounded Transparent Card Dark:
   light-primary-color: var(--primary-color)
   link-text-color: var(--primary-color)
   lovelace-background: rgb(19, 19, 20)
+  material-background-color: var(--lovelace-background)
   md-divider-color: var(--divider-color)
   mdc-checkbox-unchecked-color: rgb(138, 140, 153)
   mdc-dialog-scrim-color: rgba(4, 5, 7, 0.9)
@@ -999,6 +1002,7 @@ Material Rounded Transparent Card Dark:
   mdc-theme-on-secondary: var(--accent-color)
   mdc-theme-primary: var(--primary-color)
   mdc-theme-secondary: var(--primary-color)
+  mdc-theme-surface: var(--lovelace-background)
   mdc-top-app-bar-fixed-box-shadow: none
   mdc-typography-body1-font-family: var(--font-family)
   mdc-typography-button-font-family: var(--font-family)
@@ -1062,7 +1066,7 @@ Material Rounded Transparent Card Light:
   app-header-selection-bar-color: none
   app-header-text-color: var(--primary-text-color)
   border-radius: 28px
-  card-background-color: var(--lovelace-background)
+  card-background-color: rgb(0, 0, 0, 0)
   card-mod-theme: Material Rounded
   code-editor-background-color: var(--navbar-background)
   codemirror-atom: var(--codemirror-property)
@@ -1078,9 +1082,9 @@ Material Rounded Transparent Card Light:
   divider-color: var(--navbar-background)
   font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
   footer-height: 80px
-  ha-card-background: var(--lovelace-background)
+  ha-card-background: rgb(0, 0, 0, 0)
   ha-card-border: none
-  ha-card-border-color: var(--lovelace-background)
+  ha-card-border-color: rgba(0, 0, 0, 0)
   ha-card-border-radius: var(--border-radius)
   ha-card-border-style: none
   ha-card-border-width: 0px
@@ -1089,7 +1093,7 @@ Material Rounded Transparent Card Light:
   ha-config-card-border-radius: 16px
   header-height: 48px
   horizontal-stack-card-margin: 0px 4px
-  input-background-color: rgb(234, 234, 235)
+  input-background-color: rgb(0, 0, 0, 0)
   input-disabled-fill-color: rgba(var(--input-background-color), 0.5)
   input-disabled-ink-color: var(--disabled-text-color)
   input-disabled-label-ink-color: var(--disabled-text-color)
@@ -1102,6 +1106,7 @@ Material Rounded Transparent Card Light:
   light-primary-color: var(--primary-color)
   link-text-color: var(--primary-color)
   lovelace-background: rgb(255, 255, 255)
+  material-background-color: var(--lovelace-background)
   md-divider-color: var(--divider-color)
   mdc-checkbox-unchecked-color: rgb(42, 43, 51)
   mdc-dialog-scrim-color: rgba(4, 5, 7, 0.9)
@@ -1120,6 +1125,7 @@ Material Rounded Transparent Card Light:
   mdc-theme-on-secondary: var(--accent-color)
   mdc-theme-primary: var(--primary-color)
   mdc-theme-secondary: var(--primary-color)
+  mdc-theme-surface: var(--lovelace-background)
   mdc-top-app-bar-fixed-box-shadow: none
   mdc-typography-body1-font-family: var(--font-family)
   mdc-typography-button-font-family: var(--font-family)
@@ -1191,9 +1197,9 @@ Material Rounded Transparent Card No Mod:
   divider-color: var(--navbar-background)
   font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
   footer-height: 80px
-  ha-card-background: var(--lovelace-background)
+  ha-card-background: rgb(0, 0, 0, 0)
   ha-card-border: none
-  ha-card-border-color: var(--lovelace-background)
+  ha-card-border-color: rgba(0, 0, 0, 0)
   ha-card-border-radius: var(--border-radius)
   ha-card-border-style: none
   ha-card-border-width: 0px
@@ -1213,6 +1219,7 @@ Material Rounded Transparent Card No Mod:
   input-label-ink-color: var(--primary-text-color)
   light-primary-color: var(--primary-color)
   link-text-color: var(--primary-color)
+  material-background-color: var(--lovelace-background)
   md-divider-color: var(--divider-color)
   mdc-dialog-scrim-color: rgba(4, 5, 7, 0.9)
   mdc-radio-unchecked-color: var(--mdc-checkbox-unchecked-color)
@@ -1226,6 +1233,7 @@ Material Rounded Transparent Card No Mod:
   mdc-theme-on-secondary: var(--accent-color)
   mdc-theme-primary: var(--primary-color)
   mdc-theme-secondary: var(--primary-color)
+  mdc-theme-surface: var(--lovelace-background)
   mdc-top-app-bar-fixed-box-shadow: none
   mdc-typography-body1-font-family: var(--font-family)
   mdc-typography-button-font-family: var(--font-family)
@@ -1235,11 +1243,11 @@ Material Rounded Transparent Card No Mod:
     dark:
       accent-color: rgb(0, 74, 119)
       accent-luminance: 23%
-      card-background-color: var(--lovelace-background)
+      card-background-color: rgb(0, 0, 0, 0)
       dark-mode: 1
       disabled-color: rgb(0, 0, 0)
       disabled-text-color: rgba(255, 255, 255, 0.5)
-      input-background-color: rgb(46, 48, 56)
+      input-background-color: rgb(0, 0, 0, 0)
       lovelace-background: rgb(19, 19, 20)
       mdc-checkbox-unchecked-color: rgb(138, 140, 153)
       mdc-switch-checked-button-color: var(--accent-color)
@@ -1259,11 +1267,11 @@ Material Rounded Transparent Card No Mod:
     light:
       accent-color: rgb(194, 231, 255)
       accent-luminance: 88%
-      card-background-color: var(--lovelace-background)
+      card-background-color: rgb(0, 0, 0, 0)
       dark-mode: 0
       disabled-color: rgb(173, 176, 174)
       disabled-text-color: rgb(128, 128, 128)
-      input-background-color: rgb(234, 234, 235)
+      input-background-color: rgb(0, 0, 0, 0)
       lovelace-background: rgb(255, 255, 255)
       mdc-checkbox-unchecked-color: rgb(42, 43, 51)
       mdc-switch-checked-button-color: rgb(255, 255, 255)
@@ -1327,7 +1335,7 @@ Material Rounded Transparent Card No Mod Dark:
   app-header-selection-bar-color: none
   app-header-text-color: var(--primary-text-color)
   border-radius: 28px
-  card-background-color: var(--lovelace-background)
+  card-background-color: rgb(0, 0, 0, 0)
   code-editor-background-color: var(--navbar-background)
   codemirror-atom: var(--codemirror-property)
   codemirror-keyword: rgb(140 169 255)
@@ -1342,9 +1350,9 @@ Material Rounded Transparent Card No Mod Dark:
   divider-color: var(--navbar-background)
   font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
   footer-height: 80px
-  ha-card-background: var(--lovelace-background)
+  ha-card-background: rgb(0, 0, 0, 0)
   ha-card-border: none
-  ha-card-border-color: var(--lovelace-background)
+  ha-card-border-color: rgba(0, 0, 0, 0)
   ha-card-border-radius: var(--border-radius)
   ha-card-border-style: none
   ha-card-border-width: 0px
@@ -1353,7 +1361,7 @@ Material Rounded Transparent Card No Mod Dark:
   ha-config-card-border-radius: 16px
   header-height: 48px
   horizontal-stack-card-margin: 0px 4px
-  input-background-color: rgb(46, 48, 56)
+  input-background-color: rgb(0, 0, 0, 0)
   input-disabled-fill-color: rgba(var(--input-background-color), 0.5)
   input-disabled-ink-color: var(--disabled-text-color)
   input-disabled-label-ink-color: var(--disabled-text-color)
@@ -1366,6 +1374,7 @@ Material Rounded Transparent Card No Mod Dark:
   light-primary-color: var(--primary-color)
   link-text-color: var(--primary-color)
   lovelace-background: rgb(19, 19, 20)
+  material-background-color: var(--lovelace-background)
   md-divider-color: var(--divider-color)
   mdc-checkbox-unchecked-color: rgb(138, 140, 153)
   mdc-dialog-scrim-color: rgba(4, 5, 7, 0.9)
@@ -1384,6 +1393,7 @@ Material Rounded Transparent Card No Mod Dark:
   mdc-theme-on-secondary: var(--accent-color)
   mdc-theme-primary: var(--primary-color)
   mdc-theme-secondary: var(--primary-color)
+  mdc-theme-surface: var(--lovelace-background)
   mdc-top-app-bar-fixed-box-shadow: none
   mdc-typography-body1-font-family: var(--font-family)
   mdc-typography-button-font-family: var(--font-family)
@@ -1447,7 +1457,7 @@ Material Rounded Transparent Card No Mod Light:
   app-header-selection-bar-color: none
   app-header-text-color: var(--primary-text-color)
   border-radius: 28px
-  card-background-color: var(--lovelace-background)
+  card-background-color: rgb(0, 0, 0, 0)
   code-editor-background-color: var(--navbar-background)
   codemirror-atom: var(--codemirror-property)
   codemirror-keyword: rgb(140 169 255)
@@ -1462,9 +1472,9 @@ Material Rounded Transparent Card No Mod Light:
   divider-color: var(--navbar-background)
   font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
   footer-height: 80px
-  ha-card-background: var(--lovelace-background)
+  ha-card-background: rgb(0, 0, 0, 0)
   ha-card-border: none
-  ha-card-border-color: var(--lovelace-background)
+  ha-card-border-color: rgba(0, 0, 0, 0)
   ha-card-border-radius: var(--border-radius)
   ha-card-border-style: none
   ha-card-border-width: 0px
@@ -1473,7 +1483,7 @@ Material Rounded Transparent Card No Mod Light:
   ha-config-card-border-radius: 16px
   header-height: 48px
   horizontal-stack-card-margin: 0px 4px
-  input-background-color: rgb(234, 234, 235)
+  input-background-color: rgb(0, 0, 0, 0)
   input-disabled-fill-color: rgba(var(--input-background-color), 0.5)
   input-disabled-ink-color: var(--disabled-text-color)
   input-disabled-label-ink-color: var(--disabled-text-color)
@@ -1486,6 +1496,7 @@ Material Rounded Transparent Card No Mod Light:
   light-primary-color: var(--primary-color)
   link-text-color: var(--primary-color)
   lovelace-background: rgb(255, 255, 255)
+  material-background-color: var(--lovelace-background)
   md-divider-color: var(--divider-color)
   mdc-checkbox-unchecked-color: rgb(42, 43, 51)
   mdc-dialog-scrim-color: rgba(4, 5, 7, 0.9)
@@ -1504,6 +1515,7 @@ Material Rounded Transparent Card No Mod Light:
   mdc-theme-on-secondary: var(--accent-color)
   mdc-theme-primary: var(--primary-color)
   mdc-theme-secondary: var(--primary-color)
+  mdc-theme-surface: var(--lovelace-background)
   mdc-top-app-bar-fixed-box-shadow: none
   mdc-typography-body1-font-family: var(--font-family)
   mdc-typography-button-font-family: var(--font-family)