Lovelace themen

[David G.]

@zeverox sagte in Lovelace themen:

Hallo ich breucht bitte etwas unterstüzung.
ich habe Lovelace als vis und ich möchte ein Themen nutzen aber wüste nicht wie.

Das Themen---> https://github.com/basnijholt/lovelace-ios-themes
mfG Erik.W

Enfach bei den Settings vom Adapter unter Theme reinkopieren. Dann kannst du es etwas weiter oben auswählen.

Mein Theme hab ich "normal" genannt......

[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.]

@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

[zeverox]

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

[David G.]

@zeverox

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

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

[zeverox]

Ich kann das themen namen nicht ändern wenn ich den code einfüge pasirt nicht

[David G.]

@zeverox

Und du hast keinen c&p-Fehler?

Hast auf git ja das Symbol zum kopieren.

[zeverox]

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

[David G.]

@zeverox

Gespeichert und Instanz neu gestartet?
Aktuelle Lovelace Version?

Mehr wüsste ich jetzt auch nicht.

[zeverox]

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

[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.]

@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.

[zeverox]

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

[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

[zeverox]

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

[David G.]

@zeverox

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

[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.]

@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.

[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.]

@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.