Set theme not working

tallguy64 · December 6, 2017, 6:57am

So pulling my hair out here. when trying to call frontend.set_theme using {"name":"default"} using services tab under developer tools i can not get the theme to revert back to default, or any other theme for that matter. i can use the configuration tool and manual select it from a drop down, and everything looks good, but automation or direct call will not work. I am getting no warnings or errors, am i crazy or did i miss something.

the code i am using for the automations is below

# automations.yaml

- alias: "Set dark theme for the night"
  initial_state: on
  trigger:
    - platform: time
      at: '21:00'
  action:
    - service: frontend.set_theme
      data:
        name: darkcyan

- alias: "Set light theme for day"
  initial_state: on
  trigger:
    - platform: time
      at: '9:00'
  action:
    - service: frontend.set_theme
      data:
        name: default

#configurations.yaml

frontend:
    javascript_version: latest
    themes: !include_dir_merge_named themes/

#dark_cyan.yaml in themes folder

darkcyan:
# Main colors that can be changed
  primary-color: "#00bcd4"
  disabled-text-color: "#545454"
  divider-color: "rgba(255, 255, 255, 0.12)"
  paper-card-background-color: "#4e4e4e"
  paper-grey-200: "#191919"
  paper-item-icon-color: "#d3d3d3"
  paper-listbox-background-color: "#202020"
  paper-listbox-color: "#FFFFFF"      
  primary-background-color: "#303030"
  primary-text-color: "#cfcfcf"      
  secondary-background-color: "#2b2b2b"
  secondary-text-color: "#04a7bc"
# Colors based on variables, see above
  label-badge-background-color: "var(--secondary-background-color)"
  label-badge-text-color: "var(--text-primary-color)"
  paper-card-header-color: "#var(--paper-item-icon-color)"
  paper-grey-50: "var(--primary-text-color)"
  paper-item-icon-active-color: "var(--primary-color)"
  paper-item-icon_-_color: "var(--primary-text-color)"
  paper-slider-active-color: "var(--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-secondary-color: "var(--light-primary-color)"     
  paper-toggle-button-checked-ink-color: "var(--dark-primary-color)"
  paper-toggle-button-checked-button-color: "var(--primary-color)"
  paper-toggle-button-checked-bar-color: "var(--light-primary-color)"
  paper-toggle-button-unchecked-bar-color: "var(--primary-text-color)"

tallguy64 · December 6, 2017, 7:29am

Looks like it is something with my firefox browser. tried chrome and it is working correctly.

Any ideas?

Jer78 · December 6, 2017, 3:50pm

@tallguy64

Not sure why this isn’t working. Here’s what I have and it works just fine. I use an input_select to change the theme. Also have an automation to change at sunset/sunrise between light and dark modes. You’ll just have to edit for the themes that you have. Cheers

Automations:

#################################################################################################
#                           THEMES                                                              #
#################################################################################################

  - alias: 'Switch Theme'
    initial_state: on
    trigger:
      - platform: state
        entity_id: input_select.theme
      - platform: homeassistant
        event: start
    action:
      - service: frontend.set_theme
        data_template:
          name: >-
            {% if is_state('input_select.theme', 'Dark Blue')%}dark_mode_blue
            {% elif is_state('input_select.theme', 'Dark Green')%}dark_mode_green
            {% elif is_state('input_select.theme', 'Dark Red')%}dark_mode_red
            {% elif is_state('input_select.theme', 'Light Gray')%}light_mode_gray
            {% elif is_state('input_select.theme', 'Light Blue')%}light_mode_blue
            {% elif is_state('input_select.theme', 'Dark Orange')%}dark_mode_orange
            {% elif is_state('input_select.theme', 'Dark Cyan')%}dark_mode_cyan
            {% elif is_state('input_select.theme', 'Light Cyan')%}light_mode_cyan
            {% elif is_state('input_select.theme', 'Dark Custom')%}dark_mode_custom
            {% elif is_state('input_select.theme', 'Light Monochrome')%}light_mode_monochrome
            {% endif %}

  - alias: 'Theme Dark Mode'
    initial_state: on
    trigger:
      platform: state
      entity_id: sun.sun
      to: 'below_horizon'
    condition:
      condition: state
      entity_id: input_boolean.switch_theme
      state: 'on'
    action:
      service: input_select.select_option
      data_template:
        entity_id: input_select.theme
        option: '{{states.input_select.dark_theme.state}}'

  - alias: 'Theme Light Mode'
    initial_state: on
    trigger:
      platform: state
      entity_id: sun.sun
      to: 'above_horizon'
    condition:
      condition: state
      entity_id: input_boolean.switch_theme
      state: 'on'
    action:
      service: input_select.select_option
      data_template:
        entity_id: input_select.theme
        option: '{{states.input_select.light_theme.state}}'

Input Selects

  theme:
    name: Current Theme
    icon: mdi:theme-light-dark
    options:
      - Dark Red
      - Dark Orange
      - Dark Blue
      - Dark Green
      - Dark Cyan
      - Dark Custom
      - Light Gray
      - Light Blue
      - Light Cyan
      - Light Monochrome

  dark_theme:
    name: Dark Mode Theme
    icon: mdi:palette
    initial: Dark Blue
    options:
      - Dark Red
      - Dark Orange
      - Dark Blue
      - Dark Green
      - Dark Cyan
      - Dark Custom

  light_theme:
    name: Light Mode Theme
    icon: mdi:palette
    initial: Light Blue
    options:
      - Light Gray
      - Light Blue
      - Light Cyan
      - Light Monochrome

Input Boolean

  switch_theme:
    name: Auto Switch Dark and Light Modes
    icon: mdi:weather-night

Finally, here’s the group on the front end:

  theme:
    name: Theme
    view: no
    entities:
      - input_select.theme
      - input_boolean.switch_theme
      - input_select.dark_theme
      - input_select.light_theme

tallguy64 · December 6, 2017, 7:45pm

I has something to do with my firefox browser, chrome picked up the manual call just fine, i am going to see if the automation works tonight, i have a feeling it will.

now just need to chase down why firefox wolnt.

Jer78 · December 7, 2017, 4:39pm

I don’t use Firefox with HA, but I wonder if it has something to do with 0.58 update which had a JavaScript update. Try updating your config with this:

frontend:
  javascript_version: latest

Mariusthvdb · March 16, 2018, 9:44am

hi sorry to bump this, but im in desperate need of assistance.

Ive tried anything to get my computer back to Backend-select, (because i use automations to switch automatically) but it won’t work, and the option is not within reach in the configuration page, all other themes i have are.

therefor i tried something like your settings:

input_select:
  set_current_theme:
    name: 'Set Current Theme'
    options:
     - 'Backend-selected'
     - 'default'
     - 'teal'
     - 'darkorange'
     - 'darkred'
     - 'darkcyan'
     - 'minimal'
     - 'vintage'
    initial: 'Backend-selected'
    icon: 'mdi:palette'


automation:
  - id: '1511601488032'
    alias: 'Change Current Theme'
    initial_state: 'on'
    trigger:
      - platform: state
        entity_id: input_select.set_current_theme
    action:
      - service: frontend.set_theme
        data_template:
          name: '{{states.input_select.set_current_theme.state}}'

this seems to kill my setup however, taking it into some loop it won’t get out off. And no theme switching at all.

So, a twofold question:

What could be wrong in this code
How to get back to Backend-selected

dawnlord · March 16, 2018, 9:50am

Code looks like mine and it works, how does your Backend-selected looks like?

Mariusthvdb · March 16, 2018, 10:01am

not really sure what you mean? I cant see it in this list:

its above the default, and won’t get there…

i have one simple automation that sets the theme depending on sunset/rise, and works just fine. Unless one has set a theme on a device of course.

- alias: Automatic Theme Change
  id: '1511601488029'
  initial_state: 'on' 
  trigger:
    - platform: homeassistant
      event: start
    - platform: state
      entity_id: sun.sun
      to: above_horizon
    - platform: state
      entity_id: sun.sun
      to: below_horizon
  condition: []
  action:
    - service_template: frontend.set_theme
      data_template:
        name: >
          {% if states.sun.sun.state == "above_horizon" %}
            default
          {% else %}
            darkred
          {% endif %}
    - delay: 00:00:02
    - service: notify.notify
      data_template:
        message: 'It is {{ as_timestamp(now()) | timestamp_custom("%X") }}, 
                   Sun is {{states.sun.sun.state}} and
                  Frontend is set.'

I’ve tried to set i in the dev tools, but not sure of the correct json to use there. Can we set the Backend-selected by means of an automation? or input-select at all?

dawnlord · March 16, 2018, 10:14am

You have a theme in your configuration or themes.yaml called Backend-selected?

Like this Share your Themes

Also, in your code, is there anything in your conditions?

Mariusthvdb · March 16, 2018, 10:15am

ah ok,
no i don’t . there shouldn’t be one should there? its whatever the backend selects…
no conditions. I have empty [] just to remind where they might have to come if ever… basic template i use to be safe.

dawnlord · March 16, 2018, 10:17am

Im pretty sure you cannot have a none existing selection.

Also im curious if you have any conditions condition: [] or if you not wanted to show them?

Mariusthvdb · March 16, 2018, 10:19am

no noting to hide just empty.
This cause no issues though i have them in many automations, and they all work fine.

about the Backend-selected: how can we set it to that, if i cant reach it anywhere. Should be some setting? Can you see it in the configuration page?

dawnlord · March 16, 2018, 10:22am

If you try to replace with below and see how that goes?

input_select:
  set_current_theme:
    name: 'Set Current Theme'
    options:
     - 'default'
     - 'teal'
     - 'darkorange'
     - 'darkred'
     - 'darkcyan'
     - 'minimal'
     - 'vintage'
    initial: 'default'
    icon: 'mdi:palette'

Mariusthvdb · March 16, 2018, 10:23am

i just did and rebooting as we type;-) will report back. Still i would need to find Backend-selected somehow…

dawnlord · March 16, 2018, 10:28am

I havent heard about backend-selected before.

This is my input:select without backend-selected:

  utseende:
    name: 'Utseende'
    icon: 'mdi:palette'
    initial: default
    options:
     - 'default'
     - 'solarized'
     - 'PmxDefault'
     - 'wood'
     - 'minimal'
     - 'stormy_hues'
     - 'teal'
     - 'PmxMononight'
     - 'PmxMonolight'
     - 'Night_Theme'
     - 'midnight'
     - 'material_dark_green'
     - 'Night'
     - 'darkcyan'
     - 'darkred'
     - 'Matrix_Theme'

But in the backend i have the option anyway:

Mariusthvdb · March 16, 2018, 10:36am

well, taking out Backend-selected makes Hassio boot fine again, and the selector show fine too. It doesn’t work though.
Also, one would expect the selector to ‘see’ the set state of the configuration page, or vice versa. I don’t think they correspond ? What happens in your setting when changing themes?

And yes, the Backend should show up there, cant get it to show up…

dawnlord · March 16, 2018, 10:44am

When i select for example solarized in frontend it shows what i selected and theme change.
But the backend doesn’t show the theme i selected.

Mariusthvdb · March 16, 2018, 10:46am

at least we have that in common then
i take it you have custom-ui installed?

dawnlord · March 16, 2018, 10:49am

No i am not using custom-ui.

Mariusthvdb · March 16, 2018, 11:10am

not sure whats happening, but I’ve changed the automation into this:

   - alias: 'Switch Theme'
    id: '1511601488033'
    initial_state: on
    trigger:
      - platform: state
        entity_id: input_select.theme
#      - platform: homeassistant
#        event: start
    action:
      - service: frontend.set_theme
        data_template:
          name: >-
            {% if is_state('input_select.theme', 'default')%}default
            {% elif is_state('input_select.theme', 'teal')%}teal
            {% elif is_state('input_select.theme', 'darkorange')%}darkorange
            {% elif is_state('input_select.theme', 'darkred')%}darkred
            {% elif is_state('input_select.theme', 'darkcyan')%}darkcyan
            {% elif is_state('input_select.theme', 'minimal')%}minimal
            {% elif is_state('input_select.theme', 'vintage')%}vintage
            {% endif %}

this works!
Also, to circumvent any add blocker or other security tool i have installed, I’ve tested with a private browsing session. I can now see Backend-selected in the configuration page …

Needs further investigating which caused what… regular Safari (with and without adblovkers etc) doesn’t work, private mode does. As does Chrome, with all security in place. Hate Firefox…keeps relocating before i have entered the url…

btw, the original automation i posted above also seems to work in private mode. So it must be that. Now have to figure out whats causing this strange browser behavior. Maybe its just Safari :-0. Hope it is a setting or adding in Safari…

enabling the selector/automation in private mode in Safari somehow brought back the Backend-selected on the configuration page/themes setting. Clicking that still doesn’t show the option, while all other themes are available. So something isn’t right just yet. This goes for Chrome as well, not able to select the option, though showing when entering the page.

Anyways thanks!
Marius