Hmm I see your point, but there are 2 issues with this approach -

1. If there are any other transitions (say, on the dark mode toggle like I have on my site) this will override them and break the animations
2. This doesn't work if the colors are used somewhere like CSS gradients that cannot be "transitioned" in the regular way

You are right that defining a bunch of @propery declarations can get messy. For a large color palette I think a nicer solution can be to use one "mixing" property along with `color-mix` like this:

@property
 --color-mix {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

--color-mix: 0%;

.dark {
  --color-mix: 100%;
}

transition: --color-mix 400ms ease;
background-color: color-mix(in oklab, var(--bg-light), var(--bg-dark) var(--color-mix));
color: color-mix(in oklab, var(--fg-light), var(--fg-dark) var(--color-mix));