Why do some variables work in themes and others do not?

donaldtrump · April 18, 2023, 3:18am

I’m running HAOS on a RP4, not a dev but reasonably technical. I use Noctis as a baseline theme for my dashboards (with some customization in the theme file itself, nothing crazy) and card_mod on specific cards as necessary to achieve specific results. Lately I’ve been trying to control more styling from the theme file itself vs. in-line card mod because it’s more scalable.

The problem:

A lot of styles are controlled via HA variables, for example var(--primary-color)
When I editing the Noctis theme file, the changes I make to existing variables usually apply without issue
I’ve also been able to add some new variables to the theme file that I find while using Dev Tools in chrome
Adding new variables seems to work sporadically and I cannot figure out what “should” work in a theme file vs. what won’t

Here’s an example: var(--control-slider-thickness) is a variable used in Tile Card to set the pixel height of the light brightness slider UI. Adding this variable to my noctis theme file to change the default size does nothing. Before the 2023.4 release I was able to change the height using a card mod rule, but the latest release broke it, and I don’t want this to be so fragile.

Why do some variables work when added to theme files and others don’t? I’ve spent hours trying to find information / docs that explain this or even acknowledge it and I can’t find anything.

tom_l · April 18, 2023, 4:17am

There have been many changes to the frontend. Some older themes may be using out of date variables.

List of current variables:

github.com

home-assistant/frontend/blob/a9984656007c179e1bc8cf55f79b5f15ec04c832/src/resources/ha-style.ts

import "@polymer/polymer/lib/elements/custom-style";
import { derivedStyles } from "./styles";

export const DEFAULT_PRIMARY_COLOR = "#03a9f4";
export const DEFAULT_ACCENT_COLOR = "#ff9800";

const documentContainer = document.createElement("template");
documentContainer.setAttribute("style", "display: none;");

documentContainer.innerHTML = `<custom-style>
  <style>
    /*
      Home Assistant default styles.

      In Polymer 2.0, default styles should to be set on the html selector.
      (Setting all default styles only on body breaks shadyCSS polyfill.)
      See: https://github.com/home-assistant/home-assistant-polymer/pull/901
    */
    html {
      font-size: 14px;

This file has been truncated. show original

donaldtrump · April 18, 2023, 3:26pm

Thanks @tom_l , but I don’t see var(--control-slider-thickness) in this list. That variable is used by Tile Card which is packaged with Home Assistant, so maybe my question is … If I can’t just add that variable to my theme file to change the value, where do I change it?

John_P · April 17, 2024, 6:56am

I would like to know this also

LeonFromNL · December 9, 2024, 9:31pm

Hi,

I’m fine with the build-in HA-theme, but I would like to add a few variables to the standard themes. Is that possible without bothering about a complete theme-yaml?
Or should I really create a complete theme, just because I want to add a few variables?

Or, is there a better way to add some global variables (so far, only colors)?