Theme Customization

[panic-Patrick]

Goal

I want to use the global CSS variables in my theme.

Source Yaml

Graphite:
  # Graphite is a contemporary theme that offers both a calm dark color scheme and a
  # clean light theme, featuring native device fonts and a cohesive design
  # language. Carefully crafted to be visually appealing and easy on the eyes,
  # Graphite ensures a consistent user experience throughout the entire Home
  # Assistant interface, including the administration panel and code editors.
  # https://github.com/TilmanGriesel/graphite

  #------------------------------------------------------
  # This file was generated at 2024-12-09 21:16:52
  #------------------------------------------------------

  # Color tokens
  token-rgb-primary: 15, 67, 54 # Modified via Graphite Theme Patcher v1.3.0 - 2024-12-22 22:17:45
  token-rgb-black: 0, 0, 0
  token-rgb-white: 240, 243, 255
  token-rgb-purple: 189, 157, 255
  token-rgb-pink: 255, 98, 192
  token-rgb-red: 255, 97, 116
  token-rgb-deep-purple: 166, 77, 255
  token-rgb-indigo: 84, 132, 255
  token-rgb-blue: 33, 150, 243
  token-rgb-light-blue: 3, 169, 244
  token-rgb-cyan: 0, 188, 212
  token-rgb-teal: 107, 255, 237
  token-rgb-green: 141, 253, 166
  token-rgb-light-green: 156, 255, 166
  token-rgb-lime: 205, 220, 57
  token-rgb-yellow: 255, 235, 59
  token-rgb-amber: 255, 211, 99
  token-rgb-orange: var(--rgb-primary-color)
  token-rgb-deep-orange: 255, 87, 34
  token-rgb-brown: 121, 85, 72
  token-rgb-grey: 158, 158, 158
  token-rgb-blue-grey: 96, 125, 139
  token-rgb-disabled: 61, 65, 85
  token-rgb-state-inactive: 123, 126, 139
  token-color-primary: rgb(var(--token-rgb-primary))
  token-color-primary-light: rgb(105 124 144)
  token-color-accent: var(--token-color-primary)
  token-color-disabled: rgba(255, 255, 255, 0.2)
  token-color-feedback-info: rgb(39, 209, 246)
  token-color-feedback-warning: rgb(255, 219, 117)
  token-color-feedback-error: rgb(234, 114, 135)
  token-color-feedback-success: rgb(118, 214, 152)
  token-color-icon-primary: rgb(228, 228, 231)
  token-color-icon-secondary: rgb(138, 140, 153)
  token-color-icon-sidebar: rgb(147, 149, 159)
  token-color-icon-sidebar-selected: rgb(174, 176, 183)
  token-color-text-primary: rgb(228, 228, 231)
  token-color-text-secondary: rgb(138, 140, 153)
  token-color-text-disabled: rgba(255, 255, 255, 0.5)
  token-color-text-sidebar-selected: rgb(214, 215, 219)
  token-color-text-sidebar: var(--token-color-text-secondary)
  token-color-text-label-badge: rgb(198, 203, 210)
  token-color-text-chip: var(--token-color-white)
  token-color-background-base: rgb(22, 24, 29)
  token-color-background-secondary: rgb(28, 29, 33)
  token-color-background-sidebar: var(--token-color-background-base)
  token-color-background-input-base: rgb(46, 48, 56)
  token-color-background-input-disabled: rgba(37, 37, 40, 0.5)
  token-color-background-label-badge: rgb(54, 55, 67)
  token-color-background-card: rgb(37, 38, 45)
  token-color-background-skrim: rgba(0, 0, 3, 0.9)
  token-color-background-divider: var(--token-color-background-sidebar)
  token-color-background-scrollbar-thumb: rgb(46, 48, 56)
  token-color-background-label-badge-red: var(--token-color-feedback-error)
  token-color-background-label-badge-green: rgb(78, 183, 128)
  token-color-background-label-badge-blue: var(--token-color-feedback-info)
  token-color-background-label-badge-yellow: var(--token-color-feedback-warning)
  token-color-background-label-badge-grey: rgb(83, 90, 103)
  token-color-background-popup-scrim: rgba(4, 5, 7, 0.9)
  token-color-border-card: rgba(0, 0, 0, 0)
  token-color-switch-button-unchecked: rgba(255, 255, 255, 0.7)
  token-color-switch-track-unchecked: rgba(125, 128, 132, 0.4)
  token-color-codemirror-string: rgb(119, 196, 229)
  token-color-codemirror-keyword: rgb(140, 169, 255)
  token-color-codemirror-number: rgb(255, 91, 29)
  token-shadow-card-medium: 0 3px 13px 0 rgba(0, 0, 0, 0.07)

  ################################################################################
  # Size tokens

  ## Radius
  token-size-radius-small: 9px
  token-size-radius-medium: 16px
  token-size-radius-large: 18px # Modified via Graphite Theme Patcher v1.3.0 - 2024-12-22 22:17:46
  token-size-radius-card: var(--token-size-radius-large)
  ## Border
  token-size-width-border-card: 0
  ## Height
  token-size-height-slider: 4px
  token-size-height-navbar: 56px
  ## Font
  token-size-font-medium: 18px
  token-size-font-large: 28px
  token-size-font-title: var(--token-size-font-large)
  token-size-font-title-card: var(--token-size-font-medium)
  ## Spacing
  token-size-spacing-medium: 16px
  token-size-section-min-width: 320px
  ################################################################################
  # Color tokens

  # Color tokens
  token-color-transparent: rgba(0, 0, 0, 0)
  token-color-black: rgb(0, 0, 0)
  token-color-white: rgb(255, 255, 255)
  ################################################################################
  # Other tokens

  # Opacity tokens
  token-opacity-ripple-hover: 0.14
  # Weight tokens

  ## Font
  token-weight-font-title-card: 600
  # Font family tokens
  token-font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

  ##############################################################################
  # Definitions

  # Shapes
  mdc-shape-small: var(--token-size-radius-small)
  mdc-shape-medium: var(--token-size-radius-medium)
  mdc-shape-large: var(--token-size-radius-large)
  # Sizes
  header-height: var(--token-size-height-navbar)
  paper-slider-height: var(--token-size-height-slider)
  # Typography
  primary-font-family: var(--token-font-family-primary)
  paper-font-common-base_-_font-family: var(--token-font-family-primary)
  paper-font-common-code_-_font-family: var(--token-font-family-primary)
  paper-font-body1_-_font-family: var(--token-font-family-primary)
  paper-font-subhead_-_font-family: var(--token-font-family-primary)
  paper-font-headline_-_font-family: var(--token-font-family-primary)
  paper-font-caption_-_font-family: var(--token-font-family-primary)
  paper-font-title_-_font-family: var(--token-font-family-primary)
  ha-card-header-font-family: var(--token-font-family-primary)
  mdc-typography-font-family: var(--token-font-family-primary)
  mdc-typography-button-font-family: var(--token-font-family-primary)
  mdc-typography-body1-font-family: var(--token-font-family-primary)
  mdc-typography-button-font-weight: var(--token-weight-font-title)
  title-font-weight: var(--token-weight-font-title)
  title-font-size: var(--token-size-font-title)
  ha-heading-card-title-font-size: var(--token-size-font-title-card)
  ha-heading-card-title-font-weight: var(--token-weight-font-title-card)
  # Text
  primary-text-color: var(--token-color-text-primary)
  secondary-text-color: var(--token-color-text-secondary)
  text-primary-color: var(--token-color-text-primary)
  text-light-primary-color: var(--token-color-text-primary)
  disabled-text-color: var(--token-color-text-disabled)
  app-header-edit-text-color: var(--token-color-text-primary)
  # Main interface colors
  primary-color: var(--token-color-primary)
  dark-primary-color: var(--primary-color)
  light-primary-color: var(--token-color-primary-light)
  accent-color: var(--token-color-accent)
  divider-color: var(--token-color-background-divider)
  scrollbar-thumb-color: var(--token-color-background-scrollbar-thumb)
  disabled-color: var(--token-color-disabled)
  # Feedback colors
  info-color: var(--token-color-feedback-info)
  success-color: var(--token-color-feedback-success)
  warning-color: var(--token-color-feedback-warning)
  error-color: var(--token-color-feedback-error)
  # Background
  lovelace-background: var(--token-color-background-base)
  primary-background-color: var(--token-color-background-base)
  secondary-background-color: var(--token-color-background-secondary)
  clear-background-color: var(--token-color-background-input-base)
  # Navbar
  app-header-background-color: var(--primary-background-color)
  app-header-text-color: var(--token-color-icon-primary)
  app-header-edit-background-color: var(--token-color-background-card)
  # Sidebar
  sidebar-icon-color: var(--token-color-icon-sidebar)
  sidebar-text-color: var(--sidebar-icon-color)
  sidebar-background-color: var(--token-color-background-sidebar)
  sidebar-selected-icon-color: var(--token-color-icon-sidebar-selected)
  sidebar-selected-text-color: var(--token-color-text-sidebar-selected)
  # Cards
  border-radius: var(--token-size-radius-card)
  card-background-color: var(--token-color-background-card)
  ha-card-background: var(--token-color-background-card)
  ha-card-border-radius: var(--token-size-radius-card)
  ha-card-border-color: var(--token-color-border-card)
  ha-card-border-width: var(--token-size-width-border-card)
  ha-card-border-style: none
  ha-card-border: none
  ha-card-box-shadow: var(--token-shadow-card-medium)
  # Sections
  ha-view-sections-column-gap: var(--token-size-spacing-medium)
  ha-view-sections-column-min-width: var(--token-size-section-min-width)
  # States
  state-icon-color: var(--token-color-icon-primary)
  state-on-color: var(--token-color-feedback-success)
  state-off-color: var(--token-color-feedback-error)
  # Label-badge
  label-badge-text-color: var(--token-color-text-primary)
  label-badge-red: var(--token-color-background-label-badge-red)
  label-badge-blue: var(--token-color-background-label-badge-blue)
  label-badge-green: var(--token-color-background-label-badge-green)
  label-badge-yellow: var(--token-color-background-label-badge-yellow)
  label-badge-grey: var(--token-color-background-label-badge-grey)
  # Chip
  ha-chip-text-color: var(--token-color-text-chip)
  # Dialog
  mdc-dialog-scrim-color: var(--token-color-background-popup-scrim)
  # Slider
  paper-slider-knob-color: var(--token-color-primary)
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  # Switch
  switch-checked-button-color: var(--primary-color)
  switch-checked-track-color: var(--switch-checked-button-color)
  switch-unchecked-button-color: var(--token-color-switch-button-unchecked)
  switch-unchecked-track-color: var(--token-color-switch-track-unchecked)
  # Toggles
  paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
  paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
  paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
  mdc-checkbox-unchecked-color: var(--token-color-icon-secondary)
  mdc-radio-unchecked-color: var(--mdc-checkbox-unchecked-color)
  # List items
  mdc-ripple-hover-opacity: var(--token-opacity-ripple-hover)
  # Text Fields an Dropdown
  input-background-color: var(--token-color-background-input-base)
  input-background-token-color-disabled: rgba(var(--input-background-color), 0.5)
  input-fill-color: var(--input-background-color)
  input-ink-color: var(--token-color-text-primary)
  input-label-ink-color: var(--token-color-text-primary)
  input-disabled-fill-color: var(--input-background-token-color-disabled)
  input-disabled-ink-color: var(--disabled-text-color)
  input-disabled-label-ink-color: var(--disabled-text-color)
  input-idle-line-color: var(--background-color)
  input-dropdown-icon-color: var(--secondary-text-color)
  input-hover-line-color: var(--primary-color)
  mdc-select-idle-line-color: var(--color-background-base)
  mdc-text-field-idle-line-color: var(--mdc-select-idle-line-color)
  # Editor
  code-editor-background-color: var(--token-color-background-base)
  codemirror-meta: var(--token-color-text-primary)
  codemirror-property: var(--accent-color)
  codemirror-atom: var(--codemirror-property)
  codemirror-string: var(--token-color-codemirror-string)
  codemirror-keyword: var(--token-color-codemirror-keyword)
  codemirror-number: var(--token-color-codemirror-number)
  # RGB colors
  rgb-primary-color: var(--token-rgb-primary)
  rgb-accent-color: var(--token-rgb-primary)
  rgb-white-color: var(--token-rgb-white)
  rgb-purple-color: var(--token-rgb-purple)
  rgb-pink-color: var(--token-rgb-pink)
  rgb-red-color: var(--token-rgb-red)
  rgb-deep-purple-color: var(--token-rgb-deep-purple)
  rgb-indigo-color: var(--token-rgb-indigo)
  rgb-blue-color: var(--token-rgb-blue)
  rgb-light-blue-color: var(--token-rgb-light-blue)
  rgb-cyan-color: var(--token-rgb-cyan)
  rgb-teal-color: var(--token-rgb-teal)
  rgb-green-color: var(--token-rgb-green)
  rgb-light-green-color: var(--token-rgb-light-green)
  rgb-lime-color: var(--token-rgb-lime)
  rgb-yellow-color: var(--token-rgb-yellow)
  rgb-amber-color: var(--token-rgb-amber)
  rgb-orange-color: var(--token-rgb-orange)
  rgb-deep-orange-color: var(--token-rgb-deep-orange)
  rgb-brown-color: var(--token-rgb-brown)
  rgb-grey-color: var(--token-rgb-grey)
  rgb-blue-grey-color: var(--token-rgb-blue-grey)
  rgb-black-color: var(--token-rgb-black)
  rgb-disabled-color: var(--token-rgb-disabled)
  rgb-state-inactive-color: var(--token-rgb-state-inactive)
  ##############################################################################
  # Extentions

  # HACS
  hacs-new-color: rgb(27, 153, 123)
  hacs-error-color: rgb(182, 46, 95)
  # Mini graph card
  mcg-title-font-weight: 400
  # Mushroom
  mush-title-font-weight: var(--title-font-weight)
  mush-title-font-size: var(--title-font-size)
  mush-rgb-white: var(--rgb-white-color)
  mush-rgb-purple: var(--rgb-purple-color)
  mush-rgb-pink: var(--rgb-pink-color)
  mush-rgb-red: var(--rgb-red-color)
  mush-rgb-deep-purple: var(--rgb-deep-purple-color)
  mush-rgb-indigo: var(--rgb-indigo-color)
  mush-rgb-blue: var(--rgb-blue-color)
  mush-rgb-light-blue: var(--rgb-light-blue-color)
  mush-rgb-cyan: var(--rgb-cyan-color)
  mush-rgb-teal: var(--rgb-teal-color)
  mush-rgb-green: var(--rgb-green-color)
  mush-rgb-light-green: var(--rgb-light-green-color)
  mush-rgb-lime: var(--rgb-lime-color)
  mush-rgb-yellow: var(--rgb-yellow-color)
  mush-rgb-amber: var(--rgb-amber-color)
  mush-rgb-orange: var(--rgb-orange-color)
  mush-rgb-deep-orange: var(--rgb-deep-orange-color)
  mush-rgb-brown: var(--rgb-brown-color)
  mush-rgb-grey: var(--rgb-grey-color)
  mush-rgb-blue-grey: var(--rgb-blue-grey-color)
  mush-rgb-black: var(--rgb-black-color)
  mush-rgb-disabled: var(--rgb-disabled-color)

Bubble:
  # Bubble Card variables
  bubble-border-radius: "8px"
  bubble-main-background-color: "rgb(50,70,90)"
  bubble-secondary-background-color: "rgb(0,70,90)"
  bubble-pop-up-main-background-color: "rgba(200,200,200,0.5)"
  bubble-accent-color: "rgb(100,140,180)"
  bubble-icon-background-color: "rgb(50,80,100)"

Which step did you already try?

I executed the frontend.reload_themes action, reloaded all YAML files, and performed a restart.

Problem

I want to adjust the background color and border radius of all bubble cards using global CSS variables, but it's not working.

Read the documentation

• I have read the documentation

[Clooos]

Hi again! Just remove Bubble: and it's all good 👌

[panic-Patrick]

I feel so stupid.. thanks a lot

[Clooos]

You're welcome!