├── darktheme.png ├── hacs.json ├── .github ├── FUNDING.yml ├── stale.yml └── workflows │ └── validate.yml ├── LICENSE ├── info.md ├── theme_maker.py ├── README.md ├── themes ├── dark-soft-ui.yaml ├── dark-soft-ui-red.yaml ├── dark-soft-ui-cyan.yaml ├── dark-soft-ui-fire.yaml ├── dark-soft-ui-lime.yaml ├── dark-soft-ui-mint.yaml ├── dark-soft-ui-rose.yaml ├── dark-soft-ui-green.yaml ├── dark-soft-ui-orange.yaml ├── dark-soft-ui-violet.yaml └── dark-soft-ui-yellow.yaml └── theme.yaml /darktheme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KTibow/lovelace-dark-soft-ui-theme/HEAD/darktheme.png -------------------------------------------------------------------------------- /hacs.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Dark Soft UI Theme", 3 | "homeassistant": "0.98.0", 4 | "country": "US" 5 | } 6 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | custom: 2 | - https://saythanks.io/to/kendell.r%40outlook.com 3 | - https://community.home-assistant.io/t/220908?u=ktibow 4 | -------------------------------------------------------------------------------- /.github/stale.yml: -------------------------------------------------------------------------------- 1 | daysUntilStale: 1 2 | daysUntilClose: 1 3 | exemptLabels: 4 | - good first issue 5 | staleLabel: old 6 | markComment: > 7 | Any updates? Did @KTibow forget to follow up? 8 | No point in keeping something open with no status updates. 9 | closeComment: false 10 | -------------------------------------------------------------------------------- /.github/workflows/validate.yml: -------------------------------------------------------------------------------- 1 | name: Validate 2 | 3 | on: 4 | push: 5 | pull_request: 6 | schedule: 7 | - cron: "0 0 * * *" 8 | 9 | jobs: 10 | validate: 11 | runs-on: "ubuntu-latest" 12 | steps: 13 | - uses: "actions/checkout@v2" 14 | - name: HACS validation 15 | uses: "hacs/integration/action@master" 16 | with: 17 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 18 | CATEGORY: "theme" 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Kendell R 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /info.md: -------------------------------------------------------------------------------- 1 | # Lovelace Soft UI dark theme 2 | {% if installed %} 3 | **Thanks for installing!** 4 | {% else %} 5 | **Install? I worked pretty hard on this...** 6 | {% endif %} 7 | {% if version_available != version_installed %} 8 | ## Please update your version! It's important, as I've added stuff in version {{version_available}} 9 | {% endif %} 10 | Home Assistant dark theme, built on from @JuanMTech, using style boilerplates from @thomasloven and @N-L1. 11 | This theme depends on [`card-mod`](https://github.com/thomasloven/lovelace-card-mod) for the soft-ui styling. 12 | Looking for the [light theme instead?](https://github.com/KTibow/lovelace-light-soft-ui-theme/) 13 | ## Features 14 | This theme can 15 | - Apply soft-ui to an auto-generated dashboard, and keep it auto-generated. 16 | - Help you to only use the necessary style in your handmade dashboard, and keep it simple. 17 | - Work in most places over HA, not just Lovelace. 18 | - Apply a compact header to Lovelace, without installing an addon. 19 | ## Screenshot 20 | [![Screenshot of it](https://raw.githubusercontent.com/KTibow/lovelace-dark-soft-ui-theme/main/darktheme.png)](#) 21 | ## More details 22 | Note: This will clamp your columns to 1 column wide. [More info.](https://github.com/KTibow/lovelace-light-soft-ui-theme/issues/6#issuecomment-669204209) 23 | Customize your cards more with [the full soft UI guide](https://github.com/N-l1/lovelace-soft-ui). 24 | Go see more [over on GitHub](https://github.com/KTibow/lovelace-light-soft-ui-theme/). 25 | -------------------------------------------------------------------------------- /theme_maker.py: -------------------------------------------------------------------------------- 1 | import colorsys 2 | 3 | 4 | def convert_color(color): 5 | color = [round(comp * 255.0) for comp in color] 6 | color = "".join([format(comp, "x") for comp in color]) 7 | color = color.zfill(6) 8 | return f'"#{color}"' 9 | 10 | 11 | theme = open("theme.yaml").read() 12 | for color_name, color_hue in [ 13 | ["Red", 0], 14 | ["Fire", 18], 15 | ["Orange", 36], 16 | ["Yellow", 54], 17 | ["Lime", 90], 18 | ["Green", 129], 19 | ["Mint", 155], 20 | ["Cyan", 190], 21 | ["", 214], 22 | ["Violet", 270], 23 | ["Rose", 300], 24 | ]: 25 | primary_color = colorsys.hsv_to_rgb(color_hue / 360.0, 0.59, 0.92) 26 | primary_color = convert_color(primary_color) 27 | accent_color = colorsys.hsv_to_rgb(((color_hue - 15) % 360) / 360.0, 0.59, 0.92) 28 | accent_color = convert_color(accent_color) 29 | background_color = colorsys.hsv_to_rgb(color_hue / 360.0, 0.12, 0.22) 30 | background_color = convert_color(background_color) 31 | more_info_background_color = background_color.replace('"', "") + "cc" 32 | if color_name != "": 33 | color_name = " " + color_name 34 | file_color_name = color_name.lower().replace(" ", "-") 35 | with open(rf"themes\dark-soft-ui{file_color_name}.yaml", "w") as theme_file: 36 | theme_file.write( 37 | theme.replace("{color_name}", color_name) 38 | .replace("{primary_color}", primary_color) 39 | .replace("{accent_color}", accent_color) 40 | .replace("{background_color}", background_color) 41 | .replace("{more_info_background_color}", more_info_background_color) 42 | ) 43 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Soft UI dark theme 2 | ## This is an old theme. 3 | **Use the `lovelace-soft-theme` instead.** 4 | [![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg?style=for-the-badge)](https://github.com/custom-components/hacs) 5 | Home Assistant dark theme, built on from @JuanMTech, using style boilerplates from @thomasloven and @N-L1. 6 | This theme depends on [`card-mod`](https://github.com/thomasloven/lovelace-card-mod) for the soft-ui styling. 7 | Looking for the [light theme instead?](https://github.com/KTibow/lovelace-light-soft-ui-theme/) 8 | This theme is pretty powerful. It can: 9 | - Apply soft-ui to an auto-generated dashboard, and keep it auto-generated. 10 | - Help you to only use the necessary style in your handmade dashboard, and keep it simple. 11 | - Work in most places over HA, not just Lovelace. 12 | - Apply a compact header to Lovelace, without installing an addon. 13 | ## Screenshot 14 | [![Screenshot of it](darktheme.png)](#) 15 | *Custom dashboard made with [soft ui](https://github.com/N-l1/lovelace-soft-ui)* 16 | ## Notes 17 | - You can use your own colors by just copy/pasting the card-mod part. 18 | - This will clamp your columns to 1 column wide. [More info.](https://github.com/KTibow/lovelace-light-soft-ui-theme/issues/6#issuecomment-669204209) 19 | - [These things are supported.](https://github.com/KTibow/lovelace-light-soft-ui-theme/issues/3) 20 | - This theme was based off of the [Dark Purple](https://github.com/JuanMTech/Home_Assistant_files/blob/b2ffbf2a3ffc05638b02f06d63e45618740ae281/themes/dark_purple.yaml) theme. 21 | ## Fonts 22 | Some fonts that you should probably download and install that I think match Soft UI, or just load as a CSS resource: 23 | - Quicksand: [Google Fonts page](https://fonts.google.com/specimen/Quicksand), [download](https://fonts.google.com/download?family=Quicksand), [Google Fonts css](https://fonts.googleapis.com/css?family=Quicksand&display=swap). 24 | - Cascadia Code PL: [download](https://github.com/microsoft/cascadia-code/releases/latest) (click on the top asset, download, unzip, find `CascadiaCodePL.woff2`). 25 | 26 |
Tutorial on how to load any font into your browser 27 | 28 | Upload the `woff2` into `/config/www`, and then make a file called `/config/www/fonts.js` which contains this: 29 | ```js 30 | function loadcss() { 31 | let css = '/local/fonts.css?v=0.001' 32 | 33 | let link = document.createElement('link'); 34 | let head = document.getElementsByTagName('head')[0]; 35 | let tmp; 36 | link.rel = 'stylesheet'; 37 | link.type = 'text/css'; 38 | 39 | tmp = link.cloneNode(true); 40 | tmp.href = css; 41 | head.appendChild(tmp); 42 | console.info('%c Loaded font CSS at ' + css, 'color: white; background: #000; font-weight: 700;'); 43 | } 44 | loadcss(); 45 | ``` 46 | Then make a file called `/config/www/fonts.css` which contains this: 47 | ```css 48 | @font-face { 49 | font-family: 'Cascadia Code PL'; 50 | font-style: normal; 51 | font-weight: 400; 52 | src: url(/local/CascadiaCodePL.woff2) format('woff2'); 53 | } 54 | ``` 55 | (For each font, create the same thing in the file, but changing the source and name of font.) 56 | Then finally add `/local/fonts.js` to your list of lovelace resources. (Maybe?) Restart Home Assistant. Press Ctrl+Shift+R. Done! 57 | Credit to https://community.home-assistant.io/t/use-ttf-in-lovelace/143495. 58 |
59 | -------------------------------------------------------------------------------- /themes/dark-soft-ui.yaml: -------------------------------------------------------------------------------- 1 | # Thanks @JuanMTech, @thomasloven, and @N-l1. 2 | Dark Soft UI: 3 | # Color 4 | primary-color: "#609ceb" 5 | light-primary-color: var(--primary-color) 6 | accent-color: "#60bfeb" 7 | mdc-theme-secondary: var(--accent-color) 8 | # More colors 9 | success-color: "#77EB60" 10 | info-color: var(--primary-color) 11 | warning-color: "#EBEB60" 12 | error-color: "#D18941" 13 | # Background 14 | primary-background-color: "#313438" 15 | secondary-background-color: var(--primary-background-color) 16 | # Text 17 | primary-text-color: "#F7F8FA" 18 | secondary-text-color: var(--primary-text-color) 19 | codemirror-meta: var(--primary-text-color) 20 | material-secondary-text-color: var(--secondary-text-color) 21 | text-primary-color: "#FFFFFF" 22 | disabled-text-color: "#616387" 23 | # Fonts 24 | paper-font-headline_-_font-family: Quicksand, Roboto, sans-serif 25 | paper-font-headline_-_font-weight: "600" 26 | paper-font-subhead_-_font-family: Quicksand, Roboto, sans-serif 27 | paper-font-subhead_-_font-weight: "550" 28 | paper-font-subhead_-_line-height: 2.2em 29 | ha-card-header-font-family: Quicksand, Roboto, sans-serif 30 | ha-card-header-font-weight: "600" 31 | code-font-family: Cascadia Code PL, Cascadia Mono PL, Cascadia Code, Cascadia Mono, monospace 32 | paper-font-common-code_-_font-family: var(--code-font-family) 33 | # Sidebar 34 | sidebar-icon-color: var(--primary-text-color) 35 | sidebar-text-color: var(--primary-text-color) 36 | sidebar-selected-icon-color: var(--light-primary-color) 37 | sidebar-selected-text-color: var(--light-primary-color) 38 | sidebar-background-color: var(--primary-background-color) 39 | sidebar-selected-background-color: var(--primary-background-color) 40 | divider-color: var(--primary-background-color) 41 | # Header 42 | app-header-background-color: var(--primary-background-color) 43 | app-header-text-color: var(--primary-text-color) 44 | # Icons 45 | state-icon-color: var(--primary-text-color) 46 | state-icon-active-color: var(--primary-color) 47 | state-icon-unavailable-color: var(--disabled-text-color) 48 | # Sliders 49 | paper-slider-knob-color: var(--primary-color) 50 | paper-slider-knob-start-color: var(--primary-color) 51 | paper-slider-pin-color: var(--primary-color) 52 | paper-slider-active-color: var(--primary-color) 53 | paper-slider-secondary-color: var(--light-primary-color) 54 | # Labels 55 | label-badge-background-color: var(--primary-background-color) 56 | label-badge-text-color: var(--primary-text-color) 57 | label-badge-red: "#EB6065" 58 | label-badge-green: "#60EB67" 59 | label-badge-blue: "#60B1EB" 60 | label-badge-yellow: "#EBC860" 61 | label-badge-gray: "#666F80" 62 | # Cards 63 | ha-card-border-radius: "13.75px" 64 | ha-card-box-shadow: -5.25px -5.25px 5.25px 0 rgba(60, 60, 60, .6), 5.25px 5.25px 5.25px 0 rgba(0, 0, 0, .15) 65 | ha-card-border-color: var(--primary-color) 66 | ha-card-border-width: 3px 67 | card-background-color: var(--primary-background-color) 68 | paper-card-background-color: var(--primary-background-color) 69 | paper-listbox-background-color: var(--primary-background-color) 70 | # Switches 71 | switch-checked-button-color: var(--primary-color) 72 | switch-checked-track-color: var(--primary-color) 73 | switch-unchecked-button-color: var(--disabled-text-color) 74 | switch-unchecked-track-color: var(--disabled-text-color) 75 | paper-toggle-button-checked-button-color: var(--primary-color) 76 | paper-toggle-button-checked-bar-color: var(--primary-color) 77 | paper-toggle-button-unchecked-button-color: var(--disabled-text-color) 78 | paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) 79 | # Tables 80 | table-row-background-color: var(--primary-background-color) 81 | table-row-alternative-background-color: var(--primary-background-color) 82 | data-table-background-color: var(--primary-background-color) 83 | # Dropdowns 84 | material-background-color: var(--primary-background-color) 85 | material-secondary-background-color: rgba(255, 255, 255, 0.1) 86 | mdc-theme-surface: var(--primary-background-color) 87 | # Convenience 88 | primary-name-text-color: grey 89 | primary-state-text-color: grey 90 | primary-icon-color: grey 91 | primary-yellow: "#FAD46B" 92 | dark-primary-yellow: "#DAB44B" 93 | tertiary-background-color: "#323545" 94 | ha-card-box-shadow-inset: inset -5.5px -5.5px 5.5px 0 rgba(60, 60, 60, .5), inset 5.5px 5.5px 5.5px 0 rgba(0, 0, 0, .5) 95 | soft-ui-pressed: var(--ha-card-box-shadow-inset) 96 | soft-ui-shadow: var(--ha-card-box-shadow) 97 | red: "#eb6060" 98 | red-orange: "#eb8e60" 99 | orange-red: "#eb9a60" 100 | orange: "#eba560" 101 | orange-yellow: "#ebc860" 102 | yellow-orange: "#ebd460" 103 | yellow: "#ebdf60" 104 | yellow-green: "#c8eb60" 105 | green-yellow: "#b1eb60" 106 | green: "#60eb60" 107 | green-cyan: "#60eba5" 108 | cyan-green: "#60ebc8" 109 | cyan: "#60ebeb" 110 | cyan-blue: "#60bceb" 111 | blue-cyan: "#608eeb" 112 | blue: "#6060eb" 113 | blue-purple: "#7760eb" 114 | purple-blue: "#8e60eb" 115 | purple: "#a560eb" 116 | purple-pink: "#bc60eb" 117 | pink-purple: "#d460eb" 118 | pink: "#eb60eb" 119 | pink-red: "#eb60bc" 120 | red-pink: "#eb608e" 121 | # Card-mod 122 | card-mod-theme: "Dark Soft UI" 123 | theme-red: firebrick 124 | theme-green: forestgreen 125 | theme-blue: deepskyblue 126 | ha-label-badge-title-font-size: 1em 127 | # Cards 128 | card-mod-card-yaml: | 129 | .: | 130 | * { 131 | --soft-ui-shadow: var(--ha-card-box-shadow) !important; 132 | --soft-ui-pressed: var(--ha-card-box-shadow-inset) !important; 133 | } 134 | ha-card.type-markdown { 135 | box-shadow: none; 136 | } 137 | ha-card.type-markdown > ha-markdown { 138 | padding: 8px; 139 | } 140 | ha-card:not(.type-markdown) { 141 | background-color: var(--primary-background-color); 142 | border-radius: var(--ha-card-border-radius); 143 | } 144 | ha-card:not(.type-markdown):not(.type-custom-button-card):not(.type-entities):not(.type-custom-mod-card):not(.type-custom-bar-card):not(.type-history-graph):not(.type-iframe):not(.type-glance) { 145 | margin: 20px 6px; 146 | box-shadow: var(--ha-card-box-shadow); 147 | } 148 | ha-card.type-custom-vacuum-card > .preview { 149 | --primary-color: var(--primary-background-color); 150 | } 151 | ha-card.type-custom-vacuum-card > .preview > * { 152 | color: var(--primary-text-color); 153 | } 154 | ha-card.type-custom-vacuum-card > .preview > .header > .battery > ha-icon { 155 | color: var(--primary-text-color); 156 | } 157 | ha-card.type-custom-vacuum-card > .preview > .metadata > .vacuum-name { 158 | color: var(--primary-text-color); 159 | } 160 | ha-card.type-picture-entity, 161 | ha-card.type-picture-glance { 162 | padding: 10px; 163 | } 164 | ha-card.type-picture-entity > .footer, 165 | ha-card.type-picture-glance > .box { 166 | margin: 10px; 167 | border-radius: 15px; 168 | } 169 | ha-card.type-entities, ha-card.type-custom-bar-card, ha-card.type-entity, 170 | ha-card.type-history-graph, ha-card.type-map, ha-card.type-iframe, 171 | ha-card.type-glance, ha-card.type-custom-button-text-card, 172 | ha-card.type-custom-select-list-card { 173 | box-shadow: none !important; 174 | margin: 25px 6px; 175 | } 176 | ha-card > #states > div > * { 177 | padding-top: 8px; 178 | padding-bottom: 8px; 179 | width: 95%; 180 | margin: 0 auto 0 5px; 181 | } 182 | ha-card > #states > div > *:not(hui-button-row):not(hui-input-select-entity-row):not(hui-input-number-entity-row):not(hui-input-text-entity-row):not(hui-cast-row) { 183 | display: block; 184 | } 185 | ha-card.type-media-control, ha-card.type-media-control > * { 186 | background-color: var(--primary-background-color) !important; 187 | color: var(--secondary-text-color) !important; 188 | } 189 | ha-card > #states, 190 | ha-card > .header-footer, 191 | ha-card > hui-graph-header-footer, 192 | ha-card.type-glance > .entities, 193 | ha-card:not(.type-humidifier):not(.type-light):not(.type-weather-forecast) > .content, 194 | ha-card.type-map > #root > #map, 195 | ha-card.type-iframe > #root, 196 | ha-card.type-custom-select-list-card > #list { 197 | box-shadow: var(--ha-card-box-shadow); 198 | border-radius: var(--ha-card-border-radius); 199 | margin: 12px; 200 | padding: 10px; 201 | } 202 | ha-card.type-iframe > #root > iframe { 203 | border-radius: var(--ha-card-border-radius); 204 | } 205 | ha-card.type-entity > .info { 206 | padding: 16px; 207 | box-shadow: var(--ha-card-box-shadow); 208 | border-radius: var(--ha-card-border-radius); 209 | margin: 12px; 210 | } 211 | ha-card > .header-footer { 212 | margin: 25px 12px; 213 | } 214 | ha-card > .card-header { 215 | box-shadow: none; 216 | } 217 | ha-card > .card-header > .name { 218 | text-align: center; 219 | width: 100%; 220 | } 221 | ha-card > .card-header > hui-entities-toggle { 222 | margin: 0 25px 0 -25px; 223 | } 224 | ha-card.type-custom-bar-card > .card-header, 225 | ha-card.type-history-graph > .card-header, 226 | ha-card.type-map > .card-header, 227 | ha-card.type-iframe > .card-header, 228 | ha-card.type-shopping-list > .card-header, 229 | ha-card.type-glance > .card-header { 230 | text-align: center; 231 | width: 70%; 232 | margin: 0 auto; 233 | } 234 | @keyframes spin { 235 | 0% { 236 | transform: rotate(0deg); 237 | } 238 | 100% { 239 | transform: rotate(359deg); 240 | } 241 | } 242 | ha-icon[data-domain="fan"][data-state="on"] { 243 | animation: spin 4s infinite linear; 244 | } 245 | # Header 246 | header-height: 48px # Change this to 0px for header on the bottom. You're 1/3 there. 247 | card-mod-root-yaml: | 248 | paper-tabs$: | 249 | /* Uncomment this for header on the bottom. You're 2/3 there. 250 | #selectionBar { 251 | bottom: unset !important; 252 | } 253 | */ 254 | .: | 255 | /* This moves the header up. */ 256 | app-header { 257 | transform: translate3d(0px, -48px, 0px); 258 | } 259 | /* Let's change the background. */ 260 | app-header, app-toolbar { 261 | background: var(--primary-background-color) !important; 262 | color: var(--primary-text-color) !important; 263 | } 264 | /* We're still going to need a way to see that we're in edit mode. */ 265 | app-header.edit-mode { 266 | padding-bottom: calc(var(--ha-card-border-width, 2px) * 2); 267 | border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color); 268 | } 269 | /* This changes the color of the currently selected tab. */ 270 | ha-tabs { 271 | --paper-tabs-selection-bar-color: var(--primary-color) !important; 272 | } 273 | paper-tab[aria-selected=true] { 274 | color: var(--primary-color) !important; 275 | } 276 | /* This hides the help button. */ 277 | a.menu-link[target="_blank"] { 278 | display: none; 279 | } 280 | /* This makes the plus color the same as the background. */ 281 | #add-view { 282 | color: var(--primary-background-color); 283 | } 284 | /* This hides the title. */ 285 | [main-title] { 286 | display: none; 287 | } 288 | /* This hides the app-toolbar in edit mode. */ 289 | app-toolbar.edit-mode { 290 | height: 0; 291 | } 292 | /* This moves the edit mode buttons back in. */ 293 | app-toolbar.edit-mode > mwc-icon-button { 294 | position: absolute; 295 | left: 0; 296 | top: 0; 297 | z-index: 1; 298 | } 299 | app-toolbar.edit-mode > ha-button-menu { 300 | position: absolute; 301 | right: 0; 302 | top: 0; 303 | z-index: 1; 304 | } 305 | /* This adds a bit more padding, mainly for unused entities. */ 306 | app-header.edit-mode > div { 307 | padding-left: 5px; 308 | } 309 | /* Uncomment this for header on the bottom. You're 3/3 there. 310 | app-header { 311 | top: calc(100vh - 60px) !important; 312 | bottom: 0 !important; 313 | transform: unset !important; 314 | } 315 | */ 316 | # Badges and columns 317 | card-mod-view-yaml: | 318 | hui-masonry-view$: | 319 | /* Delete to fix left-aligned 320 | #columns { 321 | flex-direction: column !important; 322 | margin: 0 auto; 323 | max-width: 500px; 324 | } 325 | */ 326 | card-mod-badge-yaml: | 327 | .: | 328 | :host { 329 | border-radius: 5px; 330 | padding: 11px 8px; 331 | margin: 11px 12px 24px 12px; 332 | display: inline-block; 333 | --label-badge-blue: {% if not states(config.entity) %} var(--theme-blue); 334 | {% elif is_state(config.entity, 'on') %} var(--theme-green); 335 | {% elif is_state(config.entity, 'open') %} var(--theme-green); 336 | {% elif is_state(config.entity, 'unlocked') %} var(--theme-green); 337 | {% elif is_state(config.entity, 'off') %} var(--theme-red); 338 | {% elif is_state(config.entity, 'closed') %} var(--theme-red); 339 | {% elif is_state(config.entity, 'locked') %} var(--theme-red); 340 | {% else %} var(--theme-blue); {% endif %} 341 | --label-badge-red: teal; 342 | box-shadow: var(--ha-card-box-shadow); 343 | } 344 | ha-state-label-badge$ha-label-badge$: | 345 | .label-badge { 346 | background: none; 347 | } 348 | .title { 349 | -webkit-line-clamp: 1; 350 | display: -webkit-box; 351 | -webkit-box-orient: vertical; 352 | } 353 | # Style more info 354 | card-mod-more-info-yaml: | 355 | $: | 356 | .mdc-dialog { 357 | backdrop-filter: blur(2px); 358 | background-color: #313438cc !important; 359 | } 360 | .mdc-dialog__scrim { 361 | background-color: #313438cc !important; 362 | } 363 | .mdc-dialog .mdc-dialog__container .mdc-dialog__surface { 364 | background: var(--primary-background-color); 365 | border-radius: var(--ha-card-border-radius); 366 | box-shadow: var(--ha-card-box-shadow); 367 | transform: scale(0.9); 368 | overflow: hidden; 369 | } 370 | .mdc-dialog__content { 371 | padding: 36px !important; 372 | padding-bottom: 36px !important; 373 | transform: scale(1.11); 374 | } 375 | ha-header-bar: 376 | $: | 377 | .mdc-top-app-bar { 378 | background: none !important; 379 | } 380 | # Spin fans 381 | card-mod-row-yaml: | 382 | "*:first-child": 383 | $: | 384 | @keyframes spin { 385 | 0% { 386 | transform: rotate(0deg); 387 | } 388 | 100% { 389 | transform: rotate(359deg); 390 | } 391 | } 392 | state-badge { 393 | {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %} 394 | animation: spin 4s infinite linear; 395 | {% endif %} 396 | } 397 | -------------------------------------------------------------------------------- /themes/dark-soft-ui-red.yaml: -------------------------------------------------------------------------------- 1 | # Thanks @JuanMTech, @thomasloven, and @N-l1. 2 | Dark Soft UI Red: 3 | # Color 4 | primary-color: "#eb6060" 5 | light-primary-color: var(--primary-color) 6 | accent-color: "#eb6083" 7 | mdc-theme-secondary: var(--accent-color) 8 | # More colors 9 | success-color: "#77EB60" 10 | info-color: var(--primary-color) 11 | warning-color: "#EBEB60" 12 | error-color: "#D18941" 13 | # Background 14 | primary-background-color: "#383131" 15 | secondary-background-color: var(--primary-background-color) 16 | # Text 17 | primary-text-color: "#F7F8FA" 18 | secondary-text-color: var(--primary-text-color) 19 | codemirror-meta: var(--primary-text-color) 20 | material-secondary-text-color: var(--secondary-text-color) 21 | text-primary-color: "#FFFFFF" 22 | disabled-text-color: "#616387" 23 | # Fonts 24 | paper-font-headline_-_font-family: Quicksand, Roboto, sans-serif 25 | paper-font-headline_-_font-weight: "600" 26 | paper-font-subhead_-_font-family: Quicksand, Roboto, sans-serif 27 | paper-font-subhead_-_font-weight: "550" 28 | paper-font-subhead_-_line-height: 2.2em 29 | ha-card-header-font-family: Quicksand, Roboto, sans-serif 30 | ha-card-header-font-weight: "600" 31 | code-font-family: Cascadia Code PL, Cascadia Mono PL, Cascadia Code, Cascadia Mono, monospace 32 | paper-font-common-code_-_font-family: var(--code-font-family) 33 | # Sidebar 34 | sidebar-icon-color: var(--primary-text-color) 35 | sidebar-text-color: var(--primary-text-color) 36 | sidebar-selected-icon-color: var(--light-primary-color) 37 | sidebar-selected-text-color: var(--light-primary-color) 38 | sidebar-background-color: var(--primary-background-color) 39 | sidebar-selected-background-color: var(--primary-background-color) 40 | divider-color: var(--primary-background-color) 41 | # Header 42 | app-header-background-color: var(--primary-background-color) 43 | app-header-text-color: var(--primary-text-color) 44 | # Icons 45 | state-icon-color: var(--primary-text-color) 46 | state-icon-active-color: var(--primary-color) 47 | state-icon-unavailable-color: var(--disabled-text-color) 48 | # Sliders 49 | paper-slider-knob-color: var(--primary-color) 50 | paper-slider-knob-start-color: var(--primary-color) 51 | paper-slider-pin-color: var(--primary-color) 52 | paper-slider-active-color: var(--primary-color) 53 | paper-slider-secondary-color: var(--light-primary-color) 54 | # Labels 55 | label-badge-background-color: var(--primary-background-color) 56 | label-badge-text-color: var(--primary-text-color) 57 | label-badge-red: "#EB6065" 58 | label-badge-green: "#60EB67" 59 | label-badge-blue: "#60B1EB" 60 | label-badge-yellow: "#EBC860" 61 | label-badge-gray: "#666F80" 62 | # Cards 63 | ha-card-border-radius: "13.75px" 64 | ha-card-box-shadow: -5.25px -5.25px 5.25px 0 rgba(60, 60, 60, .6), 5.25px 5.25px 5.25px 0 rgba(0, 0, 0, .15) 65 | ha-card-border-color: var(--primary-color) 66 | ha-card-border-width: 3px 67 | card-background-color: var(--primary-background-color) 68 | paper-card-background-color: var(--primary-background-color) 69 | paper-listbox-background-color: var(--primary-background-color) 70 | # Switches 71 | switch-checked-button-color: var(--primary-color) 72 | switch-checked-track-color: var(--primary-color) 73 | switch-unchecked-button-color: var(--disabled-text-color) 74 | switch-unchecked-track-color: var(--disabled-text-color) 75 | paper-toggle-button-checked-button-color: var(--primary-color) 76 | paper-toggle-button-checked-bar-color: var(--primary-color) 77 | paper-toggle-button-unchecked-button-color: var(--disabled-text-color) 78 | paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) 79 | # Tables 80 | table-row-background-color: var(--primary-background-color) 81 | table-row-alternative-background-color: var(--primary-background-color) 82 | data-table-background-color: var(--primary-background-color) 83 | # Dropdowns 84 | material-background-color: var(--primary-background-color) 85 | material-secondary-background-color: rgba(255, 255, 255, 0.1) 86 | mdc-theme-surface: var(--primary-background-color) 87 | # Convenience 88 | primary-name-text-color: grey 89 | primary-state-text-color: grey 90 | primary-icon-color: grey 91 | primary-yellow: "#FAD46B" 92 | dark-primary-yellow: "#DAB44B" 93 | tertiary-background-color: "#323545" 94 | ha-card-box-shadow-inset: inset -5.5px -5.5px 5.5px 0 rgba(60, 60, 60, .5), inset 5.5px 5.5px 5.5px 0 rgba(0, 0, 0, .5) 95 | soft-ui-pressed: var(--ha-card-box-shadow-inset) 96 | soft-ui-shadow: var(--ha-card-box-shadow) 97 | red: "#eb6060" 98 | red-orange: "#eb8e60" 99 | orange-red: "#eb9a60" 100 | orange: "#eba560" 101 | orange-yellow: "#ebc860" 102 | yellow-orange: "#ebd460" 103 | yellow: "#ebdf60" 104 | yellow-green: "#c8eb60" 105 | green-yellow: "#b1eb60" 106 | green: "#60eb60" 107 | green-cyan: "#60eba5" 108 | cyan-green: "#60ebc8" 109 | cyan: "#60ebeb" 110 | cyan-blue: "#60bceb" 111 | blue-cyan: "#608eeb" 112 | blue: "#6060eb" 113 | blue-purple: "#7760eb" 114 | purple-blue: "#8e60eb" 115 | purple: "#a560eb" 116 | purple-pink: "#bc60eb" 117 | pink-purple: "#d460eb" 118 | pink: "#eb60eb" 119 | pink-red: "#eb60bc" 120 | red-pink: "#eb608e" 121 | # Card-mod 122 | card-mod-theme: "Dark Soft UI Red" 123 | theme-red: firebrick 124 | theme-green: forestgreen 125 | theme-blue: deepskyblue 126 | ha-label-badge-title-font-size: 1em 127 | # Cards 128 | card-mod-card-yaml: | 129 | .: | 130 | * { 131 | --soft-ui-shadow: var(--ha-card-box-shadow) !important; 132 | --soft-ui-pressed: var(--ha-card-box-shadow-inset) !important; 133 | } 134 | ha-card.type-markdown { 135 | box-shadow: none; 136 | } 137 | ha-card.type-markdown > ha-markdown { 138 | padding: 8px; 139 | } 140 | ha-card:not(.type-markdown) { 141 | background-color: var(--primary-background-color); 142 | border-radius: var(--ha-card-border-radius); 143 | } 144 | ha-card:not(.type-markdown):not(.type-custom-button-card):not(.type-entities):not(.type-custom-mod-card):not(.type-custom-bar-card):not(.type-history-graph):not(.type-iframe):not(.type-glance) { 145 | margin: 20px 6px; 146 | box-shadow: var(--ha-card-box-shadow); 147 | } 148 | ha-card.type-custom-vacuum-card > .preview { 149 | --primary-color: var(--primary-background-color); 150 | } 151 | ha-card.type-custom-vacuum-card > .preview > * { 152 | color: var(--primary-text-color); 153 | } 154 | ha-card.type-custom-vacuum-card > .preview > .header > .battery > ha-icon { 155 | color: var(--primary-text-color); 156 | } 157 | ha-card.type-custom-vacuum-card > .preview > .metadata > .vacuum-name { 158 | color: var(--primary-text-color); 159 | } 160 | ha-card.type-picture-entity, 161 | ha-card.type-picture-glance { 162 | padding: 10px; 163 | } 164 | ha-card.type-picture-entity > .footer, 165 | ha-card.type-picture-glance > .box { 166 | margin: 10px; 167 | border-radius: 15px; 168 | } 169 | ha-card.type-entities, ha-card.type-custom-bar-card, ha-card.type-entity, 170 | ha-card.type-history-graph, ha-card.type-map, ha-card.type-iframe, 171 | ha-card.type-glance, ha-card.type-custom-button-text-card, 172 | ha-card.type-custom-select-list-card { 173 | box-shadow: none !important; 174 | margin: 25px 6px; 175 | } 176 | ha-card > #states > div > * { 177 | padding-top: 8px; 178 | padding-bottom: 8px; 179 | width: 95%; 180 | margin: 0 auto 0 5px; 181 | } 182 | ha-card > #states > div > *:not(hui-button-row):not(hui-input-select-entity-row):not(hui-input-number-entity-row):not(hui-input-text-entity-row):not(hui-cast-row) { 183 | display: block; 184 | } 185 | ha-card.type-media-control, ha-card.type-media-control > * { 186 | background-color: var(--primary-background-color) !important; 187 | color: var(--secondary-text-color) !important; 188 | } 189 | ha-card > #states, 190 | ha-card > .header-footer, 191 | ha-card > hui-graph-header-footer, 192 | ha-card.type-glance > .entities, 193 | ha-card:not(.type-humidifier):not(.type-light):not(.type-weather-forecast) > .content, 194 | ha-card.type-map > #root > #map, 195 | ha-card.type-iframe > #root, 196 | ha-card.type-custom-select-list-card > #list { 197 | box-shadow: var(--ha-card-box-shadow); 198 | border-radius: var(--ha-card-border-radius); 199 | margin: 12px; 200 | padding: 10px; 201 | } 202 | ha-card.type-iframe > #root > iframe { 203 | border-radius: var(--ha-card-border-radius); 204 | } 205 | ha-card.type-entity > .info { 206 | padding: 16px; 207 | box-shadow: var(--ha-card-box-shadow); 208 | border-radius: var(--ha-card-border-radius); 209 | margin: 12px; 210 | } 211 | ha-card > .header-footer { 212 | margin: 25px 12px; 213 | } 214 | ha-card > .card-header { 215 | box-shadow: none; 216 | } 217 | ha-card > .card-header > .name { 218 | text-align: center; 219 | width: 100%; 220 | } 221 | ha-card > .card-header > hui-entities-toggle { 222 | margin: 0 25px 0 -25px; 223 | } 224 | ha-card.type-custom-bar-card > .card-header, 225 | ha-card.type-history-graph > .card-header, 226 | ha-card.type-map > .card-header, 227 | ha-card.type-iframe > .card-header, 228 | ha-card.type-shopping-list > .card-header, 229 | ha-card.type-glance > .card-header { 230 | text-align: center; 231 | width: 70%; 232 | margin: 0 auto; 233 | } 234 | @keyframes spin { 235 | 0% { 236 | transform: rotate(0deg); 237 | } 238 | 100% { 239 | transform: rotate(359deg); 240 | } 241 | } 242 | ha-icon[data-domain="fan"][data-state="on"] { 243 | animation: spin 4s infinite linear; 244 | } 245 | # Header 246 | header-height: 48px # Change this to 0px for header on the bottom. You're 1/3 there. 247 | card-mod-root-yaml: | 248 | paper-tabs$: | 249 | /* Uncomment this for header on the bottom. You're 2/3 there. 250 | #selectionBar { 251 | bottom: unset !important; 252 | } 253 | */ 254 | .: | 255 | /* This moves the header up. */ 256 | app-header { 257 | transform: translate3d(0px, -48px, 0px); 258 | } 259 | /* Let's change the background. */ 260 | app-header, app-toolbar { 261 | background: var(--primary-background-color) !important; 262 | color: var(--primary-text-color) !important; 263 | } 264 | /* We're still going to need a way to see that we're in edit mode. */ 265 | app-header.edit-mode { 266 | padding-bottom: calc(var(--ha-card-border-width, 2px) * 2); 267 | border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color); 268 | } 269 | /* This changes the color of the currently selected tab. */ 270 | ha-tabs { 271 | --paper-tabs-selection-bar-color: var(--primary-color) !important; 272 | } 273 | paper-tab[aria-selected=true] { 274 | color: var(--primary-color) !important; 275 | } 276 | /* This hides the help button. */ 277 | a.menu-link[target="_blank"] { 278 | display: none; 279 | } 280 | /* This makes the plus color the same as the background. */ 281 | #add-view { 282 | color: var(--primary-background-color); 283 | } 284 | /* This hides the title. */ 285 | [main-title] { 286 | display: none; 287 | } 288 | /* This hides the app-toolbar in edit mode. */ 289 | app-toolbar.edit-mode { 290 | height: 0; 291 | } 292 | /* This moves the edit mode buttons back in. */ 293 | app-toolbar.edit-mode > mwc-icon-button { 294 | position: absolute; 295 | left: 0; 296 | top: 0; 297 | z-index: 1; 298 | } 299 | app-toolbar.edit-mode > ha-button-menu { 300 | position: absolute; 301 | right: 0; 302 | top: 0; 303 | z-index: 1; 304 | } 305 | /* This adds a bit more padding, mainly for unused entities. */ 306 | app-header.edit-mode > div { 307 | padding-left: 5px; 308 | } 309 | /* Uncomment this for header on the bottom. You're 3/3 there. 310 | app-header { 311 | top: calc(100vh - 60px) !important; 312 | bottom: 0 !important; 313 | transform: unset !important; 314 | } 315 | */ 316 | # Badges and columns 317 | card-mod-view-yaml: | 318 | hui-masonry-view$: | 319 | /* Delete to fix left-aligned 320 | #columns { 321 | flex-direction: column !important; 322 | margin: 0 auto; 323 | max-width: 500px; 324 | } 325 | */ 326 | card-mod-badge-yaml: | 327 | .: | 328 | :host { 329 | border-radius: 5px; 330 | padding: 11px 8px; 331 | margin: 11px 12px 24px 12px; 332 | display: inline-block; 333 | --label-badge-blue: {% if not states(config.entity) %} var(--theme-blue); 334 | {% elif is_state(config.entity, 'on') %} var(--theme-green); 335 | {% elif is_state(config.entity, 'open') %} var(--theme-green); 336 | {% elif is_state(config.entity, 'unlocked') %} var(--theme-green); 337 | {% elif is_state(config.entity, 'off') %} var(--theme-red); 338 | {% elif is_state(config.entity, 'closed') %} var(--theme-red); 339 | {% elif is_state(config.entity, 'locked') %} var(--theme-red); 340 | {% else %} var(--theme-blue); {% endif %} 341 | --label-badge-red: teal; 342 | box-shadow: var(--ha-card-box-shadow); 343 | } 344 | ha-state-label-badge$ha-label-badge$: | 345 | .label-badge { 346 | background: none; 347 | } 348 | .title { 349 | -webkit-line-clamp: 1; 350 | display: -webkit-box; 351 | -webkit-box-orient: vertical; 352 | } 353 | # Style more info 354 | card-mod-more-info-yaml: | 355 | $: | 356 | .mdc-dialog { 357 | backdrop-filter: blur(2px); 358 | background-color: #383131cc !important; 359 | } 360 | .mdc-dialog__scrim { 361 | background-color: #383131cc !important; 362 | } 363 | .mdc-dialog .mdc-dialog__container .mdc-dialog__surface { 364 | background: var(--primary-background-color); 365 | border-radius: var(--ha-card-border-radius); 366 | box-shadow: var(--ha-card-box-shadow); 367 | transform: scale(0.9); 368 | overflow: hidden; 369 | } 370 | .mdc-dialog__content { 371 | padding: 36px !important; 372 | padding-bottom: 36px !important; 373 | transform: scale(1.11); 374 | } 375 | ha-header-bar: 376 | $: | 377 | .mdc-top-app-bar { 378 | background: none !important; 379 | } 380 | # Spin fans 381 | card-mod-row-yaml: | 382 | "*:first-child": 383 | $: | 384 | @keyframes spin { 385 | 0% { 386 | transform: rotate(0deg); 387 | } 388 | 100% { 389 | transform: rotate(359deg); 390 | } 391 | } 392 | state-badge { 393 | {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %} 394 | animation: spin 4s infinite linear; 395 | {% endif %} 396 | } 397 | -------------------------------------------------------------------------------- /themes/dark-soft-ui-cyan.yaml: -------------------------------------------------------------------------------- 1 | # Thanks @JuanMTech, @thomasloven, and @N-l1. 2 | Dark Soft UI Cyan: 3 | # Color 4 | primary-color: "#60d4eb" 5 | light-primary-color: var(--primary-color) 6 | accent-color: "#60ebdf" 7 | mdc-theme-secondary: var(--accent-color) 8 | # More colors 9 | success-color: "#77EB60" 10 | info-color: var(--primary-color) 11 | warning-color: "#EBEB60" 12 | error-color: "#D18941" 13 | # Background 14 | primary-background-color: "#313738" 15 | secondary-background-color: var(--primary-background-color) 16 | # Text 17 | primary-text-color: "#F7F8FA" 18 | secondary-text-color: var(--primary-text-color) 19 | codemirror-meta: var(--primary-text-color) 20 | material-secondary-text-color: var(--secondary-text-color) 21 | text-primary-color: "#FFFFFF" 22 | disabled-text-color: "#616387" 23 | # Fonts 24 | paper-font-headline_-_font-family: Quicksand, Roboto, sans-serif 25 | paper-font-headline_-_font-weight: "600" 26 | paper-font-subhead_-_font-family: Quicksand, Roboto, sans-serif 27 | paper-font-subhead_-_font-weight: "550" 28 | paper-font-subhead_-_line-height: 2.2em 29 | ha-card-header-font-family: Quicksand, Roboto, sans-serif 30 | ha-card-header-font-weight: "600" 31 | code-font-family: Cascadia Code PL, Cascadia Mono PL, Cascadia Code, Cascadia Mono, monospace 32 | paper-font-common-code_-_font-family: var(--code-font-family) 33 | # Sidebar 34 | sidebar-icon-color: var(--primary-text-color) 35 | sidebar-text-color: var(--primary-text-color) 36 | sidebar-selected-icon-color: var(--light-primary-color) 37 | sidebar-selected-text-color: var(--light-primary-color) 38 | sidebar-background-color: var(--primary-background-color) 39 | sidebar-selected-background-color: var(--primary-background-color) 40 | divider-color: var(--primary-background-color) 41 | # Header 42 | app-header-background-color: var(--primary-background-color) 43 | app-header-text-color: var(--primary-text-color) 44 | # Icons 45 | state-icon-color: var(--primary-text-color) 46 | state-icon-active-color: var(--primary-color) 47 | state-icon-unavailable-color: var(--disabled-text-color) 48 | # Sliders 49 | paper-slider-knob-color: var(--primary-color) 50 | paper-slider-knob-start-color: var(--primary-color) 51 | paper-slider-pin-color: var(--primary-color) 52 | paper-slider-active-color: var(--primary-color) 53 | paper-slider-secondary-color: var(--light-primary-color) 54 | # Labels 55 | label-badge-background-color: var(--primary-background-color) 56 | label-badge-text-color: var(--primary-text-color) 57 | label-badge-red: "#EB6065" 58 | label-badge-green: "#60EB67" 59 | label-badge-blue: "#60B1EB" 60 | label-badge-yellow: "#EBC860" 61 | label-badge-gray: "#666F80" 62 | # Cards 63 | ha-card-border-radius: "13.75px" 64 | ha-card-box-shadow: -5.25px -5.25px 5.25px 0 rgba(60, 60, 60, .6), 5.25px 5.25px 5.25px 0 rgba(0, 0, 0, .15) 65 | ha-card-border-color: var(--primary-color) 66 | ha-card-border-width: 3px 67 | card-background-color: var(--primary-background-color) 68 | paper-card-background-color: var(--primary-background-color) 69 | paper-listbox-background-color: var(--primary-background-color) 70 | # Switches 71 | switch-checked-button-color: var(--primary-color) 72 | switch-checked-track-color: var(--primary-color) 73 | switch-unchecked-button-color: var(--disabled-text-color) 74 | switch-unchecked-track-color: var(--disabled-text-color) 75 | paper-toggle-button-checked-button-color: var(--primary-color) 76 | paper-toggle-button-checked-bar-color: var(--primary-color) 77 | paper-toggle-button-unchecked-button-color: var(--disabled-text-color) 78 | paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) 79 | # Tables 80 | table-row-background-color: var(--primary-background-color) 81 | table-row-alternative-background-color: var(--primary-background-color) 82 | data-table-background-color: var(--primary-background-color) 83 | # Dropdowns 84 | material-background-color: var(--primary-background-color) 85 | material-secondary-background-color: rgba(255, 255, 255, 0.1) 86 | mdc-theme-surface: var(--primary-background-color) 87 | # Convenience 88 | primary-name-text-color: grey 89 | primary-state-text-color: grey 90 | primary-icon-color: grey 91 | primary-yellow: "#FAD46B" 92 | dark-primary-yellow: "#DAB44B" 93 | tertiary-background-color: "#323545" 94 | ha-card-box-shadow-inset: inset -5.5px -5.5px 5.5px 0 rgba(60, 60, 60, .5), inset 5.5px 5.5px 5.5px 0 rgba(0, 0, 0, .5) 95 | soft-ui-pressed: var(--ha-card-box-shadow-inset) 96 | soft-ui-shadow: var(--ha-card-box-shadow) 97 | red: "#eb6060" 98 | red-orange: "#eb8e60" 99 | orange-red: "#eb9a60" 100 | orange: "#eba560" 101 | orange-yellow: "#ebc860" 102 | yellow-orange: "#ebd460" 103 | yellow: "#ebdf60" 104 | yellow-green: "#c8eb60" 105 | green-yellow: "#b1eb60" 106 | green: "#60eb60" 107 | green-cyan: "#60eba5" 108 | cyan-green: "#60ebc8" 109 | cyan: "#60ebeb" 110 | cyan-blue: "#60bceb" 111 | blue-cyan: "#608eeb" 112 | blue: "#6060eb" 113 | blue-purple: "#7760eb" 114 | purple-blue: "#8e60eb" 115 | purple: "#a560eb" 116 | purple-pink: "#bc60eb" 117 | pink-purple: "#d460eb" 118 | pink: "#eb60eb" 119 | pink-red: "#eb60bc" 120 | red-pink: "#eb608e" 121 | # Card-mod 122 | card-mod-theme: "Dark Soft UI Cyan" 123 | theme-red: firebrick 124 | theme-green: forestgreen 125 | theme-blue: deepskyblue 126 | ha-label-badge-title-font-size: 1em 127 | # Cards 128 | card-mod-card-yaml: | 129 | .: | 130 | * { 131 | --soft-ui-shadow: var(--ha-card-box-shadow) !important; 132 | --soft-ui-pressed: var(--ha-card-box-shadow-inset) !important; 133 | } 134 | ha-card.type-markdown { 135 | box-shadow: none; 136 | } 137 | ha-card.type-markdown > ha-markdown { 138 | padding: 8px; 139 | } 140 | ha-card:not(.type-markdown) { 141 | background-color: var(--primary-background-color); 142 | border-radius: var(--ha-card-border-radius); 143 | } 144 | ha-card:not(.type-markdown):not(.type-custom-button-card):not(.type-entities):not(.type-custom-mod-card):not(.type-custom-bar-card):not(.type-history-graph):not(.type-iframe):not(.type-glance) { 145 | margin: 20px 6px; 146 | box-shadow: var(--ha-card-box-shadow); 147 | } 148 | ha-card.type-custom-vacuum-card > .preview { 149 | --primary-color: var(--primary-background-color); 150 | } 151 | ha-card.type-custom-vacuum-card > .preview > * { 152 | color: var(--primary-text-color); 153 | } 154 | ha-card.type-custom-vacuum-card > .preview > .header > .battery > ha-icon { 155 | color: var(--primary-text-color); 156 | } 157 | ha-card.type-custom-vacuum-card > .preview > .metadata > .vacuum-name { 158 | color: var(--primary-text-color); 159 | } 160 | ha-card.type-picture-entity, 161 | ha-card.type-picture-glance { 162 | padding: 10px; 163 | } 164 | ha-card.type-picture-entity > .footer, 165 | ha-card.type-picture-glance > .box { 166 | margin: 10px; 167 | border-radius: 15px; 168 | } 169 | ha-card.type-entities, ha-card.type-custom-bar-card, ha-card.type-entity, 170 | ha-card.type-history-graph, ha-card.type-map, ha-card.type-iframe, 171 | ha-card.type-glance, ha-card.type-custom-button-text-card, 172 | ha-card.type-custom-select-list-card { 173 | box-shadow: none !important; 174 | margin: 25px 6px; 175 | } 176 | ha-card > #states > div > * { 177 | padding-top: 8px; 178 | padding-bottom: 8px; 179 | width: 95%; 180 | margin: 0 auto 0 5px; 181 | } 182 | ha-card > #states > div > *:not(hui-button-row):not(hui-input-select-entity-row):not(hui-input-number-entity-row):not(hui-input-text-entity-row):not(hui-cast-row) { 183 | display: block; 184 | } 185 | ha-card.type-media-control, ha-card.type-media-control > * { 186 | background-color: var(--primary-background-color) !important; 187 | color: var(--secondary-text-color) !important; 188 | } 189 | ha-card > #states, 190 | ha-card > .header-footer, 191 | ha-card > hui-graph-header-footer, 192 | ha-card.type-glance > .entities, 193 | ha-card:not(.type-humidifier):not(.type-light):not(.type-weather-forecast) > .content, 194 | ha-card.type-map > #root > #map, 195 | ha-card.type-iframe > #root, 196 | ha-card.type-custom-select-list-card > #list { 197 | box-shadow: var(--ha-card-box-shadow); 198 | border-radius: var(--ha-card-border-radius); 199 | margin: 12px; 200 | padding: 10px; 201 | } 202 | ha-card.type-iframe > #root > iframe { 203 | border-radius: var(--ha-card-border-radius); 204 | } 205 | ha-card.type-entity > .info { 206 | padding: 16px; 207 | box-shadow: var(--ha-card-box-shadow); 208 | border-radius: var(--ha-card-border-radius); 209 | margin: 12px; 210 | } 211 | ha-card > .header-footer { 212 | margin: 25px 12px; 213 | } 214 | ha-card > .card-header { 215 | box-shadow: none; 216 | } 217 | ha-card > .card-header > .name { 218 | text-align: center; 219 | width: 100%; 220 | } 221 | ha-card > .card-header > hui-entities-toggle { 222 | margin: 0 25px 0 -25px; 223 | } 224 | ha-card.type-custom-bar-card > .card-header, 225 | ha-card.type-history-graph > .card-header, 226 | ha-card.type-map > .card-header, 227 | ha-card.type-iframe > .card-header, 228 | ha-card.type-shopping-list > .card-header, 229 | ha-card.type-glance > .card-header { 230 | text-align: center; 231 | width: 70%; 232 | margin: 0 auto; 233 | } 234 | @keyframes spin { 235 | 0% { 236 | transform: rotate(0deg); 237 | } 238 | 100% { 239 | transform: rotate(359deg); 240 | } 241 | } 242 | ha-icon[data-domain="fan"][data-state="on"] { 243 | animation: spin 4s infinite linear; 244 | } 245 | # Header 246 | header-height: 48px # Change this to 0px for header on the bottom. You're 1/3 there. 247 | card-mod-root-yaml: | 248 | paper-tabs$: | 249 | /* Uncomment this for header on the bottom. You're 2/3 there. 250 | #selectionBar { 251 | bottom: unset !important; 252 | } 253 | */ 254 | .: | 255 | /* This moves the header up. */ 256 | app-header { 257 | transform: translate3d(0px, -48px, 0px); 258 | } 259 | /* Let's change the background. */ 260 | app-header, app-toolbar { 261 | background: var(--primary-background-color) !important; 262 | color: var(--primary-text-color) !important; 263 | } 264 | /* We're still going to need a way to see that we're in edit mode. */ 265 | app-header.edit-mode { 266 | padding-bottom: calc(var(--ha-card-border-width, 2px) * 2); 267 | border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color); 268 | } 269 | /* This changes the color of the currently selected tab. */ 270 | ha-tabs { 271 | --paper-tabs-selection-bar-color: var(--primary-color) !important; 272 | } 273 | paper-tab[aria-selected=true] { 274 | color: var(--primary-color) !important; 275 | } 276 | /* This hides the help button. */ 277 | a.menu-link[target="_blank"] { 278 | display: none; 279 | } 280 | /* This makes the plus color the same as the background. */ 281 | #add-view { 282 | color: var(--primary-background-color); 283 | } 284 | /* This hides the title. */ 285 | [main-title] { 286 | display: none; 287 | } 288 | /* This hides the app-toolbar in edit mode. */ 289 | app-toolbar.edit-mode { 290 | height: 0; 291 | } 292 | /* This moves the edit mode buttons back in. */ 293 | app-toolbar.edit-mode > mwc-icon-button { 294 | position: absolute; 295 | left: 0; 296 | top: 0; 297 | z-index: 1; 298 | } 299 | app-toolbar.edit-mode > ha-button-menu { 300 | position: absolute; 301 | right: 0; 302 | top: 0; 303 | z-index: 1; 304 | } 305 | /* This adds a bit more padding, mainly for unused entities. */ 306 | app-header.edit-mode > div { 307 | padding-left: 5px; 308 | } 309 | /* Uncomment this for header on the bottom. You're 3/3 there. 310 | app-header { 311 | top: calc(100vh - 60px) !important; 312 | bottom: 0 !important; 313 | transform: unset !important; 314 | } 315 | */ 316 | # Badges and columns 317 | card-mod-view-yaml: | 318 | hui-masonry-view$: | 319 | /* Delete to fix left-aligned 320 | #columns { 321 | flex-direction: column !important; 322 | margin: 0 auto; 323 | max-width: 500px; 324 | } 325 | */ 326 | card-mod-badge-yaml: | 327 | .: | 328 | :host { 329 | border-radius: 5px; 330 | padding: 11px 8px; 331 | margin: 11px 12px 24px 12px; 332 | display: inline-block; 333 | --label-badge-blue: {% if not states(config.entity) %} var(--theme-blue); 334 | {% elif is_state(config.entity, 'on') %} var(--theme-green); 335 | {% elif is_state(config.entity, 'open') %} var(--theme-green); 336 | {% elif is_state(config.entity, 'unlocked') %} var(--theme-green); 337 | {% elif is_state(config.entity, 'off') %} var(--theme-red); 338 | {% elif is_state(config.entity, 'closed') %} var(--theme-red); 339 | {% elif is_state(config.entity, 'locked') %} var(--theme-red); 340 | {% else %} var(--theme-blue); {% endif %} 341 | --label-badge-red: teal; 342 | box-shadow: var(--ha-card-box-shadow); 343 | } 344 | ha-state-label-badge$ha-label-badge$: | 345 | .label-badge { 346 | background: none; 347 | } 348 | .title { 349 | -webkit-line-clamp: 1; 350 | display: -webkit-box; 351 | -webkit-box-orient: vertical; 352 | } 353 | # Style more info 354 | card-mod-more-info-yaml: | 355 | $: | 356 | .mdc-dialog { 357 | backdrop-filter: blur(2px); 358 | background-color: #313738cc !important; 359 | } 360 | .mdc-dialog__scrim { 361 | background-color: #313738cc !important; 362 | } 363 | .mdc-dialog .mdc-dialog__container .mdc-dialog__surface { 364 | background: var(--primary-background-color); 365 | border-radius: var(--ha-card-border-radius); 366 | box-shadow: var(--ha-card-box-shadow); 367 | transform: scale(0.9); 368 | overflow: hidden; 369 | } 370 | .mdc-dialog__content { 371 | padding: 36px !important; 372 | padding-bottom: 36px !important; 373 | transform: scale(1.11); 374 | } 375 | ha-header-bar: 376 | $: | 377 | .mdc-top-app-bar { 378 | background: none !important; 379 | } 380 | # Spin fans 381 | card-mod-row-yaml: | 382 | "*:first-child": 383 | $: | 384 | @keyframes spin { 385 | 0% { 386 | transform: rotate(0deg); 387 | } 388 | 100% { 389 | transform: rotate(359deg); 390 | } 391 | } 392 | state-badge { 393 | {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %} 394 | animation: spin 4s infinite linear; 395 | {% endif %} 396 | } 397 | -------------------------------------------------------------------------------- /themes/dark-soft-ui-fire.yaml: -------------------------------------------------------------------------------- 1 | # Thanks @JuanMTech, @thomasloven, and @N-l1. 2 | Dark Soft UI Fire: 3 | # Color 4 | primary-color: "#eb8a60" 5 | light-primary-color: var(--primary-color) 6 | accent-color: "#eb6760" 7 | mdc-theme-secondary: var(--accent-color) 8 | # More colors 9 | success-color: "#77EB60" 10 | info-color: var(--primary-color) 11 | warning-color: "#EBEB60" 12 | error-color: "#D18941" 13 | # Background 14 | primary-background-color: "#383331" 15 | secondary-background-color: var(--primary-background-color) 16 | # Text 17 | primary-text-color: "#F7F8FA" 18 | secondary-text-color: var(--primary-text-color) 19 | codemirror-meta: var(--primary-text-color) 20 | material-secondary-text-color: var(--secondary-text-color) 21 | text-primary-color: "#FFFFFF" 22 | disabled-text-color: "#616387" 23 | # Fonts 24 | paper-font-headline_-_font-family: Quicksand, Roboto, sans-serif 25 | paper-font-headline_-_font-weight: "600" 26 | paper-font-subhead_-_font-family: Quicksand, Roboto, sans-serif 27 | paper-font-subhead_-_font-weight: "550" 28 | paper-font-subhead_-_line-height: 2.2em 29 | ha-card-header-font-family: Quicksand, Roboto, sans-serif 30 | ha-card-header-font-weight: "600" 31 | code-font-family: Cascadia Code PL, Cascadia Mono PL, Cascadia Code, Cascadia Mono, monospace 32 | paper-font-common-code_-_font-family: var(--code-font-family) 33 | # Sidebar 34 | sidebar-icon-color: var(--primary-text-color) 35 | sidebar-text-color: var(--primary-text-color) 36 | sidebar-selected-icon-color: var(--light-primary-color) 37 | sidebar-selected-text-color: var(--light-primary-color) 38 | sidebar-background-color: var(--primary-background-color) 39 | sidebar-selected-background-color: var(--primary-background-color) 40 | divider-color: var(--primary-background-color) 41 | # Header 42 | app-header-background-color: var(--primary-background-color) 43 | app-header-text-color: var(--primary-text-color) 44 | # Icons 45 | state-icon-color: var(--primary-text-color) 46 | state-icon-active-color: var(--primary-color) 47 | state-icon-unavailable-color: var(--disabled-text-color) 48 | # Sliders 49 | paper-slider-knob-color: var(--primary-color) 50 | paper-slider-knob-start-color: var(--primary-color) 51 | paper-slider-pin-color: var(--primary-color) 52 | paper-slider-active-color: var(--primary-color) 53 | paper-slider-secondary-color: var(--light-primary-color) 54 | # Labels 55 | label-badge-background-color: var(--primary-background-color) 56 | label-badge-text-color: var(--primary-text-color) 57 | label-badge-red: "#EB6065" 58 | label-badge-green: "#60EB67" 59 | label-badge-blue: "#60B1EB" 60 | label-badge-yellow: "#EBC860" 61 | label-badge-gray: "#666F80" 62 | # Cards 63 | ha-card-border-radius: "13.75px" 64 | ha-card-box-shadow: -5.25px -5.25px 5.25px 0 rgba(60, 60, 60, .6), 5.25px 5.25px 5.25px 0 rgba(0, 0, 0, .15) 65 | ha-card-border-color: var(--primary-color) 66 | ha-card-border-width: 3px 67 | card-background-color: var(--primary-background-color) 68 | paper-card-background-color: var(--primary-background-color) 69 | paper-listbox-background-color: var(--primary-background-color) 70 | # Switches 71 | switch-checked-button-color: var(--primary-color) 72 | switch-checked-track-color: var(--primary-color) 73 | switch-unchecked-button-color: var(--disabled-text-color) 74 | switch-unchecked-track-color: var(--disabled-text-color) 75 | paper-toggle-button-checked-button-color: var(--primary-color) 76 | paper-toggle-button-checked-bar-color: var(--primary-color) 77 | paper-toggle-button-unchecked-button-color: var(--disabled-text-color) 78 | paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) 79 | # Tables 80 | table-row-background-color: var(--primary-background-color) 81 | table-row-alternative-background-color: var(--primary-background-color) 82 | data-table-background-color: var(--primary-background-color) 83 | # Dropdowns 84 | material-background-color: var(--primary-background-color) 85 | material-secondary-background-color: rgba(255, 255, 255, 0.1) 86 | mdc-theme-surface: var(--primary-background-color) 87 | # Convenience 88 | primary-name-text-color: grey 89 | primary-state-text-color: grey 90 | primary-icon-color: grey 91 | primary-yellow: "#FAD46B" 92 | dark-primary-yellow: "#DAB44B" 93 | tertiary-background-color: "#323545" 94 | ha-card-box-shadow-inset: inset -5.5px -5.5px 5.5px 0 rgba(60, 60, 60, .5), inset 5.5px 5.5px 5.5px 0 rgba(0, 0, 0, .5) 95 | soft-ui-pressed: var(--ha-card-box-shadow-inset) 96 | soft-ui-shadow: var(--ha-card-box-shadow) 97 | red: "#eb6060" 98 | red-orange: "#eb8e60" 99 | orange-red: "#eb9a60" 100 | orange: "#eba560" 101 | orange-yellow: "#ebc860" 102 | yellow-orange: "#ebd460" 103 | yellow: "#ebdf60" 104 | yellow-green: "#c8eb60" 105 | green-yellow: "#b1eb60" 106 | green: "#60eb60" 107 | green-cyan: "#60eba5" 108 | cyan-green: "#60ebc8" 109 | cyan: "#60ebeb" 110 | cyan-blue: "#60bceb" 111 | blue-cyan: "#608eeb" 112 | blue: "#6060eb" 113 | blue-purple: "#7760eb" 114 | purple-blue: "#8e60eb" 115 | purple: "#a560eb" 116 | purple-pink: "#bc60eb" 117 | pink-purple: "#d460eb" 118 | pink: "#eb60eb" 119 | pink-red: "#eb60bc" 120 | red-pink: "#eb608e" 121 | # Card-mod 122 | card-mod-theme: "Dark Soft UI Fire" 123 | theme-red: firebrick 124 | theme-green: forestgreen 125 | theme-blue: deepskyblue 126 | ha-label-badge-title-font-size: 1em 127 | # Cards 128 | card-mod-card-yaml: | 129 | .: | 130 | * { 131 | --soft-ui-shadow: var(--ha-card-box-shadow) !important; 132 | --soft-ui-pressed: var(--ha-card-box-shadow-inset) !important; 133 | } 134 | ha-card.type-markdown { 135 | box-shadow: none; 136 | } 137 | ha-card.type-markdown > ha-markdown { 138 | padding: 8px; 139 | } 140 | ha-card:not(.type-markdown) { 141 | background-color: var(--primary-background-color); 142 | border-radius: var(--ha-card-border-radius); 143 | } 144 | ha-card:not(.type-markdown):not(.type-custom-button-card):not(.type-entities):not(.type-custom-mod-card):not(.type-custom-bar-card):not(.type-history-graph):not(.type-iframe):not(.type-glance) { 145 | margin: 20px 6px; 146 | box-shadow: var(--ha-card-box-shadow); 147 | } 148 | ha-card.type-custom-vacuum-card > .preview { 149 | --primary-color: var(--primary-background-color); 150 | } 151 | ha-card.type-custom-vacuum-card > .preview > * { 152 | color: var(--primary-text-color); 153 | } 154 | ha-card.type-custom-vacuum-card > .preview > .header > .battery > ha-icon { 155 | color: var(--primary-text-color); 156 | } 157 | ha-card.type-custom-vacuum-card > .preview > .metadata > .vacuum-name { 158 | color: var(--primary-text-color); 159 | } 160 | ha-card.type-picture-entity, 161 | ha-card.type-picture-glance { 162 | padding: 10px; 163 | } 164 | ha-card.type-picture-entity > .footer, 165 | ha-card.type-picture-glance > .box { 166 | margin: 10px; 167 | border-radius: 15px; 168 | } 169 | ha-card.type-entities, ha-card.type-custom-bar-card, ha-card.type-entity, 170 | ha-card.type-history-graph, ha-card.type-map, ha-card.type-iframe, 171 | ha-card.type-glance, ha-card.type-custom-button-text-card, 172 | ha-card.type-custom-select-list-card { 173 | box-shadow: none !important; 174 | margin: 25px 6px; 175 | } 176 | ha-card > #states > div > * { 177 | padding-top: 8px; 178 | padding-bottom: 8px; 179 | width: 95%; 180 | margin: 0 auto 0 5px; 181 | } 182 | ha-card > #states > div > *:not(hui-button-row):not(hui-input-select-entity-row):not(hui-input-number-entity-row):not(hui-input-text-entity-row):not(hui-cast-row) { 183 | display: block; 184 | } 185 | ha-card.type-media-control, ha-card.type-media-control > * { 186 | background-color: var(--primary-background-color) !important; 187 | color: var(--secondary-text-color) !important; 188 | } 189 | ha-card > #states, 190 | ha-card > .header-footer, 191 | ha-card > hui-graph-header-footer, 192 | ha-card.type-glance > .entities, 193 | ha-card:not(.type-humidifier):not(.type-light):not(.type-weather-forecast) > .content, 194 | ha-card.type-map > #root > #map, 195 | ha-card.type-iframe > #root, 196 | ha-card.type-custom-select-list-card > #list { 197 | box-shadow: var(--ha-card-box-shadow); 198 | border-radius: var(--ha-card-border-radius); 199 | margin: 12px; 200 | padding: 10px; 201 | } 202 | ha-card.type-iframe > #root > iframe { 203 | border-radius: var(--ha-card-border-radius); 204 | } 205 | ha-card.type-entity > .info { 206 | padding: 16px; 207 | box-shadow: var(--ha-card-box-shadow); 208 | border-radius: var(--ha-card-border-radius); 209 | margin: 12px; 210 | } 211 | ha-card > .header-footer { 212 | margin: 25px 12px; 213 | } 214 | ha-card > .card-header { 215 | box-shadow: none; 216 | } 217 | ha-card > .card-header > .name { 218 | text-align: center; 219 | width: 100%; 220 | } 221 | ha-card > .card-header > hui-entities-toggle { 222 | margin: 0 25px 0 -25px; 223 | } 224 | ha-card.type-custom-bar-card > .card-header, 225 | ha-card.type-history-graph > .card-header, 226 | ha-card.type-map > .card-header, 227 | ha-card.type-iframe > .card-header, 228 | ha-card.type-shopping-list > .card-header, 229 | ha-card.type-glance > .card-header { 230 | text-align: center; 231 | width: 70%; 232 | margin: 0 auto; 233 | } 234 | @keyframes spin { 235 | 0% { 236 | transform: rotate(0deg); 237 | } 238 | 100% { 239 | transform: rotate(359deg); 240 | } 241 | } 242 | ha-icon[data-domain="fan"][data-state="on"] { 243 | animation: spin 4s infinite linear; 244 | } 245 | # Header 246 | header-height: 48px # Change this to 0px for header on the bottom. You're 1/3 there. 247 | card-mod-root-yaml: | 248 | paper-tabs$: | 249 | /* Uncomment this for header on the bottom. You're 2/3 there. 250 | #selectionBar { 251 | bottom: unset !important; 252 | } 253 | */ 254 | .: | 255 | /* This moves the header up. */ 256 | app-header { 257 | transform: translate3d(0px, -48px, 0px); 258 | } 259 | /* Let's change the background. */ 260 | app-header, app-toolbar { 261 | background: var(--primary-background-color) !important; 262 | color: var(--primary-text-color) !important; 263 | } 264 | /* We're still going to need a way to see that we're in edit mode. */ 265 | app-header.edit-mode { 266 | padding-bottom: calc(var(--ha-card-border-width, 2px) * 2); 267 | border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color); 268 | } 269 | /* This changes the color of the currently selected tab. */ 270 | ha-tabs { 271 | --paper-tabs-selection-bar-color: var(--primary-color) !important; 272 | } 273 | paper-tab[aria-selected=true] { 274 | color: var(--primary-color) !important; 275 | } 276 | /* This hides the help button. */ 277 | a.menu-link[target="_blank"] { 278 | display: none; 279 | } 280 | /* This makes the plus color the same as the background. */ 281 | #add-view { 282 | color: var(--primary-background-color); 283 | } 284 | /* This hides the title. */ 285 | [main-title] { 286 | display: none; 287 | } 288 | /* This hides the app-toolbar in edit mode. */ 289 | app-toolbar.edit-mode { 290 | height: 0; 291 | } 292 | /* This moves the edit mode buttons back in. */ 293 | app-toolbar.edit-mode > mwc-icon-button { 294 | position: absolute; 295 | left: 0; 296 | top: 0; 297 | z-index: 1; 298 | } 299 | app-toolbar.edit-mode > ha-button-menu { 300 | position: absolute; 301 | right: 0; 302 | top: 0; 303 | z-index: 1; 304 | } 305 | /* This adds a bit more padding, mainly for unused entities. */ 306 | app-header.edit-mode > div { 307 | padding-left: 5px; 308 | } 309 | /* Uncomment this for header on the bottom. You're 3/3 there. 310 | app-header { 311 | top: calc(100vh - 60px) !important; 312 | bottom: 0 !important; 313 | transform: unset !important; 314 | } 315 | */ 316 | # Badges and columns 317 | card-mod-view-yaml: | 318 | hui-masonry-view$: | 319 | /* Delete to fix left-aligned 320 | #columns { 321 | flex-direction: column !important; 322 | margin: 0 auto; 323 | max-width: 500px; 324 | } 325 | */ 326 | card-mod-badge-yaml: | 327 | .: | 328 | :host { 329 | border-radius: 5px; 330 | padding: 11px 8px; 331 | margin: 11px 12px 24px 12px; 332 | display: inline-block; 333 | --label-badge-blue: {% if not states(config.entity) %} var(--theme-blue); 334 | {% elif is_state(config.entity, 'on') %} var(--theme-green); 335 | {% elif is_state(config.entity, 'open') %} var(--theme-green); 336 | {% elif is_state(config.entity, 'unlocked') %} var(--theme-green); 337 | {% elif is_state(config.entity, 'off') %} var(--theme-red); 338 | {% elif is_state(config.entity, 'closed') %} var(--theme-red); 339 | {% elif is_state(config.entity, 'locked') %} var(--theme-red); 340 | {% else %} var(--theme-blue); {% endif %} 341 | --label-badge-red: teal; 342 | box-shadow: var(--ha-card-box-shadow); 343 | } 344 | ha-state-label-badge$ha-label-badge$: | 345 | .label-badge { 346 | background: none; 347 | } 348 | .title { 349 | -webkit-line-clamp: 1; 350 | display: -webkit-box; 351 | -webkit-box-orient: vertical; 352 | } 353 | # Style more info 354 | card-mod-more-info-yaml: | 355 | $: | 356 | .mdc-dialog { 357 | backdrop-filter: blur(2px); 358 | background-color: #383331cc !important; 359 | } 360 | .mdc-dialog__scrim { 361 | background-color: #383331cc !important; 362 | } 363 | .mdc-dialog .mdc-dialog__container .mdc-dialog__surface { 364 | background: var(--primary-background-color); 365 | border-radius: var(--ha-card-border-radius); 366 | box-shadow: var(--ha-card-box-shadow); 367 | transform: scale(0.9); 368 | overflow: hidden; 369 | } 370 | .mdc-dialog__content { 371 | padding: 36px !important; 372 | padding-bottom: 36px !important; 373 | transform: scale(1.11); 374 | } 375 | ha-header-bar: 376 | $: | 377 | .mdc-top-app-bar { 378 | background: none !important; 379 | } 380 | # Spin fans 381 | card-mod-row-yaml: | 382 | "*:first-child": 383 | $: | 384 | @keyframes spin { 385 | 0% { 386 | transform: rotate(0deg); 387 | } 388 | 100% { 389 | transform: rotate(359deg); 390 | } 391 | } 392 | state-badge { 393 | {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %} 394 | animation: spin 4s infinite linear; 395 | {% endif %} 396 | } 397 | -------------------------------------------------------------------------------- /themes/dark-soft-ui-lime.yaml: -------------------------------------------------------------------------------- 1 | # Thanks @JuanMTech, @thomasloven, and @N-l1. 2 | Dark Soft UI Lime: 3 | # Color 4 | primary-color: "#a5eb60" 5 | light-primary-color: var(--primary-color) 6 | accent-color: "#c8eb60" 7 | mdc-theme-secondary: var(--accent-color) 8 | # More colors 9 | success-color: "#77EB60" 10 | info-color: var(--primary-color) 11 | warning-color: "#EBEB60" 12 | error-color: "#D18941" 13 | # Background 14 | primary-background-color: "#353831" 15 | secondary-background-color: var(--primary-background-color) 16 | # Text 17 | primary-text-color: "#F7F8FA" 18 | secondary-text-color: var(--primary-text-color) 19 | codemirror-meta: var(--primary-text-color) 20 | material-secondary-text-color: var(--secondary-text-color) 21 | text-primary-color: "#FFFFFF" 22 | disabled-text-color: "#616387" 23 | # Fonts 24 | paper-font-headline_-_font-family: Quicksand, Roboto, sans-serif 25 | paper-font-headline_-_font-weight: "600" 26 | paper-font-subhead_-_font-family: Quicksand, Roboto, sans-serif 27 | paper-font-subhead_-_font-weight: "550" 28 | paper-font-subhead_-_line-height: 2.2em 29 | ha-card-header-font-family: Quicksand, Roboto, sans-serif 30 | ha-card-header-font-weight: "600" 31 | code-font-family: Cascadia Code PL, Cascadia Mono PL, Cascadia Code, Cascadia Mono, monospace 32 | paper-font-common-code_-_font-family: var(--code-font-family) 33 | # Sidebar 34 | sidebar-icon-color: var(--primary-text-color) 35 | sidebar-text-color: var(--primary-text-color) 36 | sidebar-selected-icon-color: var(--light-primary-color) 37 | sidebar-selected-text-color: var(--light-primary-color) 38 | sidebar-background-color: var(--primary-background-color) 39 | sidebar-selected-background-color: var(--primary-background-color) 40 | divider-color: var(--primary-background-color) 41 | # Header 42 | app-header-background-color: var(--primary-background-color) 43 | app-header-text-color: var(--primary-text-color) 44 | # Icons 45 | state-icon-color: var(--primary-text-color) 46 | state-icon-active-color: var(--primary-color) 47 | state-icon-unavailable-color: var(--disabled-text-color) 48 | # Sliders 49 | paper-slider-knob-color: var(--primary-color) 50 | paper-slider-knob-start-color: var(--primary-color) 51 | paper-slider-pin-color: var(--primary-color) 52 | paper-slider-active-color: var(--primary-color) 53 | paper-slider-secondary-color: var(--light-primary-color) 54 | # Labels 55 | label-badge-background-color: var(--primary-background-color) 56 | label-badge-text-color: var(--primary-text-color) 57 | label-badge-red: "#EB6065" 58 | label-badge-green: "#60EB67" 59 | label-badge-blue: "#60B1EB" 60 | label-badge-yellow: "#EBC860" 61 | label-badge-gray: "#666F80" 62 | # Cards 63 | ha-card-border-radius: "13.75px" 64 | ha-card-box-shadow: -5.25px -5.25px 5.25px 0 rgba(60, 60, 60, .6), 5.25px 5.25px 5.25px 0 rgba(0, 0, 0, .15) 65 | ha-card-border-color: var(--primary-color) 66 | ha-card-border-width: 3px 67 | card-background-color: var(--primary-background-color) 68 | paper-card-background-color: var(--primary-background-color) 69 | paper-listbox-background-color: var(--primary-background-color) 70 | # Switches 71 | switch-checked-button-color: var(--primary-color) 72 | switch-checked-track-color: var(--primary-color) 73 | switch-unchecked-button-color: var(--disabled-text-color) 74 | switch-unchecked-track-color: var(--disabled-text-color) 75 | paper-toggle-button-checked-button-color: var(--primary-color) 76 | paper-toggle-button-checked-bar-color: var(--primary-color) 77 | paper-toggle-button-unchecked-button-color: var(--disabled-text-color) 78 | paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) 79 | # Tables 80 | table-row-background-color: var(--primary-background-color) 81 | table-row-alternative-background-color: var(--primary-background-color) 82 | data-table-background-color: var(--primary-background-color) 83 | # Dropdowns 84 | material-background-color: var(--primary-background-color) 85 | material-secondary-background-color: rgba(255, 255, 255, 0.1) 86 | mdc-theme-surface: var(--primary-background-color) 87 | # Convenience 88 | primary-name-text-color: grey 89 | primary-state-text-color: grey 90 | primary-icon-color: grey 91 | primary-yellow: "#FAD46B" 92 | dark-primary-yellow: "#DAB44B" 93 | tertiary-background-color: "#323545" 94 | ha-card-box-shadow-inset: inset -5.5px -5.5px 5.5px 0 rgba(60, 60, 60, .5), inset 5.5px 5.5px 5.5px 0 rgba(0, 0, 0, .5) 95 | soft-ui-pressed: var(--ha-card-box-shadow-inset) 96 | soft-ui-shadow: var(--ha-card-box-shadow) 97 | red: "#eb6060" 98 | red-orange: "#eb8e60" 99 | orange-red: "#eb9a60" 100 | orange: "#eba560" 101 | orange-yellow: "#ebc860" 102 | yellow-orange: "#ebd460" 103 | yellow: "#ebdf60" 104 | yellow-green: "#c8eb60" 105 | green-yellow: "#b1eb60" 106 | green: "#60eb60" 107 | green-cyan: "#60eba5" 108 | cyan-green: "#60ebc8" 109 | cyan: "#60ebeb" 110 | cyan-blue: "#60bceb" 111 | blue-cyan: "#608eeb" 112 | blue: "#6060eb" 113 | blue-purple: "#7760eb" 114 | purple-blue: "#8e60eb" 115 | purple: "#a560eb" 116 | purple-pink: "#bc60eb" 117 | pink-purple: "#d460eb" 118 | pink: "#eb60eb" 119 | pink-red: "#eb60bc" 120 | red-pink: "#eb608e" 121 | # Card-mod 122 | card-mod-theme: "Dark Soft UI Lime" 123 | theme-red: firebrick 124 | theme-green: forestgreen 125 | theme-blue: deepskyblue 126 | ha-label-badge-title-font-size: 1em 127 | # Cards 128 | card-mod-card-yaml: | 129 | .: | 130 | * { 131 | --soft-ui-shadow: var(--ha-card-box-shadow) !important; 132 | --soft-ui-pressed: var(--ha-card-box-shadow-inset) !important; 133 | } 134 | ha-card.type-markdown { 135 | box-shadow: none; 136 | } 137 | ha-card.type-markdown > ha-markdown { 138 | padding: 8px; 139 | } 140 | ha-card:not(.type-markdown) { 141 | background-color: var(--primary-background-color); 142 | border-radius: var(--ha-card-border-radius); 143 | } 144 | ha-card:not(.type-markdown):not(.type-custom-button-card):not(.type-entities):not(.type-custom-mod-card):not(.type-custom-bar-card):not(.type-history-graph):not(.type-iframe):not(.type-glance) { 145 | margin: 20px 6px; 146 | box-shadow: var(--ha-card-box-shadow); 147 | } 148 | ha-card.type-custom-vacuum-card > .preview { 149 | --primary-color: var(--primary-background-color); 150 | } 151 | ha-card.type-custom-vacuum-card > .preview > * { 152 | color: var(--primary-text-color); 153 | } 154 | ha-card.type-custom-vacuum-card > .preview > .header > .battery > ha-icon { 155 | color: var(--primary-text-color); 156 | } 157 | ha-card.type-custom-vacuum-card > .preview > .metadata > .vacuum-name { 158 | color: var(--primary-text-color); 159 | } 160 | ha-card.type-picture-entity, 161 | ha-card.type-picture-glance { 162 | padding: 10px; 163 | } 164 | ha-card.type-picture-entity > .footer, 165 | ha-card.type-picture-glance > .box { 166 | margin: 10px; 167 | border-radius: 15px; 168 | } 169 | ha-card.type-entities, ha-card.type-custom-bar-card, ha-card.type-entity, 170 | ha-card.type-history-graph, ha-card.type-map, ha-card.type-iframe, 171 | ha-card.type-glance, ha-card.type-custom-button-text-card, 172 | ha-card.type-custom-select-list-card { 173 | box-shadow: none !important; 174 | margin: 25px 6px; 175 | } 176 | ha-card > #states > div > * { 177 | padding-top: 8px; 178 | padding-bottom: 8px; 179 | width: 95%; 180 | margin: 0 auto 0 5px; 181 | } 182 | ha-card > #states > div > *:not(hui-button-row):not(hui-input-select-entity-row):not(hui-input-number-entity-row):not(hui-input-text-entity-row):not(hui-cast-row) { 183 | display: block; 184 | } 185 | ha-card.type-media-control, ha-card.type-media-control > * { 186 | background-color: var(--primary-background-color) !important; 187 | color: var(--secondary-text-color) !important; 188 | } 189 | ha-card > #states, 190 | ha-card > .header-footer, 191 | ha-card > hui-graph-header-footer, 192 | ha-card.type-glance > .entities, 193 | ha-card:not(.type-humidifier):not(.type-light):not(.type-weather-forecast) > .content, 194 | ha-card.type-map > #root > #map, 195 | ha-card.type-iframe > #root, 196 | ha-card.type-custom-select-list-card > #list { 197 | box-shadow: var(--ha-card-box-shadow); 198 | border-radius: var(--ha-card-border-radius); 199 | margin: 12px; 200 | padding: 10px; 201 | } 202 | ha-card.type-iframe > #root > iframe { 203 | border-radius: var(--ha-card-border-radius); 204 | } 205 | ha-card.type-entity > .info { 206 | padding: 16px; 207 | box-shadow: var(--ha-card-box-shadow); 208 | border-radius: var(--ha-card-border-radius); 209 | margin: 12px; 210 | } 211 | ha-card > .header-footer { 212 | margin: 25px 12px; 213 | } 214 | ha-card > .card-header { 215 | box-shadow: none; 216 | } 217 | ha-card > .card-header > .name { 218 | text-align: center; 219 | width: 100%; 220 | } 221 | ha-card > .card-header > hui-entities-toggle { 222 | margin: 0 25px 0 -25px; 223 | } 224 | ha-card.type-custom-bar-card > .card-header, 225 | ha-card.type-history-graph > .card-header, 226 | ha-card.type-map > .card-header, 227 | ha-card.type-iframe > .card-header, 228 | ha-card.type-shopping-list > .card-header, 229 | ha-card.type-glance > .card-header { 230 | text-align: center; 231 | width: 70%; 232 | margin: 0 auto; 233 | } 234 | @keyframes spin { 235 | 0% { 236 | transform: rotate(0deg); 237 | } 238 | 100% { 239 | transform: rotate(359deg); 240 | } 241 | } 242 | ha-icon[data-domain="fan"][data-state="on"] { 243 | animation: spin 4s infinite linear; 244 | } 245 | # Header 246 | header-height: 48px # Change this to 0px for header on the bottom. You're 1/3 there. 247 | card-mod-root-yaml: | 248 | paper-tabs$: | 249 | /* Uncomment this for header on the bottom. You're 2/3 there. 250 | #selectionBar { 251 | bottom: unset !important; 252 | } 253 | */ 254 | .: | 255 | /* This moves the header up. */ 256 | app-header { 257 | transform: translate3d(0px, -48px, 0px); 258 | } 259 | /* Let's change the background. */ 260 | app-header, app-toolbar { 261 | background: var(--primary-background-color) !important; 262 | color: var(--primary-text-color) !important; 263 | } 264 | /* We're still going to need a way to see that we're in edit mode. */ 265 | app-header.edit-mode { 266 | padding-bottom: calc(var(--ha-card-border-width, 2px) * 2); 267 | border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color); 268 | } 269 | /* This changes the color of the currently selected tab. */ 270 | ha-tabs { 271 | --paper-tabs-selection-bar-color: var(--primary-color) !important; 272 | } 273 | paper-tab[aria-selected=true] { 274 | color: var(--primary-color) !important; 275 | } 276 | /* This hides the help button. */ 277 | a.menu-link[target="_blank"] { 278 | display: none; 279 | } 280 | /* This makes the plus color the same as the background. */ 281 | #add-view { 282 | color: var(--primary-background-color); 283 | } 284 | /* This hides the title. */ 285 | [main-title] { 286 | display: none; 287 | } 288 | /* This hides the app-toolbar in edit mode. */ 289 | app-toolbar.edit-mode { 290 | height: 0; 291 | } 292 | /* This moves the edit mode buttons back in. */ 293 | app-toolbar.edit-mode > mwc-icon-button { 294 | position: absolute; 295 | left: 0; 296 | top: 0; 297 | z-index: 1; 298 | } 299 | app-toolbar.edit-mode > ha-button-menu { 300 | position: absolute; 301 | right: 0; 302 | top: 0; 303 | z-index: 1; 304 | } 305 | /* This adds a bit more padding, mainly for unused entities. */ 306 | app-header.edit-mode > div { 307 | padding-left: 5px; 308 | } 309 | /* Uncomment this for header on the bottom. You're 3/3 there. 310 | app-header { 311 | top: calc(100vh - 60px) !important; 312 | bottom: 0 !important; 313 | transform: unset !important; 314 | } 315 | */ 316 | # Badges and columns 317 | card-mod-view-yaml: | 318 | hui-masonry-view$: | 319 | /* Delete to fix left-aligned 320 | #columns { 321 | flex-direction: column !important; 322 | margin: 0 auto; 323 | max-width: 500px; 324 | } 325 | */ 326 | card-mod-badge-yaml: | 327 | .: | 328 | :host { 329 | border-radius: 5px; 330 | padding: 11px 8px; 331 | margin: 11px 12px 24px 12px; 332 | display: inline-block; 333 | --label-badge-blue: {% if not states(config.entity) %} var(--theme-blue); 334 | {% elif is_state(config.entity, 'on') %} var(--theme-green); 335 | {% elif is_state(config.entity, 'open') %} var(--theme-green); 336 | {% elif is_state(config.entity, 'unlocked') %} var(--theme-green); 337 | {% elif is_state(config.entity, 'off') %} var(--theme-red); 338 | {% elif is_state(config.entity, 'closed') %} var(--theme-red); 339 | {% elif is_state(config.entity, 'locked') %} var(--theme-red); 340 | {% else %} var(--theme-blue); {% endif %} 341 | --label-badge-red: teal; 342 | box-shadow: var(--ha-card-box-shadow); 343 | } 344 | ha-state-label-badge$ha-label-badge$: | 345 | .label-badge { 346 | background: none; 347 | } 348 | .title { 349 | -webkit-line-clamp: 1; 350 | display: -webkit-box; 351 | -webkit-box-orient: vertical; 352 | } 353 | # Style more info 354 | card-mod-more-info-yaml: | 355 | $: | 356 | .mdc-dialog { 357 | backdrop-filter: blur(2px); 358 | background-color: #353831cc !important; 359 | } 360 | .mdc-dialog__scrim { 361 | background-color: #353831cc !important; 362 | } 363 | .mdc-dialog .mdc-dialog__container .mdc-dialog__surface { 364 | background: var(--primary-background-color); 365 | border-radius: var(--ha-card-border-radius); 366 | box-shadow: var(--ha-card-box-shadow); 367 | transform: scale(0.9); 368 | overflow: hidden; 369 | } 370 | .mdc-dialog__content { 371 | padding: 36px !important; 372 | padding-bottom: 36px !important; 373 | transform: scale(1.11); 374 | } 375 | ha-header-bar: 376 | $: | 377 | .mdc-top-app-bar { 378 | background: none !important; 379 | } 380 | # Spin fans 381 | card-mod-row-yaml: | 382 | "*:first-child": 383 | $: | 384 | @keyframes spin { 385 | 0% { 386 | transform: rotate(0deg); 387 | } 388 | 100% { 389 | transform: rotate(359deg); 390 | } 391 | } 392 | state-badge { 393 | {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %} 394 | animation: spin 4s infinite linear; 395 | {% endif %} 396 | } 397 | -------------------------------------------------------------------------------- /themes/dark-soft-ui-mint.yaml: -------------------------------------------------------------------------------- 1 | # Thanks @JuanMTech, @thomasloven, and @N-l1. 2 | Dark Soft UI Mint: 3 | # Color 4 | primary-color: "#60ebb1" 5 | light-primary-color: var(--primary-color) 6 | accent-color: "#60eb8e" 7 | mdc-theme-secondary: var(--accent-color) 8 | # More colors 9 | success-color: "#77EB60" 10 | info-color: var(--primary-color) 11 | warning-color: "#EBEB60" 12 | error-color: "#D18941" 13 | # Background 14 | primary-background-color: "#313835" 15 | secondary-background-color: var(--primary-background-color) 16 | # Text 17 | primary-text-color: "#F7F8FA" 18 | secondary-text-color: var(--primary-text-color) 19 | codemirror-meta: var(--primary-text-color) 20 | material-secondary-text-color: var(--secondary-text-color) 21 | text-primary-color: "#FFFFFF" 22 | disabled-text-color: "#616387" 23 | # Fonts 24 | paper-font-headline_-_font-family: Quicksand, Roboto, sans-serif 25 | paper-font-headline_-_font-weight: "600" 26 | paper-font-subhead_-_font-family: Quicksand, Roboto, sans-serif 27 | paper-font-subhead_-_font-weight: "550" 28 | paper-font-subhead_-_line-height: 2.2em 29 | ha-card-header-font-family: Quicksand, Roboto, sans-serif 30 | ha-card-header-font-weight: "600" 31 | code-font-family: Cascadia Code PL, Cascadia Mono PL, Cascadia Code, Cascadia Mono, monospace 32 | paper-font-common-code_-_font-family: var(--code-font-family) 33 | # Sidebar 34 | sidebar-icon-color: var(--primary-text-color) 35 | sidebar-text-color: var(--primary-text-color) 36 | sidebar-selected-icon-color: var(--light-primary-color) 37 | sidebar-selected-text-color: var(--light-primary-color) 38 | sidebar-background-color: var(--primary-background-color) 39 | sidebar-selected-background-color: var(--primary-background-color) 40 | divider-color: var(--primary-background-color) 41 | # Header 42 | app-header-background-color: var(--primary-background-color) 43 | app-header-text-color: var(--primary-text-color) 44 | # Icons 45 | state-icon-color: var(--primary-text-color) 46 | state-icon-active-color: var(--primary-color) 47 | state-icon-unavailable-color: var(--disabled-text-color) 48 | # Sliders 49 | paper-slider-knob-color: var(--primary-color) 50 | paper-slider-knob-start-color: var(--primary-color) 51 | paper-slider-pin-color: var(--primary-color) 52 | paper-slider-active-color: var(--primary-color) 53 | paper-slider-secondary-color: var(--light-primary-color) 54 | # Labels 55 | label-badge-background-color: var(--primary-background-color) 56 | label-badge-text-color: var(--primary-text-color) 57 | label-badge-red: "#EB6065" 58 | label-badge-green: "#60EB67" 59 | label-badge-blue: "#60B1EB" 60 | label-badge-yellow: "#EBC860" 61 | label-badge-gray: "#666F80" 62 | # Cards 63 | ha-card-border-radius: "13.75px" 64 | ha-card-box-shadow: -5.25px -5.25px 5.25px 0 rgba(60, 60, 60, .6), 5.25px 5.25px 5.25px 0 rgba(0, 0, 0, .15) 65 | ha-card-border-color: var(--primary-color) 66 | ha-card-border-width: 3px 67 | card-background-color: var(--primary-background-color) 68 | paper-card-background-color: var(--primary-background-color) 69 | paper-listbox-background-color: var(--primary-background-color) 70 | # Switches 71 | switch-checked-button-color: var(--primary-color) 72 | switch-checked-track-color: var(--primary-color) 73 | switch-unchecked-button-color: var(--disabled-text-color) 74 | switch-unchecked-track-color: var(--disabled-text-color) 75 | paper-toggle-button-checked-button-color: var(--primary-color) 76 | paper-toggle-button-checked-bar-color: var(--primary-color) 77 | paper-toggle-button-unchecked-button-color: var(--disabled-text-color) 78 | paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) 79 | # Tables 80 | table-row-background-color: var(--primary-background-color) 81 | table-row-alternative-background-color: var(--primary-background-color) 82 | data-table-background-color: var(--primary-background-color) 83 | # Dropdowns 84 | material-background-color: var(--primary-background-color) 85 | material-secondary-background-color: rgba(255, 255, 255, 0.1) 86 | mdc-theme-surface: var(--primary-background-color) 87 | # Convenience 88 | primary-name-text-color: grey 89 | primary-state-text-color: grey 90 | primary-icon-color: grey 91 | primary-yellow: "#FAD46B" 92 | dark-primary-yellow: "#DAB44B" 93 | tertiary-background-color: "#323545" 94 | ha-card-box-shadow-inset: inset -5.5px -5.5px 5.5px 0 rgba(60, 60, 60, .5), inset 5.5px 5.5px 5.5px 0 rgba(0, 0, 0, .5) 95 | soft-ui-pressed: var(--ha-card-box-shadow-inset) 96 | soft-ui-shadow: var(--ha-card-box-shadow) 97 | red: "#eb6060" 98 | red-orange: "#eb8e60" 99 | orange-red: "#eb9a60" 100 | orange: "#eba560" 101 | orange-yellow: "#ebc860" 102 | yellow-orange: "#ebd460" 103 | yellow: "#ebdf60" 104 | yellow-green: "#c8eb60" 105 | green-yellow: "#b1eb60" 106 | green: "#60eb60" 107 | green-cyan: "#60eba5" 108 | cyan-green: "#60ebc8" 109 | cyan: "#60ebeb" 110 | cyan-blue: "#60bceb" 111 | blue-cyan: "#608eeb" 112 | blue: "#6060eb" 113 | blue-purple: "#7760eb" 114 | purple-blue: "#8e60eb" 115 | purple: "#a560eb" 116 | purple-pink: "#bc60eb" 117 | pink-purple: "#d460eb" 118 | pink: "#eb60eb" 119 | pink-red: "#eb60bc" 120 | red-pink: "#eb608e" 121 | # Card-mod 122 | card-mod-theme: "Dark Soft UI Mint" 123 | theme-red: firebrick 124 | theme-green: forestgreen 125 | theme-blue: deepskyblue 126 | ha-label-badge-title-font-size: 1em 127 | # Cards 128 | card-mod-card-yaml: | 129 | .: | 130 | * { 131 | --soft-ui-shadow: var(--ha-card-box-shadow) !important; 132 | --soft-ui-pressed: var(--ha-card-box-shadow-inset) !important; 133 | } 134 | ha-card.type-markdown { 135 | box-shadow: none; 136 | } 137 | ha-card.type-markdown > ha-markdown { 138 | padding: 8px; 139 | } 140 | ha-card:not(.type-markdown) { 141 | background-color: var(--primary-background-color); 142 | border-radius: var(--ha-card-border-radius); 143 | } 144 | ha-card:not(.type-markdown):not(.type-custom-button-card):not(.type-entities):not(.type-custom-mod-card):not(.type-custom-bar-card):not(.type-history-graph):not(.type-iframe):not(.type-glance) { 145 | margin: 20px 6px; 146 | box-shadow: var(--ha-card-box-shadow); 147 | } 148 | ha-card.type-custom-vacuum-card > .preview { 149 | --primary-color: var(--primary-background-color); 150 | } 151 | ha-card.type-custom-vacuum-card > .preview > * { 152 | color: var(--primary-text-color); 153 | } 154 | ha-card.type-custom-vacuum-card > .preview > .header > .battery > ha-icon { 155 | color: var(--primary-text-color); 156 | } 157 | ha-card.type-custom-vacuum-card > .preview > .metadata > .vacuum-name { 158 | color: var(--primary-text-color); 159 | } 160 | ha-card.type-picture-entity, 161 | ha-card.type-picture-glance { 162 | padding: 10px; 163 | } 164 | ha-card.type-picture-entity > .footer, 165 | ha-card.type-picture-glance > .box { 166 | margin: 10px; 167 | border-radius: 15px; 168 | } 169 | ha-card.type-entities, ha-card.type-custom-bar-card, ha-card.type-entity, 170 | ha-card.type-history-graph, ha-card.type-map, ha-card.type-iframe, 171 | ha-card.type-glance, ha-card.type-custom-button-text-card, 172 | ha-card.type-custom-select-list-card { 173 | box-shadow: none !important; 174 | margin: 25px 6px; 175 | } 176 | ha-card > #states > div > * { 177 | padding-top: 8px; 178 | padding-bottom: 8px; 179 | width: 95%; 180 | margin: 0 auto 0 5px; 181 | } 182 | ha-card > #states > div > *:not(hui-button-row):not(hui-input-select-entity-row):not(hui-input-number-entity-row):not(hui-input-text-entity-row):not(hui-cast-row) { 183 | display: block; 184 | } 185 | ha-card.type-media-control, ha-card.type-media-control > * { 186 | background-color: var(--primary-background-color) !important; 187 | color: var(--secondary-text-color) !important; 188 | } 189 | ha-card > #states, 190 | ha-card > .header-footer, 191 | ha-card > hui-graph-header-footer, 192 | ha-card.type-glance > .entities, 193 | ha-card:not(.type-humidifier):not(.type-light):not(.type-weather-forecast) > .content, 194 | ha-card.type-map > #root > #map, 195 | ha-card.type-iframe > #root, 196 | ha-card.type-custom-select-list-card > #list { 197 | box-shadow: var(--ha-card-box-shadow); 198 | border-radius: var(--ha-card-border-radius); 199 | margin: 12px; 200 | padding: 10px; 201 | } 202 | ha-card.type-iframe > #root > iframe { 203 | border-radius: var(--ha-card-border-radius); 204 | } 205 | ha-card.type-entity > .info { 206 | padding: 16px; 207 | box-shadow: var(--ha-card-box-shadow); 208 | border-radius: var(--ha-card-border-radius); 209 | margin: 12px; 210 | } 211 | ha-card > .header-footer { 212 | margin: 25px 12px; 213 | } 214 | ha-card > .card-header { 215 | box-shadow: none; 216 | } 217 | ha-card > .card-header > .name { 218 | text-align: center; 219 | width: 100%; 220 | } 221 | ha-card > .card-header > hui-entities-toggle { 222 | margin: 0 25px 0 -25px; 223 | } 224 | ha-card.type-custom-bar-card > .card-header, 225 | ha-card.type-history-graph > .card-header, 226 | ha-card.type-map > .card-header, 227 | ha-card.type-iframe > .card-header, 228 | ha-card.type-shopping-list > .card-header, 229 | ha-card.type-glance > .card-header { 230 | text-align: center; 231 | width: 70%; 232 | margin: 0 auto; 233 | } 234 | @keyframes spin { 235 | 0% { 236 | transform: rotate(0deg); 237 | } 238 | 100% { 239 | transform: rotate(359deg); 240 | } 241 | } 242 | ha-icon[data-domain="fan"][data-state="on"] { 243 | animation: spin 4s infinite linear; 244 | } 245 | # Header 246 | header-height: 48px # Change this to 0px for header on the bottom. You're 1/3 there. 247 | card-mod-root-yaml: | 248 | paper-tabs$: | 249 | /* Uncomment this for header on the bottom. You're 2/3 there. 250 | #selectionBar { 251 | bottom: unset !important; 252 | } 253 | */ 254 | .: | 255 | /* This moves the header up. */ 256 | app-header { 257 | transform: translate3d(0px, -48px, 0px); 258 | } 259 | /* Let's change the background. */ 260 | app-header, app-toolbar { 261 | background: var(--primary-background-color) !important; 262 | color: var(--primary-text-color) !important; 263 | } 264 | /* We're still going to need a way to see that we're in edit mode. */ 265 | app-header.edit-mode { 266 | padding-bottom: calc(var(--ha-card-border-width, 2px) * 2); 267 | border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color); 268 | } 269 | /* This changes the color of the currently selected tab. */ 270 | ha-tabs { 271 | --paper-tabs-selection-bar-color: var(--primary-color) !important; 272 | } 273 | paper-tab[aria-selected=true] { 274 | color: var(--primary-color) !important; 275 | } 276 | /* This hides the help button. */ 277 | a.menu-link[target="_blank"] { 278 | display: none; 279 | } 280 | /* This makes the plus color the same as the background. */ 281 | #add-view { 282 | color: var(--primary-background-color); 283 | } 284 | /* This hides the title. */ 285 | [main-title] { 286 | display: none; 287 | } 288 | /* This hides the app-toolbar in edit mode. */ 289 | app-toolbar.edit-mode { 290 | height: 0; 291 | } 292 | /* This moves the edit mode buttons back in. */ 293 | app-toolbar.edit-mode > mwc-icon-button { 294 | position: absolute; 295 | left: 0; 296 | top: 0; 297 | z-index: 1; 298 | } 299 | app-toolbar.edit-mode > ha-button-menu { 300 | position: absolute; 301 | right: 0; 302 | top: 0; 303 | z-index: 1; 304 | } 305 | /* This adds a bit more padding, mainly for unused entities. */ 306 | app-header.edit-mode > div { 307 | padding-left: 5px; 308 | } 309 | /* Uncomment this for header on the bottom. You're 3/3 there. 310 | app-header { 311 | top: calc(100vh - 60px) !important; 312 | bottom: 0 !important; 313 | transform: unset !important; 314 | } 315 | */ 316 | # Badges and columns 317 | card-mod-view-yaml: | 318 | hui-masonry-view$: | 319 | /* Delete to fix left-aligned 320 | #columns { 321 | flex-direction: column !important; 322 | margin: 0 auto; 323 | max-width: 500px; 324 | } 325 | */ 326 | card-mod-badge-yaml: | 327 | .: | 328 | :host { 329 | border-radius: 5px; 330 | padding: 11px 8px; 331 | margin: 11px 12px 24px 12px; 332 | display: inline-block; 333 | --label-badge-blue: {% if not states(config.entity) %} var(--theme-blue); 334 | {% elif is_state(config.entity, 'on') %} var(--theme-green); 335 | {% elif is_state(config.entity, 'open') %} var(--theme-green); 336 | {% elif is_state(config.entity, 'unlocked') %} var(--theme-green); 337 | {% elif is_state(config.entity, 'off') %} var(--theme-red); 338 | {% elif is_state(config.entity, 'closed') %} var(--theme-red); 339 | {% elif is_state(config.entity, 'locked') %} var(--theme-red); 340 | {% else %} var(--theme-blue); {% endif %} 341 | --label-badge-red: teal; 342 | box-shadow: var(--ha-card-box-shadow); 343 | } 344 | ha-state-label-badge$ha-label-badge$: | 345 | .label-badge { 346 | background: none; 347 | } 348 | .title { 349 | -webkit-line-clamp: 1; 350 | display: -webkit-box; 351 | -webkit-box-orient: vertical; 352 | } 353 | # Style more info 354 | card-mod-more-info-yaml: | 355 | $: | 356 | .mdc-dialog { 357 | backdrop-filter: blur(2px); 358 | background-color: #313835cc !important; 359 | } 360 | .mdc-dialog__scrim { 361 | background-color: #313835cc !important; 362 | } 363 | .mdc-dialog .mdc-dialog__container .mdc-dialog__surface { 364 | background: var(--primary-background-color); 365 | border-radius: var(--ha-card-border-radius); 366 | box-shadow: var(--ha-card-box-shadow); 367 | transform: scale(0.9); 368 | overflow: hidden; 369 | } 370 | .mdc-dialog__content { 371 | padding: 36px !important; 372 | padding-bottom: 36px !important; 373 | transform: scale(1.11); 374 | } 375 | ha-header-bar: 376 | $: | 377 | .mdc-top-app-bar { 378 | background: none !important; 379 | } 380 | # Spin fans 381 | card-mod-row-yaml: | 382 | "*:first-child": 383 | $: | 384 | @keyframes spin { 385 | 0% { 386 | transform: rotate(0deg); 387 | } 388 | 100% { 389 | transform: rotate(359deg); 390 | } 391 | } 392 | state-badge { 393 | {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %} 394 | animation: spin 4s infinite linear; 395 | {% endif %} 396 | } 397 | -------------------------------------------------------------------------------- /themes/dark-soft-ui-rose.yaml: -------------------------------------------------------------------------------- 1 | # Thanks @JuanMTech, @thomasloven, and @N-l1. 2 | Dark Soft UI Rose: 3 | # Color 4 | primary-color: "#eb60eb" 5 | light-primary-color: var(--primary-color) 6 | accent-color: "#c860eb" 7 | mdc-theme-secondary: var(--accent-color) 8 | # More colors 9 | success-color: "#77EB60" 10 | info-color: var(--primary-color) 11 | warning-color: "#EBEB60" 12 | error-color: "#D18941" 13 | # Background 14 | primary-background-color: "#383138" 15 | secondary-background-color: var(--primary-background-color) 16 | # Text 17 | primary-text-color: "#F7F8FA" 18 | secondary-text-color: var(--primary-text-color) 19 | codemirror-meta: var(--primary-text-color) 20 | material-secondary-text-color: var(--secondary-text-color) 21 | text-primary-color: "#FFFFFF" 22 | disabled-text-color: "#616387" 23 | # Fonts 24 | paper-font-headline_-_font-family: Quicksand, Roboto, sans-serif 25 | paper-font-headline_-_font-weight: "600" 26 | paper-font-subhead_-_font-family: Quicksand, Roboto, sans-serif 27 | paper-font-subhead_-_font-weight: "550" 28 | paper-font-subhead_-_line-height: 2.2em 29 | ha-card-header-font-family: Quicksand, Roboto, sans-serif 30 | ha-card-header-font-weight: "600" 31 | code-font-family: Cascadia Code PL, Cascadia Mono PL, Cascadia Code, Cascadia Mono, monospace 32 | paper-font-common-code_-_font-family: var(--code-font-family) 33 | # Sidebar 34 | sidebar-icon-color: var(--primary-text-color) 35 | sidebar-text-color: var(--primary-text-color) 36 | sidebar-selected-icon-color: var(--light-primary-color) 37 | sidebar-selected-text-color: var(--light-primary-color) 38 | sidebar-background-color: var(--primary-background-color) 39 | sidebar-selected-background-color: var(--primary-background-color) 40 | divider-color: var(--primary-background-color) 41 | # Header 42 | app-header-background-color: var(--primary-background-color) 43 | app-header-text-color: var(--primary-text-color) 44 | # Icons 45 | state-icon-color: var(--primary-text-color) 46 | state-icon-active-color: var(--primary-color) 47 | state-icon-unavailable-color: var(--disabled-text-color) 48 | # Sliders 49 | paper-slider-knob-color: var(--primary-color) 50 | paper-slider-knob-start-color: var(--primary-color) 51 | paper-slider-pin-color: var(--primary-color) 52 | paper-slider-active-color: var(--primary-color) 53 | paper-slider-secondary-color: var(--light-primary-color) 54 | # Labels 55 | label-badge-background-color: var(--primary-background-color) 56 | label-badge-text-color: var(--primary-text-color) 57 | label-badge-red: "#EB6065" 58 | label-badge-green: "#60EB67" 59 | label-badge-blue: "#60B1EB" 60 | label-badge-yellow: "#EBC860" 61 | label-badge-gray: "#666F80" 62 | # Cards 63 | ha-card-border-radius: "13.75px" 64 | ha-card-box-shadow: -5.25px -5.25px 5.25px 0 rgba(60, 60, 60, .6), 5.25px 5.25px 5.25px 0 rgba(0, 0, 0, .15) 65 | ha-card-border-color: var(--primary-color) 66 | ha-card-border-width: 3px 67 | card-background-color: var(--primary-background-color) 68 | paper-card-background-color: var(--primary-background-color) 69 | paper-listbox-background-color: var(--primary-background-color) 70 | # Switches 71 | switch-checked-button-color: var(--primary-color) 72 | switch-checked-track-color: var(--primary-color) 73 | switch-unchecked-button-color: var(--disabled-text-color) 74 | switch-unchecked-track-color: var(--disabled-text-color) 75 | paper-toggle-button-checked-button-color: var(--primary-color) 76 | paper-toggle-button-checked-bar-color: var(--primary-color) 77 | paper-toggle-button-unchecked-button-color: var(--disabled-text-color) 78 | paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) 79 | # Tables 80 | table-row-background-color: var(--primary-background-color) 81 | table-row-alternative-background-color: var(--primary-background-color) 82 | data-table-background-color: var(--primary-background-color) 83 | # Dropdowns 84 | material-background-color: var(--primary-background-color) 85 | material-secondary-background-color: rgba(255, 255, 255, 0.1) 86 | mdc-theme-surface: var(--primary-background-color) 87 | # Convenience 88 | primary-name-text-color: grey 89 | primary-state-text-color: grey 90 | primary-icon-color: grey 91 | primary-yellow: "#FAD46B" 92 | dark-primary-yellow: "#DAB44B" 93 | tertiary-background-color: "#323545" 94 | ha-card-box-shadow-inset: inset -5.5px -5.5px 5.5px 0 rgba(60, 60, 60, .5), inset 5.5px 5.5px 5.5px 0 rgba(0, 0, 0, .5) 95 | soft-ui-pressed: var(--ha-card-box-shadow-inset) 96 | soft-ui-shadow: var(--ha-card-box-shadow) 97 | red: "#eb6060" 98 | red-orange: "#eb8e60" 99 | orange-red: "#eb9a60" 100 | orange: "#eba560" 101 | orange-yellow: "#ebc860" 102 | yellow-orange: "#ebd460" 103 | yellow: "#ebdf60" 104 | yellow-green: "#c8eb60" 105 | green-yellow: "#b1eb60" 106 | green: "#60eb60" 107 | green-cyan: "#60eba5" 108 | cyan-green: "#60ebc8" 109 | cyan: "#60ebeb" 110 | cyan-blue: "#60bceb" 111 | blue-cyan: "#608eeb" 112 | blue: "#6060eb" 113 | blue-purple: "#7760eb" 114 | purple-blue: "#8e60eb" 115 | purple: "#a560eb" 116 | purple-pink: "#bc60eb" 117 | pink-purple: "#d460eb" 118 | pink: "#eb60eb" 119 | pink-red: "#eb60bc" 120 | red-pink: "#eb608e" 121 | # Card-mod 122 | card-mod-theme: "Dark Soft UI Rose" 123 | theme-red: firebrick 124 | theme-green: forestgreen 125 | theme-blue: deepskyblue 126 | ha-label-badge-title-font-size: 1em 127 | # Cards 128 | card-mod-card-yaml: | 129 | .: | 130 | * { 131 | --soft-ui-shadow: var(--ha-card-box-shadow) !important; 132 | --soft-ui-pressed: var(--ha-card-box-shadow-inset) !important; 133 | } 134 | ha-card.type-markdown { 135 | box-shadow: none; 136 | } 137 | ha-card.type-markdown > ha-markdown { 138 | padding: 8px; 139 | } 140 | ha-card:not(.type-markdown) { 141 | background-color: var(--primary-background-color); 142 | border-radius: var(--ha-card-border-radius); 143 | } 144 | ha-card:not(.type-markdown):not(.type-custom-button-card):not(.type-entities):not(.type-custom-mod-card):not(.type-custom-bar-card):not(.type-history-graph):not(.type-iframe):not(.type-glance) { 145 | margin: 20px 6px; 146 | box-shadow: var(--ha-card-box-shadow); 147 | } 148 | ha-card.type-custom-vacuum-card > .preview { 149 | --primary-color: var(--primary-background-color); 150 | } 151 | ha-card.type-custom-vacuum-card > .preview > * { 152 | color: var(--primary-text-color); 153 | } 154 | ha-card.type-custom-vacuum-card > .preview > .header > .battery > ha-icon { 155 | color: var(--primary-text-color); 156 | } 157 | ha-card.type-custom-vacuum-card > .preview > .metadata > .vacuum-name { 158 | color: var(--primary-text-color); 159 | } 160 | ha-card.type-picture-entity, 161 | ha-card.type-picture-glance { 162 | padding: 10px; 163 | } 164 | ha-card.type-picture-entity > .footer, 165 | ha-card.type-picture-glance > .box { 166 | margin: 10px; 167 | border-radius: 15px; 168 | } 169 | ha-card.type-entities, ha-card.type-custom-bar-card, ha-card.type-entity, 170 | ha-card.type-history-graph, ha-card.type-map, ha-card.type-iframe, 171 | ha-card.type-glance, ha-card.type-custom-button-text-card, 172 | ha-card.type-custom-select-list-card { 173 | box-shadow: none !important; 174 | margin: 25px 6px; 175 | } 176 | ha-card > #states > div > * { 177 | padding-top: 8px; 178 | padding-bottom: 8px; 179 | width: 95%; 180 | margin: 0 auto 0 5px; 181 | } 182 | ha-card > #states > div > *:not(hui-button-row):not(hui-input-select-entity-row):not(hui-input-number-entity-row):not(hui-input-text-entity-row):not(hui-cast-row) { 183 | display: block; 184 | } 185 | ha-card.type-media-control, ha-card.type-media-control > * { 186 | background-color: var(--primary-background-color) !important; 187 | color: var(--secondary-text-color) !important; 188 | } 189 | ha-card > #states, 190 | ha-card > .header-footer, 191 | ha-card > hui-graph-header-footer, 192 | ha-card.type-glance > .entities, 193 | ha-card:not(.type-humidifier):not(.type-light):not(.type-weather-forecast) > .content, 194 | ha-card.type-map > #root > #map, 195 | ha-card.type-iframe > #root, 196 | ha-card.type-custom-select-list-card > #list { 197 | box-shadow: var(--ha-card-box-shadow); 198 | border-radius: var(--ha-card-border-radius); 199 | margin: 12px; 200 | padding: 10px; 201 | } 202 | ha-card.type-iframe > #root > iframe { 203 | border-radius: var(--ha-card-border-radius); 204 | } 205 | ha-card.type-entity > .info { 206 | padding: 16px; 207 | box-shadow: var(--ha-card-box-shadow); 208 | border-radius: var(--ha-card-border-radius); 209 | margin: 12px; 210 | } 211 | ha-card > .header-footer { 212 | margin: 25px 12px; 213 | } 214 | ha-card > .card-header { 215 | box-shadow: none; 216 | } 217 | ha-card > .card-header > .name { 218 | text-align: center; 219 | width: 100%; 220 | } 221 | ha-card > .card-header > hui-entities-toggle { 222 | margin: 0 25px 0 -25px; 223 | } 224 | ha-card.type-custom-bar-card > .card-header, 225 | ha-card.type-history-graph > .card-header, 226 | ha-card.type-map > .card-header, 227 | ha-card.type-iframe > .card-header, 228 | ha-card.type-shopping-list > .card-header, 229 | ha-card.type-glance > .card-header { 230 | text-align: center; 231 | width: 70%; 232 | margin: 0 auto; 233 | } 234 | @keyframes spin { 235 | 0% { 236 | transform: rotate(0deg); 237 | } 238 | 100% { 239 | transform: rotate(359deg); 240 | } 241 | } 242 | ha-icon[data-domain="fan"][data-state="on"] { 243 | animation: spin 4s infinite linear; 244 | } 245 | # Header 246 | header-height: 48px # Change this to 0px for header on the bottom. You're 1/3 there. 247 | card-mod-root-yaml: | 248 | paper-tabs$: | 249 | /* Uncomment this for header on the bottom. You're 2/3 there. 250 | #selectionBar { 251 | bottom: unset !important; 252 | } 253 | */ 254 | .: | 255 | /* This moves the header up. */ 256 | app-header { 257 | transform: translate3d(0px, -48px, 0px); 258 | } 259 | /* Let's change the background. */ 260 | app-header, app-toolbar { 261 | background: var(--primary-background-color) !important; 262 | color: var(--primary-text-color) !important; 263 | } 264 | /* We're still going to need a way to see that we're in edit mode. */ 265 | app-header.edit-mode { 266 | padding-bottom: calc(var(--ha-card-border-width, 2px) * 2); 267 | border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color); 268 | } 269 | /* This changes the color of the currently selected tab. */ 270 | ha-tabs { 271 | --paper-tabs-selection-bar-color: var(--primary-color) !important; 272 | } 273 | paper-tab[aria-selected=true] { 274 | color: var(--primary-color) !important; 275 | } 276 | /* This hides the help button. */ 277 | a.menu-link[target="_blank"] { 278 | display: none; 279 | } 280 | /* This makes the plus color the same as the background. */ 281 | #add-view { 282 | color: var(--primary-background-color); 283 | } 284 | /* This hides the title. */ 285 | [main-title] { 286 | display: none; 287 | } 288 | /* This hides the app-toolbar in edit mode. */ 289 | app-toolbar.edit-mode { 290 | height: 0; 291 | } 292 | /* This moves the edit mode buttons back in. */ 293 | app-toolbar.edit-mode > mwc-icon-button { 294 | position: absolute; 295 | left: 0; 296 | top: 0; 297 | z-index: 1; 298 | } 299 | app-toolbar.edit-mode > ha-button-menu { 300 | position: absolute; 301 | right: 0; 302 | top: 0; 303 | z-index: 1; 304 | } 305 | /* This adds a bit more padding, mainly for unused entities. */ 306 | app-header.edit-mode > div { 307 | padding-left: 5px; 308 | } 309 | /* Uncomment this for header on the bottom. You're 3/3 there. 310 | app-header { 311 | top: calc(100vh - 60px) !important; 312 | bottom: 0 !important; 313 | transform: unset !important; 314 | } 315 | */ 316 | # Badges and columns 317 | card-mod-view-yaml: | 318 | hui-masonry-view$: | 319 | /* Delete to fix left-aligned 320 | #columns { 321 | flex-direction: column !important; 322 | margin: 0 auto; 323 | max-width: 500px; 324 | } 325 | */ 326 | card-mod-badge-yaml: | 327 | .: | 328 | :host { 329 | border-radius: 5px; 330 | padding: 11px 8px; 331 | margin: 11px 12px 24px 12px; 332 | display: inline-block; 333 | --label-badge-blue: {% if not states(config.entity) %} var(--theme-blue); 334 | {% elif is_state(config.entity, 'on') %} var(--theme-green); 335 | {% elif is_state(config.entity, 'open') %} var(--theme-green); 336 | {% elif is_state(config.entity, 'unlocked') %} var(--theme-green); 337 | {% elif is_state(config.entity, 'off') %} var(--theme-red); 338 | {% elif is_state(config.entity, 'closed') %} var(--theme-red); 339 | {% elif is_state(config.entity, 'locked') %} var(--theme-red); 340 | {% else %} var(--theme-blue); {% endif %} 341 | --label-badge-red: teal; 342 | box-shadow: var(--ha-card-box-shadow); 343 | } 344 | ha-state-label-badge$ha-label-badge$: | 345 | .label-badge { 346 | background: none; 347 | } 348 | .title { 349 | -webkit-line-clamp: 1; 350 | display: -webkit-box; 351 | -webkit-box-orient: vertical; 352 | } 353 | # Style more info 354 | card-mod-more-info-yaml: | 355 | $: | 356 | .mdc-dialog { 357 | backdrop-filter: blur(2px); 358 | background-color: #383138cc !important; 359 | } 360 | .mdc-dialog__scrim { 361 | background-color: #383138cc !important; 362 | } 363 | .mdc-dialog .mdc-dialog__container .mdc-dialog__surface { 364 | background: var(--primary-background-color); 365 | border-radius: var(--ha-card-border-radius); 366 | box-shadow: var(--ha-card-box-shadow); 367 | transform: scale(0.9); 368 | overflow: hidden; 369 | } 370 | .mdc-dialog__content { 371 | padding: 36px !important; 372 | padding-bottom: 36px !important; 373 | transform: scale(1.11); 374 | } 375 | ha-header-bar: 376 | $: | 377 | .mdc-top-app-bar { 378 | background: none !important; 379 | } 380 | # Spin fans 381 | card-mod-row-yaml: | 382 | "*:first-child": 383 | $: | 384 | @keyframes spin { 385 | 0% { 386 | transform: rotate(0deg); 387 | } 388 | 100% { 389 | transform: rotate(359deg); 390 | } 391 | } 392 | state-badge { 393 | {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %} 394 | animation: spin 4s infinite linear; 395 | {% endif %} 396 | } 397 | -------------------------------------------------------------------------------- /themes/dark-soft-ui-green.yaml: -------------------------------------------------------------------------------- 1 | # Thanks @JuanMTech, @thomasloven, and @N-l1. 2 | Dark Soft UI Green: 3 | # Color 4 | primary-color: "#60eb75" 5 | light-primary-color: var(--primary-color) 6 | accent-color: "#6eeb60" 7 | mdc-theme-secondary: var(--accent-color) 8 | # More colors 9 | success-color: "#77EB60" 10 | info-color: var(--primary-color) 11 | warning-color: "#EBEB60" 12 | error-color: "#D18941" 13 | # Background 14 | primary-background-color: "#313832" 15 | secondary-background-color: var(--primary-background-color) 16 | # Text 17 | primary-text-color: "#F7F8FA" 18 | secondary-text-color: var(--primary-text-color) 19 | codemirror-meta: var(--primary-text-color) 20 | material-secondary-text-color: var(--secondary-text-color) 21 | text-primary-color: "#FFFFFF" 22 | disabled-text-color: "#616387" 23 | # Fonts 24 | paper-font-headline_-_font-family: Quicksand, Roboto, sans-serif 25 | paper-font-headline_-_font-weight: "600" 26 | paper-font-subhead_-_font-family: Quicksand, Roboto, sans-serif 27 | paper-font-subhead_-_font-weight: "550" 28 | paper-font-subhead_-_line-height: 2.2em 29 | ha-card-header-font-family: Quicksand, Roboto, sans-serif 30 | ha-card-header-font-weight: "600" 31 | code-font-family: Cascadia Code PL, Cascadia Mono PL, Cascadia Code, Cascadia Mono, monospace 32 | paper-font-common-code_-_font-family: var(--code-font-family) 33 | # Sidebar 34 | sidebar-icon-color: var(--primary-text-color) 35 | sidebar-text-color: var(--primary-text-color) 36 | sidebar-selected-icon-color: var(--light-primary-color) 37 | sidebar-selected-text-color: var(--light-primary-color) 38 | sidebar-background-color: var(--primary-background-color) 39 | sidebar-selected-background-color: var(--primary-background-color) 40 | divider-color: var(--primary-background-color) 41 | # Header 42 | app-header-background-color: var(--primary-background-color) 43 | app-header-text-color: var(--primary-text-color) 44 | # Icons 45 | state-icon-color: var(--primary-text-color) 46 | state-icon-active-color: var(--primary-color) 47 | state-icon-unavailable-color: var(--disabled-text-color) 48 | # Sliders 49 | paper-slider-knob-color: var(--primary-color) 50 | paper-slider-knob-start-color: var(--primary-color) 51 | paper-slider-pin-color: var(--primary-color) 52 | paper-slider-active-color: var(--primary-color) 53 | paper-slider-secondary-color: var(--light-primary-color) 54 | # Labels 55 | label-badge-background-color: var(--primary-background-color) 56 | label-badge-text-color: var(--primary-text-color) 57 | label-badge-red: "#EB6065" 58 | label-badge-green: "#60EB67" 59 | label-badge-blue: "#60B1EB" 60 | label-badge-yellow: "#EBC860" 61 | label-badge-gray: "#666F80" 62 | # Cards 63 | ha-card-border-radius: "13.75px" 64 | ha-card-box-shadow: -5.25px -5.25px 5.25px 0 rgba(60, 60, 60, .6), 5.25px 5.25px 5.25px 0 rgba(0, 0, 0, .15) 65 | ha-card-border-color: var(--primary-color) 66 | ha-card-border-width: 3px 67 | card-background-color: var(--primary-background-color) 68 | paper-card-background-color: var(--primary-background-color) 69 | paper-listbox-background-color: var(--primary-background-color) 70 | # Switches 71 | switch-checked-button-color: var(--primary-color) 72 | switch-checked-track-color: var(--primary-color) 73 | switch-unchecked-button-color: var(--disabled-text-color) 74 | switch-unchecked-track-color: var(--disabled-text-color) 75 | paper-toggle-button-checked-button-color: var(--primary-color) 76 | paper-toggle-button-checked-bar-color: var(--primary-color) 77 | paper-toggle-button-unchecked-button-color: var(--disabled-text-color) 78 | paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) 79 | # Tables 80 | table-row-background-color: var(--primary-background-color) 81 | table-row-alternative-background-color: var(--primary-background-color) 82 | data-table-background-color: var(--primary-background-color) 83 | # Dropdowns 84 | material-background-color: var(--primary-background-color) 85 | material-secondary-background-color: rgba(255, 255, 255, 0.1) 86 | mdc-theme-surface: var(--primary-background-color) 87 | # Convenience 88 | primary-name-text-color: grey 89 | primary-state-text-color: grey 90 | primary-icon-color: grey 91 | primary-yellow: "#FAD46B" 92 | dark-primary-yellow: "#DAB44B" 93 | tertiary-background-color: "#323545" 94 | ha-card-box-shadow-inset: inset -5.5px -5.5px 5.5px 0 rgba(60, 60, 60, .5), inset 5.5px 5.5px 5.5px 0 rgba(0, 0, 0, .5) 95 | soft-ui-pressed: var(--ha-card-box-shadow-inset) 96 | soft-ui-shadow: var(--ha-card-box-shadow) 97 | red: "#eb6060" 98 | red-orange: "#eb8e60" 99 | orange-red: "#eb9a60" 100 | orange: "#eba560" 101 | orange-yellow: "#ebc860" 102 | yellow-orange: "#ebd460" 103 | yellow: "#ebdf60" 104 | yellow-green: "#c8eb60" 105 | green-yellow: "#b1eb60" 106 | green: "#60eb60" 107 | green-cyan: "#60eba5" 108 | cyan-green: "#60ebc8" 109 | cyan: "#60ebeb" 110 | cyan-blue: "#60bceb" 111 | blue-cyan: "#608eeb" 112 | blue: "#6060eb" 113 | blue-purple: "#7760eb" 114 | purple-blue: "#8e60eb" 115 | purple: "#a560eb" 116 | purple-pink: "#bc60eb" 117 | pink-purple: "#d460eb" 118 | pink: "#eb60eb" 119 | pink-red: "#eb60bc" 120 | red-pink: "#eb608e" 121 | # Card-mod 122 | card-mod-theme: "Dark Soft UI Green" 123 | theme-red: firebrick 124 | theme-green: forestgreen 125 | theme-blue: deepskyblue 126 | ha-label-badge-title-font-size: 1em 127 | # Cards 128 | card-mod-card-yaml: | 129 | .: | 130 | * { 131 | --soft-ui-shadow: var(--ha-card-box-shadow) !important; 132 | --soft-ui-pressed: var(--ha-card-box-shadow-inset) !important; 133 | } 134 | ha-card.type-markdown { 135 | box-shadow: none; 136 | } 137 | ha-card.type-markdown > ha-markdown { 138 | padding: 8px; 139 | } 140 | ha-card:not(.type-markdown) { 141 | background-color: var(--primary-background-color); 142 | border-radius: var(--ha-card-border-radius); 143 | } 144 | ha-card:not(.type-markdown):not(.type-custom-button-card):not(.type-entities):not(.type-custom-mod-card):not(.type-custom-bar-card):not(.type-history-graph):not(.type-iframe):not(.type-glance) { 145 | margin: 20px 6px; 146 | box-shadow: var(--ha-card-box-shadow); 147 | } 148 | ha-card.type-custom-vacuum-card > .preview { 149 | --primary-color: var(--primary-background-color); 150 | } 151 | ha-card.type-custom-vacuum-card > .preview > * { 152 | color: var(--primary-text-color); 153 | } 154 | ha-card.type-custom-vacuum-card > .preview > .header > .battery > ha-icon { 155 | color: var(--primary-text-color); 156 | } 157 | ha-card.type-custom-vacuum-card > .preview > .metadata > .vacuum-name { 158 | color: var(--primary-text-color); 159 | } 160 | ha-card.type-picture-entity, 161 | ha-card.type-picture-glance { 162 | padding: 10px; 163 | } 164 | ha-card.type-picture-entity > .footer, 165 | ha-card.type-picture-glance > .box { 166 | margin: 10px; 167 | border-radius: 15px; 168 | } 169 | ha-card.type-entities, ha-card.type-custom-bar-card, ha-card.type-entity, 170 | ha-card.type-history-graph, ha-card.type-map, ha-card.type-iframe, 171 | ha-card.type-glance, ha-card.type-custom-button-text-card, 172 | ha-card.type-custom-select-list-card { 173 | box-shadow: none !important; 174 | margin: 25px 6px; 175 | } 176 | ha-card > #states > div > * { 177 | padding-top: 8px; 178 | padding-bottom: 8px; 179 | width: 95%; 180 | margin: 0 auto 0 5px; 181 | } 182 | ha-card > #states > div > *:not(hui-button-row):not(hui-input-select-entity-row):not(hui-input-number-entity-row):not(hui-input-text-entity-row):not(hui-cast-row) { 183 | display: block; 184 | } 185 | ha-card.type-media-control, ha-card.type-media-control > * { 186 | background-color: var(--primary-background-color) !important; 187 | color: var(--secondary-text-color) !important; 188 | } 189 | ha-card > #states, 190 | ha-card > .header-footer, 191 | ha-card > hui-graph-header-footer, 192 | ha-card.type-glance > .entities, 193 | ha-card:not(.type-humidifier):not(.type-light):not(.type-weather-forecast) > .content, 194 | ha-card.type-map > #root > #map, 195 | ha-card.type-iframe > #root, 196 | ha-card.type-custom-select-list-card > #list { 197 | box-shadow: var(--ha-card-box-shadow); 198 | border-radius: var(--ha-card-border-radius); 199 | margin: 12px; 200 | padding: 10px; 201 | } 202 | ha-card.type-iframe > #root > iframe { 203 | border-radius: var(--ha-card-border-radius); 204 | } 205 | ha-card.type-entity > .info { 206 | padding: 16px; 207 | box-shadow: var(--ha-card-box-shadow); 208 | border-radius: var(--ha-card-border-radius); 209 | margin: 12px; 210 | } 211 | ha-card > .header-footer { 212 | margin: 25px 12px; 213 | } 214 | ha-card > .card-header { 215 | box-shadow: none; 216 | } 217 | ha-card > .card-header > .name { 218 | text-align: center; 219 | width: 100%; 220 | } 221 | ha-card > .card-header > hui-entities-toggle { 222 | margin: 0 25px 0 -25px; 223 | } 224 | ha-card.type-custom-bar-card > .card-header, 225 | ha-card.type-history-graph > .card-header, 226 | ha-card.type-map > .card-header, 227 | ha-card.type-iframe > .card-header, 228 | ha-card.type-shopping-list > .card-header, 229 | ha-card.type-glance > .card-header { 230 | text-align: center; 231 | width: 70%; 232 | margin: 0 auto; 233 | } 234 | @keyframes spin { 235 | 0% { 236 | transform: rotate(0deg); 237 | } 238 | 100% { 239 | transform: rotate(359deg); 240 | } 241 | } 242 | ha-icon[data-domain="fan"][data-state="on"] { 243 | animation: spin 4s infinite linear; 244 | } 245 | # Header 246 | header-height: 48px # Change this to 0px for header on the bottom. You're 1/3 there. 247 | card-mod-root-yaml: | 248 | paper-tabs$: | 249 | /* Uncomment this for header on the bottom. You're 2/3 there. 250 | #selectionBar { 251 | bottom: unset !important; 252 | } 253 | */ 254 | .: | 255 | /* This moves the header up. */ 256 | app-header { 257 | transform: translate3d(0px, -48px, 0px); 258 | } 259 | /* Let's change the background. */ 260 | app-header, app-toolbar { 261 | background: var(--primary-background-color) !important; 262 | color: var(--primary-text-color) !important; 263 | } 264 | /* We're still going to need a way to see that we're in edit mode. */ 265 | app-header.edit-mode { 266 | padding-bottom: calc(var(--ha-card-border-width, 2px) * 2); 267 | border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color); 268 | } 269 | /* This changes the color of the currently selected tab. */ 270 | ha-tabs { 271 | --paper-tabs-selection-bar-color: var(--primary-color) !important; 272 | } 273 | paper-tab[aria-selected=true] { 274 | color: var(--primary-color) !important; 275 | } 276 | /* This hides the help button. */ 277 | a.menu-link[target="_blank"] { 278 | display: none; 279 | } 280 | /* This makes the plus color the same as the background. */ 281 | #add-view { 282 | color: var(--primary-background-color); 283 | } 284 | /* This hides the title. */ 285 | [main-title] { 286 | display: none; 287 | } 288 | /* This hides the app-toolbar in edit mode. */ 289 | app-toolbar.edit-mode { 290 | height: 0; 291 | } 292 | /* This moves the edit mode buttons back in. */ 293 | app-toolbar.edit-mode > mwc-icon-button { 294 | position: absolute; 295 | left: 0; 296 | top: 0; 297 | z-index: 1; 298 | } 299 | app-toolbar.edit-mode > ha-button-menu { 300 | position: absolute; 301 | right: 0; 302 | top: 0; 303 | z-index: 1; 304 | } 305 | /* This adds a bit more padding, mainly for unused entities. */ 306 | app-header.edit-mode > div { 307 | padding-left: 5px; 308 | } 309 | /* Uncomment this for header on the bottom. You're 3/3 there. 310 | app-header { 311 | top: calc(100vh - 60px) !important; 312 | bottom: 0 !important; 313 | transform: unset !important; 314 | } 315 | */ 316 | # Badges and columns 317 | card-mod-view-yaml: | 318 | hui-masonry-view$: | 319 | /* Delete to fix left-aligned 320 | #columns { 321 | flex-direction: column !important; 322 | margin: 0 auto; 323 | max-width: 500px; 324 | } 325 | */ 326 | card-mod-badge-yaml: | 327 | .: | 328 | :host { 329 | border-radius: 5px; 330 | padding: 11px 8px; 331 | margin: 11px 12px 24px 12px; 332 | display: inline-block; 333 | --label-badge-blue: {% if not states(config.entity) %} var(--theme-blue); 334 | {% elif is_state(config.entity, 'on') %} var(--theme-green); 335 | {% elif is_state(config.entity, 'open') %} var(--theme-green); 336 | {% elif is_state(config.entity, 'unlocked') %} var(--theme-green); 337 | {% elif is_state(config.entity, 'off') %} var(--theme-red); 338 | {% elif is_state(config.entity, 'closed') %} var(--theme-red); 339 | {% elif is_state(config.entity, 'locked') %} var(--theme-red); 340 | {% else %} var(--theme-blue); {% endif %} 341 | --label-badge-red: teal; 342 | box-shadow: var(--ha-card-box-shadow); 343 | } 344 | ha-state-label-badge$ha-label-badge$: | 345 | .label-badge { 346 | background: none; 347 | } 348 | .title { 349 | -webkit-line-clamp: 1; 350 | display: -webkit-box; 351 | -webkit-box-orient: vertical; 352 | } 353 | # Style more info 354 | card-mod-more-info-yaml: | 355 | $: | 356 | .mdc-dialog { 357 | backdrop-filter: blur(2px); 358 | background-color: #313832cc !important; 359 | } 360 | .mdc-dialog__scrim { 361 | background-color: #313832cc !important; 362 | } 363 | .mdc-dialog .mdc-dialog__container .mdc-dialog__surface { 364 | background: var(--primary-background-color); 365 | border-radius: var(--ha-card-border-radius); 366 | box-shadow: var(--ha-card-box-shadow); 367 | transform: scale(0.9); 368 | overflow: hidden; 369 | } 370 | .mdc-dialog__content { 371 | padding: 36px !important; 372 | padding-bottom: 36px !important; 373 | transform: scale(1.11); 374 | } 375 | ha-header-bar: 376 | $: | 377 | .mdc-top-app-bar { 378 | background: none !important; 379 | } 380 | # Spin fans 381 | card-mod-row-yaml: | 382 | "*:first-child": 383 | $: | 384 | @keyframes spin { 385 | 0% { 386 | transform: rotate(0deg); 387 | } 388 | 100% { 389 | transform: rotate(359deg); 390 | } 391 | } 392 | state-badge { 393 | {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %} 394 | animation: spin 4s infinite linear; 395 | {% endif %} 396 | } 397 | -------------------------------------------------------------------------------- /themes/dark-soft-ui-orange.yaml: -------------------------------------------------------------------------------- 1 | # Thanks @JuanMTech, @thomasloven, and @N-l1. 2 | Dark Soft UI Orange: 3 | # Color 4 | primary-color: "#ebb360" 5 | light-primary-color: var(--primary-color) 6 | accent-color: "#eb9160" 7 | mdc-theme-secondary: var(--accent-color) 8 | # More colors 9 | success-color: "#77EB60" 10 | info-color: var(--primary-color) 11 | warning-color: "#EBEB60" 12 | error-color: "#D18941" 13 | # Background 14 | primary-background-color: "#383531" 15 | secondary-background-color: var(--primary-background-color) 16 | # Text 17 | primary-text-color: "#F7F8FA" 18 | secondary-text-color: var(--primary-text-color) 19 | codemirror-meta: var(--primary-text-color) 20 | material-secondary-text-color: var(--secondary-text-color) 21 | text-primary-color: "#FFFFFF" 22 | disabled-text-color: "#616387" 23 | # Fonts 24 | paper-font-headline_-_font-family: Quicksand, Roboto, sans-serif 25 | paper-font-headline_-_font-weight: "600" 26 | paper-font-subhead_-_font-family: Quicksand, Roboto, sans-serif 27 | paper-font-subhead_-_font-weight: "550" 28 | paper-font-subhead_-_line-height: 2.2em 29 | ha-card-header-font-family: Quicksand, Roboto, sans-serif 30 | ha-card-header-font-weight: "600" 31 | code-font-family: Cascadia Code PL, Cascadia Mono PL, Cascadia Code, Cascadia Mono, monospace 32 | paper-font-common-code_-_font-family: var(--code-font-family) 33 | # Sidebar 34 | sidebar-icon-color: var(--primary-text-color) 35 | sidebar-text-color: var(--primary-text-color) 36 | sidebar-selected-icon-color: var(--light-primary-color) 37 | sidebar-selected-text-color: var(--light-primary-color) 38 | sidebar-background-color: var(--primary-background-color) 39 | sidebar-selected-background-color: var(--primary-background-color) 40 | divider-color: var(--primary-background-color) 41 | # Header 42 | app-header-background-color: var(--primary-background-color) 43 | app-header-text-color: var(--primary-text-color) 44 | # Icons 45 | state-icon-color: var(--primary-text-color) 46 | state-icon-active-color: var(--primary-color) 47 | state-icon-unavailable-color: var(--disabled-text-color) 48 | # Sliders 49 | paper-slider-knob-color: var(--primary-color) 50 | paper-slider-knob-start-color: var(--primary-color) 51 | paper-slider-pin-color: var(--primary-color) 52 | paper-slider-active-color: var(--primary-color) 53 | paper-slider-secondary-color: var(--light-primary-color) 54 | # Labels 55 | label-badge-background-color: var(--primary-background-color) 56 | label-badge-text-color: var(--primary-text-color) 57 | label-badge-red: "#EB6065" 58 | label-badge-green: "#60EB67" 59 | label-badge-blue: "#60B1EB" 60 | label-badge-yellow: "#EBC860" 61 | label-badge-gray: "#666F80" 62 | # Cards 63 | ha-card-border-radius: "13.75px" 64 | ha-card-box-shadow: -5.25px -5.25px 5.25px 0 rgba(60, 60, 60, .6), 5.25px 5.25px 5.25px 0 rgba(0, 0, 0, .15) 65 | ha-card-border-color: var(--primary-color) 66 | ha-card-border-width: 3px 67 | card-background-color: var(--primary-background-color) 68 | paper-card-background-color: var(--primary-background-color) 69 | paper-listbox-background-color: var(--primary-background-color) 70 | # Switches 71 | switch-checked-button-color: var(--primary-color) 72 | switch-checked-track-color: var(--primary-color) 73 | switch-unchecked-button-color: var(--disabled-text-color) 74 | switch-unchecked-track-color: var(--disabled-text-color) 75 | paper-toggle-button-checked-button-color: var(--primary-color) 76 | paper-toggle-button-checked-bar-color: var(--primary-color) 77 | paper-toggle-button-unchecked-button-color: var(--disabled-text-color) 78 | paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) 79 | # Tables 80 | table-row-background-color: var(--primary-background-color) 81 | table-row-alternative-background-color: var(--primary-background-color) 82 | data-table-background-color: var(--primary-background-color) 83 | # Dropdowns 84 | material-background-color: var(--primary-background-color) 85 | material-secondary-background-color: rgba(255, 255, 255, 0.1) 86 | mdc-theme-surface: var(--primary-background-color) 87 | # Convenience 88 | primary-name-text-color: grey 89 | primary-state-text-color: grey 90 | primary-icon-color: grey 91 | primary-yellow: "#FAD46B" 92 | dark-primary-yellow: "#DAB44B" 93 | tertiary-background-color: "#323545" 94 | ha-card-box-shadow-inset: inset -5.5px -5.5px 5.5px 0 rgba(60, 60, 60, .5), inset 5.5px 5.5px 5.5px 0 rgba(0, 0, 0, .5) 95 | soft-ui-pressed: var(--ha-card-box-shadow-inset) 96 | soft-ui-shadow: var(--ha-card-box-shadow) 97 | red: "#eb6060" 98 | red-orange: "#eb8e60" 99 | orange-red: "#eb9a60" 100 | orange: "#eba560" 101 | orange-yellow: "#ebc860" 102 | yellow-orange: "#ebd460" 103 | yellow: "#ebdf60" 104 | yellow-green: "#c8eb60" 105 | green-yellow: "#b1eb60" 106 | green: "#60eb60" 107 | green-cyan: "#60eba5" 108 | cyan-green: "#60ebc8" 109 | cyan: "#60ebeb" 110 | cyan-blue: "#60bceb" 111 | blue-cyan: "#608eeb" 112 | blue: "#6060eb" 113 | blue-purple: "#7760eb" 114 | purple-blue: "#8e60eb" 115 | purple: "#a560eb" 116 | purple-pink: "#bc60eb" 117 | pink-purple: "#d460eb" 118 | pink: "#eb60eb" 119 | pink-red: "#eb60bc" 120 | red-pink: "#eb608e" 121 | # Card-mod 122 | card-mod-theme: "Dark Soft UI Orange" 123 | theme-red: firebrick 124 | theme-green: forestgreen 125 | theme-blue: deepskyblue 126 | ha-label-badge-title-font-size: 1em 127 | # Cards 128 | card-mod-card-yaml: | 129 | .: | 130 | * { 131 | --soft-ui-shadow: var(--ha-card-box-shadow) !important; 132 | --soft-ui-pressed: var(--ha-card-box-shadow-inset) !important; 133 | } 134 | ha-card.type-markdown { 135 | box-shadow: none; 136 | } 137 | ha-card.type-markdown > ha-markdown { 138 | padding: 8px; 139 | } 140 | ha-card:not(.type-markdown) { 141 | background-color: var(--primary-background-color); 142 | border-radius: var(--ha-card-border-radius); 143 | } 144 | ha-card:not(.type-markdown):not(.type-custom-button-card):not(.type-entities):not(.type-custom-mod-card):not(.type-custom-bar-card):not(.type-history-graph):not(.type-iframe):not(.type-glance) { 145 | margin: 20px 6px; 146 | box-shadow: var(--ha-card-box-shadow); 147 | } 148 | ha-card.type-custom-vacuum-card > .preview { 149 | --primary-color: var(--primary-background-color); 150 | } 151 | ha-card.type-custom-vacuum-card > .preview > * { 152 | color: var(--primary-text-color); 153 | } 154 | ha-card.type-custom-vacuum-card > .preview > .header > .battery > ha-icon { 155 | color: var(--primary-text-color); 156 | } 157 | ha-card.type-custom-vacuum-card > .preview > .metadata > .vacuum-name { 158 | color: var(--primary-text-color); 159 | } 160 | ha-card.type-picture-entity, 161 | ha-card.type-picture-glance { 162 | padding: 10px; 163 | } 164 | ha-card.type-picture-entity > .footer, 165 | ha-card.type-picture-glance > .box { 166 | margin: 10px; 167 | border-radius: 15px; 168 | } 169 | ha-card.type-entities, ha-card.type-custom-bar-card, ha-card.type-entity, 170 | ha-card.type-history-graph, ha-card.type-map, ha-card.type-iframe, 171 | ha-card.type-glance, ha-card.type-custom-button-text-card, 172 | ha-card.type-custom-select-list-card { 173 | box-shadow: none !important; 174 | margin: 25px 6px; 175 | } 176 | ha-card > #states > div > * { 177 | padding-top: 8px; 178 | padding-bottom: 8px; 179 | width: 95%; 180 | margin: 0 auto 0 5px; 181 | } 182 | ha-card > #states > div > *:not(hui-button-row):not(hui-input-select-entity-row):not(hui-input-number-entity-row):not(hui-input-text-entity-row):not(hui-cast-row) { 183 | display: block; 184 | } 185 | ha-card.type-media-control, ha-card.type-media-control > * { 186 | background-color: var(--primary-background-color) !important; 187 | color: var(--secondary-text-color) !important; 188 | } 189 | ha-card > #states, 190 | ha-card > .header-footer, 191 | ha-card > hui-graph-header-footer, 192 | ha-card.type-glance > .entities, 193 | ha-card:not(.type-humidifier):not(.type-light):not(.type-weather-forecast) > .content, 194 | ha-card.type-map > #root > #map, 195 | ha-card.type-iframe > #root, 196 | ha-card.type-custom-select-list-card > #list { 197 | box-shadow: var(--ha-card-box-shadow); 198 | border-radius: var(--ha-card-border-radius); 199 | margin: 12px; 200 | padding: 10px; 201 | } 202 | ha-card.type-iframe > #root > iframe { 203 | border-radius: var(--ha-card-border-radius); 204 | } 205 | ha-card.type-entity > .info { 206 | padding: 16px; 207 | box-shadow: var(--ha-card-box-shadow); 208 | border-radius: var(--ha-card-border-radius); 209 | margin: 12px; 210 | } 211 | ha-card > .header-footer { 212 | margin: 25px 12px; 213 | } 214 | ha-card > .card-header { 215 | box-shadow: none; 216 | } 217 | ha-card > .card-header > .name { 218 | text-align: center; 219 | width: 100%; 220 | } 221 | ha-card > .card-header > hui-entities-toggle { 222 | margin: 0 25px 0 -25px; 223 | } 224 | ha-card.type-custom-bar-card > .card-header, 225 | ha-card.type-history-graph > .card-header, 226 | ha-card.type-map > .card-header, 227 | ha-card.type-iframe > .card-header, 228 | ha-card.type-shopping-list > .card-header, 229 | ha-card.type-glance > .card-header { 230 | text-align: center; 231 | width: 70%; 232 | margin: 0 auto; 233 | } 234 | @keyframes spin { 235 | 0% { 236 | transform: rotate(0deg); 237 | } 238 | 100% { 239 | transform: rotate(359deg); 240 | } 241 | } 242 | ha-icon[data-domain="fan"][data-state="on"] { 243 | animation: spin 4s infinite linear; 244 | } 245 | # Header 246 | header-height: 48px # Change this to 0px for header on the bottom. You're 1/3 there. 247 | card-mod-root-yaml: | 248 | paper-tabs$: | 249 | /* Uncomment this for header on the bottom. You're 2/3 there. 250 | #selectionBar { 251 | bottom: unset !important; 252 | } 253 | */ 254 | .: | 255 | /* This moves the header up. */ 256 | app-header { 257 | transform: translate3d(0px, -48px, 0px); 258 | } 259 | /* Let's change the background. */ 260 | app-header, app-toolbar { 261 | background: var(--primary-background-color) !important; 262 | color: var(--primary-text-color) !important; 263 | } 264 | /* We're still going to need a way to see that we're in edit mode. */ 265 | app-header.edit-mode { 266 | padding-bottom: calc(var(--ha-card-border-width, 2px) * 2); 267 | border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color); 268 | } 269 | /* This changes the color of the currently selected tab. */ 270 | ha-tabs { 271 | --paper-tabs-selection-bar-color: var(--primary-color) !important; 272 | } 273 | paper-tab[aria-selected=true] { 274 | color: var(--primary-color) !important; 275 | } 276 | /* This hides the help button. */ 277 | a.menu-link[target="_blank"] { 278 | display: none; 279 | } 280 | /* This makes the plus color the same as the background. */ 281 | #add-view { 282 | color: var(--primary-background-color); 283 | } 284 | /* This hides the title. */ 285 | [main-title] { 286 | display: none; 287 | } 288 | /* This hides the app-toolbar in edit mode. */ 289 | app-toolbar.edit-mode { 290 | height: 0; 291 | } 292 | /* This moves the edit mode buttons back in. */ 293 | app-toolbar.edit-mode > mwc-icon-button { 294 | position: absolute; 295 | left: 0; 296 | top: 0; 297 | z-index: 1; 298 | } 299 | app-toolbar.edit-mode > ha-button-menu { 300 | position: absolute; 301 | right: 0; 302 | top: 0; 303 | z-index: 1; 304 | } 305 | /* This adds a bit more padding, mainly for unused entities. */ 306 | app-header.edit-mode > div { 307 | padding-left: 5px; 308 | } 309 | /* Uncomment this for header on the bottom. You're 3/3 there. 310 | app-header { 311 | top: calc(100vh - 60px) !important; 312 | bottom: 0 !important; 313 | transform: unset !important; 314 | } 315 | */ 316 | # Badges and columns 317 | card-mod-view-yaml: | 318 | hui-masonry-view$: | 319 | /* Delete to fix left-aligned 320 | #columns { 321 | flex-direction: column !important; 322 | margin: 0 auto; 323 | max-width: 500px; 324 | } 325 | */ 326 | card-mod-badge-yaml: | 327 | .: | 328 | :host { 329 | border-radius: 5px; 330 | padding: 11px 8px; 331 | margin: 11px 12px 24px 12px; 332 | display: inline-block; 333 | --label-badge-blue: {% if not states(config.entity) %} var(--theme-blue); 334 | {% elif is_state(config.entity, 'on') %} var(--theme-green); 335 | {% elif is_state(config.entity, 'open') %} var(--theme-green); 336 | {% elif is_state(config.entity, 'unlocked') %} var(--theme-green); 337 | {% elif is_state(config.entity, 'off') %} var(--theme-red); 338 | {% elif is_state(config.entity, 'closed') %} var(--theme-red); 339 | {% elif is_state(config.entity, 'locked') %} var(--theme-red); 340 | {% else %} var(--theme-blue); {% endif %} 341 | --label-badge-red: teal; 342 | box-shadow: var(--ha-card-box-shadow); 343 | } 344 | ha-state-label-badge$ha-label-badge$: | 345 | .label-badge { 346 | background: none; 347 | } 348 | .title { 349 | -webkit-line-clamp: 1; 350 | display: -webkit-box; 351 | -webkit-box-orient: vertical; 352 | } 353 | # Style more info 354 | card-mod-more-info-yaml: | 355 | $: | 356 | .mdc-dialog { 357 | backdrop-filter: blur(2px); 358 | background-color: #383531cc !important; 359 | } 360 | .mdc-dialog__scrim { 361 | background-color: #383531cc !important; 362 | } 363 | .mdc-dialog .mdc-dialog__container .mdc-dialog__surface { 364 | background: var(--primary-background-color); 365 | border-radius: var(--ha-card-border-radius); 366 | box-shadow: var(--ha-card-box-shadow); 367 | transform: scale(0.9); 368 | overflow: hidden; 369 | } 370 | .mdc-dialog__content { 371 | padding: 36px !important; 372 | padding-bottom: 36px !important; 373 | transform: scale(1.11); 374 | } 375 | ha-header-bar: 376 | $: | 377 | .mdc-top-app-bar { 378 | background: none !important; 379 | } 380 | # Spin fans 381 | card-mod-row-yaml: | 382 | "*:first-child": 383 | $: | 384 | @keyframes spin { 385 | 0% { 386 | transform: rotate(0deg); 387 | } 388 | 100% { 389 | transform: rotate(359deg); 390 | } 391 | } 392 | state-badge { 393 | {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %} 394 | animation: spin 4s infinite linear; 395 | {% endif %} 396 | } 397 | -------------------------------------------------------------------------------- /themes/dark-soft-ui-violet.yaml: -------------------------------------------------------------------------------- 1 | # Thanks @JuanMTech, @thomasloven, and @N-l1. 2 | Dark Soft UI Violet: 3 | # Color 4 | primary-color: "#a560eb" 5 | light-primary-color: var(--primary-color) 6 | accent-color: "#8360eb" 7 | mdc-theme-secondary: var(--accent-color) 8 | # More colors 9 | success-color: "#77EB60" 10 | info-color: var(--primary-color) 11 | warning-color: "#EBEB60" 12 | error-color: "#D18941" 13 | # Background 14 | primary-background-color: "#353138" 15 | secondary-background-color: var(--primary-background-color) 16 | # Text 17 | primary-text-color: "#F7F8FA" 18 | secondary-text-color: var(--primary-text-color) 19 | codemirror-meta: var(--primary-text-color) 20 | material-secondary-text-color: var(--secondary-text-color) 21 | text-primary-color: "#FFFFFF" 22 | disabled-text-color: "#616387" 23 | # Fonts 24 | paper-font-headline_-_font-family: Quicksand, Roboto, sans-serif 25 | paper-font-headline_-_font-weight: "600" 26 | paper-font-subhead_-_font-family: Quicksand, Roboto, sans-serif 27 | paper-font-subhead_-_font-weight: "550" 28 | paper-font-subhead_-_line-height: 2.2em 29 | ha-card-header-font-family: Quicksand, Roboto, sans-serif 30 | ha-card-header-font-weight: "600" 31 | code-font-family: Cascadia Code PL, Cascadia Mono PL, Cascadia Code, Cascadia Mono, monospace 32 | paper-font-common-code_-_font-family: var(--code-font-family) 33 | # Sidebar 34 | sidebar-icon-color: var(--primary-text-color) 35 | sidebar-text-color: var(--primary-text-color) 36 | sidebar-selected-icon-color: var(--light-primary-color) 37 | sidebar-selected-text-color: var(--light-primary-color) 38 | sidebar-background-color: var(--primary-background-color) 39 | sidebar-selected-background-color: var(--primary-background-color) 40 | divider-color: var(--primary-background-color) 41 | # Header 42 | app-header-background-color: var(--primary-background-color) 43 | app-header-text-color: var(--primary-text-color) 44 | # Icons 45 | state-icon-color: var(--primary-text-color) 46 | state-icon-active-color: var(--primary-color) 47 | state-icon-unavailable-color: var(--disabled-text-color) 48 | # Sliders 49 | paper-slider-knob-color: var(--primary-color) 50 | paper-slider-knob-start-color: var(--primary-color) 51 | paper-slider-pin-color: var(--primary-color) 52 | paper-slider-active-color: var(--primary-color) 53 | paper-slider-secondary-color: var(--light-primary-color) 54 | # Labels 55 | label-badge-background-color: var(--primary-background-color) 56 | label-badge-text-color: var(--primary-text-color) 57 | label-badge-red: "#EB6065" 58 | label-badge-green: "#60EB67" 59 | label-badge-blue: "#60B1EB" 60 | label-badge-yellow: "#EBC860" 61 | label-badge-gray: "#666F80" 62 | # Cards 63 | ha-card-border-radius: "13.75px" 64 | ha-card-box-shadow: -5.25px -5.25px 5.25px 0 rgba(60, 60, 60, .6), 5.25px 5.25px 5.25px 0 rgba(0, 0, 0, .15) 65 | ha-card-border-color: var(--primary-color) 66 | ha-card-border-width: 3px 67 | card-background-color: var(--primary-background-color) 68 | paper-card-background-color: var(--primary-background-color) 69 | paper-listbox-background-color: var(--primary-background-color) 70 | # Switches 71 | switch-checked-button-color: var(--primary-color) 72 | switch-checked-track-color: var(--primary-color) 73 | switch-unchecked-button-color: var(--disabled-text-color) 74 | switch-unchecked-track-color: var(--disabled-text-color) 75 | paper-toggle-button-checked-button-color: var(--primary-color) 76 | paper-toggle-button-checked-bar-color: var(--primary-color) 77 | paper-toggle-button-unchecked-button-color: var(--disabled-text-color) 78 | paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) 79 | # Tables 80 | table-row-background-color: var(--primary-background-color) 81 | table-row-alternative-background-color: var(--primary-background-color) 82 | data-table-background-color: var(--primary-background-color) 83 | # Dropdowns 84 | material-background-color: var(--primary-background-color) 85 | material-secondary-background-color: rgba(255, 255, 255, 0.1) 86 | mdc-theme-surface: var(--primary-background-color) 87 | # Convenience 88 | primary-name-text-color: grey 89 | primary-state-text-color: grey 90 | primary-icon-color: grey 91 | primary-yellow: "#FAD46B" 92 | dark-primary-yellow: "#DAB44B" 93 | tertiary-background-color: "#323545" 94 | ha-card-box-shadow-inset: inset -5.5px -5.5px 5.5px 0 rgba(60, 60, 60, .5), inset 5.5px 5.5px 5.5px 0 rgba(0, 0, 0, .5) 95 | soft-ui-pressed: var(--ha-card-box-shadow-inset) 96 | soft-ui-shadow: var(--ha-card-box-shadow) 97 | red: "#eb6060" 98 | red-orange: "#eb8e60" 99 | orange-red: "#eb9a60" 100 | orange: "#eba560" 101 | orange-yellow: "#ebc860" 102 | yellow-orange: "#ebd460" 103 | yellow: "#ebdf60" 104 | yellow-green: "#c8eb60" 105 | green-yellow: "#b1eb60" 106 | green: "#60eb60" 107 | green-cyan: "#60eba5" 108 | cyan-green: "#60ebc8" 109 | cyan: "#60ebeb" 110 | cyan-blue: "#60bceb" 111 | blue-cyan: "#608eeb" 112 | blue: "#6060eb" 113 | blue-purple: "#7760eb" 114 | purple-blue: "#8e60eb" 115 | purple: "#a560eb" 116 | purple-pink: "#bc60eb" 117 | pink-purple: "#d460eb" 118 | pink: "#eb60eb" 119 | pink-red: "#eb60bc" 120 | red-pink: "#eb608e" 121 | # Card-mod 122 | card-mod-theme: "Dark Soft UI Violet" 123 | theme-red: firebrick 124 | theme-green: forestgreen 125 | theme-blue: deepskyblue 126 | ha-label-badge-title-font-size: 1em 127 | # Cards 128 | card-mod-card-yaml: | 129 | .: | 130 | * { 131 | --soft-ui-shadow: var(--ha-card-box-shadow) !important; 132 | --soft-ui-pressed: var(--ha-card-box-shadow-inset) !important; 133 | } 134 | ha-card.type-markdown { 135 | box-shadow: none; 136 | } 137 | ha-card.type-markdown > ha-markdown { 138 | padding: 8px; 139 | } 140 | ha-card:not(.type-markdown) { 141 | background-color: var(--primary-background-color); 142 | border-radius: var(--ha-card-border-radius); 143 | } 144 | ha-card:not(.type-markdown):not(.type-custom-button-card):not(.type-entities):not(.type-custom-mod-card):not(.type-custom-bar-card):not(.type-history-graph):not(.type-iframe):not(.type-glance) { 145 | margin: 20px 6px; 146 | box-shadow: var(--ha-card-box-shadow); 147 | } 148 | ha-card.type-custom-vacuum-card > .preview { 149 | --primary-color: var(--primary-background-color); 150 | } 151 | ha-card.type-custom-vacuum-card > .preview > * { 152 | color: var(--primary-text-color); 153 | } 154 | ha-card.type-custom-vacuum-card > .preview > .header > .battery > ha-icon { 155 | color: var(--primary-text-color); 156 | } 157 | ha-card.type-custom-vacuum-card > .preview > .metadata > .vacuum-name { 158 | color: var(--primary-text-color); 159 | } 160 | ha-card.type-picture-entity, 161 | ha-card.type-picture-glance { 162 | padding: 10px; 163 | } 164 | ha-card.type-picture-entity > .footer, 165 | ha-card.type-picture-glance > .box { 166 | margin: 10px; 167 | border-radius: 15px; 168 | } 169 | ha-card.type-entities, ha-card.type-custom-bar-card, ha-card.type-entity, 170 | ha-card.type-history-graph, ha-card.type-map, ha-card.type-iframe, 171 | ha-card.type-glance, ha-card.type-custom-button-text-card, 172 | ha-card.type-custom-select-list-card { 173 | box-shadow: none !important; 174 | margin: 25px 6px; 175 | } 176 | ha-card > #states > div > * { 177 | padding-top: 8px; 178 | padding-bottom: 8px; 179 | width: 95%; 180 | margin: 0 auto 0 5px; 181 | } 182 | ha-card > #states > div > *:not(hui-button-row):not(hui-input-select-entity-row):not(hui-input-number-entity-row):not(hui-input-text-entity-row):not(hui-cast-row) { 183 | display: block; 184 | } 185 | ha-card.type-media-control, ha-card.type-media-control > * { 186 | background-color: var(--primary-background-color) !important; 187 | color: var(--secondary-text-color) !important; 188 | } 189 | ha-card > #states, 190 | ha-card > .header-footer, 191 | ha-card > hui-graph-header-footer, 192 | ha-card.type-glance > .entities, 193 | ha-card:not(.type-humidifier):not(.type-light):not(.type-weather-forecast) > .content, 194 | ha-card.type-map > #root > #map, 195 | ha-card.type-iframe > #root, 196 | ha-card.type-custom-select-list-card > #list { 197 | box-shadow: var(--ha-card-box-shadow); 198 | border-radius: var(--ha-card-border-radius); 199 | margin: 12px; 200 | padding: 10px; 201 | } 202 | ha-card.type-iframe > #root > iframe { 203 | border-radius: var(--ha-card-border-radius); 204 | } 205 | ha-card.type-entity > .info { 206 | padding: 16px; 207 | box-shadow: var(--ha-card-box-shadow); 208 | border-radius: var(--ha-card-border-radius); 209 | margin: 12px; 210 | } 211 | ha-card > .header-footer { 212 | margin: 25px 12px; 213 | } 214 | ha-card > .card-header { 215 | box-shadow: none; 216 | } 217 | ha-card > .card-header > .name { 218 | text-align: center; 219 | width: 100%; 220 | } 221 | ha-card > .card-header > hui-entities-toggle { 222 | margin: 0 25px 0 -25px; 223 | } 224 | ha-card.type-custom-bar-card > .card-header, 225 | ha-card.type-history-graph > .card-header, 226 | ha-card.type-map > .card-header, 227 | ha-card.type-iframe > .card-header, 228 | ha-card.type-shopping-list > .card-header, 229 | ha-card.type-glance > .card-header { 230 | text-align: center; 231 | width: 70%; 232 | margin: 0 auto; 233 | } 234 | @keyframes spin { 235 | 0% { 236 | transform: rotate(0deg); 237 | } 238 | 100% { 239 | transform: rotate(359deg); 240 | } 241 | } 242 | ha-icon[data-domain="fan"][data-state="on"] { 243 | animation: spin 4s infinite linear; 244 | } 245 | # Header 246 | header-height: 48px # Change this to 0px for header on the bottom. You're 1/3 there. 247 | card-mod-root-yaml: | 248 | paper-tabs$: | 249 | /* Uncomment this for header on the bottom. You're 2/3 there. 250 | #selectionBar { 251 | bottom: unset !important; 252 | } 253 | */ 254 | .: | 255 | /* This moves the header up. */ 256 | app-header { 257 | transform: translate3d(0px, -48px, 0px); 258 | } 259 | /* Let's change the background. */ 260 | app-header, app-toolbar { 261 | background: var(--primary-background-color) !important; 262 | color: var(--primary-text-color) !important; 263 | } 264 | /* We're still going to need a way to see that we're in edit mode. */ 265 | app-header.edit-mode { 266 | padding-bottom: calc(var(--ha-card-border-width, 2px) * 2); 267 | border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color); 268 | } 269 | /* This changes the color of the currently selected tab. */ 270 | ha-tabs { 271 | --paper-tabs-selection-bar-color: var(--primary-color) !important; 272 | } 273 | paper-tab[aria-selected=true] { 274 | color: var(--primary-color) !important; 275 | } 276 | /* This hides the help button. */ 277 | a.menu-link[target="_blank"] { 278 | display: none; 279 | } 280 | /* This makes the plus color the same as the background. */ 281 | #add-view { 282 | color: var(--primary-background-color); 283 | } 284 | /* This hides the title. */ 285 | [main-title] { 286 | display: none; 287 | } 288 | /* This hides the app-toolbar in edit mode. */ 289 | app-toolbar.edit-mode { 290 | height: 0; 291 | } 292 | /* This moves the edit mode buttons back in. */ 293 | app-toolbar.edit-mode > mwc-icon-button { 294 | position: absolute; 295 | left: 0; 296 | top: 0; 297 | z-index: 1; 298 | } 299 | app-toolbar.edit-mode > ha-button-menu { 300 | position: absolute; 301 | right: 0; 302 | top: 0; 303 | z-index: 1; 304 | } 305 | /* This adds a bit more padding, mainly for unused entities. */ 306 | app-header.edit-mode > div { 307 | padding-left: 5px; 308 | } 309 | /* Uncomment this for header on the bottom. You're 3/3 there. 310 | app-header { 311 | top: calc(100vh - 60px) !important; 312 | bottom: 0 !important; 313 | transform: unset !important; 314 | } 315 | */ 316 | # Badges and columns 317 | card-mod-view-yaml: | 318 | hui-masonry-view$: | 319 | /* Delete to fix left-aligned 320 | #columns { 321 | flex-direction: column !important; 322 | margin: 0 auto; 323 | max-width: 500px; 324 | } 325 | */ 326 | card-mod-badge-yaml: | 327 | .: | 328 | :host { 329 | border-radius: 5px; 330 | padding: 11px 8px; 331 | margin: 11px 12px 24px 12px; 332 | display: inline-block; 333 | --label-badge-blue: {% if not states(config.entity) %} var(--theme-blue); 334 | {% elif is_state(config.entity, 'on') %} var(--theme-green); 335 | {% elif is_state(config.entity, 'open') %} var(--theme-green); 336 | {% elif is_state(config.entity, 'unlocked') %} var(--theme-green); 337 | {% elif is_state(config.entity, 'off') %} var(--theme-red); 338 | {% elif is_state(config.entity, 'closed') %} var(--theme-red); 339 | {% elif is_state(config.entity, 'locked') %} var(--theme-red); 340 | {% else %} var(--theme-blue); {% endif %} 341 | --label-badge-red: teal; 342 | box-shadow: var(--ha-card-box-shadow); 343 | } 344 | ha-state-label-badge$ha-label-badge$: | 345 | .label-badge { 346 | background: none; 347 | } 348 | .title { 349 | -webkit-line-clamp: 1; 350 | display: -webkit-box; 351 | -webkit-box-orient: vertical; 352 | } 353 | # Style more info 354 | card-mod-more-info-yaml: | 355 | $: | 356 | .mdc-dialog { 357 | backdrop-filter: blur(2px); 358 | background-color: #353138cc !important; 359 | } 360 | .mdc-dialog__scrim { 361 | background-color: #353138cc !important; 362 | } 363 | .mdc-dialog .mdc-dialog__container .mdc-dialog__surface { 364 | background: var(--primary-background-color); 365 | border-radius: var(--ha-card-border-radius); 366 | box-shadow: var(--ha-card-box-shadow); 367 | transform: scale(0.9); 368 | overflow: hidden; 369 | } 370 | .mdc-dialog__content { 371 | padding: 36px !important; 372 | padding-bottom: 36px !important; 373 | transform: scale(1.11); 374 | } 375 | ha-header-bar: 376 | $: | 377 | .mdc-top-app-bar { 378 | background: none !important; 379 | } 380 | # Spin fans 381 | card-mod-row-yaml: | 382 | "*:first-child": 383 | $: | 384 | @keyframes spin { 385 | 0% { 386 | transform: rotate(0deg); 387 | } 388 | 100% { 389 | transform: rotate(359deg); 390 | } 391 | } 392 | state-badge { 393 | {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %} 394 | animation: spin 4s infinite linear; 395 | {% endif %} 396 | } 397 | -------------------------------------------------------------------------------- /themes/dark-soft-ui-yellow.yaml: -------------------------------------------------------------------------------- 1 | # Thanks @JuanMTech, @thomasloven, and @N-l1. 2 | Dark Soft UI Yellow: 3 | # Color 4 | primary-color: "#ebdd60" 5 | light-primary-color: var(--primary-color) 6 | accent-color: "#ebba60" 7 | mdc-theme-secondary: var(--accent-color) 8 | # More colors 9 | success-color: "#77EB60" 10 | info-color: var(--primary-color) 11 | warning-color: "#EBEB60" 12 | error-color: "#D18941" 13 | # Background 14 | primary-background-color: "#383731" 15 | secondary-background-color: var(--primary-background-color) 16 | # Text 17 | primary-text-color: "#F7F8FA" 18 | secondary-text-color: var(--primary-text-color) 19 | codemirror-meta: var(--primary-text-color) 20 | material-secondary-text-color: var(--secondary-text-color) 21 | text-primary-color: "#FFFFFF" 22 | disabled-text-color: "#616387" 23 | # Fonts 24 | paper-font-headline_-_font-family: Quicksand, Roboto, sans-serif 25 | paper-font-headline_-_font-weight: "600" 26 | paper-font-subhead_-_font-family: Quicksand, Roboto, sans-serif 27 | paper-font-subhead_-_font-weight: "550" 28 | paper-font-subhead_-_line-height: 2.2em 29 | ha-card-header-font-family: Quicksand, Roboto, sans-serif 30 | ha-card-header-font-weight: "600" 31 | code-font-family: Cascadia Code PL, Cascadia Mono PL, Cascadia Code, Cascadia Mono, monospace 32 | paper-font-common-code_-_font-family: var(--code-font-family) 33 | # Sidebar 34 | sidebar-icon-color: var(--primary-text-color) 35 | sidebar-text-color: var(--primary-text-color) 36 | sidebar-selected-icon-color: var(--light-primary-color) 37 | sidebar-selected-text-color: var(--light-primary-color) 38 | sidebar-background-color: var(--primary-background-color) 39 | sidebar-selected-background-color: var(--primary-background-color) 40 | divider-color: var(--primary-background-color) 41 | # Header 42 | app-header-background-color: var(--primary-background-color) 43 | app-header-text-color: var(--primary-text-color) 44 | # Icons 45 | state-icon-color: var(--primary-text-color) 46 | state-icon-active-color: var(--primary-color) 47 | state-icon-unavailable-color: var(--disabled-text-color) 48 | # Sliders 49 | paper-slider-knob-color: var(--primary-color) 50 | paper-slider-knob-start-color: var(--primary-color) 51 | paper-slider-pin-color: var(--primary-color) 52 | paper-slider-active-color: var(--primary-color) 53 | paper-slider-secondary-color: var(--light-primary-color) 54 | # Labels 55 | label-badge-background-color: var(--primary-background-color) 56 | label-badge-text-color: var(--primary-text-color) 57 | label-badge-red: "#EB6065" 58 | label-badge-green: "#60EB67" 59 | label-badge-blue: "#60B1EB" 60 | label-badge-yellow: "#EBC860" 61 | label-badge-gray: "#666F80" 62 | # Cards 63 | ha-card-border-radius: "13.75px" 64 | ha-card-box-shadow: -5.25px -5.25px 5.25px 0 rgba(60, 60, 60, .6), 5.25px 5.25px 5.25px 0 rgba(0, 0, 0, .15) 65 | ha-card-border-color: var(--primary-color) 66 | ha-card-border-width: 3px 67 | card-background-color: var(--primary-background-color) 68 | paper-card-background-color: var(--primary-background-color) 69 | paper-listbox-background-color: var(--primary-background-color) 70 | # Switches 71 | switch-checked-button-color: var(--primary-color) 72 | switch-checked-track-color: var(--primary-color) 73 | switch-unchecked-button-color: var(--disabled-text-color) 74 | switch-unchecked-track-color: var(--disabled-text-color) 75 | paper-toggle-button-checked-button-color: var(--primary-color) 76 | paper-toggle-button-checked-bar-color: var(--primary-color) 77 | paper-toggle-button-unchecked-button-color: var(--disabled-text-color) 78 | paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) 79 | # Tables 80 | table-row-background-color: var(--primary-background-color) 81 | table-row-alternative-background-color: var(--primary-background-color) 82 | data-table-background-color: var(--primary-background-color) 83 | # Dropdowns 84 | material-background-color: var(--primary-background-color) 85 | material-secondary-background-color: rgba(255, 255, 255, 0.1) 86 | mdc-theme-surface: var(--primary-background-color) 87 | # Convenience 88 | primary-name-text-color: grey 89 | primary-state-text-color: grey 90 | primary-icon-color: grey 91 | primary-yellow: "#FAD46B" 92 | dark-primary-yellow: "#DAB44B" 93 | tertiary-background-color: "#323545" 94 | ha-card-box-shadow-inset: inset -5.5px -5.5px 5.5px 0 rgba(60, 60, 60, .5), inset 5.5px 5.5px 5.5px 0 rgba(0, 0, 0, .5) 95 | soft-ui-pressed: var(--ha-card-box-shadow-inset) 96 | soft-ui-shadow: var(--ha-card-box-shadow) 97 | red: "#eb6060" 98 | red-orange: "#eb8e60" 99 | orange-red: "#eb9a60" 100 | orange: "#eba560" 101 | orange-yellow: "#ebc860" 102 | yellow-orange: "#ebd460" 103 | yellow: "#ebdf60" 104 | yellow-green: "#c8eb60" 105 | green-yellow: "#b1eb60" 106 | green: "#60eb60" 107 | green-cyan: "#60eba5" 108 | cyan-green: "#60ebc8" 109 | cyan: "#60ebeb" 110 | cyan-blue: "#60bceb" 111 | blue-cyan: "#608eeb" 112 | blue: "#6060eb" 113 | blue-purple: "#7760eb" 114 | purple-blue: "#8e60eb" 115 | purple: "#a560eb" 116 | purple-pink: "#bc60eb" 117 | pink-purple: "#d460eb" 118 | pink: "#eb60eb" 119 | pink-red: "#eb60bc" 120 | red-pink: "#eb608e" 121 | # Card-mod 122 | card-mod-theme: "Dark Soft UI Yellow" 123 | theme-red: firebrick 124 | theme-green: forestgreen 125 | theme-blue: deepskyblue 126 | ha-label-badge-title-font-size: 1em 127 | # Cards 128 | card-mod-card-yaml: | 129 | .: | 130 | * { 131 | --soft-ui-shadow: var(--ha-card-box-shadow) !important; 132 | --soft-ui-pressed: var(--ha-card-box-shadow-inset) !important; 133 | } 134 | ha-card.type-markdown { 135 | box-shadow: none; 136 | } 137 | ha-card.type-markdown > ha-markdown { 138 | padding: 8px; 139 | } 140 | ha-card:not(.type-markdown) { 141 | background-color: var(--primary-background-color); 142 | border-radius: var(--ha-card-border-radius); 143 | } 144 | ha-card:not(.type-markdown):not(.type-custom-button-card):not(.type-entities):not(.type-custom-mod-card):not(.type-custom-bar-card):not(.type-history-graph):not(.type-iframe):not(.type-glance) { 145 | margin: 20px 6px; 146 | box-shadow: var(--ha-card-box-shadow); 147 | } 148 | ha-card.type-custom-vacuum-card > .preview { 149 | --primary-color: var(--primary-background-color); 150 | } 151 | ha-card.type-custom-vacuum-card > .preview > * { 152 | color: var(--primary-text-color); 153 | } 154 | ha-card.type-custom-vacuum-card > .preview > .header > .battery > ha-icon { 155 | color: var(--primary-text-color); 156 | } 157 | ha-card.type-custom-vacuum-card > .preview > .metadata > .vacuum-name { 158 | color: var(--primary-text-color); 159 | } 160 | ha-card.type-picture-entity, 161 | ha-card.type-picture-glance { 162 | padding: 10px; 163 | } 164 | ha-card.type-picture-entity > .footer, 165 | ha-card.type-picture-glance > .box { 166 | margin: 10px; 167 | border-radius: 15px; 168 | } 169 | ha-card.type-entities, ha-card.type-custom-bar-card, ha-card.type-entity, 170 | ha-card.type-history-graph, ha-card.type-map, ha-card.type-iframe, 171 | ha-card.type-glance, ha-card.type-custom-button-text-card, 172 | ha-card.type-custom-select-list-card { 173 | box-shadow: none !important; 174 | margin: 25px 6px; 175 | } 176 | ha-card > #states > div > * { 177 | padding-top: 8px; 178 | padding-bottom: 8px; 179 | width: 95%; 180 | margin: 0 auto 0 5px; 181 | } 182 | ha-card > #states > div > *:not(hui-button-row):not(hui-input-select-entity-row):not(hui-input-number-entity-row):not(hui-input-text-entity-row):not(hui-cast-row) { 183 | display: block; 184 | } 185 | ha-card.type-media-control, ha-card.type-media-control > * { 186 | background-color: var(--primary-background-color) !important; 187 | color: var(--secondary-text-color) !important; 188 | } 189 | ha-card > #states, 190 | ha-card > .header-footer, 191 | ha-card > hui-graph-header-footer, 192 | ha-card.type-glance > .entities, 193 | ha-card:not(.type-humidifier):not(.type-light):not(.type-weather-forecast) > .content, 194 | ha-card.type-map > #root > #map, 195 | ha-card.type-iframe > #root, 196 | ha-card.type-custom-select-list-card > #list { 197 | box-shadow: var(--ha-card-box-shadow); 198 | border-radius: var(--ha-card-border-radius); 199 | margin: 12px; 200 | padding: 10px; 201 | } 202 | ha-card.type-iframe > #root > iframe { 203 | border-radius: var(--ha-card-border-radius); 204 | } 205 | ha-card.type-entity > .info { 206 | padding: 16px; 207 | box-shadow: var(--ha-card-box-shadow); 208 | border-radius: var(--ha-card-border-radius); 209 | margin: 12px; 210 | } 211 | ha-card > .header-footer { 212 | margin: 25px 12px; 213 | } 214 | ha-card > .card-header { 215 | box-shadow: none; 216 | } 217 | ha-card > .card-header > .name { 218 | text-align: center; 219 | width: 100%; 220 | } 221 | ha-card > .card-header > hui-entities-toggle { 222 | margin: 0 25px 0 -25px; 223 | } 224 | ha-card.type-custom-bar-card > .card-header, 225 | ha-card.type-history-graph > .card-header, 226 | ha-card.type-map > .card-header, 227 | ha-card.type-iframe > .card-header, 228 | ha-card.type-shopping-list > .card-header, 229 | ha-card.type-glance > .card-header { 230 | text-align: center; 231 | width: 70%; 232 | margin: 0 auto; 233 | } 234 | @keyframes spin { 235 | 0% { 236 | transform: rotate(0deg); 237 | } 238 | 100% { 239 | transform: rotate(359deg); 240 | } 241 | } 242 | ha-icon[data-domain="fan"][data-state="on"] { 243 | animation: spin 4s infinite linear; 244 | } 245 | # Header 246 | header-height: 48px # Change this to 0px for header on the bottom. You're 1/3 there. 247 | card-mod-root-yaml: | 248 | paper-tabs$: | 249 | /* Uncomment this for header on the bottom. You're 2/3 there. 250 | #selectionBar { 251 | bottom: unset !important; 252 | } 253 | */ 254 | .: | 255 | /* This moves the header up. */ 256 | app-header { 257 | transform: translate3d(0px, -48px, 0px); 258 | } 259 | /* Let's change the background. */ 260 | app-header, app-toolbar { 261 | background: var(--primary-background-color) !important; 262 | color: var(--primary-text-color) !important; 263 | } 264 | /* We're still going to need a way to see that we're in edit mode. */ 265 | app-header.edit-mode { 266 | padding-bottom: calc(var(--ha-card-border-width, 2px) * 2); 267 | border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color); 268 | } 269 | /* This changes the color of the currently selected tab. */ 270 | ha-tabs { 271 | --paper-tabs-selection-bar-color: var(--primary-color) !important; 272 | } 273 | paper-tab[aria-selected=true] { 274 | color: var(--primary-color) !important; 275 | } 276 | /* This hides the help button. */ 277 | a.menu-link[target="_blank"] { 278 | display: none; 279 | } 280 | /* This makes the plus color the same as the background. */ 281 | #add-view { 282 | color: var(--primary-background-color); 283 | } 284 | /* This hides the title. */ 285 | [main-title] { 286 | display: none; 287 | } 288 | /* This hides the app-toolbar in edit mode. */ 289 | app-toolbar.edit-mode { 290 | height: 0; 291 | } 292 | /* This moves the edit mode buttons back in. */ 293 | app-toolbar.edit-mode > mwc-icon-button { 294 | position: absolute; 295 | left: 0; 296 | top: 0; 297 | z-index: 1; 298 | } 299 | app-toolbar.edit-mode > ha-button-menu { 300 | position: absolute; 301 | right: 0; 302 | top: 0; 303 | z-index: 1; 304 | } 305 | /* This adds a bit more padding, mainly for unused entities. */ 306 | app-header.edit-mode > div { 307 | padding-left: 5px; 308 | } 309 | /* Uncomment this for header on the bottom. You're 3/3 there. 310 | app-header { 311 | top: calc(100vh - 60px) !important; 312 | bottom: 0 !important; 313 | transform: unset !important; 314 | } 315 | */ 316 | # Badges and columns 317 | card-mod-view-yaml: | 318 | hui-masonry-view$: | 319 | /* Delete to fix left-aligned 320 | #columns { 321 | flex-direction: column !important; 322 | margin: 0 auto; 323 | max-width: 500px; 324 | } 325 | */ 326 | card-mod-badge-yaml: | 327 | .: | 328 | :host { 329 | border-radius: 5px; 330 | padding: 11px 8px; 331 | margin: 11px 12px 24px 12px; 332 | display: inline-block; 333 | --label-badge-blue: {% if not states(config.entity) %} var(--theme-blue); 334 | {% elif is_state(config.entity, 'on') %} var(--theme-green); 335 | {% elif is_state(config.entity, 'open') %} var(--theme-green); 336 | {% elif is_state(config.entity, 'unlocked') %} var(--theme-green); 337 | {% elif is_state(config.entity, 'off') %} var(--theme-red); 338 | {% elif is_state(config.entity, 'closed') %} var(--theme-red); 339 | {% elif is_state(config.entity, 'locked') %} var(--theme-red); 340 | {% else %} var(--theme-blue); {% endif %} 341 | --label-badge-red: teal; 342 | box-shadow: var(--ha-card-box-shadow); 343 | } 344 | ha-state-label-badge$ha-label-badge$: | 345 | .label-badge { 346 | background: none; 347 | } 348 | .title { 349 | -webkit-line-clamp: 1; 350 | display: -webkit-box; 351 | -webkit-box-orient: vertical; 352 | } 353 | # Style more info 354 | card-mod-more-info-yaml: | 355 | $: | 356 | .mdc-dialog { 357 | backdrop-filter: blur(2px); 358 | background-color: #383731cc !important; 359 | } 360 | .mdc-dialog__scrim { 361 | background-color: #383731cc !important; 362 | } 363 | .mdc-dialog .mdc-dialog__container .mdc-dialog__surface { 364 | background: var(--primary-background-color); 365 | border-radius: var(--ha-card-border-radius); 366 | box-shadow: var(--ha-card-box-shadow); 367 | transform: scale(0.9); 368 | overflow: hidden; 369 | } 370 | .mdc-dialog__content { 371 | padding: 36px !important; 372 | padding-bottom: 36px !important; 373 | transform: scale(1.11); 374 | } 375 | ha-header-bar: 376 | $: | 377 | .mdc-top-app-bar { 378 | background: none !important; 379 | } 380 | # Spin fans 381 | card-mod-row-yaml: | 382 | "*:first-child": 383 | $: | 384 | @keyframes spin { 385 | 0% { 386 | transform: rotate(0deg); 387 | } 388 | 100% { 389 | transform: rotate(359deg); 390 | } 391 | } 392 | state-badge { 393 | {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %} 394 | animation: spin 4s infinite linear; 395 | {% endif %} 396 | } 397 | -------------------------------------------------------------------------------- /theme.yaml: -------------------------------------------------------------------------------- 1 | # Thanks @JuanMTech, @thomasloven, and @N-l1. 2 | Dark Soft UI{color_name}: 3 | # Color 4 | primary-color: {primary_color} 5 | light-primary-color: var(--primary-color) 6 | accent-color: {accent_color} 7 | mdc-theme-secondary: var(--accent-color) 8 | # More colors 9 | success-color: "#77EB60" 10 | info-color: var(--primary-color) 11 | warning-color: "#EBEB60" 12 | error-color: "#D18941" 13 | # Background 14 | primary-background-color: {background_color} 15 | secondary-background-color: var(--primary-background-color) 16 | # Text 17 | primary-text-color: "#F7F8FA" 18 | secondary-text-color: var(--primary-text-color) 19 | codemirror-meta: var(--primary-text-color) 20 | material-secondary-text-color: var(--secondary-text-color) 21 | text-primary-color: "#FFFFFF" 22 | disabled-text-color: "#616387" 23 | # Fonts 24 | paper-font-headline_-_font-family: Quicksand, Roboto, sans-serif 25 | paper-font-headline_-_font-weight: "600" 26 | paper-font-subhead_-_font-family: Quicksand, Roboto, sans-serif 27 | paper-font-subhead_-_font-weight: "550" 28 | paper-font-subhead_-_line-height: 2.2em 29 | ha-card-header-font-family: Quicksand, Roboto, sans-serif 30 | ha-card-header-font-weight: "600" 31 | code-font-family: Cascadia Code PL, Cascadia Mono PL, Cascadia Code, Cascadia Mono, monospace 32 | paper-font-common-code_-_font-family: var(--code-font-family) 33 | # Sidebar 34 | sidebar-icon-color: var(--primary-text-color) 35 | sidebar-text-color: var(--primary-text-color) 36 | sidebar-selected-icon-color: var(--light-primary-color) 37 | sidebar-selected-text-color: var(--light-primary-color) 38 | sidebar-background-color: var(--primary-background-color) 39 | sidebar-selected-background-color: var(--primary-background-color) 40 | divider-color: var(--primary-background-color) 41 | # Header 42 | app-header-background-color: var(--primary-background-color) 43 | app-header-text-color: var(--primary-text-color) 44 | # Icons 45 | state-icon-color: var(--primary-text-color) 46 | state-icon-active-color: var(--primary-color) 47 | state-icon-unavailable-color: var(--disabled-text-color) 48 | # Sliders 49 | paper-slider-knob-color: var(--primary-color) 50 | paper-slider-knob-start-color: var(--primary-color) 51 | paper-slider-pin-color: var(--primary-color) 52 | paper-slider-active-color: var(--primary-color) 53 | paper-slider-secondary-color: var(--light-primary-color) 54 | # Labels 55 | label-badge-background-color: var(--primary-background-color) 56 | label-badge-text-color: var(--primary-text-color) 57 | label-badge-red: "#EB6065" 58 | label-badge-green: "#60EB67" 59 | label-badge-blue: "#60B1EB" 60 | label-badge-yellow: "#EBC860" 61 | label-badge-gray: "#666F80" 62 | # Cards 63 | ha-card-border-radius: "13.75px" 64 | ha-card-box-shadow: -5.25px -5.25px 5.25px 0 rgba(60, 60, 60, .6), 5.25px 5.25px 5.25px 0 rgba(0, 0, 0, .15) 65 | ha-card-border-color: var(--primary-color) 66 | ha-card-border-width: 3px 67 | card-background-color: var(--primary-background-color) 68 | paper-card-background-color: var(--primary-background-color) 69 | paper-listbox-background-color: var(--primary-background-color) 70 | # Switches 71 | switch-checked-button-color: var(--primary-color) 72 | switch-checked-track-color: var(--primary-color) 73 | switch-unchecked-button-color: var(--disabled-text-color) 74 | switch-unchecked-track-color: var(--disabled-text-color) 75 | paper-toggle-button-checked-button-color: var(--primary-color) 76 | paper-toggle-button-checked-bar-color: var(--primary-color) 77 | paper-toggle-button-unchecked-button-color: var(--disabled-text-color) 78 | paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) 79 | # Tables 80 | table-row-background-color: var(--primary-background-color) 81 | table-row-alternative-background-color: var(--primary-background-color) 82 | data-table-background-color: var(--primary-background-color) 83 | # Dropdowns 84 | material-background-color: var(--primary-background-color) 85 | material-secondary-background-color: rgba(255, 255, 255, 0.1) 86 | mdc-theme-surface: var(--primary-background-color) 87 | # Convenience 88 | primary-name-text-color: grey 89 | primary-state-text-color: grey 90 | primary-icon-color: grey 91 | primary-yellow: "#FAD46B" 92 | dark-primary-yellow: "#DAB44B" 93 | tertiary-background-color: "#323545" 94 | ha-card-box-shadow-inset: inset -5.5px -5.5px 5.5px 0 rgba(60, 60, 60, .5), inset 5.5px 5.5px 5.5px 0 rgba(0, 0, 0, .5) 95 | soft-ui-pressed: var(--ha-card-box-shadow-inset) 96 | soft-ui-shadow: var(--ha-card-box-shadow) 97 | red: "#eb6060" 98 | red-orange: "#eb8e60" 99 | orange-red: "#eb9a60" 100 | orange: "#eba560" 101 | orange-yellow: "#ebc860" 102 | yellow-orange: "#ebd460" 103 | yellow: "#ebdf60" 104 | yellow-green: "#c8eb60" 105 | green-yellow: "#b1eb60" 106 | green: "#60eb60" 107 | green-cyan: "#60eba5" 108 | cyan-green: "#60ebc8" 109 | cyan: "#60ebeb" 110 | cyan-blue: "#60bceb" 111 | blue-cyan: "#608eeb" 112 | blue: "#6060eb" 113 | blue-purple: "#7760eb" 114 | purple-blue: "#8e60eb" 115 | purple: "#a560eb" 116 | purple-pink: "#bc60eb" 117 | pink-purple: "#d460eb" 118 | pink: "#eb60eb" 119 | pink-red: "#eb60bc" 120 | red-pink: "#eb608e" 121 | # Card-mod 122 | card-mod-theme: "Dark Soft UI{color_name}" 123 | theme-red: firebrick 124 | theme-green: forestgreen 125 | theme-blue: deepskyblue 126 | ha-label-badge-title-font-size: 1em 127 | # Cards 128 | card-mod-card-yaml: | 129 | .: | 130 | * { 131 | --soft-ui-shadow: var(--ha-card-box-shadow) !important; 132 | --soft-ui-pressed: var(--ha-card-box-shadow-inset) !important; 133 | } 134 | ha-card.type-markdown { 135 | box-shadow: none; 136 | } 137 | ha-card.type-markdown > ha-markdown { 138 | padding: 8px; 139 | } 140 | ha-card:not(.type-markdown) { 141 | background-color: var(--primary-background-color); 142 | border-radius: var(--ha-card-border-radius); 143 | } 144 | ha-card:not(.type-markdown):not(.type-custom-button-card):not(.type-entities):not(.type-custom-mod-card):not(.type-custom-bar-card):not(.type-history-graph):not(.type-iframe):not(.type-glance) { 145 | margin: 20px 6px; 146 | box-shadow: var(--ha-card-box-shadow); 147 | } 148 | ha-card.type-custom-vacuum-card > .preview { 149 | --primary-color: var(--primary-background-color); 150 | } 151 | ha-card.type-custom-vacuum-card > .preview > * { 152 | color: var(--primary-text-color); 153 | } 154 | ha-card.type-custom-vacuum-card > .preview > .header > .battery > ha-icon { 155 | color: var(--primary-text-color); 156 | } 157 | ha-card.type-custom-vacuum-card > .preview > .metadata > .vacuum-name { 158 | color: var(--primary-text-color); 159 | } 160 | ha-card.type-picture-entity, 161 | ha-card.type-picture-glance { 162 | padding: 10px; 163 | } 164 | ha-card.type-picture-entity > .footer, 165 | ha-card.type-picture-glance > .box { 166 | margin: 10px; 167 | border-radius: 15px; 168 | } 169 | ha-card.type-entities, ha-card.type-custom-bar-card, ha-card.type-entity, 170 | ha-card.type-history-graph, ha-card.type-map, ha-card.type-iframe, 171 | ha-card.type-glance, ha-card.type-custom-button-text-card, 172 | ha-card.type-custom-select-list-card { 173 | box-shadow: none !important; 174 | margin: 25px 6px; 175 | } 176 | ha-card > #states > div > * { 177 | padding-top: 8px; 178 | padding-bottom: 8px; 179 | width: 95%; 180 | margin: 0 auto 0 5px; 181 | } 182 | ha-card > #states > div > *:not(hui-button-row):not(hui-input-select-entity-row):not(hui-input-number-entity-row):not(hui-input-text-entity-row):not(hui-cast-row) { 183 | display: block; 184 | } 185 | ha-card.type-media-control, ha-card.type-media-control > * { 186 | background-color: var(--primary-background-color) !important; 187 | color: var(--secondary-text-color) !important; 188 | } 189 | ha-card > #states, 190 | ha-card > .header-footer, 191 | ha-card > hui-graph-header-footer, 192 | ha-card.type-glance > .entities, 193 | ha-card:not(.type-humidifier):not(.type-light):not(.type-weather-forecast) > .content, 194 | ha-card.type-map > #root > #map, 195 | ha-card.type-iframe > #root, 196 | ha-card.type-custom-select-list-card > #list { 197 | box-shadow: var(--ha-card-box-shadow); 198 | border-radius: var(--ha-card-border-radius); 199 | margin: 12px; 200 | padding: 10px; 201 | } 202 | ha-card.type-iframe > #root > iframe { 203 | border-radius: var(--ha-card-border-radius); 204 | } 205 | ha-card.type-entity > .info { 206 | padding: 16px; 207 | box-shadow: var(--ha-card-box-shadow); 208 | border-radius: var(--ha-card-border-radius); 209 | margin: 12px; 210 | } 211 | ha-card > .header-footer { 212 | margin: 25px 12px; 213 | } 214 | ha-card > .card-header { 215 | box-shadow: none; 216 | } 217 | ha-card > .card-header > .name { 218 | text-align: center; 219 | width: 100%; 220 | } 221 | ha-card > .card-header > hui-entities-toggle { 222 | margin: 0 25px 0 -25px; 223 | } 224 | ha-card.type-custom-bar-card > .card-header, 225 | ha-card.type-history-graph > .card-header, 226 | ha-card.type-map > .card-header, 227 | ha-card.type-iframe > .card-header, 228 | ha-card.type-shopping-list > .card-header, 229 | ha-card.type-glance > .card-header { 230 | text-align: center; 231 | width: 70%; 232 | margin: 0 auto; 233 | } 234 | @keyframes spin { 235 | 0% { 236 | transform: rotate(0deg); 237 | } 238 | 100% { 239 | transform: rotate(359deg); 240 | } 241 | } 242 | ha-icon[data-domain="fan"][data-state="on"] { 243 | animation: spin 4s infinite linear; 244 | } 245 | # Header 246 | header-height: 48px # Change this to 0px for header on the bottom. You're 1/3 there. 247 | card-mod-root-yaml: | 248 | paper-tabs$: | 249 | /* Uncomment this for header on the bottom. You're 2/3 there. 250 | #selectionBar { 251 | bottom: unset !important; 252 | } 253 | */ 254 | .: | 255 | /* This moves the header up. */ 256 | app-header { 257 | transform: translate3d(0px, -48px, 0px); 258 | } 259 | /* Let's change the background. */ 260 | app-header, app-toolbar { 261 | background: var(--primary-background-color) !important; 262 | color: var(--primary-text-color) !important; 263 | } 264 | /* We're still going to need a way to see that we're in edit mode. */ 265 | app-header.edit-mode { 266 | padding-bottom: calc(var(--ha-card-border-width, 2px) * 2); 267 | border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color); 268 | } 269 | /* This changes the color of the currently selected tab. */ 270 | ha-tabs { 271 | --paper-tabs-selection-bar-color: var(--primary-color) !important; 272 | } 273 | paper-tab[aria-selected=true] { 274 | color: var(--primary-color) !important; 275 | } 276 | /* This hides the help button. */ 277 | a.menu-link[target="_blank"] { 278 | display: none; 279 | } 280 | /* This makes the plus color the same as the background. */ 281 | #add-view { 282 | color: var(--primary-background-color); 283 | } 284 | /* This hides the title. */ 285 | [main-title] { 286 | display: none; 287 | } 288 | /* This hides the app-toolbar in edit mode. */ 289 | app-toolbar.edit-mode { 290 | height: 0; 291 | } 292 | /* This moves the edit mode buttons back in. */ 293 | app-toolbar.edit-mode > mwc-icon-button { 294 | position: absolute; 295 | left: 0; 296 | top: 0; 297 | z-index: 1; 298 | } 299 | app-toolbar.edit-mode > ha-button-menu { 300 | position: absolute; 301 | right: 0; 302 | top: 0; 303 | z-index: 1; 304 | } 305 | /* This adds a bit more padding, mainly for unused entities. */ 306 | app-header.edit-mode > div { 307 | padding-left: 5px; 308 | } 309 | /* Uncomment this for header on the bottom. You're 3/3 there. 310 | app-header { 311 | top: calc(100vh - 60px) !important; 312 | bottom: 0 !important; 313 | transform: unset !important; 314 | } 315 | */ 316 | # Badges and columns 317 | card-mod-view-yaml: | 318 | hui-masonry-view$: | 319 | /* Delete to fix left-aligned 320 | #columns { 321 | flex-direction: column !important; 322 | margin: 0 auto; 323 | max-width: 500px; 324 | } 325 | */ 326 | card-mod-badge-yaml: | 327 | .: | 328 | :host { 329 | border-radius: 5px; 330 | padding: 11px 8px; 331 | margin: 11px 12px 24px 12px; 332 | display: inline-block; 333 | --label-badge-blue: {% if not states(config.entity) %} var(--theme-blue); 334 | {% elif is_state(config.entity, 'on') %} var(--theme-green); 335 | {% elif is_state(config.entity, 'open') %} var(--theme-green); 336 | {% elif is_state(config.entity, 'unlocked') %} var(--theme-green); 337 | {% elif is_state(config.entity, 'off') %} var(--theme-red); 338 | {% elif is_state(config.entity, 'closed') %} var(--theme-red); 339 | {% elif is_state(config.entity, 'locked') %} var(--theme-red); 340 | {% else %} var(--theme-blue); {% endif %} 341 | --label-badge-red: teal; 342 | box-shadow: var(--ha-card-box-shadow); 343 | } 344 | ha-state-label-badge$ha-label-badge$: | 345 | .label-badge { 346 | background: none; 347 | } 348 | .title { 349 | -webkit-line-clamp: 1; 350 | display: -webkit-box; 351 | -webkit-box-orient: vertical; 352 | } 353 | # Style more info 354 | card-mod-more-info-yaml: | 355 | $: | 356 | .mdc-dialog { 357 | backdrop-filter: blur(2px); 358 | background-color: {more_info_background_color} !important; 359 | } 360 | .mdc-dialog__scrim { 361 | background-color: {more_info_background_color} !important; 362 | } 363 | .mdc-dialog .mdc-dialog__container .mdc-dialog__surface { 364 | background: var(--primary-background-color); 365 | border-radius: var(--ha-card-border-radius); 366 | box-shadow: var(--ha-card-box-shadow); 367 | transform: scale(0.9); 368 | overflow: hidden; 369 | } 370 | .mdc-dialog__content { 371 | padding: 36px !important; 372 | padding-bottom: 36px !important; 373 | transform: scale(1.11); 374 | } 375 | ha-header-bar: 376 | $: | 377 | .mdc-top-app-bar { 378 | background: none !important; 379 | } 380 | # Spin fans 381 | card-mod-row-yaml: | 382 | "*:first-child": 383 | $: | 384 | @keyframes spin { 385 | 0% { 386 | transform: rotate(0deg); 387 | } 388 | 100% { 389 | transform: rotate(359deg); 390 | } 391 | } 392 | state-badge { 393 | {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %} 394 | animation: spin 4s infinite linear; 395 | {% endif %} 396 | } 397 | --------------------------------------------------------------------------------