Share your Themes

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

mconway · February 25, 2018, 9:38pm

What did you use for your floorplan? I used sketchup, I’m just not happy with it.

surendran.anup · February 25, 2018, 9:52pm

Luckily our home builder had our floorplans available as an svg file on their website. So I just grabbed them and modified.

keithh666 · February 26, 2018, 2:40am