Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Lovelace themen

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    3.1k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    1.1k

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.4k

Lovelace themen

Scheduled Pinned Locked Moved Visualisierung
25 Posts 5 Posters 3.0k Views 5 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • zeveroxZ Offline
    zeveroxZ Offline
    zeverox
    wrote on last edited by
    #3

    @David-G okay und der code wäre für mich der ?

    Render themes, creates them as separate files and as

    one combined file ios-themes.yaml.

    Part of https://github.com/basnijholt/lovelace-ios-themes

    from pathlib import Path

    import jinja2
    import yaml
    from PIL import Image
    from PIL import ImageColor

    with open("settings-light-dark.yaml", "r") as f:
    all_settings = yaml.safe_load(f)

    def parse(x):
    return x if "#" not in x else f'"{x}"'

    def average_color(fname):
    color = Image.open(fname).resize((1, 1)).getpixel((0, 0))
    hex_color = "#{:02x}{:02x}{:02x}".format(*color)
    rgb_color = ImageColor.getrgb(hex_color)
    return "rgba({}, {}, {}, 0.4)".format(*rgb_color)

    BACKGROUND_COLORS = {
    # Suggested by @okets in issue #42
    "blue-red": "rgba(30, 2, 61, 0.4)",
    "dark-blue": "rgba(48, 69, 124, 0.4)",
    "dark-green": "rgba(48, 89, 71, 0.4)",
    "light-blue": "rgba(1, 195, 220, 0.4)",
    "light-green": "rgba(114, 188, 139, 0.4)",
    "orange": "rgba(255, 229, 116, 0.4)",
    "red": "rgba(234, 88, 63, 0.4)",
    }

    folder_fname = [
    ("hacsfiles", Path("themes/ios-themes.yaml")),
    ("local", Path("manual-install/ios-themes.yaml")),
    ]
    for folder, fname in folder_fname:
    fname.parent.mkdir(parents=True, exist_ok=True)
    with fname.open("w") as f:
    f.write("---\n# From https://github.com/basnijholt/lovelace-ios-themes")
    for background in Path("themes").glob("homekit-bg-*.jpg"):
    color = background.stem.split("homekit-bg-")[-1]
    if color in BACKGROUND_COLORS:
    app_header_background_color = BACKGROUND_COLORS[color]
    else:
    app_header_background_color = average_color(background)
    for which in ["light", "dark"]:
    for state_icon_yellow in [False, True]:
    settings = {k: parse(v[which]) for k, v in all_settings.items()}

                if state_icon_yellow:
                    settings["state_icon_active_color"] = "rgba(255, 214, 10, 1)"
                    suffix = ""
                else:
                    suffix = "-alternative"
    
                with open("template.jinja2") as f:
                    template = jinja2.Template("".join(f.readlines()))
    
                result = template.render(
                    **settings,
                    folder=folder,
                    which=which,
                    app_header_background_color=app_header_background_color,
                    background_jpg=str(background.name),
                    color=color,
                    suffix=suffix,
                )
    
                with fname.open("a") as f:
                    f.write("\n" + result + "\n")
    
    David G.D 1 Reply Last reply
    0
    • zeveroxZ zeverox

      @David-G okay und der code wäre für mich der ?

      Render themes, creates them as separate files and as

      one combined file ios-themes.yaml.

      Part of https://github.com/basnijholt/lovelace-ios-themes

      from pathlib import Path

      import jinja2
      import yaml
      from PIL import Image
      from PIL import ImageColor

      with open("settings-light-dark.yaml", "r") as f:
      all_settings = yaml.safe_load(f)

      def parse(x):
      return x if "#" not in x else f'"{x}"'

      def average_color(fname):
      color = Image.open(fname).resize((1, 1)).getpixel((0, 0))
      hex_color = "#{:02x}{:02x}{:02x}".format(*color)
      rgb_color = ImageColor.getrgb(hex_color)
      return "rgba({}, {}, {}, 0.4)".format(*rgb_color)

      BACKGROUND_COLORS = {
      # Suggested by @okets in issue #42
      "blue-red": "rgba(30, 2, 61, 0.4)",
      "dark-blue": "rgba(48, 69, 124, 0.4)",
      "dark-green": "rgba(48, 89, 71, 0.4)",
      "light-blue": "rgba(1, 195, 220, 0.4)",
      "light-green": "rgba(114, 188, 139, 0.4)",
      "orange": "rgba(255, 229, 116, 0.4)",
      "red": "rgba(234, 88, 63, 0.4)",
      }

      folder_fname = [
      ("hacsfiles", Path("themes/ios-themes.yaml")),
      ("local", Path("manual-install/ios-themes.yaml")),
      ]
      for folder, fname in folder_fname:
      fname.parent.mkdir(parents=True, exist_ok=True)
      with fname.open("w") as f:
      f.write("---\n# From https://github.com/basnijholt/lovelace-ios-themes")
      for background in Path("themes").glob("homekit-bg-*.jpg"):
      color = background.stem.split("homekit-bg-")[-1]
      if color in BACKGROUND_COLORS:
      app_header_background_color = BACKGROUND_COLORS[color]
      else:
      app_header_background_color = average_color(background)
      for which in ["light", "dark"]:
      for state_icon_yellow in [False, True]:
      settings = {k: parse(v[which]) for k, v in all_settings.items()}

                  if state_icon_yellow:
                      settings["state_icon_active_color"] = "rgba(255, 214, 10, 1)"
                      suffix = ""
                  else:
                      suffix = "-alternative"
      
                  with open("template.jinja2") as f:
                      template = jinja2.Template("".join(f.readlines()))
      
                  result = template.render(
                      **settings,
                      folder=folder,
                      which=which,
                      app_header_background_color=app_header_background_color,
                      background_jpg=str(background.name),
                      color=color,
                      suffix=suffix,
                  )
      
                  with fname.open("a") as f:
                      f.write("\n" + result + "\n")
      
      David G.D Offline
      David G.D Offline
      David G.
      wrote on last edited by
      #4

      @zeverox

      Dich interessiert nur der Inhalt dieser Datei
      https://github.com/basnijholt/lovelace-ios-themes/blob/master/themes/ios-themes.yamlt
      zum einfügen in den Settings.

      Die Bilder musst du wenn gewünscht auch in den Settings von Lovelace unter "Eigene Karten" hochladen.
      Dann im Theme aber überall wo

      /hacsfiles/themes/ios-themes/xxxxx.jpg')"
      

      zu

      /cards/xxxxx.jpg')"
      

      abändern

      Zeigt eure Lovelace-Visualisierung klick
      (Auch ideal um sich Anregungen zu holen)

      Meine Tabellen für eure Visualisierung klick

      zeveroxZ 1 Reply Last reply
      0
      • David G.D David G.

        @zeverox

        Dich interessiert nur der Inhalt dieser Datei
        https://github.com/basnijholt/lovelace-ios-themes/blob/master/themes/ios-themes.yamlt
        zum einfügen in den Settings.

        Die Bilder musst du wenn gewünscht auch in den Settings von Lovelace unter "Eigene Karten" hochladen.
        Dann im Theme aber überall wo

        /hacsfiles/themes/ios-themes/xxxxx.jpg')"
        

        zu

        /cards/xxxxx.jpg')"
        

        abändern

        zeveroxZ Offline
        zeveroxZ Offline
        zeverox
        wrote on last edited by
        #5

        @david-g
        hmm irgendwas mache ich falsch.....

        David G.D 1 Reply Last reply
        0
        • zeveroxZ zeverox

          @david-g
          hmm irgendwas mache ich falsch.....

          David G.D Offline
          David G.D Offline
          David G.
          wrote on last edited by David G.
          #6

          @zeverox

          Was mehr Infos was nichtig klappt wäre gut ^^.

          Hab es bei mir eingefügt und kann direkt die Themes wählen:

          Screenshot 2023-05-26 160452.png

          Zeigt eure Lovelace-Visualisierung klick
          (Auch ideal um sich Anregungen zu holen)

          Meine Tabellen für eure Visualisierung klick

          1 Reply Last reply
          0
          • zeveroxZ Offline
            zeveroxZ Offline
            zeverox
            wrote on last edited by zeverox
            #7

            Ich kann das themen namen nicht ändern wenn ich den code einfüge pasirt nicht
            b5fe9217-e00b-46be-b012-bf0f0c81fb10-image.png

            David G.D 1 Reply Last reply
            0
            • zeveroxZ zeverox

              Ich kann das themen namen nicht ändern wenn ich den code einfüge pasirt nicht
              b5fe9217-e00b-46be-b012-bf0f0c81fb10-image.png

              David G.D Offline
              David G.D Offline
              David G.
              wrote on last edited by
              #8

              @zeverox

              Und du hast keinen c&p-Fehler?

              Hast auf git ja das Symbol zum kopieren.

              Screenshot 2023-05-26 160929.png

              Zeigt eure Lovelace-Visualisierung klick
              (Auch ideal um sich Anregungen zu holen)

              Meine Tabellen für eure Visualisierung klick

              zeveroxZ 1 Reply Last reply
              0
              • David G.D David G.

                @zeverox

                Und du hast keinen c&p-Fehler?

                Hast auf git ja das Symbol zum kopieren.

                Screenshot 2023-05-26 160929.png

                zeveroxZ Offline
                zeveroxZ Offline
                zeverox
                wrote on last edited by
                #9

                @david-g
                Ja genau so habe ich es gemacht.

                David G.D 1 Reply Last reply
                0
                • zeveroxZ zeverox

                  @david-g
                  Ja genau so habe ich es gemacht.

                  David G.D Offline
                  David G.D Offline
                  David G.
                  wrote on last edited by David G.
                  #10

                  @zeverox

                  Gespeichert und Instanz neu gestartet?
                  Aktuelle Lovelace Version?

                  Mehr wüsste ich jetzt auch nicht.

                  Zeigt eure Lovelace-Visualisierung klick
                  (Auch ideal um sich Anregungen zu holen)

                  Meine Tabellen für eure Visualisierung klick

                  zeveroxZ 2 Replies Last reply
                  0
                  • David G.D David G.

                    @zeverox

                    Gespeichert und Instanz neu gestartet?
                    Aktuelle Lovelace Version?

                    Mehr wüsste ich jetzt auch nicht.

                    zeveroxZ Offline
                    zeveroxZ Offline
                    zeverox
                    wrote on last edited by
                    #11

                    @david-g
                    jezt hat es geklapt perfekt
                    danke dir vielmals

                    1 Reply Last reply
                    0
                    • David G.D David G.

                      @zeverox

                      Gespeichert und Instanz neu gestartet?
                      Aktuelle Lovelace Version?

                      Mehr wüsste ich jetzt auch nicht.

                      zeveroxZ Offline
                      zeveroxZ Offline
                      zeverox
                      wrote on last edited by
                      #12

                      @david-g
                      Eine frgae häte ich noch wie geht es mit den karten? also wie füge ich das ein z.B.
                      https://github.com/Deejayfool/hass-shutter-card

                      David G.D 1 Reply Last reply
                      0
                      • zeveroxZ zeverox

                        @david-g
                        Eine frgae häte ich noch wie geht es mit den karten? also wie füge ich das ein z.B.
                        https://github.com/Deejayfool/hass-shutter-card

                        David G.D Offline
                        David G.D Offline
                        David G.
                        wrote on last edited by David G.
                        #13

                        @zeverox

                        Sehr gut.

                        Da hochladen wo man die Bilder hoch lädt.
                        Wie der Name schon sagt "Eigene Karten".

                        In deinem Fall die hass-shutter-card.js.
                        Die Karten sind IMMER die .js Dateien.

                        Wie man diese benutzt sieht man in der Doku der jeweiligen Karten. Haben meistens keine grafische Konfiguration.

                        Zeigt eure Lovelace-Visualisierung klick
                        (Auch ideal um sich Anregungen zu holen)

                        Meine Tabellen für eure Visualisierung klick

                        zeveroxZ 1 Reply Last reply
                        0
                        • David G.D David G.

                          @zeverox

                          Sehr gut.

                          Da hochladen wo man die Bilder hoch lädt.
                          Wie der Name schon sagt "Eigene Karten".

                          In deinem Fall die hass-shutter-card.js.
                          Die Karten sind IMMER die .js Dateien.

                          Wie man diese benutzt sieht man in der Doku der jeweiligen Karten. Haben meistens keine grafische Konfiguration.

                          zeveroxZ Offline
                          zeveroxZ Offline
                          zeverox
                          wrote on last edited by
                          #14

                          @david-g
                          hi kann ich hier einparr fragen stellen?

                          David G.D 1 Reply Last reply
                          0
                          • zeveroxZ zeverox

                            @david-g
                            hi kann ich hier einparr fragen stellen?

                            David G.D Offline
                            David G.D Offline
                            David G.
                            wrote on last edited by David G.
                            #15

                            @zeverox

                            Kannst du gerne machen.

                            Als kleiner Hinweis, dort findet man einiges:
                            https://forum.iobroker.net/topic/35937/der-ultimative-iobroker-lovelace-leitfaden-dokumentation

                            Und hier der offizielle Thread:
                            https://forum.iobroker.net/topic/59435/test-lovelace-3-x/230?_=1685256375828

                            Zeigt eure Lovelace-Visualisierung klick
                            (Auch ideal um sich Anregungen zu holen)

                            Meine Tabellen für eure Visualisierung klick

                            zeveroxZ 1 Reply Last reply
                            0
                            • David G.D David G.

                              @zeverox

                              Kannst du gerne machen.

                              Als kleiner Hinweis, dort findet man einiges:
                              https://forum.iobroker.net/topic/35937/der-ultimative-iobroker-lovelace-leitfaden-dokumentation

                              Und hier der offizielle Thread:
                              https://forum.iobroker.net/topic/59435/test-lovelace-3-x/230?_=1685256375828

                              zeveroxZ Offline
                              zeveroxZ Offline
                              zeverox
                              wrote on last edited by
                              #16

                              @david-g
                              wo kann ich am besten fragen stellen?

                              David G.D 1 Reply Last reply
                              0
                              • zeveroxZ zeverox

                                @david-g
                                wo kann ich am besten fragen stellen?

                                David G.D Offline
                                David G.D Offline
                                David G.
                                wrote on last edited by
                                #17

                                @zeverox

                                Hier oder im zweiten link von eben.
                                Im offiziellen Thread lesen mehr Leute mit die helfen können.

                                Zeigt eure Lovelace-Visualisierung klick
                                (Auch ideal um sich Anregungen zu holen)

                                Meine Tabellen für eure Visualisierung klick

                                1 Reply Last reply
                                0
                                • EnyE Offline
                                  EnyE Offline
                                  Eny
                                  wrote on last edited by
                                  #18

                                  Halli Hallo.

                                  Ich hänge mich gerne mal hier mit an.

                                  Ich habe auch probleme mit dem Theme Ios.

                                  artet Lovelace nicht mehr zb. David.
                                  Auswählen von dem Thema, fehlanzeige, es wird nur Standart angezeigt.

                                  
                                  
                                  host.Tower
                                  2025-10-07 21:01:09.255	info	Restart adapter system.adapter.lovelace.0 because enabled
                                  
                                  host.Tower
                                  2025-10-07 21:01:09.255	error	instance system.adapter.lovelace.0 terminated with code 2 (INVALID_ADAPTER_CONFIG)
                                  
                                  lovelace.0
                                  2025-10-07 21:01:08.705	info	http server listening on port 8091
                                  
                                  lovelace.0
                                  2025-10-07 21:01:08.702	warn	Terminated (INVALID_ADAPTER_CONFIG): Without reason
                                  
                                  lovelace.0
                                  2025-10-07 21:01:08.702	error	Initialization error: YAMLException: end of the stream or a document separator is expected (6:1) 3 | # 4 | # iOS Light Mode Theme - blue-red 5 | # 6 | ios-light-mode-blue-red-alternative: -----^ 7 | # Global 8 | background-image: "center / co ...
                                  
                                  lovelace.0
                                  2025-10-07 21:01:08.687	info	starting. Version 5.0.1 in /opt/iobroker/node_modules/iobroker.lovelace, node: v22.19.0, js-controller: 7.0.6
                                  
                                  host.Tower
                                  2025-10-07 21:01:05.992	info	instance system.adapter.lovelace.0 in version "5.0.1" started with pid 2842898
                                  

                                  Knall ich oben am Code Standart: rein. Startet Lovelace, aber Thema ist "Standart"

                                  Installierte Version: 5.0.1 ( Auch bei älteren Versionen )

                                  Jemand eine Idee wo ich anfangen soll zu suchen :) ?

                                  Bin wieder für jeden Tipp dankbar :)

                                  David G.D 1 Reply Last reply
                                  0
                                  • EnyE Eny

                                    Halli Hallo.

                                    Ich hänge mich gerne mal hier mit an.

                                    Ich habe auch probleme mit dem Theme Ios.

                                    artet Lovelace nicht mehr zb. David.
                                    Auswählen von dem Thema, fehlanzeige, es wird nur Standart angezeigt.

                                    
                                    
                                    host.Tower
                                    2025-10-07 21:01:09.255	info	Restart adapter system.adapter.lovelace.0 because enabled
                                    
                                    host.Tower
                                    2025-10-07 21:01:09.255	error	instance system.adapter.lovelace.0 terminated with code 2 (INVALID_ADAPTER_CONFIG)
                                    
                                    lovelace.0
                                    2025-10-07 21:01:08.705	info	http server listening on port 8091
                                    
                                    lovelace.0
                                    2025-10-07 21:01:08.702	warn	Terminated (INVALID_ADAPTER_CONFIG): Without reason
                                    
                                    lovelace.0
                                    2025-10-07 21:01:08.702	error	Initialization error: YAMLException: end of the stream or a document separator is expected (6:1) 3 | # 4 | # iOS Light Mode Theme - blue-red 5 | # 6 | ios-light-mode-blue-red-alternative: -----^ 7 | # Global 8 | background-image: "center / co ...
                                    
                                    lovelace.0
                                    2025-10-07 21:01:08.687	info	starting. Version 5.0.1 in /opt/iobroker/node_modules/iobroker.lovelace, node: v22.19.0, js-controller: 7.0.6
                                    
                                    host.Tower
                                    2025-10-07 21:01:05.992	info	instance system.adapter.lovelace.0 in version "5.0.1" started with pid 2842898
                                    

                                    Knall ich oben am Code Standart: rein. Startet Lovelace, aber Thema ist "Standart"

                                    Installierte Version: 5.0.1 ( Auch bei älteren Versionen )

                                    Jemand eine Idee wo ich anfangen soll zu suchen :) ?

                                    Bin wieder für jeden Tipp dankbar :)

                                    David G.D Offline
                                    David G.D Offline
                                    David G.
                                    wrote on last edited by David G.
                                    #19

                                    @eny
                                    Laut log hast du einen Fehler in deiner yaml
                                    Falls ich es richtig unterpretiere in Zeile 6.

                                    Gib in Google mal Yaml tester oder ähnlich ein. Gibt einige Seiten zum validieren.
                                    Es kommt wirklich aus jede Leerstelle an.

                                    Zeigt eure Lovelace-Visualisierung klick
                                    (Auch ideal um sich Anregungen zu holen)

                                    Meine Tabellen für eure Visualisierung klick

                                    EnyE 1 Reply Last reply
                                    0
                                    • David G.D David G.

                                      @eny
                                      Laut log hast du einen Fehler in deiner yaml
                                      Falls ich es richtig unterpretiere in Zeile 6.

                                      Gib in Google mal Yaml tester oder ähnlich ein. Gibt einige Seiten zum validieren.
                                      Es kommt wirklich aus jede Leerstelle an.

                                      EnyE Offline
                                      EnyE Offline
                                      Eny
                                      wrote on last edited by
                                      #20

                                      @david-g

                                      Vielen dank für die Antwort.

                                      Habe nun die Background Bilkder hochgeladen, nun startet er ohne fehler.

                                      Leider aber unter Themen nichts auswählbar, Auch an sich siehts der code in meinen Augen nicht so aus wie es sollte, alles Grau :)

                                      Habe die ymal testen lassen, Originale von github wie auch ich sie benutzen würde. Alles IO.

                                      Irgend etwas mache ich falsch oder übersehe ich^^

                                      David G.D 1 Reply Last reply
                                      0
                                      • EnyE Eny

                                        @david-g

                                        Vielen dank für die Antwort.

                                        Habe nun die Background Bilkder hochgeladen, nun startet er ohne fehler.

                                        Leider aber unter Themen nichts auswählbar, Auch an sich siehts der code in meinen Augen nicht so aus wie es sollte, alles Grau :)

                                        Habe die ymal testen lassen, Originale von github wie auch ich sie benutzen würde. Alles IO.

                                        Irgend etwas mache ich falsch oder übersehe ich^^

                                        David G.D Offline
                                        David G.D Offline
                                        David G.
                                        wrote on last edited by
                                        #21

                                        @eny
                                        Mal ein anderes Theme getestet?
                                        Eigentlich muss man das nur in den Settings einfügen.

                                        Mit dem auswählen über DPs hab ich keine Ahnung. Nutze nur ein Theme.

                                        Zeigt eure Lovelace-Visualisierung klick
                                        (Auch ideal um sich Anregungen zu holen)

                                        Meine Tabellen für eure Visualisierung klick

                                        EnyE 1 Reply Last reply
                                        0
                                        • David G.D David G.

                                          @eny
                                          Mal ein anderes Theme getestet?
                                          Eigentlich muss man das nur in den Settings einfügen.

                                          Mit dem auswählen über DPs hab ich keine Ahnung. Nutze nur ein Theme.

                                          EnyE Offline
                                          EnyE Offline
                                          Eny
                                          wrote on last edited by
                                          #22

                                          @david-g said in Lovelace themen:

                                          auswählen über DPs hab ich keine Ahnung. Nutze nur ein Theme.

                                          Ja ich habe so ziemlich jedes von hier getestet :)

                                          [https://smarthomescene.com/guides/top-10-home-assistant-lovelace-themes/](link url)

                                          Echt ratlos was ich falsch machen kann :D

                                          David G.D GarfonsoG 2 Replies Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          739

                                          Online

                                          32.7k

                                          Users

                                          82.3k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Home
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe