[ CARTE ] sidebar-card

Home Assistant - Tutoriels & Partages Interface / Lovelace / Thème / Custom Card
21

Et voila pour le thème.

Si certains sont intéressés par le code complet, je peux essayer de poster sur github (jamais fait avant donc faudra que je regarde comment on fait!!!)

Soft UI:

  card-mod-theme: Soft UI 
  card-mod-card: |
    ha-card.soft-ui {
      border-style: none
      background-color: var(--primary-background-color);
      box-shadow: var(--my-card-shadow);
    }
  # This is needed for the "pressed" buttons


  app-header-background-color: var(--primary-background-color)
  app-header-text-color: var(--primary-text-color)
  app-header-selection-bar-color: var(--primary-color)
  
  accent-color: var(--primary-color)
  divider-color: var(--secondary-text-color)
  ha-card-background: var(--primary-background-color)
  card-background-color: var(--primary-background-color)
  lovelace-background: var(--primary-background-color)
  paper-item-icon-color: var(--secondary-text-color)


  modes:
    dark:
      sidebar-shadow: "inset 0px 8px 20px rgba(30, 196, 229, 0.2)"
      primary-color: rgb(138, 180, 248)
      primary-background-color: rgb(30, 30, 30)
      secondary-background-color: rgb(32, 33, 36)
      primary-text-color: rgb(var(--my-grey2))
      accent-color: var(--primary-color)
      soft-ui-pressed: "inset -40px -40px 50px #2c2c2c, inset 40px 40px 50px #191919"
      my-red: "230, 57, 70"
      my-white: "253, 253, 253"
      my-cyan: "168, 218, 220"
      my-blue: "0,206,209"
      my-blue-hex: "#457B9D"
      my-purple: "162, 114, 175"
      my-green: "68, 175, 105"
      my-orange: "251, 161, 0"
      my-grey: "220,220,220"
      my-grey2: "75,75,75"
      my-shadow: "220,220,220"
      my-box-shadow: "rgba(227, 227, 227, 0.05) 0px 30px 60px -12px inset, rgba(255, 255, 255, 0.3) 0px 18px 36px -18px inset"
      my-card-shadow: "rgba(30, 196, 229, 0.25) 0px 13px 27px -5px, rgba(212, 244, 250, 0.3) 0px 8px 16px -8px"
      my-header: "rgba(60,60,60,0.85)"
      my-footer: "rgba(60,60,60,0.85)"
      lovelace-background: 'center / cover no-repeat url("/local/background/dark.jpg") fixed'



    light:
      sidebar-shadow: "inset 0px 8px 20px rgba(17, 17, 26, 0.2)"
      primary-color: rgb(var(--my-blue))
      light-primary-color: rgb(var(--my-blue))
      primary-background-color: "#F3F5F7"
      primary-text-color: "#222222"
      soft-ui-pressed: 'inset -4px -4px 5px #ffffff, inset 4px 4px 5px #ebebeb'
      my-red: "230, 57, 70"
      my-white: "253, 253, 253"
      my-cyan: "168, 218, 220"
      my-blue: "69, 123, 157"
      my-purple: "68, 56, 80"
      my-green: "68, 175, 105"
      my-orange: "251, 161, 0"
      my-grey2: "220,220,220"
      my-grey: "75,75,75"
      my-shadow: "220,220,220"
      my-box-shadow: "rgba(50, 50, 93, 0.05) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset"
      my-card-shadow: "rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px"
      my-header: "rgba(225,225,225,0.85)"
      my-footer: "rgba(225,225,225,0.85)"
      
      #browser_mod.popup
      dialog-backdrop-filter: blur(1em) brightness(0.75)
      popup-background-color: var(--primary-background-color)
      popup-border-radius: 1em

pour avoir les jolies ombres et effets sur les cartes, ne pas oublier d’ ajouter le card_mod à la fin des cartes:

    card_mod:
      class: soft-ui

Avec cette config, le dark mode donne ca (pas convaincu des couleurs):

Screenshot 2023-09-17 at 17.20.07
Screenshot 2023-09-17 at 17.20.071920×1046 102 KB

5 « J'aime »
22

Si tu peut fournir le code complet de ton dashboard se serait mieux :slight_smile:

mais fait le dans un autre sujet :slight_smile:

1 « J'aime »
23

@ mathgoy, le code que tu donne, tu le mets dans le fichier du thème a la place du code original du thème soft-ui ?

EDIT : super idée, j’ai moi aussi bidouillé le code pour faire des truc sympa. :slight_smile: merci pour l’idée, je n’aurais jamais été aller toucher le code des thèmes.
reste maintenant a aligner les fenêtres, mettre les couleurs un peu plus douce que celle que j’ai choisi pour comprendre comment cela fonctionnait, mais je vais y arriver.

24

Super dashboard, je trouve.

Je trouve pas comment ca s’installe. J’ai installé le theme « Soft » depuis HACS. Remplacé le code par le tien mais ensuite ?
Je suppose qu’il faut appliquer le theme au dashboard et là le thème n’est pas proposé:
Capture d’écran 2023-09-20 à 08.45.08

Ca devrait non ? Ou la procédure est autre ?

25

Salut,
Pour changer le thème va dans ton profil ( icone ronde en bas ) et sélectionne le thème Soft-UI.
Ensuite sur les cartes que tu créer ou que ta déja créer, rajoute ce code card_mod:

card_mod:
  class: soft-ui

Mais , sinon oui tu peu modifier le thème que pour la carte.

thème soft-UI
thème soft-UI974×641 31.5 KB

26

Merci @WarC0zes mais je ne le vois pas :
Capture d’écran 2023-09-20 à 08.56.35

Pourtant il est bien installé :
Capture d’écran 2023-09-20 à 08.57.06

Faut pas redémarrer des fois quand on installe un thème ?

27

Oui, faut recharger les thèmes. Dans outils de dev, va dans service. Recherche le service frontend.reload_themes ( ou Home Assistant Frontend: Recharger les thèmes en FR ) et tu appelle le service . Ca recharge les thèmes.

1 « J'aime »
28

bon même avec le service de rechargement des thèmes, ça veut pas. Je vais chercher un peu.
Peut être un conflit avec des déclarations de thèmes dans le configuration.yaml comme ça:

frontend:
  extra_module_url:
    - /config/www/community/lovelace-card-mod/card-mod.js
    - /config/www/community/sidebar-card/sidebar-card.js
  themes:
    versatile_thermostat_theme:
      state-binary_sensor-safety-on-color: "#FF0B0B"
      state-binary_sensor-power-on-color: "#FF0B0B"
      state-binary_sensor-window-on-color: "rgb(156, 39, 176)"
      state-binary_sensor-motion-on-color: "rgb(156, 39, 176)"
      state-binary_sensor-presence-on-color: "lightgreen"
    theme_sansbordure:
      ha-card-border-width: 0
      # creuses
      energy-grid-consumption-color-0: "#00008B"
      # pleines
      energy-grid-consumption-color-1: "#ff9999"
      # creuses bleu
      energy-grid-consumption-color-2: "#6699ff"
      # creuses blanc
      energy-grid-consumption-color-3: "#bfbfbf"
      # creuses rouge
      energy-grid-consumption-color-4: "#ffcccc"
      # pleines bleue
      energy-grid-consumption-color-5: "#0066ff"
      # pleines blanc
      energy-grid-consumption-color-6: "#ffffff"
      # pleines rouge
      energy-grid-consumption-color-7: "#ff8080"
      #energy-battery-in-color
      #energy-battery-out-color
      #energy-gas-color
      #energy-grid-return-color
      #energy-non-fossil-color
      #energy-solar-color
      #energy-water-color

      modes:
        light: {}
        dark: {}
1 « J'aime »
29

Oui, le soucis est dans ton configuration.yaml.
j’ai ca en config:

frontend:
  themes: !include_dir_merge_named themes

ca check les thèmes dans le dossier thème puis un dossier et le .yaml dedans.

avec ta config, ca charge les thème directement du configuration.yaml et comme tout les thèmes télécharger de hacs, sa les installe directement dans le dossier thème, puis un dossier du nom du thème et le fichier .yaml.

tu a cas refaire t’es thème du configuration.yaml directement en .yaml dans le dossier thème.

Exemple pour ton thème versatile_thermostat_theme.
du créer un fichier versatile_thermostat_theme.yaml, tu colle ton code du thème:

versatile_thermostat_theme:
  state-binary_sensor-safety-on-color: "#FF0B0B"
  state-binary_sensor-power-on-color: "#FF0B0B"
  state-binary_sensor-window-on-color: "rgb(156, 39, 176)"
  state-binary_sensor-motion-on-color: "rgb(156, 39, 176)"
  state-binary_sensor-presence-on-color: "lightgreen"

tu créer un dossier versatile_thermostat_theme dans le dossier thème, et tu y colle ton versatile_thermostat_theme.yaml.

tu fait de même pour l’autre thème theme_sansbordure. Tu supprime les thèmes dans configuration.yaml et modififie la ligne de theme: en:

  themes: !include_dir_merge_named themes
1 « J'aime »
30

Comme suggéré par @barto_95, j’ai fait un sujet ICI

J’espère que ca répondra à tes questions!

1 « J'aime »
31

super idée,

je suis passé de ça :
image
à ça pour tester :slight_smile:
image
EDIT : et écrire un theme, pas si diificile que ça, merci @ mathgoy
Re edit :
et je dois passer a ça lors d’un clic :
image

3 « J'aime »
32

J’ai trouvé pourquoi je n’arrivais pas à mettre le menu sélectionner en évidence. Je ne spécifiait pas le nom du path de navigation au complet. :grinning:

image
image991×202 31 KB

image
image965×185 35 KB

image
image681×977 293 KB

2 « J'aime »
33

les navigations ne fonctionnais pas alors ?

34

Oui, la navigation fonctionnait même si le path complet n’était pas spécifié???

35

T’as des beaux icones bien colorés en face des menus. Comment tu fais ça ? (c’est pour un ami)

36

Pour les icônes, il faut installer cupertino icon via HACS

Je trouves les images sur le site https://freesvg.org . Vous devez les ajouter au dossier /config/custom_components/cupertino/data/ios

2 « J'aime »