Skip to content

Instantly share code, notes, and snippets.

@0xRyze

0xRyze/css-override

Created July 24, 2024 07:58
Show Gist options
  • Save 0xRyze/aca5f9320f3f965ded9bfb0903ed4053 to your computer and use it in GitHub Desktop.
Save 0xRyze/aca5f9320f3f965ded9bfb0903ed4053 to your computer and use it in GitHub Desktop.
Download ZIP
Custom Css Overide
Raw
css-override
//Light theme config
.bandit-themes, .light, .light-theme {
--custom-1: #fcfdfe;
--custom-2: #f7f9fd;
--custom-3: #eef2fb;
--custom-4: #e3eafb;
--custom-5: #d6dff8;
--custom-6: #c6d2f2;
--custom-7: #b1c0e7;
--custom-8: #95a7dc;
--custom-9: #647dce;
--custom-10: #5870bf;
--custom-11: #536ab9;
--custom-12: #263154;
--custom-a1: #0055aa03;
--custom-a2: #0040c008;
--custom-a3: #003cc311;
--custom-a4: #0040db1c;
--custom-a5: #0038d429;
--custom-a6: #0036c539;
--custom-a7: #0032b14e;
--custom-a8: #012cab6a;
--custom-a9: #0029af9b;
--custom-a10: #00259ea7;
--custom-a11: #002297ac;
--custom-a12: #000d36d9;
--custom-contrast: #fff;
--custom-surface: #f5f8fdcc;
--custom-indicator: #647dce;
--custom-track: #647dce;
}
@supports (color: color(display-p3 1 1 1)) {
@media (color-gamut: p3) {
:root, .light, .light-theme {
--custom-1: oklch(99.3% 0.002 269.4);
--custom-2: oklch(98.2% 0.006 269.4);
--custom-3: oklch(96% 0.013 269.4);
--custom-4: oklch(93.7% 0.024 269.4);
--custom-5: oklch(90.5% 0.035 269.4);
--custom-6: oklch(86.4% 0.046 269.4);
--custom-7: oklch(80.9% 0.059 269.4);
--custom-8: oklch(73.4% 0.08 269.4);
--custom-9: oklch(60.7% 0.127 269.4);
--custom-10: oklch(56.5% 0.126 269.4);
--custom-11: oklch(54.5% 0.126 269.4);
--custom-12: oklch(32.1% 0.064 269.4);
--custom-a1: color(display-p3 0.024 0.349 0.675 / 0.012);
--custom-a2: color(display-p3 0.02 0.267 0.757 / 0.032);
--custom-a3: color(display-p3 0.008 0.192 0.69 / 0.063);
--custom-a4: color(display-p3 0.004 0.224 0.78 / 0.106);
--custom-a5: color(display-p3 0.004 0.18 0.773 / 0.153);
--custom-a6: color(display-p3 0.004 0.184 0.71 / 0.216);
--custom-a7: color(display-p3 0.004 0.165 0.643 / 0.295);
--custom-a8: color(display-p3 0.004 0.137 0.624 / 0.404);
--custom-a9: color(display-p3 0 0.129 0.635 / 0.589);
--custom-a10: color(display-p3 0 0.114 0.569 / 0.636);
--custom-a11: color(display-p3 0 0.102 0.553 / 0.655);
--custom-a12: color(display-p3 0 0.043 0.192 / 0.844);
--custom-contrast: #fff;
--custom-surface: color(display-p3 0.965 0.973 0.992 / 0.8);
--custom-indicator: oklch(60.7% 0.127 269.4);
--custom-track: oklch(60.7% 0.127 269.4);
}
}
}
.bandit-themes, .light, .light-theme {
--gray-1: #fbfcff;
--gray-2: #f8f9ff;
--gray-3: #edf0fb;
--gray-4: #e4e7f7;
--gray-5: #dce0f3;
--gray-6: #d4d8ee;
--gray-7: #c8cde8;
--gray-8: #b3b9dd;
--gray-9: #868cae;
--gray-10: #7c81a1;
--gray-11: #5e637d;
--gray-12: #1c1f31;
--gray-a1: #0040ff04;
--gray-a2: #0025ff07;
--gray-a3: #002bc712;
--gray-a4: #001db41b;
--gray-a5: #001ea823;
--gray-a6: #01189b2b;
--gray-a7: #00189537;
--gray-a8: #00158d4c;
--gray-a9: #000d5579;
--gray-a10: #000a4883;
--gray-a11: #000831a1;
--gray-a12: #000318e3;
--gray-contrast: #FFFFFF;
--gray-surface: #ffffffcc;
--gray-indicator: #868cae;
--gray-track: #868cae;
}
@supports (color: color(display-p3 1 1 1)) {
@media (color-gamut: p3) {
.bandit-themes, .light, .light-theme {
--gray-1: oklch(99.2% 0.005 277);
--gray-2: oklch(98.3% 0.009 277);
--gray-3: oklch(95.6% 0.016 277);
--gray-4: oklch(93.2% 0.021 277);
--gray-5: oklch(90.9% 0.027 277);
--gray-6: oklch(88.6% 0.031 277);
--gray-7: oklch(85.4% 0.038 277);
--gray-8: oklch(79.4% 0.051 277);
--gray-9: oklch(64.6% 0.051 277);
--gray-10: oklch(61.1% 0.049 277);
--gray-11: oklch(50.5% 0.042 277);
--gray-12: oklch(24.5% 0.035 277);
--gray-a1: color(display-p3 0.024 0.267 1 / 0.016);
--gray-a2: color(display-p3 0.024 0.161 0.863 / 0.028);
--gray-a3: color(display-p3 0.008 0.125 0.71 / 0.067);
--gray-a4: color(display-p3 0.004 0.078 0.655 / 0.102);
--gray-a5: color(display-p3 0.008 0.094 0.592 / 0.134);
--gray-a6: color(display-p3 0.004 0.075 0.549 / 0.165);
--gray-a7: color(display-p3 0.004 0.078 0.541 / 0.212);
--gray-a8: color(display-p3 0.004 0.071 0.51 / 0.295);
--gray-a9: color(display-p3 0.004 0.043 0.302 / 0.471);
--gray-a10: color(display-p3 0 0.031 0.255 / 0.51);
--gray-a11: color(display-p3 0 0.027 0.176 / 0.628);
--gray-a12: color(display-p3 0 0.008 0.082 / 0.887);
--gray-contrast: #FFFFFF;
--gray-surface: color(display-p3 1 1 1 / 80%);
--gray-indicator: oklch(64.6% 0.051 277);
--gray-track: oklch(64.6% 0.051 277);
}
}
}
.bandit-themes, .light, .light-theme, .radix-themes {
--color-background: #fff;
}
//Dark theme config
.bandit-themes, .dark, .dark-theme {
--custom-1: #fcfdfe;
--custom-2: #f7f9fd;
--custom-3: #eef2fb;
--custom-4: #e3eafb;
--custom-5: #d6dff8;
--custom-6: #c6d2f2;
--custom-7: #b1c0e7;
--custom-8: #95a7dc;
--custom-9: #647dce;
--custom-10: #5870bf;
--custom-11: #536ab9;
--custom-12: #263154;
--custom-a1: #0055aa03;
--custom-a2: #0040c008;
--custom-a3: #003cc311;
--custom-a4: #0040db1c;
--custom-a5: #0038d429;
--custom-a6: #0036c539;
--custom-a7: #0032b14e;
--custom-a8: #012cab6a;
--custom-a9: #0029af9b;
--custom-a10: #00259ea7;
--custom-a11: #002297ac;
--custom-a12: #000d36d9;
--custom-contrast: #fff;
--custom-surface: #f5f8fdcc;
--custom-indicator: #647dce;
--custom-track: #647dce;
}
@supports (color: color(display-p3 1 1 1)) {
@media (color-gamut: p3) {
:root, .dark, .dark {
--custom-1: oklch(99.3% 0.002 269.4);
--custom-2: oklch(98.2% 0.006 269.4);
--custom-3: oklch(96% 0.013 269.4);
--custom-4: oklch(93.7% 0.024 269.4);
--custom-5: oklch(90.5% 0.035 269.4);
--custom-6: oklch(86.4% 0.046 269.4);
--custom-7: oklch(80.9% 0.059 269.4);
--custom-8: oklch(73.4% 0.08 269.4);
--custom-9: oklch(60.7% 0.127 269.4);
--custom-10: oklch(56.5% 0.126 269.4);
--custom-11: oklch(54.5% 0.126 269.4);
--custom-12: oklch(32.1% 0.064 269.4);
--custom-a1: color(display-p3 0.024 0.349 0.675 / 0.012);
--custom-a2: color(display-p3 0.02 0.267 0.757 / 0.032);
--custom-a3: color(display-p3 0.008 0.192 0.69 / 0.063);
--custom-a4: color(display-p3 0.004 0.224 0.78 / 0.106);
--custom-a5: color(display-p3 0.004 0.18 0.773 / 0.153);
--custom-a6: color(display-p3 0.004 0.184 0.71 / 0.216);
--custom-a7: color(display-p3 0.004 0.165 0.643 / 0.295);
--custom-a8: color(display-p3 0.004 0.137 0.624 / 0.404);
--custom-a9: color(display-p3 0 0.129 0.635 / 0.589);
--custom-a10: color(display-p3 0 0.114 0.569 / 0.636);
--custom-a11: color(display-p3 0 0.102 0.553 / 0.655);
--custom-a12: color(display-p3 0 0.043 0.192 / 0.844);
--custom-contrast: #fff;
--custom-surface: color(display-p3 0.965 0.973 0.992 / 0.8);
--custom-indicator: oklch(60.7% 0.127 269.4);
--custom-track: oklch(60.7% 0.127 269.4);
}
}
}
.bandit-themes, .dark, .dark-theme {
--gray-1: #fbfcff;
--gray-2: #f8f9ff;
--gray-3: #edf0fb;
--gray-4: #e4e7f7;
--gray-5: #dce0f3;
--gray-6: #d4d8ee;
--gray-7: #c8cde8;
--gray-8: #b3b9dd;
--gray-9: #868cae;
--gray-10: #7c81a1;
--gray-11: #5e637d;
--gray-12: #1c1f31;
--gray-a1: #0040ff04;
--gray-a2: #0025ff07;
--gray-a3: #002bc712;
--gray-a4: #001db41b;
--gray-a5: #001ea823;
--gray-a6: #01189b2b;
--gray-a7: #00189537;
--gray-a8: #00158d4c;
--gray-a9: #000d5579;
--gray-a10: #000a4883;
--gray-a11: #000831a1;
--gray-a12: #000318e3;
--gray-contrast: #FFFFFF;
--gray-surface: #ffffffcc;
--gray-indicator: #868cae;
--gray-track: #868cae;
}
@supports (color: color(display-p3 1 1 1)) {
@media (color-gamut: p3) {
.bandit-themes, .dark, .dark-theme {
--gray-1: oklch(99.2% 0.005 277);
--gray-2: oklch(98.3% 0.009 277);
--gray-3: oklch(95.6% 0.016 277);
--gray-4: oklch(93.2% 0.021 277);
--gray-5: oklch(90.9% 0.027 277);
--gray-6: oklch(88.6% 0.031 277);
--gray-7: oklch(85.4% 0.038 277);
--gray-8: oklch(79.4% 0.051 277);
--gray-9: oklch(64.6% 0.051 277);
--gray-10: oklch(61.1% 0.049 277);
--gray-11: oklch(50.5% 0.042 277);
--gray-12: oklch(24.5% 0.035 277);
--gray-a1: color(display-p3 0.024 0.267 1 / 0.016);
--gray-a2: color(display-p3 0.024 0.161 0.863 / 0.028);
--gray-a3: color(display-p3 0.008 0.125 0.71 / 0.067);
--gray-a4: color(display-p3 0.004 0.078 0.655 / 0.102);
--gray-a5: color(display-p3 0.008 0.094 0.592 / 0.134);
--gray-a6: color(display-p3 0.004 0.075 0.549 / 0.165);
--gray-a7: color(display-p3 0.004 0.078 0.541 / 0.212);
--gray-a8: color(display-p3 0.004 0.071 0.51 / 0.295);
--gray-a9: color(display-p3 0.004 0.043 0.302 / 0.471);
--gray-a10: color(display-p3 0 0.031 0.255 / 0.51);
--gray-a11: color(display-p3 0 0.027 0.176 / 0.628);
--gray-a12: color(display-p3 0 0.008 0.082 / 0.887);
--gray-contrast: #FFFFFF;
--gray-surface: color(display-p3 1 1 1 / 80%);
--gray-indicator: oklch(64.6% 0.051 277);
--gray-track: oklch(64.6% 0.051 277);
}
}
}
.bandit-themes, .dark, .dark-theme, .radix-themes {
--color-background: #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment