From: Stefan Dösinger stefan@codeweavers.com
The goal is to make it somewhat easier to define different color schemes. It still won't be pretty since there is little tooling for MS themes, but it will be nicer than having magic hex numbers in every SVG file.
I don't know how standardized CSS in SVGs is. Imagick's convert and Gimp support it in this way (<style>@import</style>). Another suggestion I found is to use <link xmlns="..." rel="stylesheet" href="colors.css"/>, but I couldn't get it to work. KolourPaint supports neither, so the highlight color will show up as black if you try to open the SVG with it. --- dlls/light.msstyles/blue_button.svg | 5 +++- dlls/light.msstyles/colors.css | 45 +++++++++++++++++++++++++++++ 2 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 dlls/light.msstyles/colors.css
diff --git a/dlls/light.msstyles/blue_button.svg b/dlls/light.msstyles/blue_button.svg index 99041a80209..0d0df4cfab2 100644 --- a/dlls/light.msstyles/blue_button.svg +++ b/dlls/light.msstyles/blue_button.svg @@ -1,5 +1,8 @@ <?xml version="1.0" encoding="UTF-8"?> <svg id="bitmap:22-32" width="22" height="138" version="1.1" viewBox="0 0 5.8208 36.512" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> + <style> + @import url(colors.css); + </style> <metadata> rdf:RDF <cc:Work rdf:about=""> @@ -19,6 +22,6 @@ <rect x="40.849" y="7.409" width="5.5563" height="5.8208" rx=".52917" ry=".52917"/> </g> </g> - <rect x="40.849" y="13.494" width="5.5563" height="5.8208" rx=".52917" ry=".52917" fill="#2979ff" stroke="#2979ff"/> + <rect x="40.849" y="13.494" width="5.5563" height="5.8208" rx=".52917" ry=".52917" class="HighlightOutline" fill="currentColor" stroke="currentColor"/> </g> </svg> diff --git a/dlls/light.msstyles/colors.css b/dlls/light.msstyles/colors.css new file mode 100644 index 00000000000..c8c9f7f663d --- /dev/null +++ b/dlls/light.msstyles/colors.css @@ -0,0 +1,45 @@ +/* + * Copyright 2025 Stefan Dösinger for CodeWeavers + * + * This library is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 2.1 of the License, or (at your option) any later version. + * + * This library is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public + * License along with this library; if not, write to the Free Software + * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301, USA + */ + +/* The general approach is to use the same color names as in .rc files. If you change a color + * here, you probably want to make a similar change in light.rc. + * + * Imagemagick doesn't support CSS variables, so we have to put the color values into the classes + * directly. The SVG files specify fill and stroke colors, and in some cases both. An SVG element + * can only have one class though. So as long as only one color is needed, we use + * + * <rect ... class="HighlightOutline" fill="currentColor" /> + * <path ... class="HighlightOutline" stroke="currentColor" /> + * + * If one SVG element needs two different colors we have to define a separate class: + * + * .WindowBackgroundHighlightOutline + * { + * fill:#ffffff; /* match WindowBackground.color * / + * stroke:#2979ff; /* match HighlightOutline.color * / + * } + * + * And then use it like + * + * <rect ... class="WindowBackgroundHighlightOutline" /> + */ + +.HighlightOutline +{ + color:#2979ff; /* 41 121 255 */ +}