As described on “System and Accent Colors” documentation page, you’re supposed to be able to use the system’s accent colour by:
- Adding an
<style id="current-color-scheme" type="text/css"/>to the document; - Adding the class
class="ColorScheme-Highlight"and eitherfillorstroke(or whatever presentation colour value) tocurrentColor.
I did that, however, when enabling my theme the colour that is picked is not the current accent colour as set by the “Appearance > Colours > Use accent colour”, but it seems like a fallback accent colour. Some shade of blue that does not follow the settings.
Both in the window decoration preview, and when applied, I always get this blue. You can even see that indeed the current accent colour is yellow, per the highlight, but the decorations are still rendered as blue.
So clearly Aurorae understands that the strokes should have the Highlight colour, otherwise they would be the SVG default colour of black, which I confirmed by temporarily deleting the style tag. But is not interested in using the colour preference.
Screenshots of the “Use accent colour” setting and a crop of the Window Decoration preview, merged into a single picture as I am not allowed to post two at once:
Is there some error in my theme, or should I file a bug? (If so, where? Pretty new to KDE)
decoration.svg file contents
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<style id="current-color-scheme" type="text/css"/>
<style type="text/css">
use {
fill: currentColor;
}
</style>
<radialGradient id="corner-shadow-gradient" cx="0%" cy="0%" r="1">
<stop offset="0%" stop-opacity="0.5"/>
<stop offset="25%" stop-opacity="0.25"/>
<stop offset="100%" stop-opacity="0"/>
</radialGradient>
<linearGradient id="straight-shadow-gradient">
<stop offset="0%" stop-opacity="0.5"/>
<stop offset="25%" stop-opacity="0.25"/>
<stop offset="100%" stop-opacity="0"/>
</linearGradient>
<path id="corner-stroke" d="M 0 10 q 10 0 10 -10 l -1 0 q -0.25 8.75 -9 9 Z"/>
<path id="corner-fill" d="M 0 0 v 10 q 10 0 10 -10 Z" class="ColorScheme-ViewBackground" fill="currentColor"/>
<rect id="corner-shadow" width="50" height="50" fill="url(#corner-shadow-gradient)"/>
<path id="straight-stroke" d="M 10 -5 v 10 l -1 0 l 0 -10 Z"/>
<path id="straight-fill" d="M 10 -5 v 10 h -10 v -10 Z" class="ColorScheme-ViewBackground" fill="currentColor"/>
<rect id="straight-shadow" y="-5" width="50" height="10" fill="url(#straight-shadow-gradient)"/>
<rect id="center-fill" width="10" height="10" class="ColorScheme-ViewBackground" fill="currentColor"/>
</defs>
<g id="hint-stretch-borders"/>
<g id="hint-tile-center"/>
<g id="active" class="ColorScheme-Highlight">
<g id="decoration-bottomright" transform="rotate(0)">
<use href="#corner-shadow" transform="scale(1, 2)"/>
<use href="#corner-fill"/>
<use href="#corner-stroke"/>
</g>
<g id="decoration-bottomleft" transform="rotate(90)">
<use href="#corner-shadow" transform="scale(2, 1)"/>
<use href="#corner-fill"/>
<use href="#corner-stroke"/>
</g>
<g id="decoration-topleft" transform="rotate(180)">
<use href="#corner-shadow"/>
<use href="#corner-fill"/>
<use href="#corner-stroke"/>
</g>
<g id="decoration-topright" transform="rotate(270)">
<use href="#corner-shadow"/>
<use href="#corner-fill"/>
<use href="#corner-stroke"/>
</g>
<g id="decoration-right" transform="rotate(0)">
<use href="#straight-shadow"/>
<use href="#straight-fill"/>
<use href="#straight-stroke"/>
</g>
<g id="decoration-bottom" transform="rotate(90)">
<use href="#straight-shadow" transform="scale(2, 1)"/>
<use href="#straight-fill"/>
<use href="#straight-stroke"/>
</g>
<g id="decoration-left" transform="rotate(180)">
<use href="#straight-shadow"/>
<use href="#straight-fill"/>
<use href="#straight-stroke"/>
</g>
<g id="decoration-top" transform="rotate(270)">
<use href="#straight-shadow"/>
<use href="#straight-fill"/>
<use href="#straight-stroke"/>
</g>
<use id="decoration-center" href="#center-fill"/>
</g>
<g id="inactive" class="ColorScheme-Background">
<g id="decoration-inactive-bottomright" transform="rotate(0)">
<use href="#corner-shadow" transform="scale(1, 2)"/>
<use href="#corner-fill"/>
<use href="#corner-stroke"/>
</g>
<g id="decoration-inactive-bottomleft" transform="rotate(90)">
<use href="#corner-shadow" transform="scale(2, 1)"/>
<use href="#corner-fill"/>
<use href="#corner-stroke"/>
</g>
<g id="decoration-inactive-topleft" transform="rotate(180)">
<use href="#corner-shadow"/>
<use href="#corner-fill"/>
<use href="#corner-stroke"/>
</g>
<g id="decoration-inactive-topright" transform="rotate(270)">
<use href="#corner-shadow"/>
<use href="#corner-fill"/>
<use href="#corner-stroke"/>
</g>
<g id="decoration-inactive-right" transform="rotate(0)">
<use href="#straight-shadow"/>
<use href="#straight-fill"/>
<use href="#straight-stroke"/>
</g>
<g id="decoration-inactive-bottom" transform="rotate(90)">
<use href="#straight-shadow" transform="scale(2, 1)"/>
<use href="#straight-fill"/>
<use href="#straight-stroke"/>
</g>
<g id="decoration-inactive-left" transform="rotate(180)">
<use href="#straight-shadow"/>
<use href="#straight-fill"/>
<use href="#straight-stroke"/>
</g>
<g id="decoration-inactive-top" transform="rotate(270)">
<use href="#straight-shadow"/>
<use href="#straight-fill"/>
<use href="#straight-stroke"/>
</g>
<use id="decoration-inactive-center" href="#center-fill"/>
</g>
</svg>