Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Useful utility function -> obtain all CSS variables on the website easily #1247

Open
1 task done
NikitaRevenco opened this issue Aug 30, 2024 · 8 comments
Open
1 task done

Useful utility function -> obtain all CSS variables on the website easily #1247

NikitaRevenco opened this issue Aug 30, 2024 · 8 comments
Labels
meta Repository-wide issues

Comments

@NikitaRevenco
Copy link
Contributor

NikitaRevenco commented Aug 30, 2024 •
edited
Loading

Is there an existing issue outlining your problem?

  • 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:

image

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/
@NikitaRevenco NikitaRevenco added the meta Repository-wide issues label Aug 30, 2024
@NeonGamerBot-QK
Copy link
Member

noice

@isabelroses
Copy link
Member

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.

@orangci
Copy link
Member

orangci commented Aug 31, 2024

this is... I love you

@uncenter
Copy link
Member

uncenter commented Aug 31, 2024 •
edited
Loading

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.

@NikitaRevenco NikitaRevenco mentioned this issue Aug 31, 2024
Closed
@NikitaRevenco
Copy link
Contributor Author

Update

See #1250

@NikitaRevenco
Copy link
Contributor Author

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.

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)

@uncenter
Copy link
Member

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.

@NikitaRevenco
Copy link
Contributor Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
meta Repository-wide issues
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@uncenter @NeonGamerBot-QK @isabelroses @orangci @NikitaRevenco