Theme !include Guidance

Configuration Frontend
1

Screenshot 2025-05-19 at 21.53.52
Screenshot 2025-05-19 at 21.53.52684×448 43.2 KB

Should something like this work?

I’m working on a theme that has 3 different dark mode options, and a single, shared light mode. I don’t want to create a theme for each that contains light and dark1, light and dark2, light and dark3, because if I need to update anything in light, it needs copying across three themes, whereas if I can create darkx.yaml which has an !include light.yaml, light only needs updating in its own separate file.

I’ve been having issues, typically getting 'expected a dictionary for dictionary value ‘frontend->themes->Develop->modes->light’, but before I continue much further, I wanted to check if this is expected behaviour (i.e. not possible), or if I do just need to format it differently.

2

Assume you have a “themes: !include_dir_merge_named themes” line in config, where the “themes” is a folder containing yaml files for themes.
Assume you have a “light. yaml” file:

some-var: yellow
…

and files like

my_theme_1:
  modes:
    dark:
      some_var: red
      …
    light: !include light.yaml


my_theme_2:
  modes:
    dark:
      some_var: green
      …
    light: !include light.yaml

This is a working schema. Now sort out what is wrong in your case.
Of course valid names (ie used in UI, stock or custom cards) for css variables are expected.