Yaru Color Palette CSS - Nrem / Configs

Yaru Color Palette CSS

UserCSS.icon

Yaru syntax highlighting

Auto (Light/Dark)

code:light-dark.css

@import url("./light.css") (prefers-color-scheme: light);

@import url("./dark.css") (prefers-color-scheme: dark);

Light

code:light.css

:root {

--yaru-interactive-button-neutral-bg: rgb(13, 118, 29);

--yaru-blue-1: #75d3f4;

--yaru-blue-2: #47c4f1;

--yaru-blue-3: #19B6EE;

--yaru-blue-4: #007aa6;

--yaru-blue-5: #335280;

--yaru-dark-1: #77767B;

--yaru-dark-2: #5E5C64;

--yaru-dark-3: #504E55;

--yaru-dark-4: #3D3846;

--yaru-dark-5: #241F31;

--yaru-dark-6: #000000;

--yaru-green-1: #5AED70;

--yaru-green-2: #47D35C;

--yaru-green-3: #34B948;

--yaru-green-4: #219E34;

--yaru-green-5: #0e8420;

--yaru-light-1: #FFFFFF;

--yaru-light-2: #FCFCFC;

--yaru-light-3: #F6F5F4;

--yaru-light-4: #DEDDDA;

--yaru-light-5: #C0BFBC;

--yaru-light-6: #B0AFAC;

--yaru-light-7: #9A9996;

--yaru-orange-1: #F29879;

--yaru-orange-2: #F08763;

--yaru-orange-3: #ED764D;

--yaru-orange-4: #EB6536;

--yaru-orange-5: #E95420;

--yaru-purple-1: #924D8B;

--yaru-purple-2: #762572;

--yaru-purple-3: #77216F;

--yaru-purple-4: #5E2750;

--yaru-purple-5: #2C001E;

--yaru-red-1: #EA485C;

--yaru-red-2: #DE374C;

--yaru-red-3: #D3273B;

--yaru-red-4: #c7162b;

--yaru-red-5: #a91224;

--yaru-yellow-1: #FCCD87;

--yaru-yellow-2: #FBC16A;

--yaru-yellow-3: #FBB44C;

--yaru-yellow-4: #FAA82F;

--yaru-yellow-5: #F99B11;

}

Dark

code:dark.css

:root {

/* */

/* La Koloraro de Yaru-dark */

/* */

--yaru-blue-1: #75d3f4;

--yaru-blue-2: #47c4f1;

--yaru-blue-3: #19B6EE;

--yaru-blue-4: #007aa6;

--yaru-blue-5: #335280;

--yaru-dark-1: hsl(252, 2%, 47%);

--yaru-dark-2: hsl(255, 4%, 38%);

--yaru-dark-3: hsl(257, 4%, 32%);

--yaru-dark-4: hsl(261 11% 25%);

--yaru-dark-5: hsl(257 23% 16%);

--yaru-dark-6: hsl(0, 0%, 0%);

--yaru-dark-1: #77767B;

--yaru-dark-2: #5E5C64;

--yaru-dark-3: #504E55;

--yaru-dark-4: #3D3846;

--yaru-dark-5: #241F31;

--yaru-dark-6: #000000;

--yaru-green-1: #5AED70;

--yaru-green-2: #47D35C;

--yaru-green-3: #34B948;

--yaru-green-4: #219E34;

--yaru-green-5: #0e8420;

--yaru-light-1: #FFFFFF;

--yaru-light-2: #FCFCFC;

--yaru-light-3: #F6F5F4;

--yaru-light-4: #DEDDDA;

--yaru-light-5: #C0BFBC;

--yaru-light-6: #B0AFAC;

--yaru-light-7: #9A9996;

--yaru-orange-1: #F29879;

--yaru-orange-2: #F08763;

--yaru-orange-3: #ED764D;

--yaru-orange-4: #EB6536;

--yaru-orange-5: #E95420;

--yaru-purple-1: #b776b0;

--yaru-purple-2: #c590bf;

--yaru-purple-3: #77216F;

--yaru-purple-4: #5E2750;

--yaru-purple-5: #2C001E;

--yaru-red-1: #EA485C;

--yaru-red-2: #DE374C;

--yaru-red-3: #D3273B;

--yaru-red-4: #c7162b;

--yaru-red-5: #a91224;

--yaru-yellow-1: #FCCD87;

--yaru-yellow-2: #FBC16A;

--yaru-yellow-3: #FBB44C;

--yaru-yellow-4: #FAA82F;

--yaru-yellow-5: #F99B11;

--libadwaita-dark: #262626;

--libadwaita-dark-alt: #303030;

}