SkyNet Dark Blue -Theme

Share your Projects! Themes
1

Hey everyone, I wanted to share my current dark theme. It works great on an iPad especially if sidebar and header are hidden:

UPDATE 02/04/24

  • Fixed slider bars
  • Fixed rotating fans

UPDATE 10/10/23

  • Fixed fan rotations
  • Fixed corners
  • Fixex double borders in some cases

UPDATE 03/10/22

  • Updated to support new input fields.

UPDATE 02/07/21

  • Updated to support new smaller top bar
  • Code Clean up
  • Fans now slowly rotate when on

UPDATE 08/12/20
to support for new theming parameters

Screen Shot 2022-03-10 at 12.06.56 PM
Screen Shot 2022-03-10 at 12.06.56 PM1563×1178 201 KB

Approach:
When UI is shown on an iPad or a wall-mounted device, most people don’t have time to explore all the nooks and crannies. They usually use it to see what’s on (cause they want it off), or they are looking for something specific to tweak (like volume control or if you heard a noise somewhere you want to see where it happened). This is why the left side is reserved for everything that’s currently active.

My goal was to make a theme that doesn’t feel busy despite the wealth of information. You should be able to tell what’s on by just glancing at it. This was achieved by having low contrast with states and fonts as well as everything that’s off will not grab your attention.

Here is the theme code. Just duplicate one of your current themes and paste the below code into it. If enough people like this ill make it into a HACKS theme.

Theme:

skynet_dark_v2:

 # make fan icons rotate based on their speed
  card-mod-card: |
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(359deg);
      }
    }
    ha-icon[data-domain="fan"][data-state="on"] {
      animation: spin 4s infinite linear;
    }
    
  card-mod-row-yaml: |
    "*:first-child$": |
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(359deg);
        }
      }
      state-badge {
        {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
          
          animation:    {% set perc = state_attr(config.entity,'percentage')|int %}
                        {% set base = 'spin infinite linear' %}
                          {% if perc <= 33 %} 3.6s {{base}};
                            {%- elif perc <= 66 %} 2.5s {{base}};
                            {%- elif perc <= 99 %} 1.5s {{ base}};
                            {%- else  %} 0.75s {{base}};
                          {% endif %}
                      
        {% endif %}
      }
  
  


  
      
  
  # Background image
  lovelace-background: 'url("/local/triangles.jpg") #191f2b no-repeat fixed top left' 
 
  #Header
  app-header-background-color: "#202937"
  app-header-text-color: "#02a9f4"
   
  #Fonts
  primary-font-family: 'ProximaNova-Regular,Raleway,Roboto,sans-serif'
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body1_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"
  ha-card-header-font-family: "var(--primary-font-family)"
 
   
  # Main Interface Colors
  primary-color: "#ffc107" 
  light-primary-color: var(--primary-color)
  primary-background-color: "#191f2b"
  secondary-background-color: "#161A23"
  divider-color: "#344256"
  
  # Text
  primary-text-color: "#8ea1c2"
  secondary-text-color: "#3f5477"
  text-primary-color: "#02a9f4"
  disabled-text-color: "#030406"  #1b2336
  
  # Sidebar Menu
  sidebar-icon-color: "#4a6185"
  sidebar-text-color: "#8ea1c2"
  sidebar-background-color: "#202937"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#02a9f4"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color))
  # States and Badges
  state-icon-color: "#4a6185"
  state-icon-active-color: "#ffc107"
  state-icon-unavailable-color: var(--disabled-text-color)
  
  # Sliders
  paper-slider-knob-color: var(--switch-checked-button-color)
  paper-slider-knob-start-color: var(--switch-unchecked-button-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0D668E"
  paper-slider-secondary-color: var(--light-primary-color)
  paper-slider-container-color: var(--disabled-text-color)
  mini-media-player-overlay-color: var(--disabled-text-color)
  
  md-slider-inactive-track-color: "#181e29"
  md-slider-active-track-color: "#02a9f4"  
  md-slider-handle-color: "#2e3a4f"
  
  # Text Dividers from text-divier-row card
  text-divider-color: var(--divider-color)
  text-divider-font-size: "13px"
  text-divider-line-size: "1px"
  
  
  # Labels
  label-badge-background-color: "#202937"
  label-badge-text-color: "#8ea1c2"
  label-badge-red: "#FF4348"
  label-badge-green: "#80C884"
  label-badge-blue: "#02a9f4"
  label-badge-yellow: "#ffc107"
  label-badge-gray: "#6981a8"
  label-badge-orange: "#FF8A00"

  # Cards
  ha-card-border-radius: "6px"
  ha-card-header-font-size: 20px
 # ha-card-header-letter-spacing: "1.49px"
  ha-card-box-shadow: 1px 1px 10px 0px rgba(14, 14, 22, 0.32)
  ha-card-header-color: "#ffc107"
  ha-card-background: "#202937"
  card-background-color: "#1b2336"
  paper-listbox-background-color: "#202937"
  paper-font-button_-_text-transform: "uppercase"
  
  #HACS
  hcv-color-new: "#202937"
  
  # Switches
  switch-checked-button-color: "#02a9f4"
  switch-checked-track-color: "#0d4e70"
  switch-unchecked-button-color: "#2E3A4F"
  switch-unchecked-track-color: "#020203"

  
  # 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)
  toggle-icon-width: 30px
  
  # Table
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  data-table-background-color: var(--primary-background-color)
  
  # Input fields
  input-idle-line-color: rgba(0, 0, 0, 0.42);
  input-hover-line-color: rgba(0, 0, 0, 0.87);
  input-disabled-line-color: rgba(0, 0, 0, 0.06);
  input-outlined-idle-border-color: rgba(0, 0, 0, 0.38);
  input-outlined-hover-border-color: rgba(0, 0, 0, 0.87);
  input-outlined-disabled-border-color: rgba(0, 0, 0, 0.06);
  input-fill-color: rgb(245, 245, 245);
  input-disabled-fill-color: rgb(250, 250, 250);
  input-ink-color: rgba(0, 0, 0, 0.87);
  input-label-ink-color: rgba(0, 0, 0, 0.6);
  input-disabled-ink-color: rgba(0, 0, 0, 0.37);
  input-dropdown-icon-color: rgba(0, 0, 0, 0.54);
  
  # Legacy Input fields
  mdc-select-idle-line-color: rgba(0, 0, 0, 0.42);
  mdc-select-hover-line-color: rgba(0, 0, 0, 0.87);
  mdc-select-disabled-line-color: rgba(0, 0, 0, 0.06);
  mdc-select-outlined-idle-border-color: rgba(0, 0, 0, 0.38);
  mdc-select-outlined-hover-border-color: rgba(0, 0, 0, 0.87);
  mdc-select-outlined-disabled-border-color: rgba(0, 0, 0, 0.06);
  mdc-select-fill-color: rgb(245, 245, 245);
  mdc-select-disabled-fill-color: rgb(250, 250, 250);
  mdc-select-ink-color: rgba(0, 0, 0, 0.87);
  mdc-select-label-ink-color: rgba(0, 0, 0, 0.6);
  mdc-select-disabled-ink-color: rgba(0, 0, 0, 0.37);
  mdc-select-dropdown-icon-color: rgba(0, 0, 0, 0.54);
  
  ha-card-border-width: "0px"

If you want Fonts:

  • Download proximal nova fonts:
    proxima-nova-font.tar.gz - Droplr
  • Extract the whole Proxima-nova-font folder to your config/www folder
  • Go to config > lovelace dashboard > resources (config/lovelace/resources) and add this resource:
    “/local/proxima-nova-font/ProximaNova-Regular.css” Resource type :stylesheet

If you want a subtle background in the corner

To get top left area show time and avatars, also make the fans spin
You will need Card-mod and Button-card installed. You will also need to tweak it to match your sensors. So you might need to add a time sensor etc. But here is the code:

card:
  cards:
    - entity: sensor.simple_time
      label: |
        [[[ 
          return `<ha-icon
          icon="mdi:home-thermometer"
          style="width: 20px; height: 20px; color: #5f6c83; opacity: 0.6;">
          </ha-icon><span> ` + states['climate.living_room'].attributes.current_temperature +`°F</span>
          <ha-icon
          icon="mdi:`+ states['sensor.weather_just_icon'].state +`"
          style="padding-left: 2px; width: 20x; height: 20px; color: #5f6c83; opacity: 0.6;">
          </ha-icon><span>` + states['sensor.dark_sky_temperature'].state +`°F</span>`;
        ]]]
      name: |
        [[[
          return states['sensor.simple_time'].state;
        ]]]
      show_icon: false
      show_label: true
      show_name: true
      show_state: false
      styles:
        card:
          - width: 150px
          - padding-top: 11%
        label:
          - font-size: 16px
        name:
          - font-size: 28px
          - padding-bottom: 5px
          - color: '#02a9f4'
          - font-family: 'ProximaNova-Light, Raleway,sans-serif'
      type: 'custom:button-card'
    - entity: device_tracker.alex_bayesian
      show_entity_picture: true
      show_icon: true
      show_last_changed: true
      show_name: false
      show_state: true
      size: 38%
      styles:
        card:
          - padding-top: 13%
        icon:
          - border-radius: 50%
        label:
          - font-size: 12px
          - color: '#404F6A'
        state:
          - font-size: 13px
      tap_action:
        action: more-info
        entity: sensor.yo_mama_geocoded_location
      type: 'custom:button-card'
    - entity: device_tracker.vanessa_bayesian
      show_entity_picture: true
      show_icon: true
      show_last_changed: true
      show_name: false
      show_state: true
      size: 38%
      styles:
        card:
          - padding-top: 13%
        icon:
          - border-radius: 50%
        label:
          - font-size: 12px
          - color: '#404F6A'
        state:
          - font-size: 13px
      tap_action:
        action: more-info
        entity: sensor.deez_nuts_geocoded_location
      type: 'custom:button-card'
  type: horizontal-stack
style: |
  ha-card {
    --paper-card-background-color: transparent;
    --ha-card-box-shadow: none;
  }
type: 'custom:mod-card'

Recommended things to install
(can be installed with HACS):

  • Auto Entities
  • Card-mod (spinning fans, avatar layout in first column, hiding the first columns bg)
  • Slider-entity-row
  • Fold-entity-row
  • button-card
  • Simple Weather Card
  • Simple Thermostat
18 Likes
2

I like it.

one question tho…

Where did the “sensor.simple_time” come from?

3

I manually created it, but now you can create it using gui by going to config > helpers (/config/helpers) and add date and time. I also had to add a weather icon sensor to create the icon at the top. Here is how to do that

4

I’ve had the time_date sensors cponfigured for a while but the only time-only options I see are:

sensor:
  - platform: time_date
    display_options:
      - 'time'
      - 'time_utc'

those create a “sensor.time” & “sensor.time_utc”.

Why is yours called “sensor.simple_time”? is that a modification you did in a template?

5

Yeah i have it set up like this. Again not sure this is needed as you can do it from UI now

- platform: time_date
  display_options:
      - 'time'
      - 'date'

- platform: template
  sensors:
    simple_time:
      friendly_name: "Simple Time"
      entity_id: sensor.time
      value_template: "{{ as_timestamp(now()) | timestamp_custom('%I:%M %p') }}"
6

you can set up the original time_date sensors from the ui but not the template sensor.

I just wanted to make sure i wasn’t missing some new option.

7

Updated original post with new styles. If anyone is interested in this theme to be in HACS let me know by liking the original post. Once i get 10 votes ill post it there :slight_smile:

8

Any chance you can post your ui-lovelace.yaml file? I’m trying to recreate your top left corner, but I think I’m missing something. Thanks! Cool theme!

9

I posted the update yaml file at the top under theme. If you read through the post it goes over what you need to do to get fonts and background working.

10

Hi, I was wonder what config file to put it in?

11

Hi, how did you get the slider and the toggle button next to each other? Manged to get the slider functionality.

12

I used slider entity row and then you enable to show toggle as well

13

Hi, where did you get the weather icon sensor?

14

Edit. Got it to work. Thanks :slight_smile:

15

I built it myself, Here is how to do that

16

How did you create the drop-downs with an included toggle button?

17

I am using fold-entity-row from Hacks allows you to fold things into your entities, can also auto add the folding to the groups.