Home Assistant LCARS

Star Trek LCARS theme for Home Assistant

Color codes and font choice from https://www.thelcars.com --thanks Jim Robertus!

💥BREAKING CHANGES IN 4.1💥

1. Stack titles have moved to into the borders. While this opens up many possibilities for alternate layouts, it could wreck the look and spacing of existing dashboards. If the in-border placement is not what you want, the workaround is to add a markdown card as the fist card of the stack with conten: "# This stacks's title.

type: vertical-stack title: Old Title card_mod: class: header-left cards: - type: markdown content: "# My New Title" card_mod: class: middle-blank - type: button entity: light.living_room_lamp card_mod: class: button-small

🎉NEW FEATURES IN 4.1🎉

Themed Entities Lists

Entities Cards and Auto-Entities Cards can now theme the entities into readouts with lozenge, bullet, capped, and barrel shapes! Additionally, the icon cap can be hidden by applying the no-cap class.

Themed To-Do Lists

To-do lists can now be themed into lozenge, bullet, capped, and barrel shapes, including completed tasks and adding new tasks!

Stack Titles in Borders

Stack titles have moved into the borders.

Light and Dark Theme Options

Every theme now includes light and dark modes! For most the themes the change is subtle. The LCARS panels found in Star Trek do not always comply with modern web accesssiblity standards for contrast. In situations where a theme has dark text on a darkish background, a light theme has been added to switch the text to light and improve contrast. In a few cases, the theme's background colors have been lightened instead. The light/dark mode also affects how the backlight effect is applied if you have the LCARS Texture helper turned on. Give them a try, and be sure to hop on Discord or GitHub to let us know if you find situations where it doesn't work!

Examples

Dashboard

Edit modes

Mobile view

Included themes

Classic, 25th Century, Next Generation, Lower Decks, Romulus, Cardassia, Kronos, Nemesis (and more!).

Preamble

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.

Installation instructions

Prerequisites

I. Enable themes and install card-mod

1. Install card-mod per the instructions on its GitHub page.

2. Make sure in your configuration.yaml file you have the following:

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /www/community/lovelace-card-mod/card-mod.js?hacstag=1234567890 #or wherever you put card-mod

1. Under the Home Assistant config folder, create a new folder named themes
2. Restart Home assistant to apply the changes.

II. Add the fonts

This theme requires you to add either the Tungsten font or the Antonio font. If both are available, the theme will use Tungsten. Tungsten is the actual font used in the later seasons of Picard. Antonio is a very similar and is slightly less horizontally compressed.

A. Tungsten¹ is available free for personal use from Font Downloader.

1. Download and unzip the font files
2. Place Tungsten-Medium.woff2 and Tungsten-Bold.woff2 in <home-assistant-directory>/www/community/fonts/
3. Download Tungsten.css from the HA-LCARS GitHub and place it also in <home-assistant-directory>/www/community/fonts/
4. Navigate to Settings → Dashboards → 3-dot menu → Resources and add the following new Resources:
   /hacsfiles/fonts/tungsten.css and select 'stylesheet'

-OR-

B. Antonio² is available from Google Fonts and can be added as a Dashboard Resource

1. 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'

III. Add the Javascript file

This theme requires you to add a javascript file to your Dashboard Resources

A. Navigate to Settings → Dashboards → 3-dot menu → Resources and add the following new Resources:
https://cdn.jsdelivr.net/gh/th3jesta/ha-lcars@js-main/lcars.js and select javascript

-OR-

B. If 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.

Warning

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.

III. Set up the clock

In order for the clock to work, you need to set up the Time & Date integration.

A. From the Integations menu

• Go to Settings → Devices & Services → + Add Integration → Time & Date
• Select the sensor type Time
• Click Submit

-OR-

B. Add the following to your configuration.yaml:

sensor:
  - platform: time_date
    display_options:
      - 'time'

Important

You may wish to remove the new Time & Date entities from Home Assistant's Recorder integration so they don't fill you database with updates every second. Examples on how to do that: https://www.home-assistant.io/integrations/recorder/#common-filtering-examples

IV. Create the helper entities

This theme has toggle controls for sound and textures, number controls for border sizes and menu font size, and an optional template sensor for adding custom text to the header. Create these helper entities by going to Settings → Devices & Services → Helpers and create two of type Toggle, two of type Number, and one of type Template named as below:

• LCARS Sound (entity id should be input_boolean.lcars_sound)
  • Toggles button and tap sounds
• LCARS Texture (entity id should be input_boolean.lcars_texture)
  • Toggles a grain pattern and backlight effect
• LCARS Vertical (entity id should be input_number.lcars_vertical)
  • Sets the width of vertical borders
  • Min value: 26
  • Max value: 60
• LCARS Horizontal (entity id should be input_number.lcars_horizontal)
  • Sets the width of horizontal borders
  • Min value: 6
  • Max value: 60
• Optional: LCARS Menu Font (entity id should be input_number.lcars_menu_font)
  • Sets the font size (in px) of the sidebar menu
• Optional: LCARS Header (entity id should be sensor.lcars_header)
  • Add text to the clock area of the header
  • Example Template: {{ "LCARS " + states('sensor.time') }}

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 the theme

Install via HACS by searching "LCARS" or download the latest release and extract and drop the lcars folder into your themes folder.

Enable theme

Option 1: Via profile

1. Open your Home Assistant Profile
2. Under User Settings → Themes, select one of the new LCARS themes

Option 2: Setting the default backend-selected theme

In 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

Usage instructions

Classes

The theme includes some classes that can be added to cards like this to give them special styling:

card_mod:
  class: header-left

Note

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:

1. header-left header-right header-contained header-open - top blue bar (in Default theme) meant for Markdown and Heading cards and with one H1 line that will start a section

YAML	Result
type: markdown card_mod: class: header-left content: '# header-left' type: markdown card_mod: class: header-right content: '# header-right' type: markdown card_mod: class: header-contained content: '# header-contained' type: markdown card_mod: class: header-open content: '# header-open'

1. 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
type: markdown card_mod: class: middle-left content: '# middle-left' type: markdown card_mod: class: middle-right content: '# middle-right' type: markdown card_mod: class: middle-contained content: '# middle-contained' type: markdown card_mod: class: middle-blank content: '# middle-blank'

1. footer-left footer-right footer-contained footer-open - bottom gray bar (in Default theme) meant for the last card in a section

YAML	Result
type: markdown card_mod: class: footer-left content: '# footer-left' type: markdown card_mod: class: footer-right content: '# footer-right' type: markdown card_mod: class: footer-contained content: '# footer-contained' type: markdown card_mod: class: footer-open content: '# footer-open'

1. button-small - squared off buttons intended to go in middle sections and horizontal-stacks and grids

YAML	Result
type: light entity: light.jesse_s_desk name: Desk Lamp card_mod: class: button-small

1. button-large - rounded button meant to be standalone outside of header/middle/footer sections

YAML	Result
show_name: true show_icon: true type: button tap_action: action: call-service service: frontend.reload_themes data: {} target: {} show_state: true card_mod: class: button-large

1. 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
show_name: true show_icon: true type: button tap_action: action: toggle entity: switch.speakers icon: mdi:speaker-multiple card_mod: class: button-lozenge-left show_name: true show_icon: true type: button tap_action: action: toggle entity: switch.lightsaber card_mod: class: button-lozenge-right

1. button-bullet-left button-bullet-right - similar to the lozenge, but with a squared-off side; same column restrictions apply

YAML	Result
show_name: true show_icon: true type: button tap_action: action: toggle entity: light.bedroom_tree card_mod: class: button-bullet-left show_name: true show_icon: true type: button tap_action: action: toggle entity: switch.counter_lights card_mod: class: button-bullet-right

1. button-capped-left button-capped-right - similar to the bullet, but capped on the round side; same column restrictions apply

YAML	Result
show_name: true show_icon: true type: button tap_action: action: toggle entity: light.bathroom card_mod: class: button-capped-left show_name: true show_icon: true type: button tap_action: action: toggle entity: switch.built_in card_mod: class: button-capped-right

1. button-barrel-left button-barrel-right - similar to the bullet, but no rounding at all; same column restrictions apply

YAML	Result
show_name: true show_icon: true type: button tap_action: action: toggle entity: light.bathroom card_mod: class: button-barrel-left show_name: true show_icon: true type: button tap_action: action: toggle entity: switch.built_in card_mod: class: button-barrel-right

1. button-bar-left button-bar-right - button in the style of a header bar. Uses large text and includes the icon and state of shown; same column restrictions apply

YAML	Result
show_name: true show_icon: true show_state: true type: button entity: light.porch_light name: Porch card_mod: class: button-bar-left show_name: true show_icon: true show_state: true type: button entity: light.garage_light name: Garage card_mod: class: button-bar-right

1. bar-left bar-right bar-large-left bar-large-right - standalone header-type bar; only intended for and tested with Markdown and Heading cards. Comes with a standard and large versions, see Tips & Tricks for custom sizing

YAML	Result
type: markdown content: 'bar-left' card_mod: class: bar-left type: markdown content: 'bar-large-left' card_mod: class: bar-large-left type: markdown content: 'bar-right' card_mod: class: bar-right type: markdown content: 'bar-large-right' card_mod: class: bar-large-right

1. list-<lozenge|bullet|capped|barrel>-<left|right> - styled to-do lists using the lozenge, bullet, capped, and barrel styles in left and right variants similar to the button-* classes discussed above.

YAML	Result
type: todo-list entity: todo.testing title: To-do List theme: LCARS Default card_mod: class: list-capped-right type: todo-list entity: todo.testing title: To-do List theme: LCARS Lower Decks I card_mod: class: list-lozenge-left type: todo-list entity: todo.testing title: To-do List theme: LCARS Picard II card_mod: class: list-barrel-left

1. entity-<lozenge|bullet|capped|barrel>-<left|right> - styled entities lists (from Entities Card and Auto-Entities Cards) using the lozenge, bullet, capped, and barrel styles in left and right variants similar to the button-* classes discussed above. Additionally, the icon cap can be hidden by applying the no-cap class. The class is applied using card_mod to each entity in the Entities Card, or using options: in each filter of an auto-entities card.

Unique to this set of classes is the width of the readout area where the entity states are shown. This is can be set using a css variable --lcars-readout-width to one of the cards containing the entities list, as seen in the examples below. In the first example, the variable is set in the vertical-stack containing the entities card -- this would apply to all entities cards in that stack. In the second example, the varaible is set in the card: section of the auto-entities card which specifies options for the created entities card.

YAML	Result
type: vertical-stack cards: - type: markdown content: "# Entities Card" card_mod: class: header-left - type: entities entities: - entity: sensor.mudroom_motion_temperature icon: none card_mod: class: entity-lozenge-left - entity: sensor.kitchen_current_temperature card_mod: class: entity-capped-left - entity: sensor.family_room_motion_temperature card_mod: class: entity-bullet-left - entity: sensor.office_motion_temperature card_mod: class: entity-barrel-left no-cap - entity: sensor.living_room_current_temperature card_mod: class: entity-lozenge-right - entity: sensor.nursery_temperature card_mod: class: entity-capped-right no-cap - entity: sensor.master_bedroom_temperature card_mod: class: entity-bullet-right - entity: sensor.foyer_motion_temperature card_mod: class: entity-barrel-right card_mod: class: middle-blank - type: markdown content: | #   card_mod: class: footer-right grid_options: rows: auto columns: 12 card_mod: style: | :host{ --lcars-readout-width: 150px; --lcars-vertical-border: 40px; }
type: vertical-stack cards: - type: markdown content: "# Auto-Entities Card" card_mod: class: header-right - type: custom:auto-entities card: type: entities card_mod: class: footer-right style: | :host { --lcars-readout-width: 125px; } filter: include: - options: card_mod: class: entity-lozenge-left area: mudroom label: security_sensor - options: card_mod: class: entity-lozenge-right area: "Family Room" label: security_sensor exclude: [] </table>

Make your own color themes

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.

Tips and tricks

Note

If you have anything to add here, create a PR with your tip and I will review it to add to this list.

Stacks and stacks and stacks

Make use of Vertical Stack cards. Whether in this theme or any other theme, they are invaluable for keeping dashboards organized. In LCARS, a Vertical Stack card should contain a Markdown card first with the title of the group and the 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
type: vertical-stack cards: - type: markdown card_mod: class: header-left content: '# Climate' - type: weather-forecast entity: weather.home card_mod: class: middle-left - type: thermostat entity: climate.dining_room card_mod: class: footer-left

Additionally, since version 4.0, vertical and horizontal stacks can be themed. Stack titles are placed in the side border. This allows multiple cards to be stacked evenly within LCARS framing:

YAML

Result

type: vertical-stack title: Big Stack cards: - type: heading heading_style: title heading: Stack Example icon: fa6-solid:cubes-stacked badges: - type: entity entity: input_number.lcars_horizontal - type: entity entity: input_number.lcars_vertical - type: entity entity: input_boolean.lcars_texture card_mod: style: ":host .title {font-size:2em;}" - type: horizontal-stack title: top card_mod: class: header-right cards: - show_name: true show_icon: true type: button entity: light.east_flood_lights card_mod: class: button-lozenge-left - show_name: true show_icon: true type: button entity: light.south_flood_lights card_mod: class: button-lozenge-right - type: horizontal-stack title: middle card_mod: class: middle-right cards: - show_name: true show_icon: true type: button entity: light.porch_light card_mod: class: button-lozenge-left - show_name: true show_icon: true type: button entity: light.garage_light card_mod: class: button-lozenge-right - type: horizontal-stack title: bottom card_mod: class: footer-right cards: - show_name: true show_icon: true type: button entity: light.front_lights card_mod: class: button-lozenge-left - show_name: true show_icon: true type: button entity: light.stoop_light card_mod: class: button-lozenge-right grid_options: columns: 48 rows: auto card_mod: class: header-left

Button Cards in Section Layout

When using Home Assistant's Sections layout (currently the default for new dashboards), button cards are forced to be two rows tall. While LCARS button themes will work, they will look bigger than in the examples. The size can be corrected by setting the grid_options: rows: auto as such:

YAML	Result
type: button show_name: true show_icon: true show_state: true entity: light.front_lights card_mod: class: button-lozenge-left grid_options: columns: full type: button show_name: true show_icon: true show_state: true entity: light.front_lights card_mod: class: button-lozenge-left grid_options: columns: full rows: auto

Section Layout Headings

By default, Home Assistant creates a Heading Card at the top of each Section. This card can take the header and bar classes!

YAML

Result

type: heading heading_style: title grid_options: columns: 18 rows: auto heading: LCARS Settings icon: local:Star Trek/starfleet-star-badge badges: - type: entity entity: input_number.lcars_horizontal - type: entity entity: input_number.lcars_vertical - type: entity entity: input_boolean.lcars_texture card_mod: class: header-contained style: | :host .title { font-size: 2em;} type: heading icon: local:Star Trek/starfleet-star-badge heading: LCARS Settings heading_style: title badges: - type: entity entity: input_number.lcars_vertical - type: entity entity: input_number.lcars_horizontal - type: entity entity: input_boolean.lcars_texture card_mod: class: bar-left grid_options: columns: 18 rows: auto

Blank Headers

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:

Font on a single dashboard

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
type: markdown content: '# Card-level theming' theme: LCARS Default card_mod: class: header-left style: | ha-card > * { font-family: Antonio }

Font on air-gapped installs

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 #69.

Right-aligned text

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
card_mod: class: header-right style: | ha-card { text-align: right; }

Button Background Colors

You can set a button's background color to the color of the light by adding custom CSS per card like so:

YAML	Result
card_mod: class: button-capped-right style: | ha-card { {% if is_state('light.terasa', 'on') %} {% set rgb_color = state_attr('light.terasa', 'rgb_color') %} background-color: rgba({{ rgb_color[0] }}, {{ rgb_color[1] }}, {{ rgb_color[2] }}, 1) !important; color: black; /* or any other logic for text color */ {% else %} background-color: #dd4444 !important; color: black; {% endif %} }

Custom Bar Sizes

You can the size of a bar card by scaling the font size of the card like so:

YAML	Result
type: vertical-stack cards: - type: markdown content: Defiant Class Bar card_mod: class: bar-left style: | :host { font-size: 16px !important; } - type: markdown content: Constitution Class Bar card_mod: class: bar-left - type: markdown content: Galaxy Class Bar card_mod: class: bar-left

Known issues

• Font and sidebar and header CSS styles only load when a dashboard has been loaded first. If you navigate directly to a non-dashboard page without loading a dashboard first, things will look pretty awful, though still functional. Simply load a dashboard and hit the back button. This is a quirk of the card-mod addon on which this theme relies, so it's outside my ability to fix.
• Sometimes when a dashboard loads, not all CSS styles will load and all or most cards will end up looking like the 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.

Acknowledgements

• Thanks to @JHuckins for color theming support and testing!
• Thanks to @csanner for the new classes and additional fixes and tweaks!
• Thanks to @Anthrazz for the bar classes!
• Thanks to @mtezzo for the entity toggle for textures/gradients, and the Modern theme (my new favorite)!
• Thanks to @CmdreIsaacHull for various fixes, improvements, themes, and new classes!
• Thanks to @askpatrickw for figuring out how to self-host the font!
• Thanks to @z3r0l1nk for light color-matching button trick!
• Thanks to @smugleafdev for the right-justified text tip!
• Thanks to @Routhinator (via Discord) for the right-footer fix!
• Thanks to @bobzer for the button-bar idea!
• Thanks to @3of9 for the sidebar and themes!
• Thanks to @adejong5 for the v.4 rewrite!
• Thanks to @snootched for many code reviews!
• Thanks to @blazingdynamo for the to-do list ideas!
• Thanks to @Stanojoski and @KoenDierckx for entities list design ideas!

Links

Discord: https://discord.gg/gGxud6Y6WJ

LCARS Resources: https://www.thelcars.com

Attribution & Disclaimer

LCARS design elements inspired by Star Trek™ and adapted from resources at thelcars.com by Jim Robertus.

This project is a non-commercial fan production. Star Trek and all related marks, logos, and characters are solely owned by CBS Studios Inc. This fan production is not endorsed by, sponsored by, nor affiliated with CBS, Paramount Pictures, or any other Star Trek franchise.

No commercial exhibition or distribution is permitted. No alleged independent rights will be asserted against CBS or Paramount Pictures. This work is intended for personal and recreational use only.

Footnotes

1. Tungsten is designed by Tobias Frere-Jones and Jonathan Hoefler with contributions from Sara Soskolne, Erin McLaughlin, and Aoife Mooney. Tungsten is a registered trademark of Hoefler & Co. ↩

2. Antonio is designed by Vernon Adams and is free to use in accordance with the SIL Open Font License, Version 1.1. ↩