One step closer to having themes on KIRUPA

talk random
1

What the top of the CSS looks like currently:

:root {
	--primary: #0798ff;
	--primaryDarker: #0267af;
	--primaryLighter: #aadcff;
	--primaryLightest: #EAF7FF;
	--light: #f3f3f3;
	--inputBackground: #FFF;
	--inputBorder: #aadcff;
	--headingText: #222222;
	--bodyText: #373d42;
	--serifFonts: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--monoFonts: "SF Mono", Menlo, monospace, "SF Pro Icons";
	--pageBackground: #FFFFFF;
	
	--linkForeground: #0599ff;
	--linkBackground: hsla(209, 100%, 52%, 0.07);
	--linkHoverForeground: hsla(50, 100%, 25%, 1);
	--linkHoverBackground: hsla(50, 100%, 50%, 0.51)
}

The header is no longer a static image but a dynamically generated canvas one where the color values are read from the above CSS. There are a few more areas where I’ll need to figure out whether to generalize some hard-coded values away into a re-usable custom property. There are also a handful of SVGs that I will need to inline to ensure they can have color values that read from the custom properties as well.

:pancakes:

2

Cool! Does this mean we can see a Canadian coloured orange?

Wasn’t there a Canadian theme on the old forums, or am I still in an early morning haze?

3

There was! And yes, the orange and KIRUPA text will be theme-able as well. It’s going to be a hoot.

1 Like
4

I hope there are enough custom properties to enable a https://www.lingscars.com/ style theme here. :stuck_out_tongue_winking_eye: :thumb2:

1 Like
5

Now, we are even more close than we were earlier this year. The one wrinkle was the header. I changed its implementation to display the randomly sized and positioned circles by tweaking CSS radial gradients which, in turn, rely on CSS custom properties :sunglasses: