SkyNet Dark Blue -Theme

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

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

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.


  # Background image
  lovelace-background: 'url("/local/triangles.jpg") #191f2b no-repeat fixed top left' 
  app-header-background-color: "#202937"
  app-header-text-color: "#02a9f4"
  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)
  # 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"

  # 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"
  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);

  #Make fan icons rotate  
  card-mod-theme: "skynet_dark_v2"
  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: spin 4s infinite linear;
        {% endif %}

If you want Fonts:

  • Download proximal nova fonts:
  • 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:

    - entity: sensor.simple_time
      label: |
          return `<ha-icon
          style="width: 20px; height: 20px; color: #5f6c83; opacity: 0.6;">
          </ha-icon><span> ` + states['climate.living_room'].attributes.current_temperature +`°F</span>
          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
          - width: 150px
          - padding-top: 11%
          - font-size: 16px
          - 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%
          - padding-top: 13%
          - border-radius: 50%
          - font-size: 12px
          - color: '#404F6A'
          - font-size: 13px
        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%
          - padding-top: 13%
          - border-radius: 50%
          - font-size: 12px
          - color: '#404F6A'
          - font-size: 13px
        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

I like it.

one question tho…

Where did the “sensor.simple_time” come from?

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

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

  - platform: time_date
      - '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?

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
      - 'time'
      - 'date'

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

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.

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:

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!

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.

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

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

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

Hi, where did you get the weather icon sensor?

Edit. Got it to work. Thanks :slight_smile:

I built it myself, Here is how to do that