docs: Script that copies all CSS variables used on any website and converts them to the nearest catppuccin color

[nikitarevenco]

Hi, here's a script I made that you might find useful - it creates buttons on any website with two functionalities:

• Copy every single CSS variable used on the website into clipboard

For example, on node.js we get:

--black: #000000;
--black1: #090c15;
--black2: #2c3437;
--black3: #0d111d;
--blue1: #0a56b2;
--white: #ffffff;
--white-smoke: #f2f2f2;
--grey-smoke: #e9edf0;
--red1: #d60027;
--red2: #d50027;
--red3: #ca5010;
--red4: #ff7070;
--green1: #3e7a38;
--green2: #5a8147;
--green3: #64de64;
--green4: #99cc7d;
--green5: #84ba64;
--gray1: #707070;
--gray2: #b4b4b4;
--gray3: #cccccc;
--gray4: #040404;
/* 30 more ... */

2nd functionality (most coolest):

• Take every single CSS variable on the website, use the CIE2000 algorithm on every color to find most closest catppuccin color and then copies everything into clipboard

It accounts for opacity by using LESS fade() function and variables referencing other variables with var()

Example usage

On node.js website

Before

After

As you can see, it was able to make an OK theme, (which I think is awesome for a script we can copy and paste) - manual intervention will still be required ofc (like the text is not legible on the bright backgrounds there)

The following CSS has been automatically generated and all I did was copy and paste it into the console:

--black: @crust;
--black1: @crust;
--black2: @surface0;
--black3: @crust;
--blue1: @surface2;
--white: @rosewater;
--white-smoke: @rosewater;
--grey-smoke: @rosewater;
--red1: @red;
--red2: @red;
--red3: @peach;
--red4: @red;
--green1: @green;
--green2: @green;
--green3: @green;
--green4: @green;
--green5: @green;
--gray1: @overlay0;
--gray2: @subtext0;
--gray3: @rosewater;
--gray4: @crust;
--gray5: @overlay0;
--gray6: @surface0;
--gray7: @subtext1;
--grey8: @rosewater;
--background-color-api-stability-link: fade(@rosewater, 40%);
--background-color-highlight: @rosewater;
--color-brand-primary: @surface0;
--color-brand-secondary: @green;
--color-critical: @red;
--color-fill-app: @rosewater;
--color-fill-side-nav: @surface0;
--color-links: @green;
--color-text-mark: @overlay0;
--color-text-nav: @rosewater;
--color-text-primary: @surface0;
--color-text-secondary: @green;
--background-color-highlight: @surface0;
--color-critical: @red;
--color-fill-app: @crust;
--color-fill-side-nav: @crust;
--color-links: @green;
--color-text-mark: @overlay0;
--color-text-primary: @rosewater;

Also I added a reference tips-and-tricks.md a reference in how-to-write-a-userstyle since I think that would be a good idea

Follow up from #1247

Script (minified) - try to copy-paste this into github's console!:

const getAllCssVariables=()=>[...document.styleSheets].filter((({href:e})=>!e||e.startsWith(window.___location.origin))).flatMap((({cssRules:e})=>[...e].filter((({type:e})=>1===e)).flatMap((({style:e})=>[...e].filter((e=>e.startsWith("--"))).map((t=>[t.trim(),e.getPropertyValue(t).trim()])))))),themeColors={mocha:[["rosewater","#f5e0dc"],["flamingo","#f2cdcd"],["pink","#f5c2e7"],["mauve","#cba6f7"],["red","#f38ba8"],["maroon","#eba0ac"],["peach","#fab387"],["yellow","#f9e2af"],["green","#a6e3a1"],["teal","#94e2d5"],["sky","#89dceb"],["sapphire","#74c7ec"],["blue","#89b4fa"],["lavender","#b4befe"],["text","#cdd6f4"],["subtext1","#bac2de"],["subtext0","#a6adc8"],["overlay2","#9399b2"],["overlay1","#7f849c"],["overlay0","#6c7086"],["surface2","#585b70"],["surface1","#45475a"],["surface0","#313244"],["base","#1e1e2e"],["mantle","#181825"],["crust","#11111b"]],latte:[["rosewater","#dc8a78"],["flamingo","#dd7878"],["pink","#ea76cb"],["mauve","#8839ef"],["red","#d20f39"],["maroon","#e64553"],["peach","#fe640b"],["yellow","#df8e1d"],["green","#40a02b"],["teal","#179299"],["sky","#04a5e5"],["sapphire","#209fb5"],["blue","#1e66f5"],["lavender","#7287fd"],["text","#4c4f69"],["subtext1","#5c5f77"],["subtext0","#6c6f85"],["overlay2","#7c7f93"],["overlay1","#8c8fa1"],["overlay0","#9ca0b0"],["surface2","#acb0be"],["surface1","#bcc0cc"],["surface0","#ccd0da"],["base","#eff1f5"],["mantle","#e6e9ef"],["crust","#dce0e8"]]},isHex=e=>/^#([0-9a-f]{3,4}|[0-9a-f]{6,8})$/i.test(e),isRgb=e=>(e.startsWith("rgb(")||e.startsWith("rgba("))&&e.endsWith(")"),parseRgb=e=>{const[t,a,r,s=1]=e.replace(/rgba?\((.*?)\)/,"$1").split(",").map(((e,t)=>t<3&&e.includes("%")?255*parseFloat(e)/100:+e));return{r:t,g:a,b:r,opacity:s}},rgb2lab=({r:e,g:t,b:a})=>{let r,s,o,c=e/255,l=t/255,n=a/255;return c=c>.04045?Math.pow((c+.055)/1.055,2.4):c/12.92,l=l>.04045?Math.pow((l+.055)/1.055,2.4):l/12.92,n=n>.04045?Math.pow((n+.055)/1.055,2.4):n/12.92,r=(.4124*c+.3576*l+.1805*n)/.95047,s=(.2126*c+.7152*l+.0722*n)/1,o=(.0193*c+.1192*l+.9505*n)/1.08883,r=r>.008856?Math.pow(r,1/3):7.787*r+16/116,s=s>.008856?Math.pow(s,1/3):7.787*s+16/116,o=o>.008856?Math.pow(o,1/3):7.787*o+16/116,[116*s-16,500*(r-s),200*(s-o)]},getDe2000DistanceBetweenTwoColors=(e,t,a,r,s,o)=>{Math.rad2deg=function(e){return 360*e/(2*Math.PI)},Math.deg2rad=function(e){return 2*Math.PI*e/360};const c=(e+r)/2,l=(Math.sqrt(Math.pow(t,2)+Math.pow(a,2))+Math.sqrt(Math.pow(s,2)+Math.pow(o,2)))/2,n=(1-Math.sqrt(Math.pow(l,7)/(Math.pow(l,7)+Math.pow(25,7))))/2,i=t*(1+n),h=s*(1+n),d=Math.sqrt(Math.pow(i,2)+Math.pow(a,2)),b=Math.sqrt(Math.pow(h,2)+Math.pow(o,2)),p=(d+b)/2;let g=Math.rad2deg(Math.atan2(a,i));g<0&&(g+=360);let M=Math.rad2deg(Math.atan2(o,h));M<0&&(M+=360);const f=Math.abs(g-M)>180?(g+M+360)/2:(g+M)/2,u=1-.17*Math.cos(Math.deg2rad(f-30))+.24*Math.cos(Math.deg2rad(2*f))+.32*Math.cos(Math.deg2rad(3*f+6))-.2*Math.cos(Math.deg2rad(4*f-63));let w=M-g;Math.abs(w)>180&&(M<=g?w+=360:w-=360);const m=r-e,C=b-d;w=2*Math.sqrt(d*b)*Math.sin(Math.deg2rad(w)/2);const y=1+.015*Math.pow(c-50,2)/Math.sqrt(20+Math.pow(c-50,2)),V=1+.045*p,v=1+.015*p*u,k=30*Math.exp(-Math.pow((f-275)/25,2)),x=-(2*Math.sqrt(Math.pow(p,7)/(Math.pow(p,7)+Math.pow(25,7))))*Math.sin(2*Math.deg2rad(k));return Math.sqrt(Math.pow(m/(1*y),2)+Math.pow(C/(1*V),2)+Math.pow(w/(1*v),2)+x*(C/(1*V))*(w/(1*v)))},parseHex=e=>{const t=e.length<=5,[a,r,s,o=255]=t?e.slice(1).match(/./g).map((e=>parseInt(e+e,16))):e.slice(1).match(/.{2}/g).map((e=>parseInt(e,16)));return{r:a,g:r,b:s,opacity:o/255}},closestColor=(e,t)=>{const a=t.map((([t,a])=>[t,getDe2000DistanceBetweenTwoColors(...rgb2lab(e),...rgb2lab(parseHex(a)))])),[r]=a.reduce(((e,t)=>t[1]<e[1]?t:e));return`@${r}`},isVar=e=>e.startsWith("var(")&&e.endsWith(")"),parseCssVariableValue=e=>isHex(e)?parseHex(e):isRgb(e)?parseRgb(e):!!isVar(e)&&parseVar(e),parseVar=e=>{const t=getAllCssVariables().find((([t])=>t===e.slice(4,-1)));return!!t&&parseCssVariableValue(t[1])},newCssVariables=e=>getAllCssVariables().flatMap((([t,a])=>{const r=parseCssVariableValue(a);if(r){const a=closestColor(r,e);return[[t,1===r.opacity?a:`fade(${a}, ${Math.round(100*r.opacity)}%)`]]}return[]})),getNewTheme=e=>newCssVariables(e).map((([e,t])=>`${e}: ${t};`)).join("\n"),[lightModeString,darkModeString,allCssVariablesString]=[getNewTheme(themeColors.latte),getNewTheme(themeColors.mocha),getAllCssVariables().map((([e,t])=>`${e}: ${t};`)).join("\n")],createButton=(e,t,a,r,s)=>{const o=document.createElement("button");return Object.assign(o.style,{position:"absolute",zIndex:"10000000000",top:t,left:"2rem",width:"10rem",height:"10rem",backgroundColor:a,color:r}),o.textContent=e,o.addEventListener("click",s),document.body.appendChild(o),o},buttons=[createButton("LIGHT - Click if the script was run while the website had a light theme","2rem","#cdd6f4","#1e1e2e",(()=>navigator.clipboard.writeText(lightModeString))),createButton("DARK - Click if the script was run while the website had a dark theme","14rem","#1e1e2e","#cdd6f4",(()=>navigator.clipboard.writeText(darkModeString))),createButton("ALL - Click to copy ALL CSS VARIABLES (unmodified)","26rem","#fab387","#11111b",(()=>navigator.clipboard.writeText(allCssVariablesString))),createButton("REMOVE BUTTONS","38rem","#eba0ac","#11111b",(()=>buttons.forEach((e=>document.body.removeChild(e)))))];scrollTo({top:0}),console.log("%c Success!","background:#a6e3a1;color:#1e1e2e;font-weight:bold;font-size:1.6rem;padding:0.2rem;"),console.log(`%c I was able to convert ${newCssVariables(themeColors.latte).length} / ${getAllCssVariables().length} css variables from this site to Catppuccin theme.`,"color:#89dceb;background:#1e1e2e;font-size:1.2rem;"),console.log('%c If this website had a light theme **when you ran this script**, click on the "LIGHT" button. \nElse click on the "DARK" button (otherwise the colors will be wrong)',"color:#cdd6f4;background:#1e1e2e;font-size:1.2rem;");

Full version: https://gist.github.com/nikitarevenco/f5470f16f562062cd88c9882aeb86611

[uncenter]

Going to close this for now as for my reasons discussed in #1247.