Day and Night

EDIT: Post #29 contains latest theme.

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)'
12 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…

Now with card mod classes:

#################################################################
## Day
#################################################################

day:
  ### Main Interface Colors ###
  primary-color: "#93abca"
  light-primary-color: "#5F81B0"
  primary-background-color: "#F0F5FF"
  secondary-background-color: var(--primary-background-color)
  secondary-background-color-alpha: "rgba(220, 225, 235, 0.6)"
  divider-color: 'var(--primary-color)'
  lovelace-background: 'center / cover no-repeat url("/local/background/day.jpg") fixed'

  ### Text ###
  primary-text-color: "#395274"
  secondary-text-color: '#5294E2'
  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)
  sidebar-background-color: var(--primary-background-color)

  ### States and Badges ###
  state-icon-color: "#395274"
  state-icon-active-color: "#ebb307"
  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: none
  label-badge-text-color: "#395274"
  label-badge-red: "#FF8888"

  ### Cards ###
  # ha-card-background: 'url("/local/background/card_bg_Day.png")'
  card-background-color: "rgba(255, 255, 255, 1)"
  paper-listbox-background-color: '#F0F1F3'
  mdc-theme-surface: var(--primary-background-color)
  ha-card-border-radius: 10px
  border-color: 'var(--primary-text-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)

  restriction-regular-lock-color: '#e45e65'
  restriction-lock-row-margin-left: 78%
  restriction-lock-margin-left: 40%
  restriction-lock-opacity: "0.9"

  sc-background-filter: none                      # sun card bg

  mini-media-player-button-color: "rgba(255, 255, 255, 0.0)"
  mini-media-player-accent-color: "var(--paper-slider-knob-color)"
  mini-media-player-overlay-color: "var(--primary-color)"

  mdc-button-outline-color: 'var(--secondary-text-color)' # Alarm panel buttons
  header-height: 48px

## Card Mod Day
###############

  card-mod-theme: day
  card-mod-card: |

    .card-header {
      font-size: 20px;
      font-weight: 300;
      letter-spacing: 0px;
    }

    ha-card.media-player {
      border: solid 1px var(--primary-color);
    }

    ha-card.media-player mmp-shortcuts {
      $: |
        mmp-button {
          box-shadow: none ;
          background: none;
          border: solid 1px var(--primary-color);
          border-radius: 10px;
        }
    }

    ha-card.inline-card {
      border: solid 1px var(--primary-color);
      box-shadow: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }

    ha-card.inline-card-no-padding {
      border: solid 1px var(--primary-color);
      box-shadow: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }
    ha-card.inline-card-no-padding > .card-content {
      padding-top: 0px;
      padding-right: 12px;
      padding-bottom: 8px;
      padding-left: 0px;
    }

    ha-card.inline-card-no-border {
      box-shadow: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }

    ha-card.inline-card-red {
      border: solid 1px #FF6262;
      --ha-card-background: rgba(0, 0, 0, 0);
      --primary-text-color: rgb(250,98,98);
      box-shadow: 0px 0px 10px 3px #FF6262;
    }

    ha-card.inline-card-red h1.card-header {
      padding-top: 0px;
      padding-bottom: 28px;
    }

    ha-card.top-level-card {
      border: solid 1px var(--primary-text-color);
      background: url("/local/background/card_bg_Day.png");
    }

    ha-card.top-level-card h1.card-header {
      padding-top: 0px;
      padding-bottom: 28px;
    }

    ha-card.top-level-graph {
      border: solid 1px var(--primary-text-color);
      background: url("/local/background/card_bg_Day.png");
    }

    ha-card.top-level-graph .name > span {
      color: var(--primary-text-color);
      font-size: 20px !important;
      font-weight: 300 !important;
      letter-spacing: 0px;
      opacity: 1 !important;
    }

    ha-card.top-level-graph.compass-card .name {
      font-size: 20px !important;
      font-weight: 300 !important;
      letter-spacing: 0px;
    }

    ha-card.top-level-graph.compass-card .icon,
    ha-card.top-level-graph.compass-card .name,
    ha-card.top-level-graph.compass-card .indicator-sensors .abbr {
      color: var(--primary-text-color) !important;
    }

    ha-card.top-level-graph.compass-card .name {
      margin-top: -2px;
    }

    ha-card.top-level-graph.compass-card .value-sensors {
      top: 92px;
      font-weight: 100;
    }

    ha-card.top-level-graph.compass-card .value-sensors .value {
      font-size: 14px;
      line-height: 1.2em;
      font-weight: 400;
    }

    ha-card.top-level-graph.compass-card .value-sensors .measurement {
      font-size: 14px;
      font-weight: 300;
      line-height: 1.6em;
      opacity: 1;
      color: var(--primary-text-color) !important;
    }

    ha-card.top-level-graph.compass-card .indicator-sensors {
      top: 60px;
      font-weight: 300;
    }

    ha-card.top-level-graph.compass-card .indicator-sensors .abbr  {
      font-size: 2.4em;
      line-height: 30px;
      opacity: 1;
      color: var(--primary-text-color) !important;
    }

#################################################################
## Night
#################################################################

night:
  # Main colors
  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
  lovelace-background: 'center / cover no-repeat url("/local/background/night.jpg") fixed'

  # 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: '#1b3163' # '#383C45'                                             # Settings background
  secondary-background-color: '#656e82'                                           # Main card UI background
  secondary-background-color-alpha: "rgba(101, 110, 130, 0.2)"
  divider-color: 'var(--primary-color)'                                             # Divider
  sidebar-background-color: var(--primary-background-color)

  # 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: '#041D42'                                       # Navigation menu background (Input Selects)
  paper-grey-50: 'var(--primary-text-color)'
  paper-grey-200: '#414A59'                                                       # Navigation menu selection

  # Cards
  paper-card-header-color: 'var(--accent-color)'                                  # Card header text colour
  card-background-color: '#1E1E1E' #"rgba(38, 38, 38, 1)"                                       # Card background colour, also pop-up box header
  mdc-theme-surface: '#041D42'                                                    # Pop-up 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: 'var(--secondary-text-color)'         # List box item select
  paper-tabs-selection-bar-color: 'green'
  ha-card-border-radius: 10px
  border-color: 'var(--secondary-text-color)'
  # ha-card-border: solid 1px var(--border-color)

  # 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: none                                         # 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: 'var(--secondary-background-color)'
  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)'
  markdown-code-background-color: 'var(--primary-color)'

  restriction-regular-lock-color: '#e45e65'
  restriction-lock-row-margin-left: 78%
  restriction-lock-margin-left: 40%
  restriction-lock-opacity: "0.9"

  sc-background-filter: none                      # sun card bg

  mini-media-player-button-color: "rgba(255, 255, 255, 0.0)"
  mini-media-player-accent-color: "var(--paper-slider-knob-color)"
  mini-media-player-overlay-color: "var(--secondary-background-color)"

  mdc-button-outline-color: 'var(--secondary-text-color)' # Alarm panel buttons
  header-height: 48px

## Card Mod Night
#################

  card-mod-theme: night
  card-mod-card: |

    .card-header {
      font-size: 20px;
      font-weight: 300;
      letter-spacing: 0px;
    }

    ha-card.media-player {
      border: solid 1px var(--primary-color);
    }

    ha-card.media-player mmp-shortcuts {
      $: |
        mmp-button {
          box-shadow: none;
          background: none;
          border: solid 1px var(--primary-color);
          border-radius: 10px;
        }
    }

    ha-card.inline-card {
      border: solid 1px var(--primary-color);
      box-shadow: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }

    ha-card.inline-card-no-padding {
      border: solid 1px var(--primary-color);
      box-shadow: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }
    ha-card.inline-card-no-padding > .card-content {
      padding-top: 0px;
      padding-right: 12px;
      padding-bottom: 8px;
      padding-left: 0px;
    }

    ha-card.inline-card-red {
      border: solid 1px #FF6262;
      --ha-card-background: rgba(0, 0, 0, 0);
      --primary-text-color: rgb(250,98,98);
      box-shadow: 0px 0px 10px 3px #FF6262;
    }

    ha-card.inline-card-red h1.card-header {
      padding-top: 0px;
      padding-bottom: 28px;
    }

    ha-card.inline-card-no-border {
      box-shadow: none;
      --ha-card-background: rgba(0, 0, 0, 0);
    }

    ha-card.top-level-card {
      border: solid 1px var(--secondary-text-color);
      background: url("/local/background/card_bg_Night.png");
    }

    ha-card.top-level-card h1.card-header {
      padding-top: 0px;
      padding-bottom: 28px;
    }

    ha-card.top-level-graph {
      border: solid 1px var(--secondary-text-color);
      background: url("/local/background/card_bg_Night.png");
    }

    ha-card.top-level-graph .name > span {
      color: var(--primary-text-color);
      font-size: 20px !important;
      font-weight: 300 !important;
      letter-spacing: 0px;
      opacity: 1 !important;
    }

    ha-card.top-level-graph.compass-card .name {
      font-size: 20px !important;
      font-weight: 300 !important;
      letter-spacing: 0px;
    }

    ha-card.top-level-graph.compass-card .icon,
    ha-card.top-level-graph.compass-card .name,
    ha-card.top-level-graph.compass-card .indicator-sensors .abbr {
      color: var(--primary-text-color) !important;
    }

    ha-card.top-level-graph.compass-card .name {
      margin-top: -2px;
    }

    ha-card.top-level-graph.compass-card .value-sensors {
      top: 92px;
      font-weight: 100;
    }

    ha-card.top-level-graph.compass-card .value-sensors .value {
      font-size: 14px;
      line-height: 1.2em;
      font-weight: 400;
    }

    ha-card.top-level-graph.compass-card .value-sensors .measurement {
      font-size: 14px;
      font-weight: 300;
      line-height: 1.6em;
      opacity: 1;
      color: var(--primary-text-color) !important;
    }

    ha-card.top-level-graph.compass-card .indicator-sensors {
      top: 60px;
      font-weight: 300;
    }

    ha-card.top-level-graph.compass-card .indicator-sensors .abbr  {
      font-size: 2.4em;
      line-height: 30px;
      opacity: 1;
      color: var(--primary-text-color) !important;
    }

Card backgrounds:

https://www.dropbox.com/s/1zhqvywrvc46zhx/background.zip?dl=1

Note that the card backgrounds are excessively long to cover some of my more excessive folded entity rows. You may be able to shorten them.