Themes clair ou sombre

[pascal_ha]

Mon problème

Bonsoir

mon thèmes de HA ne bascule pas de clair à sombre de manière automatique.
Je peux basculer manuellement, mais pas en automatique.
Que ce soit avec le thèmes par défaut ou le thèmes minimalist

Y a t’il quelque chose a faire ?

Merci de votre aide

## System Health

version | core-2021.12.10
-- | --
installation_type | Home Assistant OS
dev | false
hassio | true
docker | true
user | root
virtualenv | false
python_version | 3.9.7
os_name | Linux
os_version | 5.10.63-v8
arch | aarch64
timezone | Europe/Paris

<details><summary>Home Assistant Community Store</summary>

GitHub API | ok
-- | --
Github API Calls Remaining | 4203
Installed Version | 1.19.3
Stage | running
Available Repositories | 1015
Downloaded Repositories | 22

</details>

<details><summary>Home Assistant Cloud</summary>

logged_in | false
-- | --
can_reach_cert_server | ok
can_reach_cloud_auth | ok
can_reach_cloud | ok

</details>

<details><summary>Home Assistant Supervisor</summary>

host_os | Home Assistant OS 7.1
-- | --
update_channel | stable
supervisor_version | supervisor-2021.12.2
docker_version | 20.10.9
disk_total | 219.4 GB
disk_used | 17.1 GB
healthy | true
supported | true
board | rpi4-64
supervisor_api | ok
version_api | ok
installed_addons | Terminal & SSH (9.3.0), Samba share (9.5.1), File editor (5.3.3), Duck DNS (1.14.0), Mosquitto broker (6.0.1), MariaDB (2.4.0), NGINX Home Assistant SSL proxy (3.1.1), Nginx Proxy Manager (0.11.0), Simple Scheduler (0.33.1), Check Home Assistant configuration (3.9.0), Node-RED (10.3.4), Studio Code Server (4.1.0), Plex Media Server (2.7.3)

</details>

<details><summary>Lovelace</summary>

dashboards | 2
-- | --
resources | 23
views | 23
mode | storage

</details>

[stephg38]

Bonjour a tous,
Idem chez moi sur Rpi3b et HA 2021.12.10

[pascal_ha]

Bonjour a tous

Je me permet de relancer ce sujet. C’est pas quelque chose d’important mais j’aimerais bien pouvoir y répondre.

Le mode automatique ne fonctionne pas. pourtant je peux manuellement passer le theme en sombre ou clair.

Est il possible de faire une automatisation pour forcer le passage du theme en clair ou sombre en fonction de l’heure ou de Sun ?

Merci a tous pour votre aide

[Yoanf26]

Hello

Je pense avec un script de ce style avec le sensor sun.sun qui est fourni avec l’intégration Soleil (Sun)

Theme sombre :

alias: Theme Sombre
sequence:
  - condition: state
    entity_id: sun.sun
    state: below_horizon
  - service: frontend.set_theme
    data:
      mode: dark
mode: single
icon: mdi:theme-light-dark

Theme Clair :

alias: Theme Clair
sequence:
  - condition: state
    entity_id: sun.sun
    state: above_horizon
  - service: frontend.set_theme
    data:
      mode: light
mode: single
icon: mdi:theme-light-dark

Je précise que je n’ai pas testé, mais j’ai repris un de mes scripts qui a ce type de fonctionnement

[pascal_ha]

Merci pour ton aide.

Je test demain, et te tiens au courant.

[Yoanf26]

Une petite coquille, en me relisant, ce n’est pas un script mais une automatisation

Theme Clair

description: ""
mode: single
trigger:
  - platform: sun
    event: sunrise
    offset: 0
condition: []
action:
  - service: frontend.set_theme
    data:
      mode: light

Theme Sombre

description: ""
mode: single
trigger:
  - platform: sun
    event: sunset
    offset: 0
condition: []
action:
  - service: frontend.set_theme
    data:
      mode: dark

[pascal_ha]

Bonsoir

Je viens de créer les 2 automatisations dans interface de HA.
Reste plus qu’a vérifier si c’est bon

[Yoanf26]

Hello

Tiens-nous au courant

[pascal_ha]

Bonjour

Sa ne fonctionne pas, le basculement ne se fait pas. Ni au levé du soleil, ni au couché.

Je poste le code de l’automatisation ce soir.

alias: Thèmes Clair
description: ""
trigger:
  - platform: sun
    event: sunrise
condition: []
action:
  - service: frontend.set_theme
    data:
      mode: light
      name: minimalist-desktop
mode: single

[Yoanf26]

Hello

J’ai eu un peu de temps histoire de tester directement en live, mais cela ne fonctionne pas. Pourtant en test, en regardant les traces, c’est ok. Mais visiblement la commande set theme intégré dans HA ne fonctionne pas malgré tous mes tests avec différent thème.

[pascal_ha]

bonjour

J’ai mis le code de automatisation au cas ou…
Mais bizarrement sa ne fonctionne pas, pourtant quand je le fait manuellement par interface de HA le Thème passe bien de Clair à sombre.

Bon c’est pas très grave, mais c’est curieux que cela ne fonctionne pas.

Merci de ton aide @Yoanf26

[Yoanf26]

Je pense que le problème vient du service frontend.set_theme

[WarC0zes]

Salut,
De mon coté j’ai tester aussi et rien a faire. Même en testant du service directement rien change, a ce demander si c’est pas buggé.

[vinula]

Bonjour,
Chez moi le changement de thème par lever/coucher de soleil fonctionne nickel.
Mon automatisation:

alias: Thème jour
description: Charge le thème mobile-light le matin
trigger:
  - platform: sun
    event: sunrise
condition: []
action: 
  - service: frontend.set_theme
    data:
      name: theme-mobile-light
      mode: light
mode: single

Quelques pistes à explorer :

-Permettre le changement de thème dans le profil du device

-si le thème dark est prévu pour se charger si les paramètres de device sont en mode sombre mais que celui-ci est en mode clair ça ne marchera pas.

[WarC0zes]

Même en modifiant le thème sur Backend-selected, j’appelle le service et rien change.
je pense plutôt que c’est un problème de thème.

Peu tu partager le code de ton thème theme-mobile-light ?

[vinula]

theme-mobile-light:

  # Fonts
  primary-font-family: 'Raleway,sans-serif'
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body1_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"
  ha-card-header-font-family: "var(--primary-font-family)"

  # Text
  text-color: '#212222'
  primary-text-color: 'var(--text-color)'
  text-primary-color: 'var(--text-color)'
  secondary-text-color: "#3d3d3d"
  text-medium-light-color: '#3d3d3d'
  text-medium-color: '#383f40'
  disabled-text-color: '#48500e'
  primary-color: 'var(--accent-color)'

  # Main Colors
  app-header-background-color: '#dde3d4'
  accent-color: '#48500e'
  accent-medium-color: 'var(--accent-color)'
  shape-disabled-ha-icon: '#bd0b0b'

  # Background
  background-color: '#dde3d4'
  primary-background-color: 'var(--background-color)'
  background-color-2: '#8fb1ad'
  secondary-background-color: 'none'
  markdown-code-background-color: 'var(--background-color)'

  # Card
  card-background-color: 'var(--ha-card-background)'
  ha-card-background: "#fdfff3"
  ha-card-box-shadow: 'none'
  ha-card-border-radius: "8px"
  border-color: 'none'
  ha-card-border-width: '0px'

  # Input colors
  input-idle-line-color: 'var(--text-color)'
  input-hover-line-color: 'var(--text-color)'
  input-disabled-line-color: 'var(--disabled-text-color)'
  input-outlined-idle-border-color: 'var(--secondary-text-color)'
  input-outlined-hover-border-color: 'var(--text-color)'
  input-outlined-disabled-border-color: 'var(--disabled-text-color)'
  input-fill-color: 'var(--secondary-background-color)'
  input-disabled-fill-color: 'var(background-color-2)'
  input-ink-color: 'var(--text-color)'
  input-label-ink-color: 'var(--text-color)'
  input-disabled-ink-color: 'var(--disabled-text-color)'
  input-dropdown-icon-color: 'var(--secondary-text-color)'

  # Icons
  paper-item-icon-color: '#323e37'
  paper-item-icon-active-color: 'var(--accent-color)'

  # Sidebar
  sidebar-background-color: '#fdfff3'
  sidebar-icon-color: '#6c7917'
  sidebar-selected-icon-color: 'var(--accent-color)'
  sidebar-selected-text-color: 'var(--text-color)'
  paper-listbox-background-color: 'var(--sidebar-background-color)'
  divider-color: 'var(--background-color)'
  light-primary-color: 'var(--ha-card-background)'

  # Sliders
  paper-slider-knob-color: 'var(--accent-color)'
  paper-slider-pin-color: 'var(--background-color)'
  paper-slider-active-color: 'var(--accent-color)'
  paper-slider-container-color: 'var(--background-color)'

  # Toggle:
  paper-toggle-button-checked-bar-color: 'var(--accent-color)'
  mdc-theme-primary: 'var(--accent-color)'

  # Switch
  switch-unchecked-color: '#48500e'
  switch-checked-button-color: 'var(--accent-color)'
  switch-unchecked-track-color: 'var(--background-color)'
  switch-checked-track-color: 'var(--background-color)'

  # Radio Button
  paper-radio-button-checked-color: 'var(--accent-color)'

  # Popups
  more-info-header-background: 'var(--secondary-background-color)'
  paper-dialog-background-color: 'var(--background-color)' #'rgba(47,59,82,0.4)'

  # Tables
  table-row-background-color: 'var(--background-color)'
  table-row-alternative-background-color: 'var(--ha-card-background)'

  # Badges
  label-badge-background-color: 'var(--background-color)'
  label-badge-text-color: 'var(--text-primary-color)'
  label-badge-red: 'rgba(220,50,47,1)'
  label-badge-blue: 'rgba(38,139,210,1)'
  label-badge-green: 'rgba(133,153,0,1)'
  label-badge-yellow: 'rgba(181,137,0,1)'

  paper-input-container-focus-color: 'var(--accent-color)'

  # Custom Header
  ch-background: 'var(--background-color)'
  ch-active-tab-color: 'var(--accent-color)'
  ch-notification-dot-color: 'var(--accent-color)'
  ch-all-tabs-color: 'var(--sidebar-icon-color)'
  ch-tab-indicator-color: 'var(--accent-color)'
  app-header-text-color: '#6c7916'


  # Mini Mediaplayer
  mini-media-player-base-color: 'var(--text-color)'
  mini-media-player-accent-color: 'var(--accent-color)'

  # Alarm
  alarm-color-armed: 'rgba(211,54,130,1)'

  # Scrollbars
  scrollbar-thumb-color: "#48500e"

  # Card-Mod #####################################################################
  # Uncomment the Code below if you have card-mod installed and want blur effect #
  ################################################################################


  # card-mod-theme: theme-mobile-light

  # card-mod-more-info-yaml: |
  #   $: |
  #     .mdc-dialog .mdc-dialog__scrim {
  #       backdrop-filter: blur(15px);
  #       -webkit-backdrop-filter: blur(15px);
  #       background: rgba(0,0,0,.6);
  #     }
  #     .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
  #       box-shadow: none !important;
  #       border-radius: var(--ha-card-border-radius);
  #     }
  #   .: |
  #     :host {
  #       --ha-card-box-shadow: none;
  #     }



  # Colors
  mush-rgb-red: 244, 67, 54
  mush-rgb-pink: 233, 30, 99
  mush-rgb-purple: 156, 39, 176
  mush-rgb-deep-purple: 103, 58, 183
  mush-rgb-indigo: 63, 81, 181
  mush-rgb-blue: 33, 150, 243
  mush-rgb-light-blue: 3, 169, 244
  mush-rgb-cyan: 0, 188, 212
  mush-rgb-teal: 0, 150, 136
  mush-rgb-green: 76, 175, 80
  mush-rgb-light-green: 139, 195, 74
  mush-rgb-lime: 205, 220, 57
  mush-rgb-yellow: 221, 203, 46
  mush-rgb-amber: 255, 193, 7
  mush-rgb-orange: 255, 152, 0
  mush-rgb-deep-orange: 255, 87, 34
  mush-rgb-brown: 121, 85, 72
  mush-rgb-grey: 158, 158, 158
  mush-rgb-blue-grey: 96, 125, 139
  mush-rgb-black: 0, 0, 0
  mush-rgb-white: 255, 255, 255
  
  mush-rgb-state-light: 108, 121, 23
  
  mush-rgb-disabled: 205, 205, 160

 

[WarC0zes]

J’ai réussi, enfaite dans mon thème j’avais ce code:

    modes:
        light: {}
        dark: {}

j’ai créer un nouveau thème en supprimant ces lignes.
J’ai bien sélectionner dans thème backend-selected, et j’ai pu changer le thème en fesant l’appel du service.

Merci @vinula pour toutes ces informations et pistes pour y arriver

[vinula]

Ah cool si ça marche !
J’ai jamais essayé avec ta façon. Je suis parti direct sur 2 thèmes distincts.

[pascal_ha]

J’ai pas bien compris ce qu’il faut faire dans le thème ?
voici le code du thème :

Code

---
minimalist-desktop:
  # Journal
  state-icon-color: "rgb(var(--color-theme))"
  border-radius: "20px"
  ha-card-border-radius: "var(--border-radius)"
  error-color: "var(--google-red)"
  warning-color: "var(--google-yellow)"
  success-color: "var(--google-green)"
  info-color: "var(--google-blue)"
  divider-color: "rgba(var(--color-theme),.12)"
  accent-color: "var(--google-yellow)"
  ha-dialog-border-radius: "10px"
  card-mod-theme: "minimalist-desktop"
  card-mod-view-yaml: |
    "*:first-child$": |
      #columns .column > * {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
      }
  modes:
    light:
      # text
      primary-text-color: "#212121"
      # main interface colors
      primary-color: "#434343"
      google-red: "#F54436"
      google-green: "#01C852"
      google-yellow: "#FF9101"
      google-blue: "#3D5AFE"
      google-violet: "#661FFF"
      google-grey: "#BBBBBB"
      color-red: "245, 68, 54"
      color-green: "1, 200, 82"
      color-yellow: "255, 145, 1"
      color-blue: "61, 90, 254"
      color-purple: "102, 31, 255"
      color-grey: "187, 187, 187"
      color-pink: "233, 30, 99"
      color-theme: "51,51,51"
      color-background-yellow: "250, 250, 250"
      color-background-blue: "250, 250, 250"
      color-background-green: "250, 250, 250"
      color-background-red: "250, 250, 250"
      color-background-pink: "250, 250, 250"
      color-background-purple: "250, 250, 250"
      color-yellow-text: "var(--primary-text-color)"
      color-blue-text: "var(--primary-text-color)"
      color-green-text: "var(--primary-text-color)"
      color-red-text: "var(--primary-text-color)"
      color-pink-text: "var(--primary-text-color)"
      color-purple-text: "var(--primary-text-color)"
      opacity-bg: "1"
      # background and sidebar
      card-background-color: "#FAFAFA"
      primary-background-color: "#FAFAFA"   #"#EFEFEF"
      secondary-background-color: "#FAFAFA" #"#EFEFEF"
      # header
      app-header-text-color: "var(--primary-text-color)"
      app-header-background-color: "var(--primary-background-color)"
      # paper-tabs-selection-bar-color: "var(--primary-text-color)"
      # slider
      slider-color: "rgb(var(--color-blue))"
      slider-bar-color: "rgba(var(--color-blue),0.38)"
      # cards
      box-shadow: "0px 2px 4px 0px rgba(0,0,0,0.16)"
      ha-card-box-shadow: "var(--box-shadow)"
      # sidebar
      sidebar-selected-text-color: "var(--google-red)"
      sidebar-selected-icon-color: "var(--google-red)"
      sidebar-text-color: "#80868b"
      # switch
      switch-checked-color: "var(--google-blue)"
      # media player
      mini-media-player-accent-color: "var(--google-blue)"
    dark:
      # text
      primary-text-color: "#DDDDDD"
      # main interface colors
      primary-color: "#89B3F8"
      google-red: "#F18B82"
      google-green: "#80C994"
      google-yellow: "#FCD663"
      google-blue: "#89B3F8"
      google-violet: "#BB86FC"
      google-grey: "#BBBBBB"
      color-red: "241, 139, 130"
      color-green: "128, 201, 148"
      color-yellow: "252, 214, 99"
      color-blue: "137, 179, 248"
      color-theme: "221,221,221"
      color-purple: "102, 31, 255"
      color-grey: "187, 187, 187"
      color-pink: "233, 30, 99"
      color-background-yellow: "var(--color-yellow)"
      color-background-blue: "var(--color-blue)"
      color-background-green: "var(--color-green)"
      color-background-red: "var(--color-red)"
      color-background-pink: "var(--color-pink)"
      color-background-purple: "var(--color-purple)"
      color-yellow-text: "var(--color-yellow)"
      color-blue-text: "var(--color-blue)"
      color-green-text: "var(--color-green)"
      color-red-text: "var(--color-red)"
      color-pink-text: "var(--color-pink)"
      color-purple-text: "var(--color-purple)"
      opacity-bg: "0.1"
      # floating button text color
      mdc-theme-on-secondary: "var(--card-background-color)"
      # background and sidebar
      card-background-color: "#1D1D1D"
      primary-background-color: "#121212"
      secondary-background-color: "#121212"
      # header
      app-header-text-color: "var(--primary-text-color)"
      app-header-background-color: "var(--primary-background-color)"
      paper-tabs-selection-bar-color: "var(--primary-text-color)"
      # Sidebar
      sidebar-selected-text-color: "rgb(var(--color-blue))"
      sidebar-selected-icon-color: "rgb(var(--color-blue))"
      # Slider
      slider-color: "rgb(var(--color-blue))"
      slider-bar-color: "rgba(var(--color-blue),0.38)"
      # card
      box-shadow: "none"
      # media player
      mini-media-player-accent-color: "var(--google-blue)"
      # Journal
      state-icon-color: "rgb(var(--color-theme))"

Je dois créer deux thèmes en séparant le mode Dark et le mode Light ?

[WarC0zes]

Bonsoir @pascal_ha,
Oui, il faudrais que tu créer un thème light et un thème dark.

Faut pas qu’il y est dans le code du thème ces lignes sinon, ca fonctionne pas:

  modes:
    light:
      ...
    dark:
      ...

comme dans ton thème c’est la cas, beh ca fonctionne pas