Where do i change these colour please

[gbond]

where do i change the circuled colors pleased Im sorry i cant find it even changing themes does not appear to change it

[tom_l]

See: Home Assistant 2025.8.0 - Frontend - Additional theme color?

[dcapslock (Darryn Capes-Davis)]

Those buttons are meant to be plain (you won’t see text in light theme at this time) which has a fix merged so should be in next point release.

Otherwise generally follow what Tom has posted.

[gbond]

I dont understand what tom is talking about this is my themes.yaml where do I change these two colours?

extra_module_url:
  - /config/www/community/lovelace-clock-card/clock-card.js



# my themes

themes:
  happy:
    primary-color: pink
    text-primary-color: purple
    mdc-theme-primary: plum
  sad:
    primary-color: steelblue
    modes:
      dark:
        secondary-text-color: slategray
  day_and_night:
    primary-color: coral
    modes:
      light:
        secondary-text-color: orange
      dark:
        secondary-text-color: slategray

#noctis
  noctis:

    # Fonts
    primary-font-family: 'Raleway,sans-serif'
    paper-font-common-base_-_font-family: "var(--primary-font-family)"
    paper-font-common-code_-_font-family: "var(--primary-font-family)"
    paper-font-body1_-_font-family: "var(--primary-font-family)"
    paper-font-subhead_-_font-family: "var(--primary-font-family)"
    paper-font-headline_-_font-family: "var(--primary-font-family)"
    paper-font-caption_-_font-family: "var(--primary-font-family)"
    paper-font-title_-_font-family: "var(--primary-font-family)"
    ha-card-header-font-family: "var(--primary-font-family)"

    # Text
    text-color: '#ffffff' 
    primary-text-color: 'var(--text-color)'
    text-primary-color: 'var(--text-color)'
    secondary-text-color: "#BAC0C6"
    text-medium-light-color: '#A0A2A8'
    text-medium-color: '#80828A'
    disabled-text-color: '#626569'
    primary-color: 'var(--accent-color)'

    # Text Fields an Dropdown
    mdc-text-field-fill-color: 'var(--background-color)'
    mdc-text-field-ink-color: 'var(--text-color)'
    mdc-select-fill-color: 'var(--background-color)'
    mdc-text-field-label-ink-color: 'var(--secondary-text-color)'
    input-fill-color: 'var(--background-color)'
    input-ink-color: 'var(--text-color)'
    input-label-ink-color: 'var(--text-color)'
    input-disabled-fill-color: 'var(--background-color)'
    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)'
    code-editor-background-color: '#222c40'
    codemirror-property: 'var(--accent-color)'
    
    # Main Colors
    app-header-background-color: '#242e42'
    header-height: 48px
    accent-color: '#1A89F5'
    accent-medium-color: 'var(--accent-color)'

    # Background
    background-color: '#242e42'
    primary-background-color: 'var(--background-color)'
    background-color-2: '#20293c' 
    secondary-background-color: 'none'
    markdown-code-background-color: 'var(--background-color)'
    
    # Card
    card-background-color: 'var(--ha-card-background)'
    ha-card-background: 'rgba(43,55,78,1)' #'linear-gradient(145deg, #273246, #2e3b53)'
    ha-card-box-shadow: "3px 3px 13px -6px rgba(17,35,52,1)"
    ha-card-border-radius: "5px"
    border-color: 'none'

    # Dialog
    ha-dialog-border-radius: "5px"

    # Icons
    paper-item-icon-color: '#EBEBEB'
    paper-item-icon-active-color: 'var(--accent-color)'
    
    # Sidebar
    sidebar-background-color: 'var(--background-color)'
    sidebar-icon-color: '#98a7b9'
    sidebar-selected-icon-color: 'var(--accent-color)'
    sidebar-selected-text-color: 'var(--text-color)'
    paper-listbox-background-color: 'var(--sidebar-background-color)'
    divider-color: 'var(--background-color)'
    light-primary-color: 'var(--ha-card-background)'

    # Sliders
    paper-slider-knob-color: 'var(--accent-color)'
    paper-slider-pin-color: 'var(--background-color-2)'
    paper-slider-active-color: 'var(--accent-color)'
    paper-slider-container-color: 'var(--background-color-2)'

    # Toggle:
    paper-toggle-button-checked-bar-color: 'var(--accent-color)'
    mdc-theme-primary: 'var(--accent-color)'

    # Switch
    switch-unchecked-color: '#70889e'
    switch-checked-button-color: 'var(--accent-color)'
    switch-unchecked-track-color: 'var(--background-color-2)'
    switch-checked-track-color: 'var(--background-color-2)'

    # Radio Button
    paper-radio-button-checked-color: 'var(--accent-color)'

    # Popups
    more-info-header-background: 'var(--secondary-background-color)'
    paper-dialog-background-color: 'var(--background-color)' #'rgba(47,59,82,0.4)'

    # Tables
    table-row-background-color: 'var(--background-color)'
    table-row-alternative-background-color: 'var(--ha-card-background)'

    # Badges
    label-badge-background-color: 'var(--background-color)'
    label-badge-text-color: 'var(--text-primary-color)'
    label-badge-red: 'rgba(73,85,108,1)'
    label-badge-blue: 'rgba(26,137,245,1)'
    label-badge-green: 'rgba(0,202,139,1)'
    label-badge-yellow: 'rgba(222,176,107,1)'

    paper-input-container-focus-color: 'var(--accent-color)'
    
    # Custom Header
    ch-background: 'var(--background-color)'
    ch-active-tab-color: 'var(--accent-color)'
    ch-notification-dot-color: 'var(--accent-color)'
    ch-all-tabs-color: 'var(--sidebar-icon-color)'
    ch-tab-indicator-color: 'var(--accent-color)'

    # Mini Mediaplayer
    mini-media-player-base-color: 'var(--text-color)'
    mini-media-player-accent-color: 'var(--accent-color)'

    # Alarm
    alarm-color-armed: 'rgba(247,53,67,1)'


  # Card-Mod #####################################################################
  # Uncomment the Code below if you have card-mod installed and want blur effect #
  ################################################################################


  # card-mod-theme: noctis
  
  # card-mod-more-info-yaml: |
  #   $: |
  #     .mdc-dialog .mdc-dialog__scrim {
  #       backdrop-filter: blur(15px);
  #       -webkit-backdrop-filter: blur(15px);
  #       background: rgba(0,0,0,.6);
  #     } 
  #     .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
  #       box-shadow: none !important;
  #       border-radius: var(--ha-card-border-radius);
  #     }
  #   .: |
  #     :host {
  #       --ha-card-box-shadow: none;
  #     }

type or paste code here

[dcapslock (Darryn Capes-Davis)]

You need to define ha-color-primay-[05-95]

Example from…

@Mariusthvdb

It works again with palettes like below in our themes, adding the prefix ha-

Dark blue:

# color palette
  ha-color-primary-05: '#001321'      # Near-black with a cool blue undertone
  ha-color-primary-10: '#012744'      # Very dark navy blue
  ha-color-primary-20: '#06457a'     # Deep, rich marine blue
  ha-color-primary-30: '#0d60ad'     # Bold cobalt-like blue
  ha-color-primary-40: '#1675C9'     # Vivid, primary-leaning sky blue (base)
  ha-color-primary-50: '#3d90d6'     # Lighter, softer azure tone
  ha-color-primary-60: '#68a9e1'     # Balanced light blue, good for highlights
  ha-color-primary-70: '#92c2ec'     # Gentle sky blue, ideal for backgrounds
  ha-color-primary-80: '#c0ddf6'     # Very light pastel blue
  ha-color-primary-90: '#e1effb'     # Pale icy blue, near-white
  ha-color-primary-95: '#f1f8fd'     # Almost white with a faint blue tint

Explanation of how these cascade from…

2025.8: The summer of AI

those are in the core globals which are referenced in the semantic globals and the color globals easy peasy of course, the magic is done in the wa globals

[gbond]

sorry how does this relate (I dont understand) sorry

[dcapslock (Darryn Capes-Davis)]

Straight into your theme.

e.g. A colour theme based on a purple (#8F3A84) and some variations that I used from Color Wheel – HTML Color Codes. Reversing Tailwind variation worked nicely from that websiite.

purple-theme:
  ha-color-primary-05: "#120711"
  ha-color-primary-10: "#33152F"
  ha-color-primary-20: "#53224D"
  ha-color-primary-30: "#742F6B"
  ha-color-primary-40: "#8F3A84"
  ha-color-primary-50: "#B54AA7"
  ha-color-primary-60: "#C26BB7"
  ha-color-primary-70: "#D08BC7"
  ha-color-primary-80: "#DDACD6"
  ha-color-primary-90: "#EACCE6"
  ha-color-primary-95: "#F8EDF6"