Ok this idea is a little "out there", but please bear with me because I think it could add a really nice boost to global colors when using CSS variables.
I was trying to find a way to connect an SVG image color to a global color. Well, it looks like the best way to change the color of an SVG image using the Photo or any other module that lets me select an SVG image from my media library... is to use CSS Filter.
So let's say I have a Global Color set to #ff0000, and I have given it a name of "Red", and I want to make my SVG image this color.
So here is my idea which I think would be awesome for the 2.8 update:
When I save a new global color, it adds the CSS to my root document. So for this example, it adds:
:root {
--fl-global-color-red: #ff0000;
}
I propose that we use the same sort of "engine" used in filter.kubiq.sk that will calculate what the "filtered output" would be. Then, for each Global Color that we save, it would create a 2nd CSS variable that outputs the "filtered" value. It would be the same variable name, with -f at the end. So the final result would look like this:
I know that using SVG images isn't supported natively by wordpress, but just about any element on a website can be modified using Filter, so I think a lot of people would find this useful.
Ok this idea is a little "out there", but please bear with me because I think it could add a really nice boost to global colors when using CSS variables.
I was trying to find a way to connect an SVG image color to a global color. Well, it looks like the best way to change the color of an SVG image using the Photo or any other module that lets me select an SVG image from my media library... is to use CSS Filter.
So let's say I have a Global Color set to #ff0000, and I have given it a name of "Red", and I want to make my SVG image this color.
I know that the following CSS won't work:
This doesn't work because Filter doesn't support hex values. So I would need to first convert my hex color to values that Filter does support.
I've been chatting with KubiQ, and he wrote this nifty tool which converts Hex to the correct values: filter.kubiq.sk
When I enter #ff0000, I get a results of:
brightness(0) invert(15%) sepia(90%) saturate(7333%) hue-rotate(1deg) brightness(94%) contrast(114%)So when I apply this to my code, it works perfectly at changing my SVG image color to red:
So here is my idea which I think would be awesome for the 2.8 update:
When I save a new global color, it adds the CSS to my root document. So for this example, it adds:
I propose that we use the same sort of "engine" used in filter.kubiq.sk that will calculate what the "filtered output" would be. Then, for each Global Color that we save, it would create a 2nd CSS variable that outputs the "filtered" value. It would be the same variable name, with -f at the end. So the final result would look like this:
This would also work if the Global Color has transparency set:
I know that using SVG images isn't supported natively by wordpress, but just about any element on a website can be modified using Filter, so I think a lot of people would find this useful.