Star Trek LCARS Theme

DevelOpsMan · September 20, 2024, 2:19pm

Thats cool, because I like the theme.

I did further testing, maybe you can use it.

Any dark LCARS theme has the problem that it don’t show lines on a grid or table.
You can fix this with the “divider-color” to set in a light color for dark themes. Your default is “transparent”. For my themes I use the text-color to get a good contrast to the chosen background.

Then I have some bugs when the theme is not fully rendered. My “testsuite” is a Win10-Desktop-Firefox, Win10-Desktop-Chrome, an Android-Playstore-App (with Webviewer) and an Android-F-Droid-App (without Android Web Viewer).
Curiously sometimes the preview and then after save it shows the full theme, sometimes not a single card is rendered. I don’t know what I can contribute. As there are sometimes all renders right I enabled the theme right (even font, sound and effect)

transparent or black lines on grids and tables
lcars without table lines

Partially rendering with using a theme in user profile

All fine Preview (here remain the buttons to the chosen theme and are not overwritten by the cards theme. I expected also the red background of the Picard I theme)
lcars preview

Partially rendering for a dashboard full of single themed cards
lcars rendering

If you are interested in further testing let me know.

CrowBarHero · September 28, 2024, 8:48am

Hi,
I’m pretty new to modifying the interface yet following the instructions here I’ve suceeded in getting the LCARS style interface to display on my installation I’m loving the amount of work that’s gone into this, and how good it’s looking - well done and thanks to all!

I have a question, given the low-level nature of this modification, I’m spending more time in the code editor sections of the UI, and I’m finding it really hard to read the light-grey text on white background:

Does anyone have any tips or suggestions to make this more legible? (Ideally darken the background for code) It’s kinda hampering my ability and enthusiasm to get into the code further…

thanks!

P6Dave · September 28, 2024, 12:23pm

You could try a different theme to see if the contrast is better, but I tend to switch back the default theme while editing then go back to whichever LCARS theme is your preference to check the result. Or, if you have the luxury of having 2 screens you could have HA open on both, with the default theme applied to the one used for editing and the other on the LCARS theme to see the result as it’s applied.

CrowBarHero · September 28, 2024, 1:25pm

I have too many screens!

I had a rummage on Discord (an interesting experience) and found that you can add the following colour definition to a custom theme:

code-editor-background-color: "#000000"

which seems to work nicely.

P6Dave · September 28, 2024, 5:28pm

That Discord group is amazing. Some of the dashboards in use are awesome. Lots of good advice and support too.

th3jesta · October 7, 2024, 4:32pm

Latest version, 3.0 fixes the code editor background color. Still not perfect, but significantly better!

Kugelblitz · November 12, 2024, 7:13pm

Now we need the Right Voice Assistant for this like here

Computer

Flokatier · November 19, 2024, 10:44am

Hi, I really love it…thanks a lot for this great work…but i have al lot of problems with the Headers and Footes etc. since the update to 3.x. It seems that the styles are not loaded correctly. On my very cheap Android tablet the dashboardpage loads very slow an there everything looks fine. On my other much faster iPads, Iphone or or MacBook or in browsers the headers and footers and sometimes also other mods seem to randomly load correct or not. In most cases the Headers and Footers do not load correctly… any idea, what can cause this. Everything is up to date on my HA. Latest OS and Core andLCARS 3.1.0… It does not seem to be a problem with the YAML, because sometimes everything ist displayed correctly… but after the next page-refresh its wrong again.

Slim_4 · January 13, 2025, 7:13pm

Flokatier
I had the same issue. I found in the readme that headers and footers are broken. You need to install the Lovelace HTML Card from HACS. Once I did that, all was fixed!

tommymsw · February 28, 2025, 11:36pm

Please forgive me, I am new to HA in general. I am 99% sure I have this installed correctly and when I apply the theme globally, it appears to be working. My problem is in modding the cards. When I add the code, it sometimes changes the card, but then when I reposition the card (without touching the Yaml) it changes back. The color and shape of my cards all match the lcars theme, they are oval and change color. It’s only the header and footer parts that oddly look correctly sometimes, but then just switch back. I am hoping someone had a similar issue and knows what I messed up. I am just using this as a test card:

type: markdown
content: "# testing"
card_mod:
  class: bar-large-left

P6Dave · March 1, 2025, 8:50am

Problems started with rendering the Markdown card a while ago. The fix is to use the custom: html-card

- type: custom:html-card
    card_mod:
      class: footer-left
    content: |
      &nbsp;

or for text etc

- type: custom:html-card
    card_mod:
      class: header-right
    content: |
      <h1>title</h1>

thorshammer · March 6, 2025, 8:05am

I just read here that today’s 2025.3 update breaks LCARS. Therefore, I’m putting off updating for the time being. Yet, I’m worried. Is there a chance this lovely LCARS theme will be adapted to the new version of the HA UI?

P.S. Another person commented the update worked for his LCARS (link), alas he rolled back to 2025.2.5 anyway.

I am wondering, what was your experience?

P6Dave · March 6, 2025, 9:54am

I’m wondering if it’s only dashboards created in Sections that are affected ?

I’ve not updated yet, I tend to leave it until the end of the month to update, but I did read that they’ve made changes to the header in Sections views. So maybe legacy dashboards and views are not affected .

HAmateur · March 6, 2025, 10:06pm

I have the theme set in Configuration & in my profile, but I just get color changes, no, actual LCARS-style UI updates.

Help?

thorshammer · March 7, 2025, 10:53am

Try a new dashboard and add card-mod tags.

                  - show_name: true
                    show_icon: true
                    type: button
                    tap_action:
                      action: toggle
                    entity: switch.plug_bathroom
                    icon: mdi:star-face
                    name: Decorations
                    show_state: true
                    card_mod:
                      class: button-capped-right

Notice the last two lines there.

Out of curiosity: Which HA version are you using ATM?

Woody14619 · March 7, 2025, 3:55pm

No, it’s not just sections. Old-style cards are impacted as well. I have a couple dashboards in different styles (because I’m too lazy to update a few of the simpler ones). All are LCARS skinned, and wound up looking like crap on update.

For the most part, it looks like it’s mainly the bars and headers that get wonky. Some of the effects (button highlighting for clickable entities) works on some buttons, and buttons are still active/clickable. It appears that bars and headers wind up showing their “areas” with backgrounds, making text hard to read, and throwing the look off.

To be clear, its likely some minor changes in the css to make it happy again. Functionality is still all there. Ideally the theme could hook into the new functionality, changing read-only buttons to have a different header color or such.

I will note that bullet, barrel, and capped buttons all look fine, and work as expected. They even highlight on mouse over if they control a button (using Modern theme colors, anyway).

For those that may have updated without realizing this impacted, the rollback method is pretty simple:
ha core update --version 2025.2.5

thorshammer · March 8, 2025, 9:33am

Just checking, are we talking about this custom:html-card?

Edit: Yes, it was. Works like a charm.

Woody14619 · March 8, 2025, 4:46pm

With a little further testing, I noted there was one panel that was OK under 2025.3.0. Turns out, if you update the headers to use custom:html-card, the background issues go away. So there is a work-around, and it’s one that several people are using already. Given that, my layout is back to “normal” under either version.

HAmateur · March 9, 2025, 7:27pm

I’m on 2025.2.1.

Anyway to mix the card_mod syntax into my existing dashboard? Plus, IDK where to add said syntax.

thorshammer · March 9, 2025, 9:59pm

Just add a new dashboard: Setting → Dashboards → Add dashboard

Then, edit that dashboard. You can add a few entities first. Afterwards, you click the pen icon in the upper right hand corner and choose “raw configuration editor”. This is where you can add the card_mod lines.

Also add the LCARS theme to that page to make sure it’ll work.

  - theme: LCARS Default
    title: Bath
    path: bath
    icon: mdi:bathtub-outline
    badges: []
    cards:
[...]