Orange Theme

Bram_Kragten · August 15, 2017, 12:45pm

    darkorange:
      primary-color: "#ff9800"
      light-primary-color: "#ffc947"
      dark-primary-color: "#c66900"
      text-primary-color: "#ffffff"
      primary-background-color: "#37464f"
      sidebar-text_-_background: "#62717b"
      card-background-color: "#263137"
      paper-card-background-color: "#263137"
      paper-card-header-color: "var(--text-primary-color)"
      secondary-background-color: "var(--primary-background-color)"
      primary-text-color: "var(--text-primary-color)"
      secondary-text-color: "var(--primary-color)"
      paper-listbox-background-color: "var(--sidebar-text_-_background)"
      paper-toggle-button-checked-ink-color: "var(--dark-primary-color)"
      paper-toggle-button-checked-button-color: "var(--dark-primary-color)"
      paper-toggle-button-checked-bar-color: "var(--dark-primary-color)"
      paper-slider-knob-color: "var(--primary-color)"
      paper-slider-knob-start-color: "var(--primary-color)"
      paper-slider-pin-color: "var(--primary-color)"
      paper-slider-active-color: "var(--primary-color)"
      paper-slider-secondary-color: "var(--light-primary-color)"
      paper-slider-container-color: "var(--sidebar-text_-_background)"
      paper-progress-secondary-color: "var(--sidebar-text_-_background)"
      paper-item-selected_-_background-color: "var(--primary-color)"
      paper-item-icon_-_color: "var(--text-primary-color)"
      paper-item-icon-color: "var(--sidebar-text_-_background)"
      paper-item-icon-active-color: "var(--primary-color)"
      paper-grey-50: "var(--sidebar-text_-_background)"
      paper-grey-200: "var(--primary-background-color)"
      label-badge-background-color: "var(--sidebar-text_-_background)"
      label-badge-text-color: "var(--text-primary-color)"
      label-badge-red: "var(--primary-color)"
      label-badge-blue: "var(--light-primary-color)"
      label-badge-green: "var(--dark-primary-color)"
      label-badge-yellow: "var(--text-primary-color)"
      label-badge-grey: "var(--paper-grey-500)"
      table-row-background-color: "var(--paper-card-background-color)"
      table-row-alternative-background-color: "var(--sidebar-text_-_background)"

ahs · August 15, 2017, 1:32pm

Awesome!
(only 49/9 mpbs up/download? Tss… )

Bram_Kragten · August 15, 2017, 3:17pm

Enough for me (and still waiting for fiber…)

firstof9 · August 15, 2017, 4:36pm

Using @Bram_Kragten’s theme as a base, used a blue instead of orange:

   darkblue:
     primary-color: "#396FB6"
     light-primary-color: "#77a0d4"
     dark-primary-color: "#3539ce"
     text-primary-color: "#ffffff"
     primary-background-color: "#37464f"
     sidebar-text_-_background: "#3c4348"
     paper-card-background-color: "#263137"
     paper-card-header-color: "var(--text-primary-color)"
     secondary-background-color: "var(--primary-background-color)"
     primary-text-color: "var(--text-primary-color)"
     secondary-text-color: "var(--primary-color)"
     paper-listbox-background-color: "var(--sidebar-text_-_background)"
     paper-toggle-button-checked-ink-color: "var(--dark-primary-color)"
     paper-toggle-button-checked-button-color: "var(--dark-primary-color)"
     paper-toggle-button-checked-bar-color: "var(--dark-primary-color)"
     paper-slider-knob-color: "var(--primary-color)"
     paper-slider-knob-start-color: "var(--primary-color)"
     paper-slider-pin-color: "var(--primary-color)"
     paper-slider-active-color: "var(--primary-color)"
     paper-slider-secondary-color: "var(--light-primary-color)"
     paper-slider-container-color: "var(--sidebar-text_-_background)"
     paper-progress-secondary-color: "var(--sidebar-text_-_background)"
     paper-item-selected_-_background-color: "var(--primary-color)"
     paper-item-icon_-_color: "var(--text-primary-color)"
     paper-item-icon-color: "var(--sidebar-text_-_background)"
     paper-item-icon-active-color: "var(--primary-color)"
     paper-grey-50: "var(--sidebar-text_-_background)"
     paper-grey-200: "var(--primary-background-color)"
     label-badge-background-color: "var(--sidebar-text_-_background)"
     label-badge-text-color: "var(--text-primary-color)"
     label-badge-red: "var(--primary-color)"
     label-badge-blue: "var(--light-primary-color)"
     label-badge-green: "var(--dark-primary-color)"
     label-badge-yellow: "var(--text-primary-color)"
     label-badge-grey: "var(--paper-grey-500)"
     table-row-background-color: "var(--paper-card-background-color)"
     table-row-alternative-background-color: "var(--sidebar-text_-_background)"

bachoo786 · August 17, 2017, 9:23pm

Hi

I have copied your code into my configuration.yaml as follows:

frontend:
  themes:
    darkorange:
       primary-color: "#ff9800"
       light-primary-color: "#ffc947"
       dark-primary-color: "#c66900"
       text-primary-color: "#ffffff"
       primary-background-color: "#37464f"
       sidebar-text_-_background: "#62717b"
       paper-card-background-color: "#263137"
       paper-card-header-color: "var(--text-primary-color)"
       secondary-background-color: "var(--primary-background-color)"
       primary-text-color: "var(--text-primary-color)"
       secondary-text-color: "var(--primary-color)"
       paper-listbox-background-color: "var(--sidebar-text_-_background)"
       paper-toggle-button-checked-ink-color: "var(--dark-primary-color)"
       paper-toggle-button-checked-button-color: "var(--dark-primary-color)"
       paper-toggle-button-checked-bar-color: "var(--dark-primary-color)"
       paper-slider-knob-color: "var(--primary-color)"
       paper-slider-knob-start-color: "var(--primary-color)"
       paper-slider-pin-color: "var(--primary-color)"
       paper-slider-active-color: "var(--primary-color)"
       paper-slider-secondary-color: "var(--light-primary-color)"
       paper-slider-container-color: "var(--sidebar-text_-_background)"
       paper-progress-secondary-color: "var(--sidebar-text_-_background)"
       paper-item-selected_-_background-color: "var(--primary-color)"
       paper-item-icon_-_color: "var(--text-primary-color)"
       paper-item-icon-color: "var(--sidebar-text_-_background)"
       paper-item-icon-active-color: "var(--primary-color)"
       paper-grey-50: "var(--sidebar-text_-_background)"
       paper-grey-200: "var(--primary-background-color)"
       label-badge-background-color: "var(--sidebar-text_-_background)"
       label-badge-text-color: "var(--text-primary-color)"
       label-badge-red: "var(--primary-color)"
       label-badge-blue: "var(--light-primary-color)"
       label-badge-green: "var(--dark-primary-color)"
       label-badge-yellow: "var(--text-primary-color)"
       label-badge-grey: "var(--paper-grey-500)"
       table-row-background-color: "var(--paper-card-background-color)"
       table-row-alternative-background-color: "var(--sidebar-text_-_background)”

but it doesnt seem to change to orange? do you know why?

Thanks.

VDRainer · September 22, 2017, 11:31am

I’m loving the darkorange theme. Would it be possible to fix the date picker in history and logbook?
Auswahl_040

Koen · March 17, 2018, 12:18pm

Hi,

Maybe you already solved your problem, but I had the same issue. In my case it it took a few minutes and restarts to get it up and running. beside this I had moved each theme to it’s own file, to keep things organized.

frontend:
  themes:
    darkblue: !include themes/dark_blue.yaml

I created a subfolder named ‘themes’ to contain all the themes neat and organized, for example the file 'dark_blue.yaml:

primary-color: "#396FB6"
light-primary-color: "#77a0d4"
dark-primary-color: "#3539ce"
text-primary-color: "#ffffff"
primary-background-color: "#37464f"
sidebar-text_-_background: "#3c4348"
paper-card-background-color: "#263137"
paper-card-header-color: "var(--text-primary-color)"
secondary-background-color: "var(--primary-background-color)"
primary-text-color: "var(--text-primary-color)"
secondary-text-color: "var(--primary-color)"
paper-listbox-background-color: "var(--sidebar-text_-_background)"
paper-toggle-button-checked-ink-color: "var(--dark-primary-color)"
paper-toggle-button-checked-button-color: "var(--dark-primary-color)"
paper-toggle-button-checked-bar-color: "var(--dark-primary-color)"
paper-slider-knob-color: "var(--primary-color)"
paper-slider-knob-start-color: "var(--primary-color)"
paper-slider-pin-color: "var(--primary-color)"
paper-slider-active-color: "var(--primary-color)"
paper-slider-secondary-color: "var(--light-primary-color)"
paper-slider-container-color: "var(--sidebar-text_-_background)"
paper-progress-secondary-color: "var(--sidebar-text_-_background)"
paper-item-selected_-_background-color: "var(--primary-color)"
paper-item-icon_-_color: "var(--text-primary-color)"
paper-item-icon-color: "var(--sidebar-text_-_background)"
paper-item-icon-active-color: "var(--primary-color)"
paper-grey-50: "var(--sidebar-text_-_background)"
paper-grey-200: "var(--primary-background-color)"
label-badge-background-color: "var(--sidebar-text_-_background)"
label-badge-text-color: "var(--text-primary-color)"
label-badge-red: "var(--primary-color)"
label-badge-blue: "var(--light-primary-color)"
label-badge-green: "var(--dark-primary-color)"
label-badge-yellow: "var(--text-primary-color)"
label-badge-grey: "var(--paper-grey-500)"
table-row-background-color: "var(--paper-card-background-color)"
table-row-alternative-background-color: "var(--sidebar-text_-_background)"

I noticed that the spaces before the code do not matter, as long as all the lines are aligned. But remember: do not include the name (‘darkblue’) again in the subfile (dark_blue.yaml), since it is already declared in the ‘fronted’ section.

Cheers!

eric2 · October 3, 2019, 6:19pm

Hi,
I am using this awesome theme for a long time.
I noticed now that the settings -> devices window shows white text on a white background so not readable.
Can you fix this please?
Thanks in advance.
Regards, Eric

maartenpaauw · November 25, 2019, 1:19pm

This the is added to Home Assistant Community Themes (with HACS support)