Bonjour!!
Je suis en mode storage, et mon dashboard éditable via l’UI a un fond/background de couleur noire… seulement en mode sombre.
Lorsque je suis en mode clair, le dashboard a un fond d’écran de la couleur désirée (définie dans le theme). Je ne suis pas arrivé à comprendre pourquoi.
Sur les autres tableaux de bord, en YAMl ceux là, le fond d’écran est OK autant en sombre qu’en clair.
J’utilise le theme CatPuccin, modifié pour gérer le mode dark/light, dont voici le code:
Lien CATPUCCIN
GitHub - catppuccin/home-assistant: 🏠 Soothing pastel theme for Home Assistant
Code modifié du thème:
###############################################################################################################
### ###
### CATPUCCIN ###
### ###
###############################################################################################################
NovaPuccino:
modes:
### LIGHT =========================================================================================================
light:
novacolor: "#8839ef" #lavender
novacolorshade: "rgba(136, 57, 239,0.7)" # lavender faded
blue: "#1e66f5"
green: "#42be42"
yellow: "#ef6c00"
red: "#d20f39"
teal: "#2d7d95"
sky: "#04a5e5"
white: "#fefdfa"
text: "#4c4f69" # darkest
subtext1: "#5c5f77"
subtext0: "#6c6f85"
overlay2: "#7c7f93"
overlay1: "#8c8fa1"
overlay0: "#9ca0b0"
surface2: "#acb0be"
surface1: "#bcc0cc"
surface0: "#ccd0da"
crust: "#dce0e8"
base: "#e6e9ef"
mantle: "#eff1f5" # lightest
### DARK ==========================================================================================================
dark:
novacolor: "#e38de3" # rose
novacolorshade: "rgba(227, 141, 227,0.7)" # rose faded
blue: "#6795f1"
green: "#a6da95"
yellow: "#eed49f"
red: "#ed8796"
teal: "#2d7d95"
sky: "#91d7e3"
white: "#fefdfa"
text: "#cad3f5" # lightest
subtext1: "#b8c0e0"
subtext0: "#a5adcb"
overlay2: "#939ab7"
overlay1: "#8087a2"
overlay0: "#6e738d"
surface2: "#5b6078"
surface1: "#494d64"
surface0: "#363a4f"
mantle: "#24273a"
base: "#1e2030"
crust: "#181926" # darkest
### COMMON ==========================================================================================================
# MAIN --------------------------------------------------------------------------------------------------------------
dialog-backdrop-filter: blur(4px)
info-color: var(--blue)
success-color: var(--green)
warning-color: var(--yellow)
error-color: var(--red)
primary-color: var(--teal)
light-primary-color: var(--sky)
primary-background-color: var(--base)
secondary-background-color: var(--mantle)
# TEXT
primary-text-color: var(--subtext0)
secondary-text-color: var(--surface2)
text-primary-color: var(--white)
divider-color: var(--base)
accent-color: var(--sky)
disabled-text-color: var(--surface0)
# SIDEBAR
sidebar-background-color: var(--crust)
sidebar-selected-background-color: var(--primary-background-color)
sidebar-icon-color: var(--subtext0)
sidebar-text-color: var(--subtext0)
sidebar-selected-icon-color: var(--sidebar-selected-text-color)
sidebar-selected-text-color: var(--state-active-color)
# BUTTONS
paper-item-icon-color: var(--subtext0)
paper-item-icon-active-color: var(--primary-color)
# ICONS
state-icon-color: var(--primary-text-color)
state-icon-active-color: var(--primary-color)
state-icon-unavailable-color: var(--disabled-text-color)
# SLIDERS
paper-slider-knob-color: var(--info-color)
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-secondary-color: var(--info-color)
# LABELS
label-badge-background-color: var(--surface0)
label-badge-text-color: var(--text)
label-badge-blue: var(--info-color)
label-badge-green: var(--success-color)
label-badge-yellow: var(--warning-color)
label-badge-red: var(--error-color)
label-badge-gray: var(--overlay0)
# CARDS
card-background-color: var(--secondary-background-color)
ha-card-background: var(--card-background-color)
ha-card-border-radius: "15px"
ha-card-box-shadow: none
paper-dialog-background-color: var(--overlay0)
paper-listbox-background-color: var(--surface0)
paper-card-background-color: var(--card-background-color)
# SWITCH
switch-checked-button-color: var(--success-color)
switch-checked-track-color: var(--surface0)
switch-unchecked-button-color: rgb(--overlay0)
switch-unchecked-track-color: rgb(--surface0)
# TOGGLE
paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
# TABLE
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
data-table-background-color: var(--primary-background-color)
mdc-checkbox-unchecked-color: var(--surface0)
# DROPDOWNS
material-background-color: var(--primary-background-color)
material-secondary-background-color: var(--secondary-background-color)
mdc-theme-surface: var(--mantle)
# RE/CODE
markdown-code-background-color: var(--surface0)
# CHECKBOX
mdc-select-fill-color: var(--surface0)
mdc-select-ink-color: var(--primary-text-color)
mdc-select-label-ink-color: var(--subtext1)
mdc-select-idle-line-color: var(--primary-text-color)
mdc-select-dropdown-icon-color: var(--secondary-text-color)
mdc-select-hover-line-color: var(--accent-color)
# INPUT
input-fill-color: var(--secondary-background-color)
input-dropdown-icon-color: var(--secondary-text-color)
input-ink-color: var(--primary-text-color)
input-label-ink-color: var(--secondary-text-color)
input-idle-line-color: var(--primary-text-color)
input-hover-line-color: var(--accent-color)
# STATE ACTIVE ------------------------------------------------------------------------------------------------------
state-active-color: var(--novacolor)
# ALARM CONTROL PANEL
state-alarm_control_panel-disarmed-color: var(--primary-text-color)
state-alarm_control_panel-arming-color: var(--primary-text-color)
state-alarm_control_panel-armed_away-color: var(--success-color)
state-alarm_control_panel-armed_home-color: var(--info-color)
state-alarm_control_panel-armed_night-color: var(--info-color)
state-alarm_control_panel-pending-color: var(--warning-color)
state-alarm_control_panel-triggered-color: var(--error-color)
# BINARY SENSOR
state-binary_sensor-active-color: var(--state-active-color)
# LIGHT
state-light-on-color: var(--warning-color)
state-light-active-color: var(--state-light-on-color) #var(--state-active-color) #dispensable
# MEDIA PLAYER
state-media_player-idle-color: var(--info-color)
state-media_player-speaker-idle-color: var(--state-media_player-idle-color)
state-media_player-active-color: var(--state-active-color)
# SWITCH
state-switch-on-color: var(--state-active-color)
state-switch-active-color: var(--state-switch-on-color) #dispensable
# Outlet
state-switch-outlet-on-color: var(--state-switch-on-color) #dispensable
# HACS --------------------------------------------------------------------------------------------------------------
# MINI MEDIA PLAYER
mini-media-player-base-color: var(--primary-text-color)
mini-media-player-icon-color: var(--info-color)
# PAPER BUTTONS ROW
pbs-button-rgb-color: var(--primary-text-color)
pbs-button-rgb-default-color: var(--primary-text-color)
# Header
app-header-background-color: var(--mantle)
app-header-text-color: var(--text)
# app-header-edit-background-color: var(--text) # "#455a64"
# app-header-edit-text-color: var(--surface0)
# Toast (popup bas de page)
paper-toast-background-color: var(--novacolorshade)
# paper-toast-color: var(--text)
# HorseHoe Card + Swiss Army Knife Card
theme-card-box-shadow: var(--shadow-elevation-2dp_-_box-shadow)
# HoneyComb Menu
honeycomb-menu-icon-color: var(--primary-text-color)
honeycomb-menu-icon-active-color: var(--state-active-color)
honeycomb-menu-background-color: var(--surface1)
honeycomb-menu-background-active-color: green
honeycomb-menu-active-background-color: red
# honeycomb-menu-disabled: var(--overlay0) # translucide par défaut
Light mode: YAML & UI dash
Dark mode: YAML dash
Dark mode: UI dash
Une idée, ou déjà vécu? D’avance merci!!!
Config HA
System Information
| version |
core-2023.6.0 |
| installation_type |
Home Assistant OS |
| dev |
false |
| hassio |
true |
| docker |
true |
| user |
root |
| virtualenv |
false |
| python_version |
3.11.3 |
| os_name |
Linux |
| os_version |
6.1.29 |
| arch |
x86_64 |
| timezone |
Europe/Paris |
| config_dir |
/config |
Home Assistant Community Store
| GitHub API |
ok |
| GitHub Content |
ok |
| GitHub Web |
ok |
| GitHub API Calls Remaining |
5000 |
| Installed Version |
1.32.1 |
| Stage |
running |
| Available Repositories |
1352 |
| Downloaded Repositories |
31 |
Home Assistant Cloud
| logged_in |
false |
| can_reach_cert_server |
ok |
| can_reach_cloud_auth |
ok |
| can_reach_cloud |
ok |
Home Assistant Supervisor
| host_os |
Home Assistant OS 10.2 |
| update_channel |
stable |
| supervisor_version |
supervisor-2023.06.1 |
| agent_version |
1.5.1 |
| docker_version |
23.0.6 |
| disk_total |
62.3 GB |
| disk_used |
46.8 GB |
| healthy |
true |
| supported |
true |
| board |
ova |
| supervisor_api |
ok |
| version_api |
ok |
| installed_addons |
File editor (5.6.0), Terminal & SSH (9.7.1), Home Assistant Google Drive Backup (0.110.4), Duck DNS (1.15.0), NGINX Home Assistant SSL proxy (3.5.0), Mosquitto broker (6.2.1), Frigate (0.12.0), Samba share (10.0.2), Zigbee2MQTT (1.31.2-1), AppDaemon (0.13.0), Music Assistant BETA (2.0.0b32), Uptime Kuma (0.7.4) |
Dashboards
| dashboards |
4 |
| resources |
21 |
| views |
13 |
| mode |
storage |
Recorder
| oldest_recorder_run |
29 mai 2023 à 09:20 |
| current_recorder_run |
7 juin 2023 à 22:34 |
| estimated_db_size |
218.77 MiB |
| database_engine |
sqlite |
| database_version |
3.41.2 |
Spotify
| api_endpoint_reachable |
ok |