coloradix integrations for UnoCSS
- Choose only the colors you need
- Light & Dark mode with data attribute
data-theme="{light|dark}" - Color alias with data attribute
data-alias-{name}="{color}" - Optional overlay colors (black and white)
- Support unocss opacity modifier
bg-{alias}-{shade}/{opacity}
npm install -D @coloradix/unocss
# or
yarn add -D @coloradix/unocss
# or
pnpm add -D @coloradix/unocssTypescript Config (Typescript)
import { defineConfig } from "unocss";
import coloradix, { gray, red, green, blue } from "@coloradix/unocss";
const radix = coloradix({
gray,
red,
green,
blue,
})
.alias({
neutral: "gray" /** fixed color */,
primary: ["red", "green", "blue"] /** dynamic color, first element of array used as main color */,
})
.build();
export default defineConfig({
theme: {
colors: radix.colors,
},
preflights: [radix.preflight],
});Alias will be used as unocss colors
<div class="bg-black text-white">
<div class="bg-neutral-3 text-neutral-11">coloradix</div>
<div class="bg-primary-3 text-primary-11">unocss</div>
</div>Expected output, will be added to unocss preflight
:root,
[data-theme="light"] {
--gray-1: 252, 252, 252;
--gray-2: 249, 249, 249;
--gray-3: 240, 240, 240;
--gray-4: 232, 232, 232;
--gray-5: 224, 224, 224;
--gray-6: 217, 217, 217;
--gray-7: 206, 206, 206;
--gray-8: 187, 187, 187;
--gray-9: 141, 141, 141;
--gray-10: 131, 131, 131;
--gray-11: 100, 100, 100;
--gray-12: 32, 32, 32;
--red-1: 255, 252, 252;
--red-2: 255, 247, 247;
--red-3: 254, 235, 236;
--red-4: 255, 219, 220;
--red-5: 255, 205, 206;
--red-6: 253, 189, 190;
--red-7: 244, 169, 170;
--red-8: 235, 142, 144;
--red-9: 229, 72, 77;
--red-10: 220, 62, 66;
--red-11: 206, 44, 49;
--red-12: 100, 23, 35;
--green-1: 251, 254, 252;
--green-2: 244, 251, 246;
--green-3: 230, 246, 235;
--green-4: 214, 241, 223;
--green-5: 196, 232, 209;
--green-6: 173, 221, 192;
--green-7: 142, 206, 170;
--green-8: 91, 185, 139;
--green-9: 48, 164, 108;
--green-10: 43, 154, 102;
--green-11: 33, 131, 88;
--green-12: 25, 59, 45;
--blue-1: 251, 253, 255;
--blue-2: 244, 250, 255;
--blue-3: 230, 244, 254;
--blue-4: 213, 239, 255;
--blue-5: 194, 229, 255;
--blue-6: 172, 216, 252;
--blue-7: 142, 200, 246;
--blue-8: 94, 177, 239;
--blue-9: 0, 144, 255;
--blue-10: 5, 136, 240;
--blue-11: 13, 116, 206;
--blue-12: 17, 50, 100;
}
[data-theme="dark"] {
--gray-1: 17, 17, 17;
--gray-2: 25, 25, 25;
--gray-3: 34, 34, 34;
--gray-4: 42, 42, 42;
--gray-5: 49, 49, 49;
--gray-6: 58, 58, 58;
--gray-7: 72, 72, 72;
--gray-8: 96, 96, 96;
--gray-9: 110, 110, 110;
--gray-10: 123, 123, 123;
--gray-11: 180, 180, 180;
--gray-12: 238, 238, 238;
--red-1: 25, 17, 17;
--red-2: 32, 19, 20;
--red-3: 59, 18, 25;
--red-4: 80, 15, 28;
--red-5: 97, 22, 35;
--red-6: 114, 35, 45;
--red-7: 140, 51, 58;
--red-8: 181, 69, 72;
--red-9: 229, 72, 77;
--red-10: 236, 93, 94;
--red-11: 255, 149, 146;
--red-12: 255, 209, 217;
--green-1: 14, 21, 18;
--green-2: 18, 27, 23;
--green-3: 19, 45, 33;
--green-4: 17, 59, 41;
--green-5: 23, 73, 51;
--green-6: 32, 87, 62;
--green-7: 40, 104, 74;
--green-8: 47, 124, 87;
--green-9: 48, 164, 108;
--green-10: 51, 176, 116;
--green-11: 61, 214, 140;
--green-12: 177, 241, 203;
--blue-1: 13, 21, 32;
--blue-2: 17, 25, 39;
--blue-3: 13, 40, 71;
--blue-4: 0, 51, 98;
--blue-5: 0, 64, 116;
--blue-6: 16, 77, 135;
--blue-7: 32, 93, 158;
--blue-8: 40, 112, 189;
--blue-9: 0, 144, 255;
--blue-10: 59, 158, 255;
--blue-11: 112, 184, 255;
--blue-12: 194, 230, 255;
}
:root {
--neutral-1: var(--gray-1);
--neutral-2: var(--gray-2);
--neutral-3: var(--gray-3);
--neutral-4: var(--gray-4);
--neutral-5: var(--gray-5);
--neutral-6: var(--gray-6);
--neutral-7: var(--gray-7);
--neutral-8: var(--gray-8);
--neutral-9: var(--gray-9);
--neutral-10: var(--gray-10);
--neutral-11: var(--gray-11);
--neutral-12: var(--gray-12);
}
:root,
[data-alias-primary="red"] {
--primary-1: var(--red-1);
--primary-2: var(--red-2);
--primary-3: var(--red-3);
--primary-4: var(--red-4);
--primary-5: var(--red-5);
--primary-6: var(--red-6);
--primary-7: var(--red-7);
--primary-8: var(--red-8);
--primary-9: var(--red-9);
--primary-10: var(--red-10);
--primary-11: var(--red-11);
--primary-12: var(--red-12);
}
[data-alias-primary="green"] {
--primary-1: var(--green-1);
--primary-2: var(--green-2);
--primary-3: var(--green-3);
--primary-4: var(--green-4);
--primary-5: var(--green-5);
--primary-6: var(--green-6);
--primary-7: var(--green-7);
--primary-8: var(--green-8);
--primary-9: var(--green-9);
--primary-10: var(--green-10);
--primary-11: var(--green-11);
--primary-12: var(--green-12);
}
[data-alias-primary="blue"] {
--primary-1: var(--blue-1);
--primary-2: var(--blue-2);
--primary-3: var(--blue-3);
--primary-4: var(--blue-4);
--primary-5: var(--blue-5);
--primary-6: var(--blue-6);
--primary-7: var(--blue-7);
--primary-8: var(--blue-8);
--primary-9: var(--blue-9);
--primary-10: var(--blue-10);
--primary-11: var(--blue-11);
--primary-12: var(--blue-12);
}
:root {
--black-1: rgba(0, 0, 0, 0.05);
--black-2: rgba(0, 0, 0, 0.1);
--black-3: rgba(0, 0, 0, 0.15);
--black-4: rgba(0, 0, 0, 0.2);
--black-5: rgba(0, 0, 0, 0.3);
--black-6: rgba(0, 0, 0, 0.4);
--black-7: rgba(0, 0, 0, 0.5);
--black-8: rgba(0, 0, 0, 0.6);
--black-9: rgba(0, 0, 0, 0.7);
--black-10: rgba(0, 0, 0, 0.8);
--black-11: rgba(0, 0, 0, 0.9);
--black-12: rgba(0, 0, 0, 0.95);
--white-1: rgba(255, 255, 255, 0.05);
--white-2: rgba(255, 255, 255, 0.1);
--white-3: rgba(255, 255, 255, 0.15);
--white-4: rgba(255, 255, 255, 0.2);
--white-5: rgba(255, 255, 255, 0.3);
--white-6: rgba(255, 255, 255, 0.4);
--white-7: rgba(255, 255, 255, 0.5);
--white-8: rgba(255, 255, 255, 0.6);
--white-9: rgba(255, 255, 255, 0.7);
--white-10: rgba(255, 255, 255, 0.8);
--white-11: rgba(255, 255, 255, 0.9);
--white-12: rgba(255, 255, 255, 0.95);
}