defining custom colour palette via CSS

[moonbit5]

Hey hope you're well – loving the recent theme updates.

I'm attempting to add some custom colour palettes which can be defined as variables for some custom button cards, idea being they'll change on light versus dark mode during the day.

Rather than add them into the theme each time it updates I'm trying to define them globally in a CSS file added as a resource.

CSS file added to /hacsfiles/material-colours/material-v1.css:

:root {
  color-scheme: light dark;

  --light-home-bg: rgba(212,240,255, 1);
  --dark-home-bg: rgba(40,42,47, 1);

  --light-home-accent: rgba(0,82,124, 1);
  --dark-home-accent: rgba(251,250,255, 1);

  --light-kitchen-bg: rgba(202,255,184, 1);
  --dark-kitchen-bg: rgba(38,43,38, 1);

  --light-kitchen-accent: rgba(0,116,80, 1);
  --dark-kitchen-accent: rgba(248,252,243, 1);

}

Adding the variable to my button cards as follows:

  card:
    - background-color: light-dark(var(--light-kitchen-bg), var(--dark-kitchen-bg));
  label:
    - color: light-dark(var(--light-kitchen-accent), var(--dark-kitchen-accent));

I don't know if this is theme specific or more of a CSS related thing but currently the cards are only showing in 'dark' despite setting the 'light' version of theme.

Could any one shed some light on where I might be going wrong?

Edit: So actually this is working as it should however it's setting light and dark based on the device. I guess my question is can this approach be used when setting 'mode' to light or dark. What would the selector need to be?

[moonbit5]

well any way. here's an example of the kind of colours I'm adding to the theme, curently manually in a duplicated yaml file. Is it possible for me to add these using the accent feature? I'm just looking for non destructive way to customise.