{"id":24627812,"url":"https://github.com/th3jesta/ha-lcars","last_synced_at":"2026-03-14T02:40:18.516Z","repository":{"id":60200955,"uuid":"534353896","full_name":"th3jesta/ha-lcars","owner":"th3jesta","description":"LCARS theme for Home Assistant","archived":false,"fork":false,"pushed_at":"2026-03-08T17:04:23.000Z","size":6234,"stargazers_count":505,"open_issues_count":23,"forks_count":40,"subscribers_count":17,"default_branch":"master","last_synced_at":"2026-03-08T20:58:52.925Z","etag":null,"topics":["ha-theme","hacs","hacs-theme","home-assistant","homeassistant","homeassistant-themes","lcars","lcars-interface","lcars-style","startrek","themes"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/th3jesta.png","metadata":{"files":{"readme":"README-DE.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-09-08T18:57:51.000Z","updated_at":"2026-03-08T17:04:27.000Z","dependencies_parsed_at":"2024-12-30T13:19:10.490Z","dependency_job_id":"4e69a167-e51f-4d1a-8fdf-b80d5d51a1fb","html_url":"https://github.com/th3jesta/ha-lcars","commit_stats":null,"previous_names":[],"tags_count":47,"template":false,"template_full_name":null,"purl":"pkg:github/th3jesta/ha-lcars","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/th3jesta%2Fha-lcars","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/th3jesta%2Fha-lcars/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/th3jesta%2Fha-lcars/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/th3jesta%2Fha-lcars/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/th3jesta","download_url":"https://codeload.github.com/th3jesta/ha-lcars/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/th3jesta%2Fha-lcars/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30486282,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-14T01:54:10.014Z","status":"online","status_checked_at":"2026-03-14T02:00:06.612Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ha-theme","hacs","hacs-theme","home-assistant","homeassistant","homeassistant-themes","lcars","lcars-interface","lcars-style","startrek","themes"],"created_at":"2025-01-25T05:01:51.487Z","updated_at":"2026-03-14T02:40:18.501Z","avatar_url":"https://github.com/th3jesta.png","language":"CSS","funding_links":[],"categories":["Others","Python","Themes"],"sub_categories":["🖥️ Kiosk \u0026 wallpanel"],"readme":"**Haftungsausschluss: Diese Readme-Datei wurde automatisch von ChatGPT-5mini übersetzt. Wir übernehmen keine Verantwortung für mögliche Ungenauigkeiten oder Fehler in der Übersetzung. Bitte beachten Sie, dass dies eine automatisierte Übersetzung ist.**\n\n**(Übersetzung gültig ab Version 4.0.0 des Themes.)**\n# Home Assistant LCARS\nStar Trek LCARS-Theme für Home Assistant\n\n[![hacs_badge](https://img.shields.io/badge/HACS-Default-41BDF5.svg?style=for-the-badge)](https://github.com/hacs/integration) \n\n\u003ca href=\"https://discord.gg/gGxud6Y6WJ\"\u003e\u003cimg src=\"https://discordapp.com/api/guilds/1059179538371858493/widget.png?style=banner2\" width=\"140px\" alt=\"Discord Banner 2\"/\u003e\u003c/a\u003e\n\nFarb-Codes und Schriftart-Auswahl von https://www.thelcars.com  \n    --Danke Jim Robertus!\n\n# 💥BREAKING CHANGES IN 4.0💥\n1. Home Assistant LCARS basiert auf der Funktionalität von [card-mod](https://github.com/thomasloven/lovelace-card-mod \"card-mod\"). Version 4.x von card-mod enthält zahlreiche inkompatible Änderungen für alle Themes, einschließlich Home Assistant LCARS. Die meisten Standardkarten, die dieses Theme verwenden, sollten sich ohne Probleme aktualisieren. Karten mit benutzerdefiniertem CSS, das über ``card-mod: style:`` angewendet wurde, müssen möglicherweise manuell auf die neuen Element-Selektoren von card-mod aktualisiert werden (z. B. ``hui-card`` statt ``ha-card``). Siehe die [README](https://github.com/thomasloven/lovelace-card-mod/blob/master/README.md) und [README-application](https://github.com/thomasloven/lovelace-card-mod/blob/master/README-application.md) von card-mod als Einstieg.\n2. Aufgrund der oben genannten Änderungen werden einige Karten nicht mehr unterstützt oder benötigen spezielle Workarounds. Der Workaround besteht darin, die Karte in einen vertikalen oder horizontalen Stack zu legen. Dadurch ändert sich, wie card-mod die Karte erkennt und das Theme anwendet. Bekannte problematische Karten:\n   - ⚠️ custom-button-card: Stack-Workaround für einige Theme-Klassen erforderlich. Wenden Sie die gewünschte Theme-Klasse auf den Stack an. Verwenden Sie die Stiloptionen der Custom Button Card, um das gewünschte Aussehen zu erzielen.\n3. Balkenkarten können nun skaliert werden, indem die Schriftgröße der Karte geändert wird (siehe [Tipps und Tricks](#custom-bar-sizes) unten). Daher darf das Markdown **keine** Schriftgrößen enthalten, z. B. die Überschrift ``#``.\n4. Dies ist nahezu eine vollständige Neufassung, einschließlich mehrerer CSS-Optimierungen. Dashboards, die mit früheren Versionen erstellt wurden, müssen möglicherweise aufgrund kleiner Änderungen bei Abständen und Innenabständen leicht angepasst werden.\n\n# 🎉NEUE FEATURES IN 4.0🎉\n### Themed Stacks\nVertikale und horizontale Stacks können jetzt thematisiert werden. Beispiele sind horizontale Stack-Header, die mit Buttons gefüllt sind.\n\u003cp align=\"center\"\u003e\u003cimg width=\"525\" height=\"90\" alt=\"image\" src=\"https://github.com/user-attachments/assets/2ed71eb1-7de2-46be-a3ce-8b8183abd8fe\" /\u003e\u003c/p\u003e\n\n### Buttons als Balken\nNeue Klassen ``button-bar-left`` und ``button-bar-right`` ermöglichen es Buttons, wie Balken auszusehen, einschließlich Icons und Statusanzeigen. Danke an [@bobzer](https://github.com/bobzer) für die Idee!\n\u003cp align=\"center\"\u003e\u003cimg width=\"500\" alt=\"image\" src=\"https://github.com/user-attachments/assets/17f72d65-9f86-419f-b8f8-f685e64481c7\" /\u003e\u003c/p\u003e\n\n### LCARS-Stil-Seitenleiste\nDas Seitenleistenmenü hat ein LCARS-Facelift erhalten! Danke an @3of9 für diese großartige Arbeit!  \n*Nicht alle Dokumentationsbilder wurden aktualisiert, um diese Ergänzung widerzuspiegeln.*\n\u003cp align=\"center\"\u003e\u003cimg width=\"150\" alt=\"themed sidebar\" src=\"https://github.com/user-attachments/assets/b9e1e417-e597-4190-9fa8-d7d29792fb34\" /\u003e\u003c/p\u003e\n\n### Benutzerdefinierter Text in der Kopfzeituhr\nMit einem optionalen Helper können Sie Text zur Uhr im Header hinzufügen!\n\u003cp align=\"center\"\u003e\u003cimg width=\"300\" alt=\"custom text next to the clock\" src=\"https://github.com/user-attachments/assets/cd276787-192b-4b7a-be1e-981bd53705cd\" /\u003e\u003c/p\u003e\n\n## Beispiele\n### Dashboard\n![default](https://github.com/user-attachments/assets/4c90a16c-fac8-4184-8720-a537609c0826)\n\n### Bearbeitungsmodi\n\u003cimg width=\"2695\" height=\"1566\" alt=\"image\" src=\"https://github.com/user-attachments/assets/f11f9f0b-108b-486c-8ef1-6954696873fe\" /\u003e\n\n### Mobile Ansicht\n\u003cimg width=\"300\" alt=\"mobile dashboard\" src=\"https://github.com/user-attachments/assets/958b9880-5ac7-4d7e-a519-f02b33d415d1\" /\u003e\n\u003cimg width=\"300\" alt=\"mobile menu\" src=\"https://github.com/user-attachments/assets/2e311e33-dad9-412c-9426-711999917b57\" /\u003e\n\n### Enthaltene Themes\n\u003cdiv style=\"display: flex; gap: 30px;\"\u003e\n    \u003cimg width=\"300\" alt=\"classic\" src=\"https://github.com/user-attachments/assets/f5636e72-4b21-446b-82e7-03d61e6fd6c8\" /\u003e\n    \u003cimg width=\"300\" alt=\"25C\" src=\"https://github.com/user-attachments/assets/4ba26e42-f965-400c-a21a-96b0d9b8160d\" /\u003e\n    \u003cimg width=\"300\" alt=\"breen\" src=\"https://github.com/user-attachments/assets/5487ad5c-2b1a-42b2-956e-9194b87ba226\" /\u003e\n    \u003cimg width=\"300\" alt=\"cardassia\" src=\"https://github.com/user-attachments/assets/b4a7b0d7-25bd-4094-bb71-1c924f4e295c\" /\u003e\n    \u003cimg width=\"300\" alt=\"kronos\" src=\"https://github.com/user-attachments/assets/3ffcbb74-7c46-4a7a-9bd5-f9589fa56ee3\" /\u003e\n    \u003cimg width=\"300\" alt=\"lower decks\" src=\"https://github.com/user-attachments/assets/470e457f-45ae-4e64-98f0-c8488ca6302c\" /\u003e\n    \u003cimg width=\"300\" alt=\"next gen\" src=\"https://github.com/user-attachments/assets/afbd0924-4ee8-49a1-922b-40392fba3c2d\" /\u003e\n    \u003cimg width=\"300\" alt=\"transporter\" src=\"https://github.com/user-attachments/assets/d2ceb6ee-f23c-4db8-b1ba-da8fd91d47ff\" /\u003e\n    \u003cimg width=\"300\" alt=\"navigation\" src=\"https://github.com/user-attachments/assets/ee1eb005-a09d-4c7d-a65f-ab8bca25600e\" /\u003e\n    \u003cimg width=\"300\" alt=\"romulan\" src=\"https://github.com/user-attachments/assets/461eaa25-ae0b-43d4-8ff9-63139e1c6b7a\" /\u003e\n    \u003cimg width=\"300\" alt=\"red alert\" src=\"https://github.com/user-attachments/assets/d1989f26-36f2-46a2-9df9-b3037b773a3f\" /\u003e\n    \u003cimg width=\"300\" alt=\"blue alert\" src=\"https://github.com/user-attachments/assets/aca17e2c-e037-4b1d-9b77-a1d3ca5411ff\" /\u003e\n    \u003cimg width=\"300\" alt=\"yellow alert\" src=\"https://github.com/user-attachments/assets/bc57cec2-f31b-43a3-a4cf-3cc6299763ef\" /\u003e\n\u003c/div\u003e\nClassic, 25th Century, Next Generation, Lower Decks, Romulus, Cardassia, Kronos, Nemesis (und mehr!).\n\n## Präambel\nIch bin definitiv kein echter Webentwickler und habe mich mit Hilfe von Stack Exchange und verschiedenen Blogs zu CSS-Techniken irgendwie zur ersten Version durchgewurschtelt. Mein Hauptziel war und ist es, dieses Theme zu 100 % in CSS/JS zu halten, ohne zusätzliche Assets außer der Schriftart. Ich bin mir sicher, dass es bessere Wege gibt, alles umzusetzen, was ich bisher getan habe, daher sind PRs willkommen. Ich werde die Dinge weiter verbessern, während ich lerne, und mehr Kommentare in mein CSS einfügen, damit ihr nachvollziehen könnt, was die einzelnen Teile tun – und mir vielleicht sagen könnt, wie man es besser machen kann. Ich habe dieses Theme mit den meisten Standardkarten getestet, die mit Home Assistant ausgeliefert werden, sowie mit einigen aus HACS wie der Mail- und Packages-Karte. Trotzdem bin ich sicher, dass es noch Karten gibt, die stark fehlerhaft sein können. Erstellt einfach ein Issue, und ich kümmere mich darum.\n\n## Installationsanweisungen\n### Voraussetzungen\n#### I. Themes aktivieren und card-mod installieren\n\n1. Installieren Sie `card-mod` gemäß den Anweisungen auf seiner [GitHub-Seite](https://github.com/thomasloven/lovelace-card-mod \"card-mod\").\n\n2. Stellen Sie sicher, dass Sie in Ihrer ``configuration.yaml``-Datei Folgendes haben:\n```yaml\nfrontend:\n  javascript_version: latest\n  themes: !include_dir_merge_named themes\n  extra_module_url:\n    - /local/community/lovelace-card-mod/card-mod.js #or wherever you ended up putting card-mod.js\n```\n3. Unter dem Home Assistant **Config**-Ordner erstellen Sie einen neuen Ordner mit dem Namen **themes**.\n4. **Starten** Sie Home Assistant neu, um die Änderungen zu übernehmen.\n\n#### II. Schriftarten hinzufügen\n\nDieses Theme erfordert, dass Sie entweder die Schriftart `Tungsten` oder `Antonio` hinzufügen. Wenn beide verfügbar sind, verwendet das Theme Tungsten. Tungsten ist die tatsächlich in den späteren Staffeln von *Picard* verwendete Schriftart. Antonio ist sehr ähnlich und etwas weniger horizontal komprimiert. \n\nA. Tungsten[^1] ist für den persönlichen Gebrauch kostenlos erhältlich bei [Font Downloader](https://fontdownloader.net/tungsten-font/).  \n   1. Laden Sie die Schriftdateien herunter und entpacken Sie sie  \n   2. Platzieren Sie `Tungsten-Medium.woff2` und `Tungsten-Bold.woff2` in `\u003chome-assistant-directory\u003e/www/community/fonts/`  \n   3. Laden Sie Tungsten.css vom HA-LCARS-GitHub herunter und legen Sie diese ebenfalls in `\u003chome-assistant-directory\u003e/www/community/fonts/` ab  \n   4. Navigieren Sie zu `Settings` → `Dashboards` → `3-dot menu` → `Resources` und fügen Sie die folgenden neuen Ressourcen hinzu:  \n      `/hacsfiles/fonts/tungsten.css` und wählen Sie 'stylesheet'  \n\n##### -ODER-\n\nB. Antonio[^2] ist über Google Fonts verfügbar und kann als Dashboard-Ressource hinzugefügt werden  \n   1. Navigieren Sie zu `Settings` → `Dashboards` → `3-dot menu` → `Resources` und fügen Sie die folgenden neuen Ressourcen hinzu:  \n       `https://fonts.googleapis.com/css2?family=Antonio:wght@400;700\u0026display=swap` und wählen Sie 'stylesheet'\n\n#### III. JavaScript-Datei hinzufügen\n\nDieses Theme erfordert, dass Sie eine JavaScript-Datei zu Ihren Dashboard-Ressourcen hinzufügen.\n\nA. Navigieren Sie zu `Settings` → `Dashboards` → `3-dot menu` → `Resources` und fügen Sie die folgenden neuen Ressourcen hinzu:  \n   `https://cdn.jsdelivr.net/gh/th3jesta/ha-lcars@js-main/lcars.js` und wählen Sie 'javascript'\n\n##### -ODER-\n\nB. Wenn Sie einer zufälligen, auf einem CDN gehosteten JavaScript-Datei nicht vertrauen (verständlich!), können Sie die Datei `lcars.js` direkt von GitHub herunterladen, selbst überprüfen und in Ihrem `\u003chome-assistant-directory\u003e/www/community/` ablegen. \n   - **Dies muss bei jedem HA-LCARS-Update erneut durchgeführt werden.**\n   - **Fügen Sie `/local/community/lcars.js` nicht zu `extra_module_url` hinzu; es wird dort nicht funktionieren.**\n\n\u003e [!WARNING]\n\u003e **WENN SIE CLOUDFLARE VOR IHRER WEBSITE VERWENDEN:**  \n\u003e Leeren Sie den Site-Cache in CloudFlare (Purge Cache unter Quick Actions), wann immer Sie die lokale Datei aktualisieren oder wenn Sie den JSDelivr-Link verwenden und eine neue Version von HA-LCARS veröffentlicht wird. Dies muss sowohl bei Verwendung des JSDelivr-Links als auch bei der Ablage im www-Ordner erfolgen. Sofern nicht anders konfiguriert, cached CloudFlare alles, was auf Ihrer Website möglich ist.\n\n#### III. Die Uhr einrichten\nDamit die Uhr funktioniert, müssen Sie die Integration **Time \u0026 Date** einrichten, indem Sie Folgendes zu Ihrer configuration.yaml hinzufügen:\n```yaml\nsensor:\n  - platform: time_date\n    display_options:\n      - 'time'\n      - 'date'\n      - 'date_time'\n      - 'date_time_utc'\n      - 'date_time_iso'\n      - 'time_date'\n      - 'time_utc'\n```\n\nWeitere Informationen:\nhttps://www.home-assistant.io/integrations/time_date/\n\n\u003e[!NOTE]\n\u003e Möglicherweise möchten Sie diese neuen Time-\u0026-Date-Entitäten aus der Recorder-Integration von Home Assistant entfernen, damit Ihre Datenbank nicht durch Aktualisierungen im Sekundentakt aufgebläht wird. Beispiele, wie Sie dies tun können: https://www.home-assistant.io/integrations/recorder/#common-filtering-examples\n\n#### IV. Hilfsentitäten erstellen\nDieses Theme verfügt über Umschaltsteuerungen für Sound und Texturen, Zahlensteuerungen für die Rahmengrößen sowie einen optionalen Template-Sensor zum Hinzufügen von benutzerdefiniertem Text zur Kopfzeile. Erstellen Sie diese Hilfsentitäten, indem Sie zu ``Settings`` → ``Devices \u0026 Services`` → ``Helpers`` navigieren und zwei vom Typ **Toggle**, zwei vom Typ **Number** sowie eine vom Typ **Template** erstellen, benannt wie unten angegeben:\n- LCARS Sound (Entity-ID sollte `input_boolean.lcars_sound` sein)\n  - Schaltet Tasten- und Tippgeräusche ein bzw. aus\n- LCARS Texture (Entity-ID sollte `input_boolean.lcars_texture` sein)\n  - Schaltet ein Körnungsmuster und einen Hintergrundbeleuchtungseffekt ein bzw. aus\n- LCARS Vertical (Entity-ID sollte `input_number.lcars_vertical` sein)\n  - Legt die Breite der vertikalen Rahmen fest\n  - Mindestwert: 26\n  - Maximalwert: 60\n- LCARS Horizontal (Entity-ID sollte `input_number.lcars_horizontal` sein)\n  - Legt die Breite der horizontalen Rahmen fest\n  - Mindestwert: 6\n  - Maximalwert: 60\n- Optional: LCARS Header (Entity-ID sollte `sensor.lcars_header` sein)\n  - Fügt dem Uhrenbereich der Kopfzeile Text hinzu\n  - Beispiel-Template: `{{ \"LCARS \" + states('sensor.time') }}`\n\u003cimg height=\"276\" alt=\"entities for LCARS sound, texture, and borders\" src=\"https://github.com/user-attachments/assets/bc9956d6-85bb-424f-9890-dcbc4bed19d7\" /\u003e\n\nDiese Entitäten können direkt über die jeweilige Entitätsansicht gesteuert werden, oder Sie können sogar Schaltflächen zu Ihrem Dashboard hinzufügen, um sie zu steuern – genau wie bei jeder anderen Entität.\n\n\n### Theme installieren\nInstallieren Sie es über HACS, indem Sie nach \"LCARS\" suchen, oder laden Sie die [neueste Version](https://github.com/th3jesta/ha-lcars/releases/latest) herunter, entpacken Sie sie und legen Sie den Ordner \"lcars\" in Ihren Ordner \"themes\".\n\n### Theme aktivieren\n#### Option 1: Über das Profil\n1. Öffnen Sie Ihr Home-Assistant-**Profil**\n2. Wählen Sie unter **User Settings** → **Themes** eines der neuen LCARS-Themes aus\n\n#### Option 2: Festlegen des standardmäßigen `backend-selected`-Themes\nUm dieses Theme automatisch als vom Backend ausgewähltes Standard-Theme festzulegen, fügen Sie die folgende Automation zu Ihrem Home Assistant hinzu:\n```yaml\n- alias: Set Default Theme\n  description: ''\n  trigger:\n  - event: start\n    platform: homeassistant\n  condition: []\n  action:\n  - data:\n      name: LCARS Default # or whichever other theme is available, like LCARS Lower Decks\n    service: frontend.set_theme\n```\n## Anleitung zur Verwendung\n### Klassen\nDas Theme enthält einige Klassen, die Karten hinzugefügt werden können, um ihnen spezielles Styling zu verleihen:\n```yaml\ncard_mod:\n  class: header\n```\n\u003e[!NOTE]\n\u003e Die Klassennamen dienen nur als Hinweise darauf, für welche Kartentypen sie vorgesehen waren, können jedoch auf jede beliebige Karte angewendet werden. Wie gut sie außerhalb ihres vorgesehenen Einsatzes funktionieren, kann ich jedoch nicht garantieren.\n\nDie Klassen sind wie folgt:  \n\n1. `header-left` `header-right` `header-contained` `header-open` – obere blaue Leiste (im Standard-Theme), gedacht für Markdown- und Heading-Karten, mit einer `H1`-Zeile, die einen Abschnitt startet  \n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e YAML \u003c/td\u003e \u003ctd\u003e Ergebnis \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n    \n```yaml\ntype: markdown\ncard_mod:\n  class: header-left\ncontent: '# header-left'\n\ntype: markdown\ncard_mod:\n  class: header-right\ncontent: '# header-right'\n\ntype: markdown\ncard_mod:\n  class: header-contained\ncontent: '# header-contained'\n\ntype: markdown\ncard_mod:\n  class: header-open\ncontent: '# header-open'\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg width=\"350\" alt=\"ha-lcars-headers\" src=\"https://github.com/user-attachments/assets/02d599cf-5a0b-4ad3-a20f-ff0335e34bd5\" /\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n2. `middle-left` `middle-right` `middle-contained` `middle-blank` – seitliche rote Leiste (im Standard-Theme), gedacht für Nicht-Button-Abschnitte unterhalb des Headers und oberhalb des Footers  \n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e YAML \u003c/td\u003e \u003ctd\u003e Ergebnis \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n    \n```yaml\ntype: markdown\ncard_mod:\n  class: middle-left\ncontent: '# middle-left'\n\ntype: markdown\ncard_mod:\n  class: middle-right\ncontent: '# middle-right'\n\ntype: markdown\ncard_mod:\n  class: middle-contained\ncontent: '# middle-contained'\n    \ntype: markdown\ncard_mod:\n  class: middle-blank\ncontent: '# middle-blank'\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg width=\"350\" alt=\"ha-lcars-middle\" src=\"https://github.com/user-attachments/assets/691bc899-9373-4c35-90e1-de131a83f68a\" /\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n3. `footer-left` `footer-right` `footer-contained` `footer-open` – untere graue Leiste (im Standard-Theme), gedacht für die letzte Karte eines Abschnitts  \n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e YAML \u003c/td\u003e \u003ctd\u003e Ergebnis \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n    \n```yaml\ntype: markdown\ncard_mod:\n  class: footer-left\ncontent: '# footer-left'\n\ntype: markdown\ncard_mod:\n  class: footer-right\ncontent: '# footer-right'\n\ntype: markdown\ncard_mod:\n  class: footer-contained\ncontent: '# footer-contained'\n\ntype: markdown\ncard_mod:\n  class: footer-open\ncontent: '# footer-open'\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg width=\"350\" alt=\"ha-lcars-footers\" src=\"https://github.com/user-attachments/assets/5eb6dc12-c990-4388-bdb9-7ed08884e73c\" /\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n4. `button-small` – quadratische Buttons, gedacht für mittlere Abschnitte sowie horizontale Stacks und Grids  \n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e YAML \u003c/td\u003e \u003ctd\u003e Ergebnis \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n    \n```yaml\ntype: light\nentity: light.jesse_s_desk\nname: Desk Lamp\ncard_mod:\n  class: button-small\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg width=\"107\" alt=\"small button\" src=\"https://user-images.githubusercontent.com/38670315/210178400-5d39e821-328f-4bd5-907d-1863dc2f7ff6.png\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n5. `button-large` – abgerundeter Button, gedacht als Einzelkarte außerhalb von Header/Middle/Footer  \n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e YAML \u003c/td\u003e \u003ctd\u003e Ergebnis \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n    \n```yaml\nshow_name: true\nshow_icon: true\ntype: button\ntap_action:\n  action: call-service\n  service: frontend.reload_themes\n  data: {}\n  target: {}\nshow_state: true\ncard_mod:\n  class: button-large\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg width=\"318\" alt=\"large button\" src=\"https://user-images.githubusercontent.com/38670315/210178438-59da5bce-4f86-4de6-94e3-830aa845293e.png\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n6. `button-lozenge-left` `button-lozenge-right` – pillenförmige Buttons; funktionieren nur auf Standard-Button-Karten; funktionieren auch in horizontalen Stacks und Grids mit bis zu zwei Spalten, mehr Spalten führen zu Anzeigeproblemen  \n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e YAML \u003c/td\u003e \u003ctd\u003e Ergebnis \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n    \n```yaml\nshow_name: true\nshow_icon: true\ntype: button\ntap_action:\n  action: toggle\nentity: switch.speakers\nicon: mdi:speaker-multiple\ncard_mod:\n  class: button-lozenge-left\n  \nshow_name: true\nshow_icon: true\ntype: button\ntap_action:\n  action: toggle\nentity: switch.lightsaber\ncard_mod:\n  class: button-lozenge-right\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg width=\"159\" alt=\"lozenge button\" src=\"https://user-images.githubusercontent.com/38670315/212760869-5a09e9c0-9d61-4b48-af3c-5040a82c1722.png\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n7. `button-bullet-left` `button-bullet-right` – ähnlich wie die Lozenge-Buttons, aber eine Seite quadratisch; gleiche Spalteneinschränkungen  \n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e YAML \u003c/td\u003e \u003ctd\u003e Ergebnis \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n    \n```yaml\nshow_name: true\nshow_icon: true\ntype: button\ntap_action:\n  action: toggle\nentity: light.bedroom_tree\ncard_mod:\n  class: button-bullet-left\n  \nshow_name: true\nshow_icon: true\ntype: button\ntap_action:\n  action: toggle\nentity: switch.counter_lights\ncard_mod:\n  class: button-bullet-right\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg width=\"158\" alt=\"bullet button\" src=\"https://user-images.githubusercontent.com/38670315/212761051-a9cb1cc8-b445-46d5-9270-171249f6d63f.png\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n8. `button-capped-left` `button-capped-right` – ähnlich wie Bullet-Buttons, aber die runde Seite ist abgerundet; gleiche Spalteneinschränkungen  \n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e YAML \u003c/td\u003e \u003ctd\u003e Ergebnis \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n    \n```yaml\nshow_name: true\nshow_icon: true\ntype: button\ntap_action:\n  action: toggle\nentity: light.bathroom\ncard_mod:\n  class: button-capped-left\n  \nshow_name: true\nshow_icon: true\ntype: button\ntap_action:\n  action: toggle\nentity: switch.built_in\ncard_mod:\n  class: button-capped-right\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg width=\"164\" alt=\"capped button\" src=\"https://user-images.githubusercontent.com/38670315/213804819-a9949ad2-4b9c-4539-ae5a-075dec098b11.png\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n9. `button-barrel-left` `button-barrel-right` – ähnlich wie die Bullet-Buttons, aber ohne Rundungen; gleiche Spalteneinschränkungen  \n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e YAML \u003c/td\u003e \u003ctd\u003e Ergebnis \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n    \n```yaml\nshow_name: true\nshow_icon: true\ntype: button\ntap_action:\n  action: toggle\nentity: light.bathroom\ncard_mod:\n  class: button-barrel-left\n  \nshow_name: true\nshow_icon: true\ntype: button\ntap_action:\n  action: toggle\nentity: switch.built_in\ncard_mod:\n  class: button-barrel-right\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg width=\"198\" alt=\"barrel button\" src=\"https://github.com/user-attachments/assets/89ab1a43-276f-43b8-84f2-d6853c2940df\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n10. `button-bar-left` `button-bar-right` – Button im Stil einer Header-Leiste. Nutzt großen Text, Icon und Statusanzeige; gleiche Spalteneinschränkungen  \n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e YAML \u003c/td\u003e \u003ctd\u003e Ergebnis \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n    \n```yaml\nshow_name: true\nshow_icon: true\nshow_state: true\ntype: button\nentity: light.porch_light\nname: Porch\ncard_mod:\n  class: button-bar-left\n\nshow_name: true\nshow_icon: true\nshow_state: true\ntype: button\nentity: light.garage_light\nname: Garage\ncard_mod:\n  class: button-bar-right\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg width=\"635\" height=\"138\" alt=\"bar button\" src=\"https://github.com/user-attachments/assets/17f72d65-9f86-419f-b8f8-f685e64481c7\" /\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n11. `bar-left` `bar-right` `bar-large-left` `bar-large-right` – eigenständige Header-Leisten; nur für Markdown- und Heading-Karten getestet. Standard- und große Versionen verfügbar, siehe [Tips \u0026 Tricks](#custom-bar-sizes) für benutzerdefinierte Größen  \n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e YAML \u003c/td\u003e \u003ctd\u003e Ergebnis \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n    \n```yaml\ntype: markdown\ncontent: 'bar-left'\ncard_mod:\n  class: bar-left\n  \ntype: markdown\ncontent: 'bar-large-left'\ncard_mod:\n  class: bar-large-left\n  \ntype: markdown\ncontent: 'bar-right'\ncard_mod:\n  class: bar-right\n  \ntype: markdown\ncontent: 'bar-large-right'\ncard_mod:\n  class: bar-large-right\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg width=\"689\" height=\"181\" alt=\"bars\" src=\"https://github.com/user-attachments/assets/58a9f540-56f3-4b4d-acfc-02e19967fda8\" /\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n### Eigene Farb-Themes erstellen\nBenutzerdefinierte Themes können am Ende der Datei `lcars.yaml` erstellt werden. Alternativ suchen Sie nach \"===THEMES\", um direkt dorthin zu springen.  \nUm ein eigenes Theme zu erstellen, kopieren Sie den Abschnitt LCARS Default ans Ende der Datei und ändern die Variablen `lcars-ui-*` und `lcars-card-*` nach Belieben, unter Verwendung der Farbreferenzen am Anfang der Datei, der [LCARS Website](https://www.thelcars.com/colors.php) oder durch eigene Definitionen.\n\n## Tipps \u0026 Tricks\n\u003e[!NOTE]\n\u003e Wenn Sie hier noch etwas hinzufügen möchten, erstellen Sie bitte ein Pull Request (PR) mit Ihrem Tipp, und ich werde ihn überprüfen, um ihn dieser Liste hinzuzufügen.\n#### Stacks und Stapelung\nVerwenden Sie Vertical Stack-Karten. Ob in diesem Thema oder einem anderen, sie sind unverzichtbar, um Dashboards organisiert zu halten. In LCARS sollte eine Vertical Stack-Karte zuerst eine Markdown-Karte mit dem Titel der Gruppe und der angewendeten `header`-Klasse enthalten, dann beliebig viele Karten mit der `middle`-Klasse und `button`-Klassen als einzelne Buttons oder in Horizontal Stacks oder Grids, und schließlich die `footer`-Klasse auf die letzte Karte im Vertical Stack. Diese Formation ist in allen Screenshots oben zu sehen. Beispiel:\n\n```yaml\ntype: vertical-stack\ncards:\n  - type: markdown\n    card_mod:\n      class: header-left\n    content: '# Climate'\n  - type: weather-forecast\n    entity: weather.home\n    card_mod:\n      class: middle-left\n  - type: thermostat\n    entity: climate.dining_room\n    card_mod:\n      class: footer-left\n```\n\n#### Button Cards im Abschnitts-Layout\nIm Standard Sections-Layout von Home Assistant werden Button Cards gezwungen, zwei Reihen hoch zu sein. LCARS-Button-Themes funktionieren, sehen dann aber größer aus. Die Größe kann durch Setzen von `grid_options: rows: auto` korrigiert werden.\n\n```yaml\ntype: button\nshow_name: true\nshow_icon: true\nshow_state: true\nentity: light.front_lights\ncard_mod:\n  class: button-lozenge-left\ngrid_options:\n  columns: full\n  rows: auto\n```\n\n#### Abschnitts-Überschriften\nStandardmäßig erstellt Home Assistant am Anfang jeder Sektion eine Heading-Karte. Diese Karten können Header- und Bar-Klassen übernehmen.\n\n```yaml\ntype: heading\nheading_style: title\ngrid_options:\n  columns: 18\n  rows: auto\nheading: LCARS Settings\nicon: local:Star Trek/starfleet-star-badge\nbadges:\n  - type: entity\n    entity: input_number.lcars_horizontal\n  - type: entity\n    entity: input_number.lcars_vertical\n  - type: entity\n    entity: input_boolean.lcars_texture\ncard_mod:\n  class: header-contained\n  style: |\n    :host .title { font-size: 2em;}\n```\n\n#### Leere Header\nMarkdown-Karten mit `## \u0026nbsp;` als Inhalt erzeugen leere Header oder Footer. Größe kann durch Anzahl der `#` angepasst werden.\n\n#### Schriftart auf einer einzelnen Dashboard-Karte\nFür Karten, die das Theme isoliert verwenden, kann die Schriftart pro Karte mit CSS erzwungen werden:\n\n```yaml\ntype: markdown\ncontent: '# Card-level theming'\ntheme: LCARS Default\ncard_mod:\n  class: header-left\n  style: |\n    ha-card \u003e * {\n      font-family: Antonio\n    }\n```\n\n#### Selbst gehostete Fonts\nSie können Fonts selbst hosten (z.B. in einem Auto oder Air-Gapped-Netzwerk). Anleitung: [Issue #69 auf GitHub](https://github.com/th3jesta/ha-lcars/issues/69).\n\n#### Rechtsbündiger Text\nTextausrichtung kann pro Karte per CSS angepasst werden:\n\n```yaml\ncard_mod:\n  class: header-right\n  style: |\n    ha-card {\n      text-align: right;\n    }\n```\n\n#### Button-Hintergrundfarben\nHintergrundfarbe kann abhängig vom Lichtstatus gesetzt werden:\n\n```yaml\ncard_mod:\n  class: button-capped-right\n  style: |\n    ha-card {\n      {% if is_state('light.terasa', 'on') %}\n        {% set rgb_color = state_attr('light.terasa', 'rgb_color') %}\n        background-color: rgba({{ rgb_color[0] }}, {{ rgb_color[1] }}, {{ rgb_color[2] }}, 1) !important;\n        color: black;\n      {% else %}\n        background-color: #dd4444 !important;\n        color: black;\n      {% endif %}\n    }\n```\n\n#### Benutzerdefinierte Bar-Größen\nBar-Karten können durch Skalierung der Schriftgröße angepasst werden:\n\n```yaml\ntype: vertical-stack\ncards:\n  - type: markdown\n    content: Defiant Class Bar\n    card_mod:\n      class: bar-left\n      style: |\n        :host {\n          font-size: 16px !important;\n        }\n  - type: markdown\n    content: Constitution Class Bar\n    card_mod:\n      class: bar-left\n  - type: markdown\n    content: Galaxy Class Bar\n    card_mod:\n      class: bar-left\n```\n\n## Bekannte Probleme\n* CSS-Stile für Font, Sidebar und Header laden nur, wenn ein Dashboard zuerst geladen wurde.\n* Menü-Seiten wie Development Tools und Profile sind funktional, aber optisch eingeschränkt.\n* Manchmal werden beim Laden eines Dashboards nicht alle CSS-Stile geladen und Karten sehen aus wie `button-large`. Laden Sie in diesem Fall ein kleineres Dashboard und kehren Sie zurück.\n\n## Danksagungen\n- @JHuckins: Farbsupport \u0026 Testing  \n- @csanner: neue Klassen und Fixes  \n- @Anthrazz: Bar-Klassen  \n- @mtezzo: Toggle für Texturen/Gradienten  \n- @CmdreIsaacHull: diverse Fixes und neue Klassen  \n- @askpatrickw: selbst gehostete Fonts  \n- @z3r0l1nk: Lichtfarben-Button Trick  \n- @smugleafdev: rechtsbündiger Text  \n- @Routhinator: right-footer Fix  \n- @bobzer: Button-Bar Idee  \n- @3of9: Sidebar \u0026 Themes  \n- @adejong5: v.4 Rewrite\n\n## Links\n**Discord:** https://discord.gg/gGxud6Y6WJ  \n**LCARS Resources:** https://www.thelcars.com\n\n## Hinweis zur Urheberschaft \u0026 Haftungsausschluss\n\nDie LCARS-Designelemente sind inspiriert von *Star Trek™* und wurden von Ressourcen auf [thelcars.com](https://www.thelcars.com) von Jim Robertus adaptiert.\n\nDieses Projekt ist eine nicht-kommerzielle Fanproduktion. *Star Trek* und alle zugehörigen Marken, Logos und Charaktere sind alleigentum von CBS Studios Inc. Diese Fanproduktion wird weder von CBS, Paramount Pictures noch von einer anderen *Star Trek*-Franchise unterstützt, gesponsert oder offiziell anerkannt. \n\nJegliche kommerzielle Ausstellung oder Verbreitung ist nicht erlaubt. Es werden keine angeblichen unabhängigen Rechte gegenüber CBS oder Paramount Pictures geltend gemacht. Dieses Werk ist ausschließlich für den persönlichen und privaten Gebrauch bestimmt.\n\n[^1]: Die Schriftart Tungsten wurde von Tobias Frere-Jones und Jonathan Hoefler mit Beiträgen von Sara Soskolne, Erin McLaughlin und Aoife Mooney entworfen. Tungsten ist ein eingetragenes Warenzeichen von Hoefler \u0026 Co. \n\n[^2]: Die Schriftart Antonio wurde von Vernon Adams entworfen und darf gemäß der SIL Open Font License, Version 1.1, frei verwendet werden.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fth3jesta%2Fha-lcars","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fth3jesta%2Fha-lcars","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fth3jesta%2Fha-lcars/lists"}