catppuccin
Useful utility function -> obtain all CSS variables on the website easily
Is there an existing issue outlining your problem?
- [X] I have searched the existing issues and they do not solve my problem.
Describe your issue.
Here's a cool utility function that will yield every single CSS variable on any site
[...document.styleSheets]
.filter((styleSheet) => {
if (!styleSheet.href) {
return true;
}
return styleSheet.href.indexOf(window.location.origin) === 0;
})
.reduce(
(finalArr, sheet) =>
finalArr.concat(
[...sheet.cssRules]
.filter((rule) => rule.type === 1)
.reduce((propValArr, rule) => {
const props = [...rule.style]
.map((propName) => [
propName.trim(),
rule.style.getPropertyValue(propName).trim(),
])
.filter(([propName]) => propName.indexOf("--") === 0);
return [...propValArr, ...props];
}, []),
),
[],
);
On github we get:
Use case:
Makes it easier to style websites that use CSS variables for their theme
Source: https://css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/
Most the code seems done, feel free to PR this as part of the "tips and tricks" section of our docs. If your not confident with doing so we can do it for you.
What's the benefit of this over simply viewing the variables which are almost always on the <html>/:root element in the normal style panel? Knowing all of the variables doesn't really help since you need to know where they are and what they theme anyway.
What's the benefit of this over simply viewing the variables which are almost always on the
<html>/:rootelement in the normal style panel? Knowing all of the variables doesn't really help since you need to know where they are and what they theme anyway.
Some websites don't put all their variables on the root and can be tricky to find all the variables, but I think the best outcome from this is that we can now manipulate every single CSS variable with code (see linked PR)
I think this results in lower quality userstyles. I too used to use color matching tools to get the right colors for variables to match the website, but that isn't what this is about, not every color makes sense to match in Catppuccin; some should be accent, some should follow existing standards/rules in Catppuccin (base-mantle-crust usage in backgrounds, subtext0/1/text usage), etc. I should also mention that the CIE 2000 algorithm for finding similar colors you mentioned can have a lot of false positives / inaccuracies.
I think this results in lower quality userstyles. I too used to use color matching tools to get the right colors for variables to match the website, but that isn't what this is about, not every color makes sense to match in Catppuccin; some should be accent, some should follow existing standards/rules in Catppuccin (base-mantle-crust usage in backgrounds, subtext0/1/text usage), etc. I should also mention that the CIE 2000 algorithm for finding similar colors you mentioned can have a lot of false positives / inaccuracies.
Ok, I'll make sure to include that
what do you think if I add wording around how this should only be used as a rough start ? just to kickstart etc.