svg_style_dark Doesn't Work

[masroof-maindak]

Hello, I'm trying to set some dark colours for my keymap-drawer config but nothing I seem to do works. I've also picked up the entire string from the original config.py as I found out the setting in question is picked up as is, rather than being analogous to svg_extra_style, that overrides the default svg_style -- but that unfortunately didn't work out either.

Here is my config for reference: https://github.com/masroof-maindak/zmk/blob/main/config/kyria_rev3.yaml

[caksoylar]

Hey, if I use your config the SVG has this CSS at the end:

@media (prefers-color-scheme: dark) {
 // your svg_style_dark input
 rect.combo, rect.combo-separate { fill: #c1666b; }
rect.held, rect.combo.held { fill: #91506c; } 
}
// your svg_extra_style input
 svg.keymap { font-family: system-ui, sans-serif; font-size: 20px; font-weight: 600; }
text.label { font-size: 32px; }
text.combo { font-size: 18px; }
text.shifted, text.hold { font-size: 16px; }
text.layer-indicator { font-size: 14px; }
text.footer { font-size: 14px; text-weight: 400; }
.trans, .ghost, .none { opacity: 0.9; }
path.combo { stroke-width: 2px; }
rect.combo, rect.combo-separate { fill: #d7a7ac; }
rect.held, rect.combo.held { fill: #ffd35c; }

Since the part you put in svg_extra_style comes after the part in svg_style_dark (goes inside the @media block when auto-mode is enabled), it has the highest priority. This (svg_extra_style always "wins") is how the code is currently set up to generate the CSS, so it is expected.

I think the best solution here is to only use svg_extra_style but add the dark mode overrides inside it using the @media directive manually at the end, like this:

// general overrides
svg.keymap {
  font-family: system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
}

text.label {
  font-size: 32px;
}

text.combo {
  font-size: 18px;
}

text.shifted,
text.hold {
  font-size: 16px;
}

text.layer-indicator {
  font-size: 14px;
}

text.footer {
  font-size: 14px;
  text-weight: 400;
}

.trans,
.ghost,
.none {
  opacity: 0.9;
}

path.combo {
  stroke-width: 2px;
}

rect.combo, rect.combo-separate {
  fill: #d7a7ac;
}

rect.held, rect.combo.held {
  fill: #ffd35c;
}

.mdi\:circle-off-outline {
  opacity: 0.32
}

// dark style overrides, assuming auto mode is used
@media (prefers-color-scheme: dark) {
  rect.combo, rect.combo-separate {
    fill: #c1666b;
  }
  
  rect.held, rect.combo.held {
    fill: #91506c;
  }
}

This should work as you expect, as long as you use dark_mode: auto.

This is how above renders for me, with the dark theme on my browser and flips correctly to the light values when I change the theme.

[masroof-maindak]

Thank you a ton for the help @caksoylar. It finally looks exactly how I want it now.