diff --git a/README.md b/README.md index 47c6659..79ca463 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,14 @@ height: 88 # Card Mod Powered Footer -This theme uses [card-mod](https://github.com/thomasloven/lovelace-card-mod) to turn the header into a footer, to remove the selection bar, and to highlight the current view with a colored icon and background behind the icon. +This theme uses [card-mod](https://github.com/thomasloven/lovelace-card-mod) to: + +- Turn the header into a footer. +- Remove the selection bar. +- Space the view icons evenly along the entire footer. +- Add the view name below the icon. +- Highlight the current view with a colored icon and background behind the icon. + You can disable this by commenting out or deleting everything below `### Card Mod theming ###` after installing. After installing from HACS this theme can be found in the folder `/config/themes/material_rounded/`. When using the card-mod footer, you may find that it "breaks" if you enter edit mode or go to a subview and back. This is due to the effected elements unloading when either of these actions are done, which causes the card-mod css to unload. This can be fixed by navigating to a different dashboard and back, refreshing the page, or reloading the theme via a service call. @@ -68,7 +75,7 @@ paper-tab.iron-selected > ha-icon[title='Lights'] { } ``` -This theme was initially modified from the [Graphite theme](https://github.com/TilmanGriesel/graphite), as I found that it was my favorite of the available Home Assistant themes on HACS. +This theme was initially modified from the [Graphite theme](https://github.com/TilmanGriesel/graphite), as I found that it was my favorite of the available Home Assistant themes on HACS when I started creating this theme. Therefore, it contains similar logic for reusing variables and possibly some unusued variables. [last-commit-shield]: https://img.shields.io/github/last-commit/Nerwyn/material-rounded-theme?style=for-the-badge [commits]: https://github.com/Nerwyn/material-rounded-theme/commits/main diff --git a/themes/material_rounded.yaml b/themes/material_rounded.yaml index 5f808eb..f963574 100644 --- a/themes/material_rounded.yaml +++ b/themes/material_rounded.yaml @@ -149,7 +149,7 @@ Material Rounded: token-size-radius-medium: 24px token-size-radius-large: 28px token-size-radius-card: var(--token-size-radius-large) - token-size-width-border-card: 1px + token-size-width-border-card: 0px token-size-height-slider: 4px # token-size-height-navbar: 80px token-size-font-title: 28px @@ -296,31 +296,6 @@ Material Rounded: codemirror-property: var(--accent-color) codemirror-atom: var(--codemirror-property) - # RGB colors - rgb-white-color: 240, 243, 255 - rgb-purple-color: 189, 157, 255 - rgb-pink-color: 255, 98, 192 - rgb-red-color: 255, 97, 116 - rgb-deep-purple-color: 166, 77, 255 - rgb-indigo-color: 84, 132, 255 - rgb-blue-color: 33, 150, 243 - rgb-light-blue-color: 3, 169, 244 - rgb-cyan-color: 0, 188, 212 - rgb-teal-color: 107, 255, 237 - rgb-green-color: 141, 253, 166 - rgb-light-green-color: 156, 255, 166 - rgb-lime-color: 205, 220, 57 - rgb-yellow-color: 255, 235, 59 - rgb-amber-color: 255, 211, 99 - rgb-orange-color: 229, 145, 9 - rgb-deep-orange-color: 255, 87, 34 - rgb-brown-color: 121, 85, 72 - rgb-grey-color: 158, 158, 158 - rgb-blue-grey-color: 96, 125, 139 - rgb-black-color: 0, 0, 0 - rgb-disabled-color: 61, 65, 85 - rgb-state-inactive-color: 123, 126, 139 - ### Card Mod theming ### # Turns header into a footer # Colors current view icon and background instead of underline