Skip to content

Instantly share code, notes, and snippets.

@iurygdeoliveira
Created January 13, 2026 15:02
Show Gist options
  • Select an option

  • Save iurygdeoliveira/2d17ca65587fd21c6c615b3292c650de to your computer and use it in GitHub Desktop.

Select an option

Save iurygdeoliveira/2d17ca65587fd21c6c615b3292c650de to your computer and use it in GitHub Desktop.
Paleta de cores para o light/dark theme no filament v4
/*
* Colors - Dark Mode
*/
.dark {
/* Paleta de cor Primária (OKLCH Base #05df72) */
--primary-50: #122421;
--primary-100: #0f4a31;
--primary-200: #0c6f41;
--primary-300: #0a9451;
--primary-400: #07b961;
--primary-500: #05df72;
--primary-600: #34e58c;
--primary-700: #63eba6;
--primary-800: #92f2c0;
--primary-900: #c1f8da;
--primary-950: #f0fff5;
/* Paleta de cor Perigo (Base #a52927) */
--danger-50: #31151e;
--danger-100: #48191f;
--danger-200: #5f1d21;
--danger-300: #762123;
--danger-400: #8d2525;
--danger-500: #a52927;
--danger-600: #b45350;
--danger-700: #c37e79;
--danger-800: #d2a9a2;
--danger-900: #e1d4cb;
--danger-950: #f0fff5;
/* Paleta de cor Aviso (OKLCH Base #ffb900) */
--warning-50: #301d17;
--warning-100: #583718;
--warning-200: #825712;
--warning-300: #ab780c;
--warning-400: #d59806;
--warning-500: #ffb900;
--warning-600: #fcc731;
--warning-700: #f9d562;
--warning-800: #f6e393;
--warning-900: #f3f1c4;
--warning-950: #f0fff5;
/* Paleta de cor Info (Azul Sky Sugerido #0ea5e9) */
--info-50: #191e36;
--info-100: #163959;
--info-200: #14547d;
--info-300: #126fa1;
--info-400: #108ac5;
--info-500: #0ea5e9;
--info-600: #3bb7eb;
--info-700: #68c9ed;
--info-800: #95dbf0;
--info-900: #c2edf2;
--info-950: #f0fff5;
/* Paleta de cor Secundária (Interpolada) */
--secondary-50: #1f1f22;
--secondary-100: #2f2f33;
--secondary-200: #3f3f45;
--secondary-300: #505056;
--secondary-400: #606068;
--secondary-500: #71717a;
--secondary-600: #a1a1aa;
--secondary-700: #d4d4d8;
--secondary-800: #e4e4e7;
--secondary-900: #f4f4f5;
--secondary-950: #fafafa;
}
/*
* Colors - Light Mode
*/
:root {
/* Paleta de cor Primária - Verde Floresta (Light) */
--primary-50: #e6f4ed;
--primary-100: #cce9dc;
--primary-200: #99d3b9;
--primary-300: #66bd96;
--primary-400: #33a773;
--primary-500: #014029;
--primary-600: #013322;
--primary-700: #01261a;
--primary-800: #011a11;
--primary-900: #000d09;
--primary-950: #000604;
/* Paleta de cor Perigo - Vermelho (Light) */
--danger-50: #fef2f1;
--danger-100: #fde5e3;
--danger-200: #fbcbc7;
--danger-300: #f8b1ab;
--danger-400: #f6978f;
--danger-500: #d93223;
--danger-600: #ae281c;
--danger-700: #821e15;
--danger-800: #57140e;
--danger-900: #2b0a07;
--danger-950: #160503;
/* Paleta de cor Aviso - Laranja (Light) */
--warning-50: #fef5ed;
--warning-100: #fdebdb;
--warning-200: #fbd7b7;
--warning-300: #f9c393;
--warning-400: #f7af6f;
--warning-500: #f28907;
--warning-600: #c26e06;
--warning-700: #915204;
--warning-800: #613703;
--warning-900: #301b01;
--warning-950: #180e01;
/* Paleta de cor Info - Azul (Light) */
--info-50: #eff6ff;
--info-100: #dbeafe;
--info-200: #bfdbfe;
--info-300: #93c5fd;
--info-400: #60a5fa;
--info-500: #3b82f6;
--info-600: #2563eb;
--info-700: #1d4ed8;
--info-800: #1e40af;
--info-900: #1e3a8a;
--info-950: #172554;
/* Paleta de cor Secundária - Cinza/Zinc (Light) */
--secondary-50: #fafafa;
--secondary-100: #f4f4f5;
--secondary-200: #e4e4e7;
--secondary-300: #d4d4d8;
--secondary-400: #a1a1aa;
--secondary-500: #71717a;
--secondary-600: #52525b;
--secondary-700: #3f3f46;
--secondary-800: #27272a;
--secondary-900: #18181b;
--secondary-950: #09090b;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment