🟣 Rounded - Dashboard guide

Share your Projects! Dashboards & Frontend
18

Hi @Loony1, great question. Unfortunately I don’t own a colored light bulb myself so I can’t really test that one. My guess would be to extract the color values of the bulb and translate those to hex / rgb color codes which can be used by the background-color property of the light card.

@Stevengerrard08 @mase Actually I’m using the default mdi icons by Home Assistant in my dashboard, some of the icons may appear different on the screenshots because I designed them originally with iOS icons but I haven’t changed those yet.

@AJHomeAsst, good question. In theory HACS isn’t required BUT it makes installing and maintaining all the custom cards a lot easier so I would definitely advice to install HACS beforehand. It’s a great add-on!

1 Like
19

@LE0N Thanks for sharing.

Can you post the entire Rounded.yaml file?
I could not get to work, maybe I am not familliar with card mod inside the theme file and I am struggling here :confused:

2 Likes
20

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
21

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
22

Thank you!!

23

@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
24

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
25

@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
26

@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
27

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
28

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.

29

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?

30

Captura de ecrã 2023-03-06 à(s) 22.30.09
Captura de ecrã 2023-03-06 à(s) 22.30.091125×1194 24.7 KB

Hi!

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

Thanks.

31

@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

24234324nnt
24234324nnt476×928 25.9 KB

6 Likes
32

Can you post youre code please? That looks awsome!

34

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

- margin-bottom: 5px
35

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

1 Like
36

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.

37

Yes thank you!

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

38

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.