Share Your Theme Patcher Setup 🎨

[TilmanGriesel]

Hey everyone! 👋 I'd love to see your Theme Patcher setups and mods. Share your creations with the HA and Graphite community and showcase what you've built with them! 🚀

• More about the Theme Patcher: https://graphite.tilmangriesel.com/features/graphite-theme-patcher.html
• Discord: https://discord.gg/pDGu5PcU

[TilmanGriesel]

Since I primarily use it for theme adjustments and testing, my config isn't particularly unusual and I keep Graphite stock to spot issues quickly. However, I'd like to share my test script to help validate whether the basic features are working as expected, not very fancy yet but already fun. I actually have a dev version of Graphite and I use the patcher to quickly see which one is on my devices.

Reload Themes

show_name: true
show_icon: true
type: button
tap_action:
  action: call-service
  service: frontend.reload_themes
  data: {}
  target: {}
name: Reload themes
icon: mdi:reload
show_state: false
grid_options:
  columns: full
  rows: 2

Set Frontend Theme

show_name: false
show_icon: true
type: button
tap_action:
  action: perform-action
  perform_action: frontend.set_theme
  target: {}
  data:
    name: Graphite Auto
    mode: dark
icon: hacs:hacs
show_state: false
grid_options:
  columns: 6
  rows: 1

Advanced Patch

type: tile
entity: script.patch_graphite_theme_advanced
grid_options:
  columns: 12
  rows: 1
hide_state: true
name: Patch Graphite (Advanced)
vertical: false
show_entity_picture: false

Script

alias: Update & Patch Graphite Theme (Advanced)
description: Advanced customization of the Graphite theme.
icon: mdi:dev-to
fields:
  user_primary_color:
    selector:
      color_rgb: {}
    default:
      - 224
      - 138
      - 0
    name: Primary Color
    required: true
    description: Choose your custom primary color (RGB format).
  user_radius_large:
    selector:
      number:
        min: 0
        max: 100
        step: 3
    name: "Large Radius "
    description: Choose your custom large radius.
    default: 18
    required: true
sequence:
  - action: shell_command.patch_theme
    data:
      theme: graphite
      token: token-rgb-primary
      type: rgb
      value: "{{ user_primary_color | join(',') }}"
    alias: Set Primary Color
  - action: shell_command.patch_theme
    data:
      theme: graphite
      token: token-size-radius-large
      type: radius
      value: "{{ user_radius_large }}"
    alias: Set Radius
  - action: shell_command.patch_theme
    data:
      theme: graphite
      type: card-mod
      token: card-mod-root
      value: .header{display:none;}#view{padding:0!important;height:100vh!important;}
    alias: Hide Header
    enabled: false
  - action: shell_command.patch_theme
    data:
      theme: graphite
      type: card-mod
      token: card-mod-root
      value: .header{}
    alias: Show Header
    enabled: false
  - action: shell_command.patch_theme
    data:
      theme: graphite
      type: generic
      token: my-token
      value: url("/local/animated-icons/clear-night.svg")
    alias: Set Custom Generic
    enabled: false
  - action: frontend.reload_themes
    data: {}

[NeeeeB]

Hi !!
I mainly use the theme patcher to change the primary color and add some tokens to get animated weather icons.
(animated icons need to be added first, and only once).
This is what the script looks like :

alias: Mise à jour Graphite
sequence:
  - action: shell_command.patch_theme
    metadata: {}
    data:
      theme: graphite
      token: token-rgb-primary
      type: rgb
      value: "{{ [156,34,54] | join(',') }}"
  - action: shell_command.patch_theme
    metadata: {}
    data:
      theme: graphite
      token: ha-card-box-shadow
      type: generic
      value: "{{ none }}"
    enabled: true
  - action: shell_command.create_token
    metadata: {}
    data:
      theme: graphite
      token: state-climate-heat-color
      type: generic
      value: var(--rgb-climate-heat)
  - action: shell_command.create_token
    metadata: {}
    data:
      theme: graphite
      token: weather-icon-clear-night
      type: generic
      value: url("/local/animated-icons/clear-night.svg")
  - action: shell_command.create_token
    metadata: {}
    data:
      theme: graphite
      token: weather-icon-cloudy
      type: generic
      value: url("/local/animated-icons/cloudy.svg")
  - action: shell_command.create_token
    metadata: {}
    data:
      theme: graphite
      token: weather-icon-fog
      type: generic
      value: url("/local/animated-icons/fog.svg")
  - action: shell_command.create_token
    metadata: {}
    data:
      theme: graphite
      token: weather-icon-lightning
      type: generic
      value: url("/local/animated-icons/lightning.svg")
  - action: shell_command.create_token
    metadata: {}
    data:
      theme: graphite
      token: weather-icon-lightning-rainy
      type: generic
      value: url("/local/animated-icons/lightning-rainy.svg")
  - action: shell_command.create_token
    metadata: {}
    data:
      theme: graphite
      token: weather-icon-partlycloudy
      type: generic
      value: url("/local/animated-icons/partlycloudy.svg")
  - action: shell_command.create_token
    metadata: {}
    data:
      theme: graphite
      token: weather-icon-pouring
      type: generic
      value: url("/local/animated-icons/pouring.svg")
  - action: shell_command.create_token
    metadata: {}
    data:
      theme: graphite
      token: weather-icon-rainy
      type: generic
      value: url("/local/animated-icons/rainy.svg")
  - action: shell_command.create_token
    metadata: {}
    data:
      theme: graphite
      token: weather-icon-hail
      type: generic
      value: url("/local/animated-icons/hail.svg")
  - action: shell_command.create_token
    metadata: {}
    data:
      theme: graphite
      token: weather-icon-snowy
      type: generic
      value: url("/local/animated-icons/snowy.svg")
  - action: shell_command.create_token
    metadata: {}
    data:
      theme: graphite
      token: weather-icon-snowy-rainy
      type: generic
      value: url("/local/animated-icons/snowy-rainy.svg")
  - action: shell_command.create_token
    metadata: {}
    data:
      theme: graphite
      token: weather-icon-sunny
      type: generic
      value: url("/local/animated-icons/sunny.svg")
  - action: shell_command.create_token
    metadata: {}
    data:
      theme: graphite
      token: weather-icon-windy
      type: generic
      value: url("/local/animated-icons/windy.svg")
  - action: shell_command.create_token
    metadata: {}
    data:
      theme: graphite
      token: weather-icon-windy-variant
      type: generic
      value: url("/local/animated-icons/windy-variant.svg")
  - action: shell_command.create_token
    metadata: {}
    data:
      theme: graphite
      token: weather-icon-exceptional
      type: generic
      value: url("/local/animated-icons/exceptional.svg")
  - action: frontend.reload_themes
    metadata: {}
    data: {}
description: ""

and this is the automation that automatically execute this script as soon as Graphite theme gets updated :

alias: Modification Graphite automatique
description: ""
triggers:
  - trigger: state
    entity_id:
      - update.graphite_theme_update
    from: "on"
    to: "off"
conditions: []
actions:
  - delay:
      hours: 0
      minutes: 0
      seconds: 10
      milliseconds: 0
  - action: script.turn_on
    metadata: {}
    data: {}
    target:
      entity_id: script.mise_a_jour_graphite
mode: single

You can see that I've added 10sec delay before script execution, so HA has enough time to download and apply the theme update.

[TilmanGriesel]

I love the auto update part, I want to feature this in the readme. Can you show how the weather icons look like?

[NeeeeB]

I can not easily make a short video, so this is an archive with the animated-icons ;-)
animated-icons.zip

[TilmanGriesel]

Would be great if you can share a link where to get them :) HACS or GitHub

[NeeeeB]

Sure, got them from this repo on github :
https://github.com/wowgamr/animated-weather-card/tree/master/themes/icons