Theme Colors

blevins.eric.513 · March 27, 2025, 5:19pm

All the white boxes where you can’t see the font… In themes what is this color called? I assume it is a background but which one is it?

LiQuid_cOOled · March 27, 2025, 5:22pm

What Theme?

jackjourneyman · March 27, 2025, 6:20pm

There’s a copy of the default theme here.

github.com/home-assistant/frontend

src/resources/ha-style.ts

46c9af75f

import { css, unsafeCSS } from "lit";
import { fontStyles } from "./roboto";
import {
  DEFAULT_ACCENT_COLOR,
  DEFAULT_PRIMARY_COLOR,
  derivedStyles,
} from "./styles-data";

const mainStyles = css`
  /*
    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;
    height: 100vh;

This file has been truncated. show original

If you scroll through you may be able to identify the variable.

blevins.eric.513 · March 28, 2025, 3:50am

I’m using yourname. With the list you sent what the white boxes be called? Primary-background-color? Or if I can’t change the background, can I change the text color in those boxes?

You can see here, if I highlight that text I can see it.

jackjourneyman · March 28, 2025, 12:34pm

Don’t know what those fields are, I’m afraid. The image in your first post says “Paper buttons”, so start experimenting with the “paper” colours?

LiQuid_cOOled · March 28, 2025, 12:38pm

It is --markdown-code-background-color: I changed it to red as an example.

Its fed by --primary-background-color;

    --markdown-code-background-color: var(--primary-background-color);

Ildar_Gabdullin · March 28, 2025, 8:54pm

To find out which particular css variable is used - try Code Inspector (or whatever it is called in your browser). Note that some variables may be not “themeable” - they can be DEFINED on some hierarchical level inside a card / UI element, not inside a theme.