Star Trek LCARS theme for Home Assistant
Color codes and font choice from https://www.thelcars.com --thanks Jim Robertus!
HA-LCARS replies on a mod called card-mod, and since Home Assistant 2024.8, card-mod no longer applies classes defined in the theme to Markdown cards. HA-LCARS dashboards have typically made heavy use of Markdown cards for headers and section labels. Due to card-mod no longer being able to apply CSS classes to Markdown cards on the initial load of a page without calling a reload of the theme, I have added support in 2.3.1 for the Lovelace HTML card to the various header
, middle
, and footer
classes, with the various bar
classes to follow soon in the next update.
Setup an HTML card like this:
Install Lovelace HTML card
Create a new "manual" card
Input the following code for the card, and adjust the content and class per your needs.
type: custom:html-card
title: ''
content: |
<h1>TEST HTML CARD</h1>
card_mod:
class: header
Classic, Lower Decks, Romulus, Cardassia, Kronos, Nemesis (and more!).
I am most definitely not a real web developer, and fumbled my way into the initial release with the help of Stack Exchange and various blogs on CSS techniques. My main goal was and still is to keep this theme 100% CSS/JS with no extra assets required besides the font. I'm positive there are better ways to implement anything and everything I've done thus far, so PRs are welcome. I will continue to improve things as I learn and add more comments to my CSS so that you can know what things do and maybe tell me how it can be better if you know. I have tested this theme with most of the out-of-the-box cards that ship with Home Assistant, and some available in HACS like the Mail and Packages card. However, I'm sure there are some that could still be terribly broken. Simply create an issue and I will address it.
Install card-mod
per the instructions on its GitHub page.
Make sure in your configuration.yaml file you have the following:
frontend:
javascript_version: latest
themes: !include_dir_merge_named themes
extra_module_url:
- /local/community/lovelace-card-mod/card-mod.js #or wherever you ended up putting card-mod.js
Under the Home Assistant Config folder, create a new folder named themes.
Restart Home assistant to apply the changes.
This theme requires you to add both the Antonio
font and lcars.js
file as resources to your lovelace configuration.
Navigate to Settings
→ Dashboards
→ 3-dot menu
→ Resources
and add the following new Resources:
https://fonts.googleapis.com/css2?family=Antonio:wght@400;700&display=swap
and select 'stylesheet'https://cdn.jsdelivr.net/gh/th3jesta/ha-lcars@js-main/lcars.js
and select javascriptIf you don't trust someone's random JavaScript hosted on a CDN (I get it), you can download the lcars.js
file directly from GitHub, audit it yourself, and place it in your <home-assistant-directory>/www/community/
; this will need to be done with every HA-LCARS update.
Do not add /local/community/lcars.js
to extra_module_url
; it will not work there.
IF YOU USE CLOUDFLARE IN FRONT OF YOUR SITE: Purge your site cache in CloudFlare (Purge Cache under Quick Actions) anytime you update the local file or if you are using the JSDelivr link and a new version of HA-LCARS is released. This needs to happen whether you are using the JSDelivr link or putting it in your www folder. Unless you tell it not to, CloudFlare caches anything in your site that it can.
In order for the clock to work, you need to set up the Time & Date integration by adding the following to your configuration.yaml:
sensor:
- platform: time_date
display_options:
- 'time'
- 'date'
- 'date_time'
- 'date_time_utc'
- 'date_time_iso'
- 'time_date'
- 'time_utc'
More info: https://www.home-assistant.io/integrations/time_date/
This theme has two controls for sound and textures that require creating simple toggle entities. Create them by going to Settings > Devices & Services > Helpers and create two of type Toggle named as below:
input_boolean.lcars_sound
)input_boolean.lcars_texture
)input_number.lcars_vertical
)
input_number.lcars_horizontal
)
These entities can be controlled directly from viewing the entity, or you can even add buttons to your dashboard to control them, just like any other entity.
Install via HACS by searching "LCARS" or download the latest release and extract and drop the lcars folder into your themes folder.
frontend.reload_themes
service.backend-selected
themeIn order to have this theme set automatically as the backend selected default, add the following automation to your Home Assistant:
- alias: Set Default Theme
description: ''
trigger:
- event: start
platform: homeassistant
condition: []
action:
- data:
name: LCARS Default # or whichever other theme is available, like LCARS Lower Decks
service: frontend.set_theme
The theme includes some classes that can be added to cards like this to give them special styling:
card_mod:
class: header
The class names are only indications of what types of cards they were intended for, but the classes can be applied to any card you like. I cannot guarantee how well they will work outside of their intended uses, however.
The classes are as follows:
header-left
header-right
header-contained
header-open
- top blue bar (in Default theme) meant for Markdown cards with one H1
line that will start a section
YAML | Result |
|
middle-left
middle-right
middle-contained
middle-blank
- side red bar (in Default theme) meant for non-button sections below header
and above footer
YAML | Result |
|
footer-left
footer-right
footer-contained
footer-open
- bottom gray bar (in Default theme) meant for the last card in a section
YAML | Result |
|
button-small
- squared off buttons intended to go in middle sections and horizontal-stacks and grids
YAML | Result |
|
button-large
- rounded button meant to be standalone outside of header
/middle
/footer
sections
YAML | Result |
|
button-lozenge-left
button-lozenge-right
- pill-shaped button; only works on standard button cards; also works on button cards in a horizontal-stacks and grids up to two columns wide; more columns get glitchy and is not advised
YAML | Result |
|
button-bullet-left
button-bullet-right
- similar to the lozenge, but with a squared-off side; same column restrictions apply
YAML | Result |
|
button-capped-left
button-capped-right
- similar to the bullet, but capped on the round side; same column restrictions apply
YAML | Result |
|
button-barrel-left
button-barrel-right
- similar to the bullet, but no rounding at all; same column restrictions apply
YAML | Result |
|
bar-left
bar-right
bar-large-left
bar-large-right
- standalone header-type bar; only intended for and tested with Markdown and HTML cards
YAML | Result |
|
Custom themes can be created down at the bottom of lcars.yaml
. Or, search for "===THEMES", which will take you right there. To create your own theme, copy the LCARS Default section to the bottom of the file and change the lcars-ui-*
and lcars-card-*
variables to your liking, using the color references at the top of the file, The LCARS website, or define your own.
If you have anything to add here, create a PR with your tip and I will review it to add to this list.
header
class applied, then any number of middle
class cards and button
class single buttons or in horizontal stacks or grids, and then finally a footer
class applied to the last card in the vertical stack. You can see this formation in all of the screenshots at the top of this page. Here's an example Vertical Stack card and all of its contents:
YAML | Result |
|
You can create a blank header or footer by creating a Markdown card and putting ##
in the Content field, and change the size by modifying the number of #
. It looks like this:
If you are only applying the theme to a dashboard or a card, the font won't render on the cards. You can brute-force loading the font on a per-card basis by adding the following style to every card:
YAML | Result |
|
If you want to host the font yourself, such as running a Home Assistant instance in a car or on an air-gapped network, you can learn how to download the font and install it from issue https://github.com/th3jesta/ha-lcars/issues/69.
You can switch the alignment of text in a card, such as the markdown card for header-right
, by adding custom CSS per card like so:
YAML | Result |
|
YAML | Result |
|
button-large
cards. This is more prevalent on large dashboards. Try reloading the page, and if that doesn't work, load a smaller dashboard and then go back to the offending dashboard.Discord: https://discord.gg/gGxud6Y6WJ
LCARS Resources: https://www.thelcars.com