Share your Themes

Share your Projects! Themes
#62

Great community here and very helpful people. Thank you atomicpapa, it’s a bit more clear now thanks to your example. Looks really wicked I must say!

Some questions I still have:

  • Are the items on Floorplan clickable? I mean for example does it toggle a light switch immediately on or off without any extra menus in between when clicked?
  • How does the panel scale on a smartphone? I assume this is HTML5 or do you need to create a separate Floorplan panel for each device with it’s own dimensions? I know SVG stands for Scalable Vector Graphic, but I can’t see this whole screen displayed on a phone.
#63

In your case, floorplan might be the way to go to offer a complete modularity.
I am almost certain it could be done too with HADashboard, but that may require very advanced skills. I think I read somewhere that some people (@ReneTode @aimc maybe do you have an example or something ?) use 1px tile size and by finetuning the dimensions of everything you can have a bit more complex result.

#64

This is might be a bit technical to set up if you only have a very basic knowledge. I would recommend being very comfortable with HA before diving into it. See the full documentation on the links below. I think the dev of appdeamon and bruh’s automation are looking into possibly doing some setup video in the future…

https://home-assistant.io/docs/ecosystem/hadashboard/

http://appdaemon.readthedocs.io/en/latest/INSTALL.html

http://appdaemon.readthedocs.io/en/latest/DASHBOARD_INSTALL.html

1 Like
#65

Yes, the buttons are clickable. You can have a button either perform an action, like toggling a light, or have it pop up another menu with additional clickable items or display items (which is what I am working on in my first example). Everything is done with basically 3 files. A YAML config file, where you declare the names of the enitities you want to interact with and what they do; a CSS file that controls how they appear when you do something to them; and the SVG file, with objects with names matching the enities you are interacting with. ie clicking on a button wiht the object name light.bedroom will toggle an entity in HA named light.bedroom. And with all that said, this is very much off topic for this thread, so maybe it should be moved to the appropriate place. :slight_smile:

2 Likes
Simple frontend editing for noobs
#66

You are right, started a new thread. Thanks for the info atomicpapa.

1 Like
#67

these themes are awesome! Thanks for all the hard work guys!!

#68

@atomicpapa Soo… the LCARS interface… I’ve been looking for something like this. I’ve found a few different options, but never thought of using the Floorplan SVG to do it… When you get it to a working state do you plan on sharing it? :slight_smile:

#69

Yes!! Can you post the code?

#70

Here you go :wink:

christmas:
#Main colors
  primary-color: '#3C8D0D'                                                        # Header
  accent-color: '#d32f2f'                                                         # Accent color
  dark-primary-color: 'var(--accent-color)'                                       # Hyperlinks                                         
  light-primary-color: 'var(--accent-color)'                                      # Horizontal line in about
                                                                         
#Text colors                                                                  
  primary-text-color: '#000000'                                                   # 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: '#ff7878'                                             # Settings background
  secondary-background-color: '#d32f2f'                                           # 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(--primary-color)'                                     # Navigation menu selection hoover
  paper-listbox-background-color: '#ffffff'                                       # Navigation menu background
  paper-grey-50: 'var(--primary-text-color)'                                   
  paper-grey-200: '#ffffff'                                                       # Navigation menu selection
                                                                         
#Paper card                                                               
  paper-card-header-color: 'var(--accent-color)'                                  # Card header text colour
  paper-card-background-color: '#ffffff'                                          # Card background colour
  paper-dialog-background-color: '#ff0000'                                        # Card dialog background colour
  paper-item-icon-color: '#74d680' #'var(--primary-text-color)'                              # Icon color
  paper-item-icon-active-color: '#ff7878'                                         # Icon color active
  paper-item-icon_-_color: 'green'           
  paper-item-selected_-_background-color: '#74d680'                               # Popup item select                      
  paper-tabs-selection-bar-color: 'green'

#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: '#ffffff'                                         # 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: '#378b29' #'var(--accent-color)'
  paper-slider-active-color: '74d680' #'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'
1 Like
#71

wow, love that theme, star trek :smiley:?

#72

I do indeed plan on sharing it, but I have hit a snag on the layers right now, so until I get around that issue, I am stuck. At least with what I currently have envisioned.

#73

I’m not the only one on here doing an LCARS theme. Search “LCARS” and you will probably find at least one more :slight_smile:

1 Like
#74

Thanks for sharing. I liked a lot your approach. I noticed that the icons are not highlighted. How to include highlighted icons to the theme?

#75

I made a new theme, which looks like this:

ui-homeassistant
ui-homeassistant3752×1663 123 KB

But I’m curious how I can change the color of charts, because it looks like crap:

crap
crap606×580 18.6 KB

Additionally I would also like to change the color of the following icons:
icon_change

Does anyone know how to do it?

#76

Can anyone tell me which one controls the link text but separately from primary-color? primary color changes the very top bar of the front end where it says “Home Assistant” and has all the tab icons. I don’t want to change that, I only want to change where it says “Activate” on cards, and the link/entity names on the States page of the dev panel. Anyone have any ideas?

#77

Also, which one controls the color of the icons for the tabs above (where it says Home Assistant)? I can find the one that changes the icons on the cards but I want to change the icon color of the icons on the top part. Thank you

#78

You should really think about putting this on a github-repo :slight_smile:
Thanks for sharing!

#79

Love this, do you have a repo with all your themes listed?

edit: also, I notice any component using CustomUI doesn’t get the border. Can you point me to how to fix that?

image

1 Like
#80

i’m having an issue with the dev-state page. every other row is nearly white, with white text, making it impossible to read. looking at the css, i see:

--table-row-background-color: transparant;
--table-row-alternative-background-color: #eee;

which i can change in the firefox dev console to make it look nice. however, when i add to my theme:

  table-row-color: "#000000" #rows on dev-state?
  table-row-alternative-color: "#303030" #alt rows on dev-state?

and reload themes, the dev-state page isn’t affected. (and i still see “transparant” and “#eee” any ideas why this might be?

#81

Shouldn’t it be table-row-alternative-background-color?