Share your Themes

wbradmoore · November 22, 2017, 5:50pm

wow! thank you

i dont know how i omitted the same word twice without noticing

wbradmoore · November 22, 2017, 5:51pm

follow-up: does anyone know how to recolor the “links” in the entity column on the dev-state page?

tomerbs · December 1, 2017, 12:50pm

This is my Night Theme

Night_Theme:
  # Main Stuff #
  primary-color: "#0179d8" # Primary (most of the UI)
  primary-background-color: "#060606" # Primary background colour (dialogs, e.t.c)
  secondary-background-color: "#060606" # Secondary background colour (main UI background)
  paper-card-background-color: "#131313" # Card background colour
  paper-item-icon-color: "#0179d8" # Icon colour
  primary-text-color: "#FFFFFF" # Primary text colour
  secondary-text-color: "rgba(255, 255, 255, 0.5)" # Secondary text colour
  disabled-text-color: "rgba(255, 255, 255, 0.5)" # Disabled text colour
  divider-color: "rgba(255, 255, 255, 0.12)" # Divider colour
  paper-card-header-color: "#FFFFFF" # Card header text colour

  # Nav Menu #
  paper-listbox-background-color: "#131313" # Listbox background colour
  paper-listbox-color: "#FFFFFF" # Listbox text colour
  paper-grey-200: "#060606" # Listbox selected item background colour

  # Switches #
  paper-toggle-button-checked-ink-color: "#d80129"
  paper-toggle-button-checked-button-color: "#0179d8"
  paper-toggle-button-checked-bar-color: "#FFFFFF"

  # Sliders #
  paper-slider-knob-color: "#0179d8"
  paper-slider-knob-start-color: "#0179d8"
  paper-slider-pin-color: "#0179d8"
  paper-slider-active-color: "#0179d8"
  paper-slider-secondary-color: "#0179d8"

  # Tables #
  table-row-background-color: transparant
  table-row-alternative-background-color: transparant

Screenshot:

Jokerigno · December 27, 2017, 12:16pm

What does it means?

No more themes available on HA?

MyCool · December 27, 2017, 12:56pm

sorry i just deleted my post do not panic lol

surendran.anup · February 9, 2018, 8:55pm

Here is my vintage theme -

dawnlord · February 13, 2018, 7:23pm

Nvm i used a theme from @PhysicalMagic and edited only base-hue to 120

Jer78 · February 16, 2018, 2:31am

@PhysicalMagic Is it possible to change the base-Hue from an input_number? I don’t think the themes are currently templateable, are they?

Bobby_Nobble · February 16, 2018, 11:16am

Could you use the same method as below but on but on a global scale…

Jer78 · February 16, 2018, 3:41pm

@Bobby_Nobble Interesting. I’ll have a look. Thanks

reua · February 18, 2018, 3:53pm

This is what I did.

Here you find the code:

github.com

reua/Home-Assistant-Configuration/blob/master/themes/carbon_green.yaml

carbon-green: 
  #Color List
  make-light-carbon: "#93A5AB"
  make-carbon: "#111924"
  make-grey: "#DEE5E7"
  make-green: "#C2DD08"
  make-blue: "#00A3DA"
  make-red: "#EC5D57"
  make-yellow: "#FCF933"
  make-orange: "#E49D64"
  make-white: "#FFFFFF"
  make-disable: "#bdbdbd"
  light-primary-color: "var(make-light-carbon)"
  background-color: "var(--make-grey)"
  dark-primary-color: "var(-make-carbon)"
  #Main Colors
  primary-background-color: "var(--make-light-carbon)" #Background color settings
  secondary-background-color: "var(--make-grey)" #Background tabs
  primary-text-color: "var(--make-carbon)" #Primary Text 
  secondary-text-color: "var(--make-green)" #sub text etc.

This file has been truncated. show original

Regards Mike

pepeEL · February 19, 2018, 10:51pm

Hi all
I am beginner user HA. Can you give me full manual step by step how add more than defualt themes ? I want add themes which is presented on this topic…
Thanks.

keithh666 · February 19, 2018, 11:25pm

I just add them into a file called frontend.yaml

  extra_html_url:
    - /local/custom_ui/state-card-floorplan.html
    - /local/custom_ui/state-card-sstvremote.html
  javascript_version: latest
  themes:
    carbon_green:
      #Color List
      make-light-carbon: "#93A5AB"
      make-carbon: "#111924"
      make-grey: "#DEE5E7"
      make-green: "#C2DD08"
      blah blah blah
    teal:
      # Main Stuff #
      primary-color: "#1DE9B6" # Primary (most of the UI)
      primary-background-color: "#303030" # Primary background colour (dialogs, e.t.c)
      secondary-background-color: "#303030" # Secondary background colour (main UI background)
      blah blah blah

and call it from configuration.yaml with …
frontend: !include frontend.yaml

pepeEL · February 20, 2018, 5:51am

Thanks for reply
But if I want ads more than one theme how put it to frontend.yaml file?

pepeEL · February 20, 2018, 11:11am

Can you share your theme cyan ?

keithh666 · February 20, 2018, 6:36pm

My example shows how to add more than one theme

pepeEL · February 20, 2018, 6:55pm

Thanks I added more than one theme. Thanks

onekw · February 25, 2018, 12:44am

Trying to use this REALLY NICE theme but something went wrong so i can’t se the devices names in the logbook! Any ideas what to change?

broesie · February 25, 2018, 12:56am

you can find it here: Dark Cyan Theme

Mariusthvdb · February 25, 2018, 4:49pm

is there an overview of built-in colors we can use out of the box? red, green, white yellow seem to work when creating a theme, but grey or brown not.

Other then specifying the colors like this “#4e4e4e” id love to read which colors are builtin so to speak.

Cheers,
Marius