Day and Night

Slightly altered from other themes I found here, posted at request of @capstan1

day:
 ### Main Interface Colors ###
  primary-color: "#93abca" #"#395274"
  light-primary-color: "#5F81B0"
  primary-background-color: "#F0F5FF" # "#F6F7F9"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#D6DFEB"
  ### Text ###
  primary-text-color: "#395274"
  secondary-text-color: "#FF6262"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#88A1C4"
  ### Sidebar Menu ###
  sidebar-icon-color: "#395274"
  sidebar-text-color: var(--sidebar-icon-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FF6262"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#395274"
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#FF6262"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: "#FFFFFF"
  label-badge-text-color: "#395274"
  label-badge-red: "#FF8888"
  ### Cards ###
  paper-card-background-color: "#FFFFFF"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#FF6262"
  paper-toggle-button-checked-bar-color: "#FF6262"
  paper-toggle-button-unchecked-button-color: "#395274"
  paper-toggle-button-unchecked-bar-color: "#9CB2CE"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  ha-card-border-radius: 20px

night:
  # Main colors #5294E2 #363941
  primary-color: '#39679e'                                                        # Header
  accent-color: '#E45E65'                                                         # Accent color
  dark-primary-color: 'var(--accent-color)'                                       # Hyperlinks
  light-primary-color: 'var(--accent-color)'                                      # Horizontal line in about

  # Text colors
  primary-text-color: '#FFFFFF'                                                   # Primary text colour, here is referencing dark-primary-color
  text-primary-color: 'var(--primary-text-color)'                                 # Primary text colour
  secondary-text-color: '#5294E2'                                                 # For secondary titles in more info boxes etc.
  disabled-text-color: '#7F848E'                                                  # Disabled text colour
  label-badge-border-color: 'green'                                               # Label badge border, just a reference value

  # Background colors
  primary-background-color: '#383C45'                                             # Settings background
  secondary-background-color: '#656e82'                                           # Main card UI background
  divider-color: 'rgba(0, 0, 0, .12)'                                             # Divider

  # Table rows
  table-row-background-color: '#353840'                                           # Table row
  table-row-alternative-background-color: '#3E424B'                               # Table row alternative

  # Nav Menu
  paper-listbox-color: 'var(--accent-color)'                                      # Navigation menu selection hoover
  paper-listbox-background-color: '#2E333A'                                       # Navigation menu background
  paper-grey-50: 'var(--primary-text-color)'
  paper-grey-200: '#414A59'                                                       # Navigation menu selection

  # Paper card
  paper-card-header-color: 'var(--accent-color)'                                  # Card header text colour
  paper-card-background-color: '#434954'                                          # Card background colour
  paper-dialog-background-color: '#434954'                                        # Card dialog background colour
  paper-item-icon-color: 'var(--primary-text-color)'                              # Icon color
  paper-item-icon-active-color: '#F9C536'                                         # Icon color active
  paper-item-icon_-_color: 'green'
  paper-item-selected_-_background-color: '#434954'                               # Popup item select
  paper-tabs-selection-bar-color: 'green'
  ha-card-border-radius: 20px

  # Labels
  label-badge-red: 'var(--accent-color)'                                          # References the brand colour label badge border
  label-badge-text-color: 'var(--primary-text-color)'                             # Now same as label badge border but that's a matter of taste
  label-badge-background-color: '#2E333A'                                         # Same, but can also be set to transparent here

  # Switches
  paper-toggle-button-checked-button-color: 'var(--accent-color)'
  paper-toggle-button-checked-bar-color: 'var(--accent-color)'
  paper-toggle-button-checked-ink-color: 'var(--accent-color)'
  paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'

  # Sliders
  paper-slider-knob-color: 'var(--accent-color)'
  paper-slider-knob-start-color: 'var(--accent-color)'
  paper-slider-pin-color: 'var(--accent-color)'
  paper-slider-active-color: 'var(--accent-color)'
  paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
  paper-slider-secondary-color: 'var(--secondary-background-color)'
  paper-slider-disabled-active-color: 'var(--disabled-text-color)'
  paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'

  # Google colors
  google-red-500: '#E45E65'
  google-green-500: '#39E949'

  sidebar-selected-icon-color: 'var(--accent-color)'
  sidebar-selected-text-color: 'var(--accent-color)'
11 Likes

Looking good, how did you make those bandwidth cards? They look great!

Nice job @tom_l see you managed to sort out the transparency. I had a thought to use card modder to achieve it pretty much exactly how you have done.

@jimz011 They are all just mini graph cards resized and border added with card-modder.

cards:
  - cards:
      - type: 'custom:card-modder'
        style:
          border: solid 2px var(--primary-color)
          transform: scale(0.95)
        card:
          color_thresholds:
            - color: '#e45e65'
              value: 10
            - color: '#e0b400'
              value: 5
            - color: '#0da035'
              value: -1
          entities:
            - sensor.4g_internet_in_mbps
          group: false
          hour24: true
          line_width: 2
          points_per_hour: 60
          show:
            icon: true
            labels: false
            name: true
            state: true
          type: 'custom:mini-graph-card'
      - type: 'custom:card-modder'
        style:
          border: solid 2px var(--primary-color)
          transform: scale(0.95)
        card:
          color_thresholds:
            - color: '#e45e65'
              value: 2
            - color: '#e0b400'
              value: 1
            - color: '#0da035'
              value: -1
          entities:
            - sensor.4g_internet_out_mbps
          group: false
          hour24: true
          line_width: 2
          points_per_hour: 60
          show:
            icon: true
            labels: false
            name: true
            state: true
          type: 'custom:mini-graph-card'
    type: horizontal-stack
  - cards:
      - type: 'custom:card-modder'
        style:
          border: solid 2px var(--primary-color)
          transform: scale(0.95)
        card:
          color_thresholds:
            - color: '#e45e65'
              value: 10
            - color: '#e0b400'
              value: 5
            - color: '#0da035'
              value: -1
          entities:
            - sensor.nbn_internet_in_mbps
          group: false
          hour24: true
          line_width: 2
          points_per_hour: 60
          show:
            icon: true
            labels: false
            name: true
            state: true
          type: 'custom:mini-graph-card'
      - type: 'custom:card-modder'
        style:
          border: solid 2px var(--primary-color)
          transform: scale(0.95)
        card:
          color_thresholds:
            - color: '#e45e65'
              value: 2
            - color: '#e0b400'
              value: 1
            - color: '#0da035'
              value: -1
          entities:
            - sensor.nbn_internet_out_mbps
          group: false
          hour24: true
          line_width: 2
          points_per_hour: 60
          show:
            icon: true
            labels: false
            name: true
            state: true
          type: 'custom:mini-graph-card'
    type: horizontal-stack
title: Bandwidth Monitor
type: 'custom:vertical-stack-in-card'

Actually no, not yet. They are all still solid. I’m still having trouble getting card modder to apply to the over-all vertical-stack-in card. Once I get that sorted I’ll start messing with backgrounds and transparency.

I’d be happy to give it a crack I want to do it with mine anyways. Will let you know.

1 Like

This is what I’ve been trying:

1 Like

Ah ok, that is great. Are you having problems getting a transparent bg on a vertical-stack-in-card? I asked the same question yesterday in another thread. The answer I got is that a vertical-stack-in-card enforces a background.

The way I solved this was to go to the code of the card and change the background color/border radius etc to something transparent.

Read about this here:

1 Like

Thanks, I’m only trying to change the border at this stage but that will come in handy later.

Amazing! Good job

@tom_l can you share your speedtest config ?

Sure here you go:

cards:
  - cards:
      - card:
          color_thresholds:
            - color: '#e45e65'
              value: 0
            - color: '#e0b400'
              value: 60
            - color: '#0da035'
              value: 80
          entities:
            - sensor.speedtest_download
          group: false
          hour24: true
          line_width: 3
          lower_bound: 0
          name: Down
          points_per_hour: 4
          show:
            extrema: true
            icon: true
            labels: false
            name: true
            state: true
          type: 'custom:mini-graph-card'
        style:
          border: solid 2px var(--primary-color)
          transform: scale(0.925)
        type: 'custom:card-modder'
      - card:
          color_thresholds:
            - color: '#e45e65'
              value: 0
            - color: '#e0b400'
              value: 24
            - color: '#0da035'
              value: 32
          entities:
            - sensor.speedtest_upload
          group: false
          hour24: true
          line_width: 3
          lower_bound: 0
          name: Up
          points_per_hour: 4
          show:
            extrema: true
            icon: true
            labels: false
            name: true
            state: true
          type: 'custom:mini-graph-card'
        style:
          border: solid 2px var(--primary-color)
          transform: scale(0.925)
        type: 'custom:card-modder'
      - card:
          color_thresholds:
            - color: '#e45e65'
              value: 40
            - color: '#e0b400'
              value: 30
            - color: '#0da035'
              value: 0
          entities:
            - sensor.google_dns_ping
          group: false
          hour24: true
          line_width: 3
          lower_bound: 0
          name: Ping
          points_per_hour: 4
          show:
            extrema: true
            icon: true
            labels: false
            name: true
            state: true
          type: 'custom:mini-graph-card'
        style:
          border: solid 2px var(--primary-color)
          transform: scale(0.925)
        type: 'custom:card-modder'
    type: horizontal-stack
  - card: null
    entities:
      - entity: script.speedtest_update
    show_header_toggle: false
    type: entities
title: Speedtest
type: 'custom:vertical-stack-in-card'
1 Like

how do you use card-modder if it’s deprecated? has this been updated? :smiley:

Use card-mod instead.

Updated:

day:
  ### Main Interface Colors ###
  primary-color: "#93abca" #"#395274"
  light-primary-color: "#5F81B0"
  primary-background-color: "#F0F5FF" # "#F6F7F9"
  secondary-background-color: var(--primary-background-color)
  secondary-background-color-alpha: "rgba(220, 225, 235, 0.6)"
  divider-color: "#D6DFEB"
  ### Text ###
  primary-text-color: "#395274"
  secondary-text-color: "#FF6262"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#88A1C4"
  ### Sidebar Menu ###
  sidebar-icon-color: "#395274"
  sidebar-text-color: var(--sidebar-icon-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FF6262"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#395274"
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#FF6262"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: "#FFFFFF"
  label-badge-text-color: "#395274"
  label-badge-red: "#FF8888"
  ### Cards ###
  paper-card-background-color: "rgba(255, 255, 255, 0.4)" # "#FFFFFF"
  paper-listbox-background-color: var(--primary-background-color)
  card-background-color: "var(--paper-card-background-color)"
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#FF6262"
  paper-toggle-button-checked-bar-color: "#FF6262"
  paper-toggle-button-unchecked-button-color: "#395274"
  paper-toggle-button-unchecked-bar-color: "#9CB2CE"
  switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
  switch-unchecked-button-color: "var(--paper-toggle-button-unchecked-button-color)"
  switch-unchecked-color: "var(--paper-toggle-button-unchecked-bar-color)"
  switch-unchecked-track-color: "var(--paper-toggle-button-unchecked-bar-color)"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  ha-card-border-radius: 10px
  background-image: 'center / cover no-repeat url("/local/background/day.jpg") fixed'

night:
  # Main colors #5294E2 #363941
  primary-color: '#39679e'                                                        # Header
  accent-color: '#E45E65'                                                         # Accent color
  dark-primary-color: 'var(--accent-color)'                                       # Hyperlinks
  light-primary-color: 'var(--accent-color)'                                      # Horizontal line in about

  # Text colors
  primary-text-color: '#FFFFFF'                                                   # Primary text colour, here is referencing dark-primary-color
  text-primary-color: 'var(--primary-text-color)'                                 # Primary text colour
  secondary-text-color: '#5294E2'                                                 # For secondary titles in more info boxes etc.
  disabled-text-color: '#7F848E'                                                  # Disabled text colour
  label-badge-border-color: 'green'                                               # Label badge border, just a reference value

  # Background colors
  primary-background-color: '#383C45'                                             # Settings background
  secondary-background-color: '#656e82'                                           # Main card UI background
  secondary-background-color-alpha: "rgba(101, 110, 130, 0.2)"
  divider-color: 'rgba(0, 0, 0, .12)'                                             # Divider

  # Table rows
  table-row-background-color: '#353840'                                           # Table row
  table-row-alternative-background-color: '#3E424B'                               # Table row alternative

  # Nav Menu
  paper-listbox-color: 'var(--primary-text-color)'                                      # Navigation menu selection hoover
  paper-listbox-background-color: var(--primary-background-color) #"rgba(0, 0, 0, 0.6)"                                       # Navigation menu background
  paper-grey-50: 'var(--primary-text-color)'
  paper-grey-200: '#414A59'                                                       # Navigation menu selection

  # Paper card
  paper-card-header-color: 'var(--accent-color)'                                  # Card header text colour
  paper-card-background-color: "rgba(0, 0, 0, 0.7)" #'#434954'                                          # Card background colour
  paper-dialog-background-color: '#434954'                                        # Card dialog background colour
  paper-item-icon-color: 'var(--primary-text-color)'                              # Icon color
  paper-item-icon-active-color: '#F9C536'                                         # Icon color active
  paper-item-icon_-_color: 'green'
  paper-item-selected_-_background-color: '#434954'                               # Popup item select
  paper-tabs-selection-bar-color: 'green'
  card-background-color: "var(--paper-card-background-color)"
  ha-card-border-radius: 10px

  # Labels
  label-badge-red: 'var(--accent-color)'                                          # References the brand colour label badge border
  label-badge-text-color: 'var(--primary-text-color)'                             # Now same as label badge border but that's a matter of taste
  label-badge-background-color: '#2E333A'                                         # Same, but can also be set to transparent here

  # Switches
  paper-toggle-button-checked-button-color: 'var(--accent-color)'
  paper-toggle-button-checked-bar-color: 'var(--accent-color)'
  paper-toggle-button-checked-ink-color: 'var(--accent-color)'
  paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'
  switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
  switch-unchecked-button-color: "var(--paper-toggle-button-unchecked-button-color)"
  switch-unchecked-color: "var(--paper-toggle-button-unchecked-bar-color)"
  switch-unchecked-track-color: "var(--paper-toggle-button-unchecked-bar-color)"
  # Sliders
  paper-slider-knob-color: 'var(--accent-color)'
  paper-slider-knob-start-color: 'var(--accent-color)'
  paper-slider-pin-color: 'var(--accent-color)'
  paper-slider-active-color: 'var(--accent-color)'
  paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
  paper-slider-secondary-color: 'var(--secondary-background-color)'
  paper-slider-disabled-active-color: 'var(--disabled-text-color)'
  paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'

  # Google colors
  google-red-500: '#E45E65'
  google-green-500: '#39E949'

  sidebar-selected-icon-color: 'var(--secondary-text-color)'
  sidebar-selected-text-color: 'var(--secondary-text-color)'

  background-image: 'center / cover no-repeat url("/local/background/night.jpg") fixed'

The background images require this raw edit mode code for each view:

view:
  - background: var(--background-image)

Images:
day.jpg

night.jpg

1 Like

I try your theme and look cool :slight_smile: , only background pictures not showing?

I saved pictures in /config/www/background

and added this:

Can you share code for options:
options

Did you change the file names to day.jpg and night.jpg?

entities:
  - entity: input_select.logging_level
  - entity: input_select.select_theme
show_header_toggle: false
style: |
  ha-card {
    border: solid 2px var(--primary-color);
  }
type: entities
- id: logging_level
  alias: 'Logging Level'
  initial_state: true
  trigger:
    platform: state
    entity_id: input_select.logging_level
  action:
    service: logger.set_default_level
    data_template:
      level: "{{ trigger.to_state.state }}"
- id: select_theme
  alias: 'Select Theme'
  initial_state: true
  trigger:
  - platform: state
    entity_id: input_select.select_theme
  - platform: homeassistant
    event: start
  action:
    service: frontend.set_theme
    data_template:
      name: >
        {% if is_state('input_select.select_theme', 'Night') %}
          night
        {% else %}
          day
        {% endif %}

Yes, I did that:
background_folder

If you copy and paste this text (correctly formatted) rather than a screen shot I’ll show you what it should be:

d4e1b866a6989d5fb10145ae5a0fd0430c0564fb_2_690x371

@tom_l thanks for sharing the themes with us. It’s working great and I am getting a lot inspiration from your sharings…