🟣 Rounded - Dashboard guide

This is really great! Thanks for the inspiration!

Is it possible that you could post the scripts that you are using for your vacuum? Selecting multiple zones and pressing start sounds really handy and cleaver.

1 Like

Here you go.

---
rounded:
  ########################################################
  ############### Default global variables ###############
  ########################################################

  # Spacings and radius
  horizontal-stack-card-margin: 0px 8px
  vertical-stack-card-margin: 8px 0px
  grid-card-gap: 16px
  ha-card-border-width: "0px" # Removes default 1px line
  ha-card-border-radius: 24px
  masonry-view-card-margin: 40px 20px
  # Main Interface Colors
  primary-color: var(--blue)
  accent-color: var(--blue)
  primary-background-color: var(--contrast1)
  secondary-background-color: var(--contrast2)
  divider-color: var(--contrast3)
  # Text
  primary-text-color: var(--contrast20)
  secondary-text-color: var(--contrast9)
  text-primary-color: var(--contrast20)
  disabled-text-color: var(--contrast6)
  text-accent-color: var(--contrast1)
  # Header:
  app-header-background-color: var(--contrast1)
  app-header-text-color: var(--contrast20)
  app-header-selection-bar-color: transparant
  app-header-edit-background-color: var(--contrast2)
  app-header-edit-text-color: var(--contrast20)
  # Cards
  card-background-color: var(--contrast2)
  ha-card-background: var(--contrast2)
  ha-card-border-color: var(--contrast6)
  paper-listbox-background-color: var(--contrast3)
  # Tile card
  state-unavailable-color: var(--contrast6)
  state-light-off-color: var(--contrast10)
  state-light-on-color: var(--yellow)
  # Sidebar Menu
  sidebar-icon-color: var(--contrast6)
  sidebar-text-color: var(--contrast20)
  sidebar-background-color: var(--contrast2)
  sidebar-selected-icon-color: var(--blue)
  sidebar-selected-text-color: var(--blue)
  # Buttons
  paper-item-icon-color: var(--contrast9)
  mdc-button-outline-color: var(--contrast6)
  # States and Badges
  state-icon-color: var(--contrast9)
  # Sliders
  paper-slider-knob-color: var(--contrast20)
  paper-slider-knob-start-color: var(--contrast15)
  paper-slider-pin-color: var(--contrast5)
  paper-slider-pin-start-color: var(--contrast4)
  paper-slider-active-color: var(--contrast15)
  paper-slider-secondary-color: var(--contrast7)
  paper-slider-container-color: var(--contrast5)
  # Switches
  switch-checked-button-color: var(--green)
  switch-checked-track-color: var(--green)
  switch-unchecked-button-color: var(--contrast9)
  switch-unchecked-track-color: var(--contrast6)
  # Toggles
  paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
  paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
  paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
  # Table
  table-row-background-color: var(--contrast2)
  table-row-alternative-background-color: var(--contrast3)
  data-table-background-color: var(--contrast1)
  mdc-text-field-fill-color: var(--contrast3)
  # Input
  input-fill-color: var(--contrast3)
  input-dropdown-icon-color: var(--contrast9)
  material-background-color: var(--contrast2)
  material-secondary-background-color: red
  input-ink-color: var(--contrast20)
  input-label-ink-color: var(--contrast9)
  input-idle-line-color: var(--contrast7)
  input-hover-line-color: var(--contrast20)
  mdc-select-fill-color: var(--input-fill-color)
  mdc-select-ink-color: var(--input-ink-color)
  mdc-select-label-ink-color: var(--input-label-ink-color)
  mdc-select-idle-line-color: var(--input-idle-line-color)
  mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color)
  mdc-select-hover-line-color: var(--input-hover-line-color)
  mdc-text-field-disabled-fill-color: var(--contrast3)
  # Modal screen
  mdc-theme-surface: var(--contrast2)
  # Checkboxes
  mdc-checkbox-unchecked-color: var(--contrast15)
  # Colors
  orange-color: var(--orange)
  green-color: var(--green)
  blue-color: var(--blue)
  red-color: var(--red)
  purple-color: var(--purple)
  yellow-color: var(--yellow)
  grey-color: var(--contrast10)

  #######################################################
  ############### Custom global variables ###############
  #######################################################

  # Black / White
  black: "#000000"
  white: "#FFFFFF"
  # Colors
  purple: rgb(var(--purple-rgb))
  yellow: rgb(var(--yellow-rgb))
  orange: rgb(var(--orange-rgb))
  red: rgb(var(--red-rgb))
  green: rgb(var(--green-rgb))
  blue: rgb(var(--blue-rgb))
  # Color tints
  purple-tint: rgba(var(--purple-rgb),var(--color-tint))
  yellow-tint: rgba(var(--yellow-rgb),var(--color-tint))
  orange-tint: rgba(var(--orange-rgb),var(--color-tint))
  red-tint: rgba(var(--red-rgb),var(--color-tint))
  green-tint: rgba(var(--green-rgb),var(--color-tint))
  blue-tint: rgba(var(--blue-rgb),var(--color-tint))
  # Gradients
  brightness: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.4) 0%, rgba(var(--brightness-high-rgb), 1) 100%)
  brightness-tint: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.06) 0%, rgba(var(--brightness-high-rgb), var(--color-tint)) 100%)
  temperature: linear-gradient(90deg, rgba(var(--temperature-low-rgb), 01) 0%, rgba(var(--temperature-high-rgb), 1) 100%)
  temperature-tint: linear-gradient(90deg, rgba(var(--temperature-low-rgb), var(--color-tint)) 0%, rgba(var(--temperature-high-rgb), var(--color-tint)) 100%)
  # Color RGB variables
  purple-rgb: 239, 177, 255
  yellow-rgb: 255, 218, 120
  orange-rgb: 255, 181, 129
  red-rgb: 255, 145, 138
  green-rgb: 206, 245, 149
  blue-rgb: 144, 191, 255
  # Gradient RGB variables
  brightness-low-rgb: 232, 176, 29
  brightness-high-rgb: 255, 211, 94
  temperature-low-rgb: 177, 197, 255
  temperature-high-rgb: 255, 175, 131
  # Contrast variables
  black1: "#000000"
  black2: "#111318"
  black3: "#171A21"
  black4: "#1C1F27"
  black5: "#262A35"
  black6: "#353946"
  black7: "#434856"
  black8: "#535865"
  black9: "#636774"
  black10: "#777A83"
  white10: "#898C94"
  white9: "#969AA6"
  white8: "#A4A9B6"
  white7: "#B3B8C6"
  white6: "#C3C8D5"
  white5: "#D4D8E2"
  white4: "#E1E5EF"
  white3: "#EAEDF6"
  white2: "#F4F6FB"
  white1: "#FFFFFF"

  ########################################################
  ############### Variables based on modes ###############
  ########################################################

  modes:
    dark:
      # Black white contrats
      contrast1: var(--black1)
      contrast2: var(--black2)
      contrast3: var(--black3)
      contrast4: var(--black4)
      contrast5: var(--black5)
      contrast6: var(--black6)
      contrast7: var(--black7)
      contrast8: var(--black8)
      contrast9: var(--black9)
      contrast10: var(--black10)
      contrast11: var(--white10)
      contrast12: var(--white9)
      contrast13: var(--white8)
      contrast14: var(--white7)
      contrast15: var(--white6)
      contrast16: var(--white5)
      contrast17: var(--white4)
      contrast18: var(--white3)
      contrast19: var(--white2)
      contrast20: var(--white1)
      # Color tint transparancy
      color-tint: "0.15"
      # Contrast RGB variables
      contrast1-RGB: 0,0,0

    light:
      # Black white contrats
      contrast1: var(--white1)
      contrast2: var(--white2)
      contrast3: var(--white3)
      contrast4: var(--white4)
      contrast5: var(--white5)
      contrast6: var(--white6)
      contrast7: var(--white7)
      contrast8: var(--white8)
      contrast9: var(--white9)
      contrast10: var(--white10)
      contrast11: var(--black10)
      contrast12: var(--black9)
      contrast13: var(--black8)
      contrast14: var(--black7)
      contrast15: var(--black6)
      contrast16: var(--black5)
      contrast17: var(--black4)
      contrast18: var(--black3)
      contrast19: var(--black2)
      contrast20: var(--black1)
      # Color tint transparancy
      color-tint: "0.20"
      # Contrast RGB variables
      contrast1-RGB: 255,255,255
  
  card-mod-theme: "rounded"
  
  card-mod-view-yaml: |

    hui-masonry-view:
      $: |

        /* Swipe-card full width on mobile */

        @media screen and (max-width: 599px) {
          #columns .column swipe-card {
            margin-left: -4px;
            margin-right: -4px;
          }
        }
        
        ha-fab {
          margin-bottom: 80px;
        }

    .: |

      /*  Correct spaces top and bottom for bottom tabbar  */

      hui-view {
        padding-bottom: 80px;
        margin-top: -80px;
      }

  card-mod-card-yaml: |

    .: |

      /* General changes */ 

      ha-card {
        transition: none !important;
        font-family: 'custom font, otherwise remove this line', 'Roboto', sans-serif !important;
      }

      /* Graph card style */

      .graph {
        background: var(--blue-tint);
        display: flex;
        overflow: hidden; /* Temporary fix for graph overflow bug */
      }
      
      .graph .name {
        font-size: 12px;
        line-height: 18px;
        background: var(--black);
        color: var(--white);
        padding: 6px 10px;
        border-radius: 100px;
        z-index: 1;
      }

      .graph .icon {
        display: none;
      }

      .graph .info {
        margin-top: 0;
        padding: 24px 24px 0 24px;
        order: 1;
      }

      .graph hui-graph-header-footer {
        order: 3;
      }

      .graph .header {
        padding: 0 24px;
        order: 2;
        margin: 4px 0 -16px 0;
        z-index: 1;
      }
      
  card-mod-root: |
  
      /* ___________ Bottom tabbar ___________  */
  
      app-header {
        top: auto;
        bottom: 0;
        transform: translate3d(0px, 0px, 0px) !important;
        backdrop-filter: blur(50px);
        -webkit-backdrop-filter: blur(50px);
        -moz-backdrop-filter: blur(50px);
        -o-backdrop-filter: blur(50px);
        -ms-backdrop-filter: blur(50px);
        background-color: rgba(var(--contrast1-RGB),0.6) !important;
      }
      app-header::before {
        box-shadow: none;
        height: 20px;
        bottom: -20px;
      }
      app-toolbar {
        height: 80px !important;
        padding: 4px 8px 20px 8px;
        background-color: rgba(0,0,0,0) !important;
      }
      app-header div[sticky] {
        margin: -20px 0 20px 0 !important;
        transform: none !important;
      }
      ha-tabs, ha-menu-button, ha-button-menu {
        color: var(--contrast20);
      }
      ha-tabs, paper-tabs {
        --paper-tabs-selection-bar-color: none !important;
      }
      paper-tab {
        opacity: 0.4;
        border-radius: 16px;
      }
      paper-tab.iron-selected {
        opacity: 1;
      }

@Loony1 Have not allot of time but this will work, only thing that need to be changed is the slider color so will check that later.

type: custom:button-card
name: Desk
icon: '[[[ return entity.attributes.icon ]]]'
entity: light.desk
tap_action:
  action: toggle
  haptic: medium
hold_action:
  action: more-info
  haptic: medium
custom_fields:
  slider:
    card:
      type: custom:my-slider-v2
      entity: "[[[ return entity.entity_id ]]]"
      colorMode: brightness
      styles:
        container:
          - background: none
          - border-radius: 100px
          - overflow: visible
        card:
          - height: 16px
          - padding: 0 8px
          - background: |
              [[[
                if (entity.state == "on") return "linear-gradient(90deg, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 1) 100%)";
                else return "var(--contrast4)";
              ]]]
        track:
          - overflow: visible
          - background: none
        progress:
          - background: none
        thumb:
          - background: |
              [[[
                if (entity.state == "on") return "var(--black)";
                if (entity.state == "off") return "var(--contrast20)";
                else return "var(--contrast8)";
              ]]]
          - top: 2px
          - right: '-8px'
          - height: 12px
          - width: 12px
          - border-radius: 10px
styles:
  grid:
    - grid-template-areas: '"i" "n" "slider"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  card:
    - font-family: In case of a custom font, otherwise you can remove this line
    - background: var(--contrast2)
    - padding: 16px
    - '--mdc-ripple-press-opacity': 0
  img_cell:
    - justify-self: start
    - width: 24px
  icon:
    - width: 24px
    - height: 24px
    - color: var(--contrast8)
  name:
    - justify-self: start
    - font-size: 14px
    - margin: 4px 0 12px 0
    - color: var(--contrast8)
state:
  - value: 'on'
    styles:
      card:
        - background: |
              [[[
                  var color = entity.attributes?.rgb_color;
                  if (entity.state != "on"){
                    return 'var(--contrast20)';
                  }
                  else if (color){
                    return 'rgba(' + color + ')'
                  }
                  else{
                    return 'var(--yellow)'
                  }
              ]]]
      icon:
        - color: var(--black)
      name:
        - color: var(--black)
  - value: 'off'
    styles:
      icon:
        - color: var(--contrast20)
      name:
        - color: var(--contrast20)

5 Likes

Thank you!!

@StickyClient Thanks a lot for the addition! If you’re fine with it I can add the colored light card version to the main post?

I’ve also fixed some small tweaks in theme yaml (removed / tweaked some old leftover code) so here’s the updated complete yaml file @freibiergesicht @CM000n

Complete Rounded.yaml file - Updated for HA version 2023.4

:bangbang: This is including the bottom bar from the ‘Beta stuff’ section

Rounded:
  ########################################################
  ############### Default global variables ###############
  ########################################################

  # Spacings and radius
  horizontal-stack-card-margin: 0px 8px
  vertical-stack-card-margin: 8px 0px
  grid-card-gap: 16px
  ha-card-border-width: "0px" # Removes default 1px line
  ha-card-border-radius: 24px
  masonry-view-card-margin: 40px 20px
  # Main Interface Colors
  primary-color: var(--blue)
  accent-color: var(--blue)
  primary-background-color: var(--contrast1)
  secondary-background-color: var(--contrast2)
  divider-color: var(--contrast3)
  # Text
  primary-text-color: var(--contrast20)
  secondary-text-color: var(--contrast9)
  text-primary-color: var(--contrast20)
  disabled-text-color: var(--contrast6)
  text-accent-color: var(--contrast1)
  # Header:
  app-header-background-color: var(--contrast1)
  app-header-text-color: var(--contrast20)
  app-header-selection-bar-color: transparant
  app-header-edit-background-color: var(--contrast2)
  app-header-edit-text-color: var(--contrast20)
  # Cards
  card-background-color: var(--contrast2)
  ha-card-background: var(--contrast2)
  ha-card-border-color: var(--contrast6)
  paper-listbox-background-color: var(--contrast3)
  # Tile card
  state-unavailable-color: var(--contrast6)
  state-light-off-color: var(--contrast10)
  state-light-on-color: var(--yellow)
  # Sidebar Menu
  sidebar-icon-color: var(--contrast6)
  sidebar-text-color: var(--contrast20)
  sidebar-background-color: var(--contrast2)
  sidebar-selected-icon-color: var(--blue)
  sidebar-selected-text-color: var(--blue)
  # Buttons
  paper-item-icon-color: var(--contrast9)
  mdc-button-outline-color: var(--contrast6)
  # States and Badges
  state-icon-color: var(--contrast9)
  # Sliders
  paper-slider-knob-color: var(--contrast20)
  paper-slider-knob-start-color: var(--contrast15)
  paper-slider-pin-color: var(--contrast5)
  paper-slider-pin-start-color: var(--contrast4)
  paper-slider-active-color: var(--contrast15)
  paper-slider-secondary-color: var(--contrast7)
  paper-slider-container-color: var(--contrast5)
  # Switches
  switch-checked-button-color: var(--green)
  switch-checked-track-color: var(--green)
  switch-unchecked-button-color: var(--contrast9)
  switch-unchecked-track-color: var(--contrast6)
  # Toggles
  paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
  paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
  paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
  # Table
  table-row-background-color: var(--contrast2)
  table-row-alternative-background-color: var(--contrast3)
  data-table-background-color: var(--contrast1)
  mdc-text-field-fill-color: var(--contrast3)
  # Input
  input-fill-color: var(--contrast3)
  input-dropdown-icon-color: var(--contrast9)
  material-background-color: var(--contrast2)
  input-ink-color: var(--contrast20)
  input-label-ink-color: var(--contrast9)
  input-idle-line-color: var(--contrast7)
  input-hover-line-color: var(--contrast20)
  mdc-select-fill-color: var(--input-fill-color)
  mdc-select-ink-color: var(--input-ink-color)
  mdc-select-label-ink-color: var(--input-label-ink-color)
  mdc-select-idle-line-color: var(--input-idle-line-color)
  mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color)
  mdc-select-hover-line-color: var(--input-hover-line-color)
  mdc-text-field-disabled-fill-color: var(--contrast3)
  # Modal screen
  mdc-theme-surface: var(--contrast2)
  # Checkboxes
  mdc-checkbox-unchecked-color: var(--contrast15)
  # Colors
  orange-color: var(--orange)
  green-color: var(--green)
  blue-color: var(--blue)
  red-color: var(--red)
  purple-color: var(--purple)
  yellow-color: var(--yellow)
  grey-color: var(--contrast10)

  #######################################################
  ############### Custom global variables ###############
  #######################################################

  # Black / White
  black: "#000000"
  white: "#FFFFFF"
  # Colors
  purple: rgb(var(--purple-rgb))
  yellow: rgb(var(--yellow-rgb))
  orange: rgb(var(--orange-rgb))
  red: rgb(var(--red-rgb))
  green: rgb(var(--green-rgb))
  blue: rgb(var(--blue-rgb))
  # Color tints
  purple-tint: rgba(var(--purple-rgb),var(--color-tint))
  yellow-tint: rgba(var(--yellow-rgb),var(--color-tint))
  orange-tint: rgba(var(--orange-rgb),var(--color-tint))
  red-tint: rgba(var(--red-rgb),var(--color-tint))
  green-tint: rgba(var(--green-rgb),var(--color-tint))
  blue-tint: rgba(var(--blue-rgb),var(--color-tint))
  # Gradients
  brightness: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.4) 0%, rgba(var(--brightness-high-rgb), 1) 100%)
  brightness-tint: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.06) 0%, rgba(var(--brightness-high-rgb), var(--color-tint)) 100%)
  temperature: linear-gradient(90deg, rgba(var(--temperature-low-rgb), 01) 0%, rgba(var(--temperature-high-rgb), 1) 100%)
  temperature-tint: linear-gradient(90deg, rgba(var(--temperature-low-rgb), var(--color-tint)) 0%, rgba(var(--temperature-high-rgb), var(--color-tint)) 100%)
  # Color RGB variables
  purple-rgb: 239, 177, 255
  yellow-rgb: 255, 218, 120
  orange-rgb: 255, 181, 129
  red-rgb: 255, 145, 138
  green-rgb: 206, 245, 149
  blue-rgb: 144, 191, 255
  # Gradient RGB variables
  brightness-low-rgb: 232, 176, 29
  brightness-high-rgb: 255, 211, 94
  temperature-low-rgb: 177, 197, 255
  temperature-high-rgb: 255, 175, 131
  # Contrast variables
  black1: "#000000"
  black2: "#111318"
  black3: "#171A21"
  black4: "#1C1F27"
  black5: "#262A35"
  black6: "#353946"
  black7: "#434856"
  black8: "#535865"
  black9: "#636774"
  black10: "#777A83"
  white10: "#898C94"
  white9: "#969AA6"
  white8: "#A4A9B6"
  white7: "#B3B8C6"
  white6: "#C3C8D5"
  white5: "#D4D8E2"
  white4: "#E1E5EF"
  white3: "#EAEDF6"
  white2: "#F4F6FB"
  white1: "#FFFFFF"

  ########################################################
  ############### Variables based on modes ###############
  ########################################################

  modes:
    dark:
      # Black white contrats
      contrast1: var(--black1)
      contrast2: var(--black2)
      contrast3: var(--black3)
      contrast4: var(--black4)
      contrast5: var(--black5)
      contrast6: var(--black6)
      contrast7: var(--black7)
      contrast8: var(--black8)
      contrast9: var(--black9)
      contrast10: var(--black10)
      contrast11: var(--white10)
      contrast12: var(--white9)
      contrast13: var(--white8)
      contrast14: var(--white7)
      contrast15: var(--white6)
      contrast16: var(--white5)
      contrast17: var(--white4)
      contrast18: var(--white3)
      contrast19: var(--white2)
      contrast20: var(--white1)
      # Color tint transparancy
      color-tint: "0.15"
      # Contrast RGB variables
      contrast1-RGB: 0,0,0

    light:
      # Black white contrats
      contrast1: var(--white1)
      contrast2: var(--white2)
      contrast3: var(--white3)
      contrast4: var(--white4)
      contrast5: var(--white5)
      contrast6: var(--white6)
      contrast7: var(--white7)
      contrast8: var(--white8)
      contrast9: var(--white9)
      contrast10: var(--white10)
      contrast11: var(--black10)
      contrast12: var(--black9)
      contrast13: var(--black8)
      contrast14: var(--black7)
      contrast15: var(--black6)
      contrast16: var(--black5)
      contrast17: var(--black4)
      contrast18: var(--black3)
      contrast19: var(--black2)
      contrast20: var(--black1)
      # Color tint transparancy
      color-tint: "0.20"
      # Contrast RGB variables
      contrast1-RGB: 255,255,255

  card-mod-theme: Rounded

  card-mod-root-yaml: |

    .: |

      /* ___________ Bottom tabbar ___________  */

      #view {
        margin-top: 0 !important;
      }
      .header {
        top: auto !important;
        bottom: 0;
        background-color: rgba(var(--contrast1-RGB),0.6) !important;
      }
      :host([scrolled]) .header {
        box-shadow: none !important;
      }
      .toolbar {
        height: 80px !important;
        padding: 4px 4px 16px 4px !important;
      }
      paper-tab {
        color: var(--contrast10);
        border-radius: 16px;
      }
      paper-tab.iron-selected {
        color: var(--contrast20);
      }
      ha-menu-button, ha-button-menu {
        color: var(--contrast10);
      }

  card-mod-view-yaml: |

    hui-masonry-view:
      $: |

        /* Swipecard full width on mobile */

        @media screen and (max-width: 599px) {
          #columns .column swipe-card {
            margin-left: -4px;
            margin-right: -4px;
          }
        }

  card-mod-card-yaml: |

    .: |

      /* General changes */ 

      ha-card {
        transition: none !important;
        font-family: 'hk nova semibold', 'Roboto', 'Noto', sans-serif !important;
      }

      /* Vacuum card load transition disabled */

      .type-custom-xiaomi-vacuum-map-card {
        transition: none !important;
      }

      /* Graph card style */

      .graph {
        background: var(--blue-tint);
        display: flex;
        overflow: hidden; /* Temporary fix for graph overflow bug */
      }
      
      .graph .name {
        font-size: 12px;
        line-height: 18px;
        background: var(--black);
        color: var(--white);
        padding: 6px 10px;
        border-radius: 100px;
        z-index: 1;
      }

      .graph .icon {
        display: none;
      }

      .graph .info {
        margin-top: 0;
        padding: 24px 24px 0 24px;
        order: 1;
      }

      .graph hui-graph-header-footer {
        order: 3;
      }

      .graph .header {
        padding: 0 24px;
        order: 2;
        margin: 4px 0 -16px 0;
        z-index: 1;
      }

      /* Entities card style */

      .type-entities {
        background: none;
      }

      .type-entities .card-header {
        padding: 0 0 12px 0;
      }

      .type-entities .card-content {
        padding: 0;
      }

  card-mod-row: |

    /* Entities card row style */

    :host {
        display: block;
        background: var(--contrast2);
        border-radius: 24px;
        padding: 6px 12px 6px 6px;
    }

6 Likes

Sure, take everything you need. :slightly_smiling_face:

@LE0N Do you have a colored light that supports attributes rgb_color? If yes can you test this card to see if the slider also works wen changing color. Btw, the main yellow color in HA is RGB 255, 193, 7 or HEX #ffc540.

type: custom:button-card
name: Desk
icon: '[[[ return entity.attributes.icon ]]]'
entity: light.desk
tap_action:
  action: toggle
  haptic: medium
hold_action:
  action: more-info
  haptic: medium
custom_fields:
  slider:
    card:
      type: custom:my-slider-v2
      entity: "[[[ return entity.entity_id ]]]"
      colorMode: brightness
      intermediate: true #Instant updates the brightness
      styles:
        container:
          - background: none
          - border-radius: 100px
          - overflow: visible
        card:
          - height: 16px
          - padding: 0 8px
          - background: |
              [[[
                  var color = entity.attributes?.rgb_color;
                  if (entity.state != "on"){
                    return 'var(--contrast4)';
                  }
                  else if (color){
                    return 'linear-gradient(90deg, rgba(' + color + ',0.3) 0%, rgba(' + color + ',1) 100%)'
                  }
                  else{
                    return 'linear-gradient(90deg, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 1) 100%)'
                  }
              ]]]
        track:
          - overflow: visible
          - background: none
        progress:
          - background: none
        thumb:
          - background: |
              [[[
                if (entity.state == "on") return "var(--black)";
                if (entity.state == "off") return "var(--contrast20)";
                else return "var(--contrast8)";
              ]]]
          - top: 2px
          - right: '-8px'
          - height: 12px
          - width: 12px
          - border-radius: 10px
styles:
  grid:
    - grid-template-areas: '"i" "n" "slider"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  card:
    - font-family: In case of a custom font, otherwise you can remove this line
    - background: var(--contrast2)
    - padding: 16px
    - '--mdc-ripple-press-opacity': 0
  img_cell:
    - justify-self: start
    - width: 24px
  icon:
    - width: 24px
    - height: 24px
    - color: var(--contrast8)
  name:
    - justify-self: start
    - font-size: 14px
    - margin: 4px 0 12px 0
    - color: var(--contrast8)
state:
  - value: 'on'
    styles:
      card:
        - background: |
              [[[
                  var color = entity.attributes?.rgb_color;
                  if (entity.state != "on"){
                    return 'var(--contrast20)';
                  }
                  else if (color){
                    return 'rgba(' + color + ',1)'
                  }
                  else{
                    return 'var(--yellow)'
                  }
              ]]]
      icon:
        - color: var(--black)
      name:
        - color: var(--black)
  - value: 'off'
    styles:
      icon:
        - color: var(--contrast20)
      name:
        - color: var(--contrast20)
1 Like

@agoberg2 Sure thing! I have defined 6 vacuum sections as follows:

  • Living room
  • Kitchen (part of living room)
  • Rug (part of living room)
  • Bedroom
  • Study
  • Hallway

For each of these sections, I have created a toggle helper (which the custom button-cards toggle) and when the start button is pressed, a script is activated.

Essentially, the script is just a call-service to the vacuum, but depending on which section is toggled, it sends over different parameters in an array. If no section is selected, the script sends over an empty array which the vacuum translates to ‘vacuum everything’, which is perfect for my use case.

Each time the script is run, it also resets the “number of repetitions” input helper back to 1.

Here’s the complete code of the script:

alias: Selectie stofzuigen
icon: mdi:robot-vacuum
sequence:
  - service: vacuum.send_command
    target:
      device_id: 706c3120ce0571b7d9094a1e359da416
    data:
      command: app_zoned_clean
      params: >-
        [{%if states.input_boolean.woonkamer_keuken_robotstofzuiger_selecteren_voor_stofzuigen.state=='on'%}
          [22300,29400,28400,31000,{{states.input_number.algemeen_robotstofzuiger_zone_herhalingen.state|int}}],
        {%endif%}

        {%if states.input_boolean.woonkamer_vloerkleed_robotstofzuiger_selecteren_voor_stofzuigen.state == 'on'%}
          [25900,26100,27200,28000,{{states.input_number.algemeen_robotstofzuiger_zone_herhalingen.state|int}}],
        {%endif%}

        {%if states.input_boolean.woonkamer_robotstofzuiger_selecteren_voor_stofzuigen.state == 'on'%}
          [22300,24400,28400,31000,{{states.input_number.algemeen_robotstofzuiger_zone_herhalingen.state|int}}],
        {%endif%}

        {%if states.input_boolean.gang_robotstofzuiger_selecteren_voor_stofzuigen.state == 'on'%}
          [15650,28120,22300,31000,{{states.input_number.algemeen_robotstofzuiger_zone_herhalingen.state|int}}],[15650,27900,18530,28110,{{states.input_number.algemeen_robotstofzuiger_zone_herhalingen.state|int}}],{%endif%}

        {%if states.input_boolean.studeerkamer_robotstofzuiger_selecteren_voor_stofzuigen.state == 'on'%}
          [15990,25060,18530,27900,{{states.input_number.algemeen_robotstofzuiger_zone_herhalingen.state|int}}],
        {%endif%}

        {%if states.input_boolean.slaapkamer_robotstofzuiger_selecteren_voor_stofzuigen.state == 'on'%}
          [22000,25060,18530,28120,{{states.input_number.algemeen_robotstofzuiger_zone_herhalingen.state|int}}],
        {%endif%}]
  - service: input_boolean.turn_off
    target:
      entity_id:
        - input_boolean.gang_robotstofzuiger_selecteren_voor_stofzuigen
        - input_boolean.slaapkamer_robotstofzuiger_selecteren_voor_stofzuigen
        - input_boolean.studeerkamer_robotstofzuiger_selecteren_voor_stofzuigen
        - input_boolean.woonkamer_keuken_robotstofzuiger_selecteren_voor_stofzuigen
        - input_boolean.woonkamer_robotstofzuiger_selecteren_voor_stofzuigen
        - input_boolean.woonkamer_vloerkleed_robotstofzuiger_selecteren_voor_stofzuigen
    data: {}
  - service: input_number.set_value
    data:
      value: 1
    target:
      entity_id: input_number.algemeen_robotstofzuiger_zone_herhalingen
mode: single

1 Like

@StickyClient Unfortunately I do not, so if anyone can double check this that would be awesome! I’ve also included your original code to the main post btw.

1 Like

I also added intermediate: true so the brightness will instant change instead of updating the brightness wen you stop moving the slider. This behaviour is also default for the new UI light slider that was added in the latest core update.

1 Like

This dashboard is awesome, and I’ve already managed to make some tweaks to fit my needs :slight_smile:

I have a question though, how did you get your custom font to work? The font I want to use isn’t a google font, and most of the guides I’ve found only use google fonts.

Hi Leon!

Thank you for this awsome theme. I started right away when i saw this!!

However, can you please post the code from youre light section? You use grid cards but how did you do this in combination with the slider / button card?

Hi!

Any tip to align play card and the one on the right?

Thanks.

@LE0N
I think I butchered your wonderful theme a bit :smiley:
The WAF factor plays a big role here and I had to think of something to represent the individual rooms. Now, you can simply jump to the individual rooms from the start page via the buttons, or switch off the lights in them. No more and no less

6 Likes

Can you post youre code please? That looks awsome!

An easy fix could be to add a margin that fits your dashboard

- margin-bottom: 5px

You mean me? If so, here you go :slight_smile:
homeassistant/rounded.yaml at main · CM000n/homeassistant · GitHub

1 Like

Really great thank you!
In my setup I just have individual scripts for each zone, then I trigger them with buttons. But its really handy to be able to do two or more zones in one go.

Yes thank you!

You are using yaml mode only? TO edit youre dashboard?

Yes, I use .yaml mode only. This is easier for me than fiddling around with the GUI and I can use standard .yaml anchors relatively easily.

@Diggs Hey, ye you can use the ‘height: 100%’ statement and remove any aspect ratio statement. Here’s an example:

square: false
columns: 2
type: grid
cards:
  - type: custom:button-card
    tap_action:
      action: call-service
      haptic: medium
      service: media_player.volume_down
      service_data:
        entity_id: media_player.sonos
    styles:
      icon:
        - width: 24px
        - color: var(--contrast20)
      img_cell:
        - justify-content: flex-start
        - margin-top: 0px
      name:
        - justify-self: start
        - font-size: 14px
        - margin-top: 0px
        - color: var(--contrast20)
      card:
        - height: 84px
        - border-radius: 24px
        - padding: 8px 0px 16px 20px
        - background-color: var(--contrast2)
      grid:
        - grid-template-areas: '"i" "n"'
    icon: mdi:volume-minus
    name: Volume omlaag
  - type: custom:button-card
    tap_action:
      action: call-service
      haptic: medium
      service: media_player.volume_up
      service_data:
        entity_id: media_player.sonos
    styles:
      icon:
        - width: 24px
        - color: var(--contrast20)
      img_cell:
        - justify-content: flex-start
        - margin-top: 0px
      name:
        - justify-self: start
        - font-size: 14px
        - margin-top: 0px
        - color: var(--contrast20)
      card:
        - height: 84px
        - border-radius: 24px
        - padding: 8px 0px 16px 20px
        - background-color: var(--contrast2)
      grid:
        - grid-template-areas: '"i" "n"'
    icon: mdi:volume-plus
    name: Volume omhoog
  - type: custom:button-card
    icon: mdi:sofa-single
    tap_action:
      action: call-service
      service: scene.turn_on
      haptic: medium
      service_data:
        entity_id: scene.gezellig
    styles:
      card:
        - border-radius: 24px
        - background-color: var(--blue)
        - height: 100%
      icon:
        - color: var(--black)
        - height: 40px
  - type: vertical-stack
    cards:
      - type: custom:button-card
        tap_action:
          action: call-service
          haptic: medium
          service: script.sonos_rewind
        styles:
          icon:
            - width: 24px
            - color: var(--contrast20)
          img_cell:
            - justify-content: flex-start
            - margin-top: 0px
          name:
            - justify-self: start
            - font-size: 14px
            - margin-top: 0px
            - color: var(--contrast20)
          card:
            - height: 84px
            - border-radius: 24px
            - padding: 8px 0px 16px 20px
            - background-color: var(--contrast2)
          grid:
            - grid-template-areas: '"i" "n"'
        icon: mdi:rewind-10
        name: Sec achteruit
      - type: custom:button-card
        tap_action:
          action: call-service
          haptic: medium
          service: script.sonos_forward
        styles:
          icon:
            - width: 24px
            - color: var(--contrast20)
          img_cell:
            - justify-content: flex-start
            - margin-top: 0px
          name:
            - justify-self: start
            - font-size: 14px
            - margin-top: 0px
            - color: var(--contrast20)
          card:
            - height: 84px
            - border-radius: 24px
            - padding: 8px 0px 16px 20px
            - background-color: var(--contrast2)
          grid:
            - grid-template-areas: '"i" "n"'
        icon: mdi:fast-forward-10
        name: Sec vooruit
  - type: custom:button-card
    tap_action:
      action: call-service
      haptic: medium
      service: script.sonos_prev
    styles:
      icon:
        - width: 24px
        - color: var(--contrast20)
      img_cell:
        - justify-content: flex-start
        - margin-top: 0px
      name:
        - justify-self: start
        - font-size: 14px
        - margin-top: 0px
        - color: var(--contrast20)
      card:
        - height: 84px
        - border-radius: 24px
        - padding: 8px 0px 16px 20px
        - background-color: var(--contrast2)
      grid:
        - grid-template-areas: '"i" "n"'
    icon: mdi:skip-previous
    name: Vorige
  - type: custom:button-card
    tap_action:
      action: call-service
      haptic: medium
      service: script.sonos_next
    styles:
      icon:
        - width: 24px
        - color: var(--contrast20)
      img_cell:
        - justify-content: flex-start
        - margin-top: 0px
      name:
        - justify-self: start
        - font-size: 14px
        - margin-top: 0px
        - color: var(--contrast20)
      card:
        - height: 84px
        - border-radius: 24px
        - padding: 8px 0px 16px 20px
        - background-color: var(--contrast2)
      grid:
        - grid-template-areas: '"i" "n"'
    icon: mdi:skip-next
    name: Volgende


@CM000n Haha no worries, it’s looking great. And if it suits your needs it’s perfect!


@eterpstra Certainly! It was something I had been searching for a long time, and I’m really happy with how it’s currently working.

To get started, create a regular group that includes all the lights you want to combine. This should be a standard group, not a light group.

woonkamer_lampen:
group:
  name: Woonkamer lampen
  entities:
    - light.plafondlamp_groep
    - light.tafellamp_groep
    - light.ikea_lamp
    - light.tv_lamp

Next, create a light template using the following code (which I found in this forum post):

light:
  - platform: template
    lights:
      actieve_woonkamer_lampen:
        friendly_name: "Actieve Woonkamer Lampen"
        level_template: >
          {% set data = namespace(numbers=[]) %}
          {% for s in state_attr('group.woonkamer_lampen', 'entity_id') %}
            {% if is_state(s, 'on') %}
              {% set data.numbers = [state_attr(s, "brightness")] + data.numbers %}
            {% endif %}
          {% endfor %}
          {{data.numbers|average|round(0)}}
        value_template: >
          {%- set data = namespace(res="off") -%}
          {% for s in state_attr('group.woonkamer_lampen', 'entity_id') %}
            {% if is_state(s, 'on') %}
              {%- set data.res = "on" -%}
            {% endif %}
          {%- endfor -%}
          {{data.res}}
        temperature_template: >
          {% set data = namespace(numbers=[]) %}
          {% for s in state_attr('group.woonkamer_lampen', 'entity_id') %}
            {% if state_attr(s, "color_temp") %}
              {% set data.numbers = [state_attr(s, "color_temp")] + data.numbers %}
            {% endif %}
          {% endfor %}
          {{data.numbers|average|round(0)}}
        turn_on:
          - service: light.turn_on
            data:
              entity_id: group.woonkamer_lampen
        turn_off:
          - service: light.turn_off
            data:
              entity_id: group.woonkamer_lampen
        set_level:
          - service: light.turn_on
            target:
              # wat te doen als alles uit staat? If statement om alles aan te zetten
              entity_id: "{{ expand('group.woonkamer_lampen') | selectattr('state','eq','on') | map(attribute='entity_id') | join(',') }}"
            data:
              brightness: "{{ brightness }}"
        set_temperature:
          - service: light.turn_on
            target:
              entity_id: "{{ expand('group.woonkamer_lampen') | selectattr('state','eq','on') | map(attribute='entity_id') | join(',') }}"
            data:
              color_temp: "{{ color_temp }}"

And use that group for for the slider entity.

3 Likes

Thanks it worked!

Last question: You have 4 groups of Lights in the home screen. But when i add the cards each by each, they are placed below each other. How can I fix this?