1684 lines
37 KiB
CSS
1684 lines
37 KiB
CSS
/* === Système de design ShaarIt - 16 Thèmes === */
|
|
|
|
/* Typographie globale (s'applique à tous) */
|
|
:root {
|
|
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--text-xs: 0.75rem;
|
|
--text-sm: 0.875rem;
|
|
--text-base: 1rem;
|
|
--text-lg: 1.125rem;
|
|
--text-xl: 1.25rem;
|
|
--text-2xl: 1.5rem;
|
|
|
|
--radius-xs: 4px;
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 16px;
|
|
--radius-xl: 28px;
|
|
--radius-full: 9999px;
|
|
|
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
|
|
--success: #10b981;
|
|
--danger: #ef4444;
|
|
--warning: #f59e0b;
|
|
--info: #3b82f6;
|
|
}
|
|
|
|
/* 1. DEFAULT (ShaarIt) - DARK (Par défaut si pas de light) */
|
|
:root, :root[data-theme-id="DEFAULT"] {
|
|
--primary: #00D4AA;
|
|
--primary-hover: #00B894;
|
|
--primary-light: rgba(0, 212, 170, 0.15);
|
|
--on-primary: #0A1628;
|
|
--primary-container: #243447;
|
|
--on-primary-container: #4EECC4;
|
|
|
|
--secondary: #0EA5E9;
|
|
--on-secondary: #0A1628;
|
|
--secondary-container: #2A3F54;
|
|
--on-secondary-container: #38BDF8;
|
|
|
|
--tertiary: #4EECC4;
|
|
--on-tertiary: #0A1628;
|
|
|
|
--background: #0A1628;
|
|
--on-background: #E2E8F0;
|
|
--bg-body: #0A1628;
|
|
--bg-sidebar: #0D1B2A;
|
|
--bg-card: #0D1B2A;
|
|
--bg-card-hover: #1B2838;
|
|
|
|
--surface: #0D1B2A;
|
|
--on-surface: #E2E8F0;
|
|
--text-main: #E2E8F0;
|
|
--text-secondary: #B0B8C4;
|
|
--text-muted: #94A3B8;
|
|
|
|
--surface-variant: #1B2838;
|
|
--on-surface-variant: #94A3B8;
|
|
|
|
--outline: #64748B;
|
|
--outline-variant: #2A3F54;
|
|
--border: #1B2838;
|
|
--border-light: #0D1B2A;
|
|
|
|
--error: #EF4444;
|
|
--on-error: #FFFFFF;
|
|
--error-container: #450A0A;
|
|
--on-error-container: #FCA5A5;
|
|
|
|
--header-bg: #0D1B2A;
|
|
--header-text: #E2E8F0;
|
|
|
|
--tag-bg: #243447;
|
|
--tag-text: #4EECC4;
|
|
--tag-green-bg: #1B3D2A;
|
|
--tag-green-text: #6EE7B7;
|
|
--tag-red-bg: #3D1515;
|
|
--tag-red-text: #FCA5A5;
|
|
--tag-yellow-bg: #3D2A15;
|
|
--tag-yellow-text: #FCD34D;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.7);
|
|
--selection-bg: rgba(0, 212, 170, 0.25);
|
|
--selection-border: #00D4AA;
|
|
}
|
|
|
|
/* 1. DEFAULT (ShaarIt) - LIGHT */
|
|
:root[data-theme="light"][data-theme-id="DEFAULT"] {
|
|
--primary: #006B5A;
|
|
--primary-hover: #005247;
|
|
--primary-light: rgba(0, 107, 90, 0.15);
|
|
--on-primary: #FFFFFF;
|
|
--primary-container: #B2F5E6;
|
|
--on-primary-container: #00201A;
|
|
|
|
--secondary: #0077B6;
|
|
--on-secondary: #FFFFFF;
|
|
--secondary-container: #D0E8FF;
|
|
--on-secondary-container: #001E36;
|
|
|
|
--tertiary: #00897B;
|
|
--on-tertiary: #FFFFFF;
|
|
|
|
--background: #F8FAFA;
|
|
--on-background: #1A1C1E;
|
|
--bg-body: #F8FAFA;
|
|
--bg-sidebar: #FFFFFF;
|
|
--bg-card: #FFFFFF;
|
|
--bg-card-hover: #F9FAFB;
|
|
|
|
--surface: #FFFFFF;
|
|
--on-surface: #1A1C1E;
|
|
--text-main: #111827;
|
|
--text-secondary: #6B7280;
|
|
--text-muted: #9CA3AF;
|
|
|
|
--surface-variant: #E7F0EE;
|
|
--on-surface-variant: #404944;
|
|
|
|
--outline: #707974;
|
|
--outline-variant: #C0C9C4;
|
|
--border: #E5E7EB;
|
|
--border-light: #F3F4F6;
|
|
|
|
--error: #BA1A1A;
|
|
--on-error: #FFFFFF;
|
|
--error-container: #FFDAD6;
|
|
--on-error-container: #410002;
|
|
|
|
--header-bg: #006B5A;
|
|
--header-text: #FFFFFF;
|
|
|
|
--tag-bg: #E0E7FF;
|
|
--tag-text: #4338CA;
|
|
--tag-green-bg: #D1FAE5;
|
|
--tag-green-text: #065F46;
|
|
--tag-red-bg: #FEE2E2;
|
|
--tag-red-text: #991B1B;
|
|
--tag-yellow-bg: #FEF3C7;
|
|
--tag-yellow-text: #92400E;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.5);
|
|
--selection-bg: rgba(0, 107, 90, 0.15);
|
|
--selection-border: #006B5A;
|
|
}
|
|
|
|
/* 2. GITHUB - DARK */
|
|
:root[data-theme-id="GITHUB"] {
|
|
--primary: #58A6FF;
|
|
--primary-hover: #3B82F6;
|
|
--primary-light: rgba(88, 166, 255, 0.15);
|
|
--on-primary: #0D1117;
|
|
--primary-container: #1F2937;
|
|
--on-primary-container: #79C0FF;
|
|
|
|
--secondary: #3FB950;
|
|
--on-secondary: #0D1117;
|
|
--secondary-container: #1C2D22;
|
|
--on-secondary-container: #56D364;
|
|
|
|
--tertiary: #D2A8FF;
|
|
--on-tertiary: #0D1117;
|
|
|
|
--background: #0D1117;
|
|
--on-background: #C9D1D9;
|
|
--bg-body: #0D1117;
|
|
--bg-sidebar: #161B22;
|
|
--bg-card: #161B22;
|
|
--bg-card-hover: #21262D;
|
|
|
|
--surface: #161B22;
|
|
--on-surface: #C9D1D9;
|
|
--text-main: #C9D1D9;
|
|
--text-secondary: #8B949E;
|
|
--text-muted: #6E7681;
|
|
|
|
--surface-variant: #21262D;
|
|
--on-surface-variant: #8B949E;
|
|
|
|
--outline: #30363D;
|
|
--outline-variant: #21262D;
|
|
--border: #21262D;
|
|
--border-light: #161B22;
|
|
|
|
--error: #F85149;
|
|
--on-error: #FFFFFF;
|
|
--error-container: #490202;
|
|
--on-error-container: #FFA198;
|
|
|
|
--header-bg: #161B22;
|
|
--header-text: #C9D1D9;
|
|
|
|
--tag-bg: #1C2D22;
|
|
--tag-text: #56D364;
|
|
--tag-green-bg: #1C2D22;
|
|
--tag-green-text: #56D364;
|
|
--tag-red-bg: #490202;
|
|
--tag-red-text: #FFA198;
|
|
--tag-yellow-bg: #3D2A15;
|
|
--tag-yellow-text: #FCD34D;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.7);
|
|
--selection-bg: rgba(88, 166, 255, 0.25);
|
|
--selection-border: #58A6FF;
|
|
}
|
|
|
|
/* 2. GITHUB - LIGHT */
|
|
:root[data-theme="light"][data-theme-id="GITHUB"] {
|
|
--primary: #0969DA;
|
|
--primary-hover: #0860CA;
|
|
--primary-light: rgba(9, 105, 218, 0.15);
|
|
--on-primary: #FFFFFF;
|
|
--primary-container: #DDF4FF;
|
|
--on-primary-container: #0A3069;
|
|
|
|
--secondary: #1A7F37;
|
|
--on-secondary: #FFFFFF;
|
|
--secondary-container: #DAFBE1;
|
|
--on-secondary-container: #0E4F1F;
|
|
|
|
--tertiary: #8250DF;
|
|
--on-tertiary: #FFFFFF;
|
|
|
|
--background: #FFFFFF;
|
|
--on-background: #1F2328;
|
|
--bg-body: #FFFFFF;
|
|
--bg-sidebar: #F6F8FA;
|
|
--bg-card: #F6F8FA;
|
|
--bg-card-hover: #EAEEF2;
|
|
|
|
--surface: #F6F8FA;
|
|
--on-surface: #1F2328;
|
|
--text-main: #1F2328;
|
|
--text-secondary: #656D76;
|
|
--text-muted: #8C959F;
|
|
|
|
--surface-variant: #EAEEF2;
|
|
--on-surface-variant: #656D76;
|
|
|
|
--outline: #D0D7DE;
|
|
--outline-variant: #E1E4E8;
|
|
--border: #D0D7DE;
|
|
--border-light: #EAEEF2;
|
|
|
|
--error: #CF222E;
|
|
--on-error: #FFFFFF;
|
|
--error-container: #FFEBE9;
|
|
--on-error-container: #82071E;
|
|
|
|
--header-bg: #0969DA;
|
|
--header-text: #FFFFFF;
|
|
|
|
--tag-bg: #DDF4FF;
|
|
--tag-text: #0969DA;
|
|
--tag-green-bg: #DAFBE1;
|
|
--tag-green-text: #1A7F37;
|
|
--tag-red-bg: #FFEBE9;
|
|
--tag-red-text: #CF222E;
|
|
--tag-yellow-bg: #FEF3C7;
|
|
--tag-yellow-text: #92400E;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.5);
|
|
--selection-bg: rgba(9, 105, 218, 0.15);
|
|
--selection-border: #0969DA;
|
|
}
|
|
|
|
/* 3. LINEAR - DARK */
|
|
:root[data-theme-id="LINEAR"] {
|
|
--primary: #5E6AD2;
|
|
--primary-hover: #4F5AC0;
|
|
--primary-light: rgba(94, 106, 210, 0.15);
|
|
--on-primary: #FFFFFF;
|
|
--primary-container: #2A2B3D;
|
|
--on-primary-container: #8B8FE8;
|
|
|
|
--secondary: #4EA7FC;
|
|
--on-secondary: #12131A;
|
|
--secondary-container: #1E2A3A;
|
|
--on-secondary-container: #7DC4FF;
|
|
|
|
--tertiary: #E8A861;
|
|
--on-tertiary: #12131A;
|
|
|
|
--background: #12131A;
|
|
--on-background: #EEEFF2;
|
|
--bg-body: #12131A;
|
|
--bg-sidebar: #1B1C24;
|
|
--bg-card: #1B1C24;
|
|
--bg-card-hover: #22232E;
|
|
|
|
--surface: #1B1C24;
|
|
--on-surface: #EEEFF2;
|
|
--text-main: #EEEFF2;
|
|
--text-secondary: #A0A5B0;
|
|
--text-muted: #8A8F98;
|
|
|
|
--surface-variant: #22232E;
|
|
--on-surface-variant: #8A8F98;
|
|
|
|
--outline: #3B3D4A;
|
|
--outline-variant: #2A2B3D;
|
|
--border: #22232E;
|
|
--border-light: #1B1C24;
|
|
|
|
--error: #EB5757;
|
|
--on-error: #FFFFFF;
|
|
--error-container: #3D1515;
|
|
--on-error-container: #FF9B9B;
|
|
|
|
--header-bg: #1B1C24;
|
|
--header-text: #EEEFF2;
|
|
|
|
--tag-bg: #2A2B3D;
|
|
--tag-text: #8B8FE8;
|
|
--tag-green-bg: #1E2A1E;
|
|
--tag-green-text: #7DC4FF;
|
|
--tag-red-bg: #3D1515;
|
|
--tag-red-text: #FF9B9B;
|
|
--tag-yellow-bg: #3D2A15;
|
|
--tag-yellow-text: #FCD34D;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.7);
|
|
--selection-bg: rgba(94, 106, 210, 0.25);
|
|
--selection-border: #5E6AD2;
|
|
}
|
|
|
|
/* 4. SPOTIFY - DARK */
|
|
:root[data-theme-id="SPOTIFY"] {
|
|
--primary: #1DB954;
|
|
--primary-hover: #1aa34a;
|
|
--primary-light: rgba(29, 185, 84, 0.15);
|
|
--on-primary: #000000;
|
|
--primary-container: #1A3D27;
|
|
--on-primary-container: #1ED760;
|
|
|
|
--secondary: #1DB954;
|
|
--on-secondary: #000000;
|
|
|
|
--tertiary: #B3B3B3;
|
|
--on-tertiary: #000000;
|
|
|
|
--background: #000000;
|
|
--on-background: #FFFFFF;
|
|
--bg-body: #000000;
|
|
--bg-sidebar: #121212;
|
|
--bg-card: #121212;
|
|
--bg-card-hover: #1A1A1A;
|
|
|
|
--surface: #121212;
|
|
--on-surface: #FFFFFF;
|
|
--text-main: #FFFFFF;
|
|
--text-secondary: #B3B3B3;
|
|
--text-muted: #999999;
|
|
|
|
--surface-variant: #1A1A1A;
|
|
--on-surface-variant: #B3B3B3;
|
|
|
|
--outline: #333333;
|
|
--outline-variant: #282828;
|
|
--border: #1A1A1A;
|
|
--border-light: #121212;
|
|
|
|
--error: #E22134;
|
|
|
|
--header-bg: #121212;
|
|
--header-text: #FFFFFF;
|
|
|
|
--tag-bg: #1A3D27;
|
|
--tag-text: #1ED760;
|
|
--tag-green-bg: #1A3D27;
|
|
--tag-green-text: #1ED760;
|
|
--tag-red-bg: #3D1515;
|
|
--tag-red-text: #FCA5A5;
|
|
--tag-yellow-bg: #3D2A15;
|
|
--tag-yellow-text: #FCD34D;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.7);
|
|
--selection-bg: rgba(29, 185, 84, 0.25);
|
|
--selection-border: #1DB954;
|
|
}
|
|
|
|
/* 5. NOTION - DARK */
|
|
:root[data-theme-id="NOTION"] {
|
|
--primary: #529CCA;
|
|
--primary-hover: #4488BB;
|
|
--primary-light: rgba(82, 156, 202, 0.15);
|
|
--on-primary: #191919;
|
|
|
|
--secondary: #E07A5F;
|
|
--on-secondary: #191919;
|
|
|
|
--tertiary: #81B29A;
|
|
--on-tertiary: #191919;
|
|
|
|
--background: #191919;
|
|
--on-background: #E0E0E0;
|
|
--bg-body: #191919;
|
|
--bg-sidebar: #202020;
|
|
--bg-card: #202020;
|
|
--bg-card-hover: #2B2B2B;
|
|
|
|
--surface: #202020;
|
|
--on-surface: #E0E0E0;
|
|
--text-main: #E0E0E0;
|
|
--text-secondary: #B0B0B0;
|
|
--text-muted: #9B9B9B;
|
|
|
|
--surface-variant: #2B2B2B;
|
|
--on-surface-variant: #9B9B9B;
|
|
|
|
--outline: #3E3E3E;
|
|
--outline-variant: #2B2B2B;
|
|
--border: #2B2B2B;
|
|
--border-light: #202020;
|
|
|
|
--error: #EF4444;
|
|
|
|
--header-bg: #202020;
|
|
--header-text: #E0E0E0;
|
|
|
|
--tag-bg: #2B2B2B;
|
|
--tag-text: #81B29A;
|
|
--tag-green-bg: #1B3D2A;
|
|
--tag-green-text: #6EE7B7;
|
|
--tag-red-bg: #3D1515;
|
|
--tag-red-text: #FCA5A5;
|
|
--tag-yellow-bg: #3D2A15;
|
|
--tag-yellow-text: #FCD34D;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.7);
|
|
--selection-bg: rgba(82, 156, 202, 0.25);
|
|
--selection-border: #529CCA;
|
|
}
|
|
|
|
/* 6. DISCORD - DARK */
|
|
:root[data-theme-id="DISCORD"] {
|
|
--primary: #5865F2;
|
|
--primary-hover: #4752C4;
|
|
--primary-light: rgba(88, 101, 242, 0.15);
|
|
--on-primary: #FFFFFF;
|
|
|
|
--secondary: #57F287;
|
|
--on-secondary: #1E2124;
|
|
|
|
--tertiary: #FEE75C;
|
|
--on-tertiary: #1E2124;
|
|
|
|
--background: #313338;
|
|
--on-background: #DBDEE1;
|
|
--bg-body: #313338;
|
|
--bg-sidebar: #2B2D31;
|
|
--bg-card: #2B2D31;
|
|
--bg-card-hover: #383A40;
|
|
|
|
--surface: #2B2D31;
|
|
--on-surface: #DBDEE1;
|
|
--text-main: #DBDEE1;
|
|
--text-secondary: #949BA4;
|
|
--text-muted: #B5BAC1;
|
|
|
|
--surface-variant: #383A40;
|
|
--on-surface-variant: #B5BAC1;
|
|
|
|
--outline: #4E5058;
|
|
--outline-variant: #383A40;
|
|
--border: #383A40;
|
|
--border-light: #2B2D31;
|
|
|
|
--error: #ED4245;
|
|
|
|
--header-bg: #2B2D31;
|
|
--header-text: #DBDEE1;
|
|
|
|
--tag-bg: #383A40;
|
|
--tag-text: #57F287;
|
|
--tag-green-bg: #1B3D2A;
|
|
--tag-green-text: #6EE7B7;
|
|
--tag-red-bg: #3D1515;
|
|
--tag-red-text: #FCA5A5;
|
|
--tag-yellow-bg: #3D2A15;
|
|
--tag-yellow-text: #FCD34D;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.7);
|
|
--selection-bg: rgba(88, 101, 242, 0.25);
|
|
--selection-border: #5865F2;
|
|
}
|
|
|
|
/* 7. DRACULA - DARK */
|
|
:root[data-theme-id="DRACULA"] {
|
|
--primary: #BD93F9;
|
|
--primary-hover: #A878E8;
|
|
--primary-light: rgba(189, 147, 249, 0.15);
|
|
--on-primary: #21222C;
|
|
|
|
--secondary: #50FA7B;
|
|
--on-secondary: #21222C;
|
|
|
|
--tertiary: #FF79C6;
|
|
--on-tertiary: #21222C;
|
|
|
|
--background: #282A36;
|
|
--on-background: #F8F8F2;
|
|
--bg-body: #282A36;
|
|
--bg-sidebar: #21222C;
|
|
--bg-card: #21222C;
|
|
--bg-card-hover: #343746;
|
|
|
|
--surface: #21222C;
|
|
--on-surface: #F8F8F2;
|
|
--text-main: #F8F8F2;
|
|
--text-secondary: #D0D0D0;
|
|
--text-muted: #BFBFBF;
|
|
|
|
--surface-variant: #343746;
|
|
--on-surface-variant: #BFBFBF;
|
|
|
|
--outline: #6272A4;
|
|
--outline-variant: #343746;
|
|
--border: #343746;
|
|
--border-light: #21222C;
|
|
|
|
--error: #FF5555;
|
|
|
|
--header-bg: #21222C;
|
|
--header-text: #F8F8F2;
|
|
|
|
--tag-bg: #343746;
|
|
--tag-text: #BD93F9;
|
|
--tag-green-bg: #1B3D2A;
|
|
--tag-green-text: #50FA7B;
|
|
--tag-red-bg: #3D1515;
|
|
--tag-red-text: #FF79C6;
|
|
--tag-yellow-bg: #3D2A15;
|
|
--tag-yellow-text: #F1FA8C;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.7);
|
|
--selection-bg: rgba(189, 147, 249, 0.25);
|
|
--selection-border: #BD93F9;
|
|
}
|
|
|
|
/* 8. ONE DARK PRO - DARK */
|
|
:root[data-theme-id="ONE_DARK_PRO"] {
|
|
--primary: #61AFEF;
|
|
--primary-hover: #4A9FDF;
|
|
--primary-light: rgba(97, 175, 239, 0.15);
|
|
--on-primary: #1E2127;
|
|
|
|
--secondary: #98C379;
|
|
--on-secondary: #1E2127;
|
|
|
|
--tertiary: #E5C07B;
|
|
--on-tertiary: #1E2127;
|
|
|
|
--background: #282C34;
|
|
--on-background: #ABB2BF;
|
|
--bg-body: #282C34;
|
|
--bg-sidebar: #21252B;
|
|
--bg-card: #21252B;
|
|
--bg-card-hover: #2C313A;
|
|
|
|
--surface: #21252B;
|
|
--on-surface: #ABB2BF;
|
|
--text-main: #ABB2BF;
|
|
--text-secondary: #9BA0A8;
|
|
--text-muted: #8B929E;
|
|
|
|
--surface-variant: #2C313A;
|
|
--on-surface-variant: #8B929E;
|
|
|
|
--outline: #3E4452;
|
|
--outline-variant: #2C313A;
|
|
--border: #2C313A;
|
|
--border-light: #21252B;
|
|
|
|
--error: #E06C75;
|
|
|
|
--header-bg: #21252B;
|
|
--header-text: #ABB2BF;
|
|
|
|
--tag-bg: #2C313A;
|
|
--tag-text: #61AFEF;
|
|
--tag-green-bg: #1B3D2A;
|
|
--tag-green-text: #98C379;
|
|
--tag-red-bg: #3D1515;
|
|
--tag-red-text: #E06C75;
|
|
--tag-yellow-bg: #3D2A15;
|
|
--tag-yellow-text: #E5C07B;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.7);
|
|
--selection-bg: rgba(97, 175, 239, 0.25);
|
|
--selection-border: #61AFEF;
|
|
}
|
|
|
|
/* 9. TOKYO NIGHT - DARK */
|
|
:root[data-theme-id="TOKYO_NIGHT"] {
|
|
--primary: #7AA2F7;
|
|
--primary-hover: #6A92E7;
|
|
--primary-light: rgba(122, 162, 247, 0.15);
|
|
--on-primary: #1A1B26;
|
|
|
|
--secondary: #9ECE6A;
|
|
--on-secondary: #1A1B26;
|
|
|
|
--tertiary: #BB9AF7;
|
|
--on-tertiary: #1A1B26;
|
|
|
|
--background: #1A1B26;
|
|
--on-background: #C0CAF5;
|
|
--bg-body: #1A1B26;
|
|
--bg-sidebar: #16171F;
|
|
--bg-card: #16171F;
|
|
--bg-card-hover: #24283B;
|
|
|
|
--surface: #16171F;
|
|
--on-surface: #C0CAF5;
|
|
--text-main: #C0CAF5;
|
|
--text-secondary: #A9B1D6;
|
|
--text-muted: #9AA5CE;
|
|
|
|
--surface-variant: #24283B;
|
|
--on-surface-variant: #9AA5CE;
|
|
|
|
--outline: #3B4261;
|
|
--outline-variant: #24283B;
|
|
--border: #24283B;
|
|
--border-light: #16171F;
|
|
|
|
--error: #F7768E;
|
|
|
|
--header-bg: #16171F;
|
|
--header-text: #C0CAF5;
|
|
|
|
--tag-bg: #24283B;
|
|
--tag-text: #7AA2F7;
|
|
--tag-green-bg: #1B3D2A;
|
|
--tag-green-text: #9ECE6A;
|
|
--tag-red-bg: #3D1515;
|
|
--tag-red-text: #F7768E;
|
|
--tag-yellow-bg: #3D2A15;
|
|
--tag-yellow-text: #E0AF68;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.7);
|
|
--selection-bg: rgba(122, 162, 247, 0.25);
|
|
--selection-border: #7AA2F7;
|
|
}
|
|
|
|
/* 10. NORD - DARK */
|
|
:root[data-theme-id="NORD"] {
|
|
--primary: #88C0D0;
|
|
--primary-hover: #7AB0C0;
|
|
--primary-light: rgba(136, 192, 208, 0.15);
|
|
--on-primary: #2E3440;
|
|
|
|
--secondary: #A3BE8C;
|
|
--on-secondary: #2E3440;
|
|
|
|
--tertiary: #EBCB8B;
|
|
--on-tertiary: #2E3440;
|
|
|
|
--background: #2E3440;
|
|
--on-background: #ECEFF4;
|
|
--bg-body: #2E3440;
|
|
--bg-sidebar: #3B4252;
|
|
--bg-card: #3B4252;
|
|
--bg-card-hover: #434C5E;
|
|
|
|
--surface: #3B4252;
|
|
--on-surface: #D8DEE9;
|
|
--text-main: #ECEFF4;
|
|
--text-secondary: #D8DEE9;
|
|
--text-muted: #D8DEE9;
|
|
|
|
--surface-variant: #434C5E;
|
|
--on-surface-variant: #D8DEE9;
|
|
|
|
--outline: #4C566A;
|
|
--outline-variant: #434C5E;
|
|
--border: #434C5E;
|
|
--border-light: #3B4252;
|
|
|
|
--error: #BF616A;
|
|
|
|
--header-bg: #3B4252;
|
|
--header-text: #ECEFF4;
|
|
|
|
--tag-bg: #434C5E;
|
|
--tag-text: #88C0D0;
|
|
--tag-green-bg: #1B3D2A;
|
|
--tag-green-text: #A3BE8C;
|
|
--tag-red-bg: #3D1515;
|
|
--tag-red-text: #BF616A;
|
|
--tag-yellow-bg: #3D2A15;
|
|
--tag-yellow-text: #EBCB8B;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.7);
|
|
--selection-bg: rgba(136, 192, 208, 0.25);
|
|
--selection-border: #88C0D0;
|
|
}
|
|
|
|
/* 11. NIGHT OWL - DARK */
|
|
:root[data-theme-id="NIGHT_OWL"] {
|
|
--primary: #7FDBCA;
|
|
--primary-hover: #6FCBBA;
|
|
--primary-light: rgba(127, 219, 202, 0.15);
|
|
--on-primary: #011627;
|
|
|
|
--secondary: #ADDB67;
|
|
--on-secondary: #011627;
|
|
|
|
--tertiary: #C792EA;
|
|
--on-tertiary: #011627;
|
|
|
|
--background: #011627;
|
|
--on-background: #D6DEEB;
|
|
--bg-body: #011627;
|
|
--bg-sidebar: #0B2942;
|
|
--bg-card: #0B2942;
|
|
--bg-card-hover: #112B45;
|
|
|
|
--surface: #0B2942;
|
|
--on-surface: #D6DEEB;
|
|
--text-main: #D6DEEB;
|
|
--text-secondary: #B8C5D6;
|
|
--text-muted: #9FAFC2;
|
|
|
|
--surface-variant: #112B45;
|
|
--on-surface-variant: #9FAFC2;
|
|
|
|
--outline: #1D3B58;
|
|
--outline-variant: #112B45;
|
|
--border: #112B45;
|
|
--border-light: #0B2942;
|
|
|
|
--error: #EF5350;
|
|
|
|
--header-bg: #0B2942;
|
|
--header-text: #D6DEEB;
|
|
|
|
--tag-bg: #112B45;
|
|
--tag-text: #7FDBCA;
|
|
--tag-green-bg: #1B3D2A;
|
|
--tag-green-text: #ADDB67;
|
|
--tag-red-bg: #3D1515;
|
|
--tag-red-text: #EF5350;
|
|
--tag-yellow-bg: #3D2A15;
|
|
--tag-yellow-text: #FCD34D;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.7);
|
|
--selection-bg: rgba(127, 219, 202, 0.25);
|
|
--selection-border: #7FDBCA;
|
|
}
|
|
|
|
/* 12. ANTHRACITE - DARK */
|
|
:root[data-theme-id="ANTHRACITE"] {
|
|
--primary: #BB86FC;
|
|
--primary-hover: #AA75EB;
|
|
--primary-light: rgba(187, 134, 252, 0.15);
|
|
--on-primary: #121212;
|
|
|
|
--secondary: #03DAC6;
|
|
--on-secondary: #121212;
|
|
|
|
--tertiary: #CF6679;
|
|
--on-tertiary: #121212;
|
|
|
|
--background: #121212;
|
|
--on-background: #E1E1E1;
|
|
--bg-body: #121212;
|
|
--bg-sidebar: #1E1E1E;
|
|
--bg-card: #1E1E1E;
|
|
--bg-card-hover: #2C2C2C;
|
|
|
|
--surface: #1E1E1E;
|
|
--on-surface: #E1E1E1;
|
|
--text-main: #E1E1E1;
|
|
--text-secondary: #C0C0C0;
|
|
--text-muted: #AAAAAA;
|
|
|
|
--surface-variant: #2C2C2C;
|
|
--on-surface-variant: #AAAAAA;
|
|
|
|
--outline: #3D3D3D;
|
|
--outline-variant: #2C2C2C;
|
|
--border: #2C2C2C;
|
|
--border-light: #1E1E1E;
|
|
|
|
--error: #CF6679;
|
|
|
|
--header-bg: #1E1E1E;
|
|
--header-text: #E1E1E1;
|
|
|
|
--tag-bg: #2C2C2C;
|
|
--tag-text: #BB86FC;
|
|
--tag-green-bg: #1B3D2A;
|
|
--tag-green-text: #03DAC6;
|
|
--tag-red-bg: #3D1515;
|
|
--tag-red-text: #CF6679;
|
|
--tag-yellow-bg: #3D2A15;
|
|
--tag-yellow-text: #FCD34D;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.7);
|
|
--selection-bg: rgba(187, 134, 252, 0.25);
|
|
--selection-border: #BB86FC;
|
|
}
|
|
|
|
/* 13. CYBERPUNK - DARK */
|
|
:root[data-theme-id="CYBERPUNK"] {
|
|
--primary: #00FFFF;
|
|
--primary-hover: #00DDDD;
|
|
--primary-light: rgba(0, 255, 255, 0.15);
|
|
--on-primary: #0A0A14;
|
|
|
|
--secondary: #FF00FF;
|
|
--on-secondary: #0A0A14;
|
|
|
|
--tertiary: #FFFF00;
|
|
--on-tertiary: #0A0A14;
|
|
|
|
--background: #0A0A14;
|
|
--on-background: #E0E0F0;
|
|
--bg-body: #0A0A14;
|
|
--bg-sidebar: #12121E;
|
|
--bg-card: #12121E;
|
|
--bg-card-hover: #1A1A2E;
|
|
|
|
--surface: #12121E;
|
|
--on-surface: #E0E0F0;
|
|
--text-main: #E0E0F0;
|
|
--text-secondary: #C0C0D0;
|
|
--text-muted: #A0A0C0;
|
|
|
|
--surface-variant: #1A1A2E;
|
|
--on-surface-variant: #A0A0C0;
|
|
|
|
--outline: #2A2A44;
|
|
--outline-variant: #1A1A2E;
|
|
--border: #1A1A2E;
|
|
--border-light: #12121E;
|
|
|
|
--error: #FF0055;
|
|
|
|
--header-bg: #12121E;
|
|
--header-text: #E0E0F0;
|
|
|
|
--tag-bg: #1A1A2E;
|
|
--tag-text: #00FFFF;
|
|
--tag-green-bg: #1B3D2A;
|
|
--tag-green-text: #00FF00;
|
|
--tag-red-bg: #3D1515;
|
|
--tag-red-text: #FF0055;
|
|
--tag-yellow-bg: #3D2A15;
|
|
--tag-yellow-text: #FFFF00;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.7);
|
|
--selection-bg: rgba(0, 255, 255, 0.25);
|
|
--selection-border: #00FFFF;
|
|
}
|
|
|
|
/* 14. NAVY ELEGANCE - DARK */
|
|
:root[data-theme-id="NAVY_ELEGANCE"] {
|
|
--primary: #D4AF37;
|
|
--primary-hover: #C49F27;
|
|
--primary-light: rgba(212, 175, 55, 0.15);
|
|
--on-primary: #0B1929;
|
|
|
|
--secondary: #C0C0C0;
|
|
--on-secondary: #0B1929;
|
|
|
|
--tertiary: #87CEEB;
|
|
--on-tertiary: #0B1929;
|
|
|
|
--background: #0B1929;
|
|
--on-background: #E0E4EA;
|
|
--bg-body: #0B1929;
|
|
--bg-sidebar: #0F2035;
|
|
--bg-card: #0F2035;
|
|
--bg-card-hover: #162A42;
|
|
|
|
--surface: #0F2035;
|
|
--on-surface: #E0E4EA;
|
|
--text-main: #E0E4EA;
|
|
--text-secondary: #B8BFCC;
|
|
--text-muted: #A0AABB;
|
|
|
|
--surface-variant: #162A42;
|
|
--on-surface-variant: #A0AABB;
|
|
|
|
--outline: #1E3550;
|
|
--outline-variant: #162A42;
|
|
--border: #162A42;
|
|
--border-light: #0F2035;
|
|
|
|
--error: #EF4444;
|
|
|
|
--header-bg: #0F2035;
|
|
--header-text: #E0E4EA;
|
|
|
|
--tag-bg: #162A42;
|
|
--tag-text: #D4AF37;
|
|
--tag-green-bg: #1B3D2A;
|
|
--tag-green-text: #87CEEB;
|
|
--tag-red-bg: #3D1515;
|
|
--tag-red-text: #FCA5A5;
|
|
--tag-yellow-bg: #3D2A15;
|
|
--tag-yellow-text: #D4AF37;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.7);
|
|
--selection-bg: rgba(212, 175, 55, 0.25);
|
|
--selection-border: #D4AF37;
|
|
}
|
|
|
|
/* 15. EARTHY - DARK */
|
|
:root[data-theme-id="EARTHY"] {
|
|
--primary: #81C784;
|
|
--primary-hover: #71B774;
|
|
--primary-light: rgba(129, 199, 132, 0.15);
|
|
--on-primary: #1A1510;
|
|
|
|
--secondary: #D4A574;
|
|
--on-secondary: #1A1510;
|
|
|
|
--tertiary: #A5D6A7;
|
|
--on-tertiary: #1A1510;
|
|
|
|
--background: #1A1510;
|
|
--on-background: #E0D8CF;
|
|
--bg-body: #1A1510;
|
|
--bg-sidebar: #231E18;
|
|
--bg-card: #231E18;
|
|
--bg-card-hover: #2E2720;
|
|
|
|
--surface: #231E18;
|
|
--on-surface: #E0D8CF;
|
|
--text-main: #E0D8CF;
|
|
--text-secondary: #C8BFB6;
|
|
--text-muted: #ADA49A;
|
|
|
|
--surface-variant: #2E2720;
|
|
--on-surface-variant: #ADA49A;
|
|
|
|
--outline: #3D342B;
|
|
--outline-variant: #2E2720;
|
|
--border: #2E2720;
|
|
--border-light: #231E18;
|
|
|
|
--error: #EF4444;
|
|
|
|
--header-bg: #231E18;
|
|
--header-text: #E0D8CF;
|
|
|
|
--tag-bg: #2E2720;
|
|
--tag-text: #81C784;
|
|
--tag-green-bg: #1B3D2A;
|
|
--tag-green-text: #A5D6A7;
|
|
--tag-red-bg: #3D1515;
|
|
--tag-red-text: #FCA5A5;
|
|
--tag-yellow-bg: #3D2A15;
|
|
--tag-yellow-text: #D4A574;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.7);
|
|
--selection-bg: rgba(129, 199, 132, 0.25);
|
|
--selection-border: #81C784;
|
|
}
|
|
|
|
/* 3. LINEAR - LIGHT */
|
|
:root[data-theme="light"][data-theme-id="LINEAR"] {
|
|
--primary: #3B3D4A;
|
|
--primary-hover: #2A2B3D;
|
|
--primary-light: rgba(59, 61, 74, 0.15);
|
|
--on-primary: #FFFFFF;
|
|
--primary-container: #E8EAFF;
|
|
--on-primary-container: #1A1C2A;
|
|
|
|
--secondary: #1E5A96;
|
|
--on-secondary: #FFFFFF;
|
|
--secondary-container: #D0E4FF;
|
|
--on-secondary-container: #001D3A;
|
|
|
|
--tertiary: #B8860B;
|
|
--on-tertiary: #FFFFFF;
|
|
|
|
--background: #FFFFFF;
|
|
--on-background: #12131A;
|
|
--bg-body: #FFFFFF;
|
|
--bg-sidebar: #F5F5F7;
|
|
--bg-card: #F5F5F7;
|
|
--bg-card-hover: #EEEFF2;
|
|
|
|
--surface: #F5F5F7;
|
|
--on-surface: #12131A;
|
|
--text-main: #12131A;
|
|
--text-secondary: #5A5C68;
|
|
--text-muted: #8A8F98;
|
|
|
|
--surface-variant: #EEEFF2;
|
|
--on-surface-variant: #5A5C68;
|
|
|
|
--outline: #8A8F98;
|
|
--outline-variant: #D0D1D9;
|
|
--border: #D0D1D9;
|
|
--border-light: #EEEFF2;
|
|
|
|
--error: #EB5757;
|
|
|
|
--header-bg: #3B3D4A;
|
|
--header-text: #FFFFFF;
|
|
|
|
--tag-bg: #E8EAFF;
|
|
--tag-text: #3B3D4A;
|
|
--tag-green-bg: #D1FAE5;
|
|
--tag-green-text: #065F46;
|
|
--tag-red-bg: #FEE2E2;
|
|
--tag-red-text: #991B1B;
|
|
--tag-yellow-bg: #FEF3C7;
|
|
--tag-yellow-text: #92400E;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.5);
|
|
--selection-bg: rgba(59, 61, 74, 0.15);
|
|
--selection-border: #3B3D4A;
|
|
}
|
|
|
|
/* 4. SPOTIFY - LIGHT */
|
|
:root[data-theme="light"][data-theme-id="SPOTIFY"] {
|
|
--primary: #1DB954;
|
|
--primary-hover: #1aa34a;
|
|
--primary-light: rgba(29, 185, 84, 0.15);
|
|
--on-primary: #FFFFFF;
|
|
--primary-container: #D1FAE5;
|
|
--on-primary-container: #0A2A15;
|
|
|
|
--secondary: #1DB954;
|
|
--on-secondary: #FFFFFF;
|
|
|
|
--tertiary: #B3B3B3;
|
|
--on-tertiary: #FFFFFF;
|
|
|
|
--background: #FFFFFF;
|
|
--on-background: #191919;
|
|
--bg-body: #FFFFFF;
|
|
--bg-sidebar: #F5F5F5;
|
|
--bg-card: #F5F5F5;
|
|
--bg-card-hover: #EEEEEE;
|
|
|
|
--surface: #F5F5F5;
|
|
--on-surface: #191919;
|
|
--text-main: #191919;
|
|
--text-secondary: #666666;
|
|
--text-muted: #999999;
|
|
|
|
--surface-variant: #EEEEEE;
|
|
--on-surface-variant: #999999;
|
|
|
|
--outline: #CCCCCC;
|
|
--outline-variant: #DDDDDD;
|
|
--border: #DDDDDD;
|
|
--border-light: #EEEEEE;
|
|
|
|
--error: #E22134;
|
|
|
|
--header-bg: #1DB954;
|
|
--header-text: #FFFFFF;
|
|
|
|
--tag-bg: #D1FAE5;
|
|
--tag-text: #1DB954;
|
|
--tag-green-bg: #D1FAE5;
|
|
--tag-green-text: #1DB954;
|
|
--tag-red-bg: #FEE2E2;
|
|
--tag-red-text: #991B1B;
|
|
--tag-yellow-bg: #FEF3C7;
|
|
--tag-yellow-text: #92400E;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.5);
|
|
--selection-bg: rgba(29, 185, 84, 0.15);
|
|
--selection-border: #1DB954;
|
|
}
|
|
|
|
/* 5. NOTION - LIGHT */
|
|
:root[data-theme="light"][data-theme-id="NOTION"] {
|
|
--primary: #529CCA;
|
|
--primary-hover: #4488BB;
|
|
--primary-light: rgba(82, 156, 202, 0.15);
|
|
--on-primary: #FFFFFF;
|
|
--primary-container: #D0E8FF;
|
|
--on-primary-container: #001E36;
|
|
|
|
--secondary: #E07A5F;
|
|
--on-secondary: #FFFFFF;
|
|
|
|
--tertiary: #81B29A;
|
|
--on-tertiary: #FFFFFF;
|
|
|
|
--background: #FFFFFF;
|
|
--on-background: #191919;
|
|
--bg-body: #FFFFFF;
|
|
--bg-sidebar: #F5F5F5;
|
|
--bg-card: #F5F5F5;
|
|
--bg-card-hover: #EEEEEE;
|
|
|
|
--surface: #F5F5F5;
|
|
--on-surface: #191919;
|
|
--text-main: #191919;
|
|
--text-secondary: #666666;
|
|
--text-muted: #999999;
|
|
|
|
--surface-variant: #EEEEEE;
|
|
--on-surface-variant: #999999;
|
|
|
|
--outline: #CCCCCC;
|
|
--outline-variant: #DDDDDD;
|
|
--border: #DDDDDD;
|
|
--border-light: #EEEEEE;
|
|
|
|
--error: #EF4444;
|
|
|
|
--header-bg: #529CCA;
|
|
--header-text: #FFFFFF;
|
|
|
|
--tag-bg: #D0E8FF;
|
|
--tag-text: #529CCA;
|
|
--tag-green-bg: #D1FAE5;
|
|
--tag-green-text: #065F46;
|
|
--tag-red-bg: #FEE2E2;
|
|
--tag-red-text: #991B1B;
|
|
--tag-yellow-bg: #FEF3C7;
|
|
--tag-yellow-text: #92400E;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.5);
|
|
--selection-bg: rgba(82, 156, 202, 0.15);
|
|
--selection-border: #529CCA;
|
|
}
|
|
|
|
/* 6. DISCORD - LIGHT */
|
|
:root[data-theme="light"][data-theme-id="DISCORD"] {
|
|
--primary: #5865F2;
|
|
--primary-hover: #4752C4;
|
|
--primary-light: rgba(88, 101, 242, 0.15);
|
|
--on-primary: #FFFFFF;
|
|
--primary-container: #DDF4FF;
|
|
--on-primary-container: #001D3A;
|
|
|
|
--secondary: #57F287;
|
|
--on-secondary: #FFFFFF;
|
|
|
|
--tertiary: #FEE75C;
|
|
--on-tertiary: #1E2124;
|
|
|
|
--background: #FFFFFF;
|
|
--on-background: #1E2124;
|
|
--bg-body: #FFFFFF;
|
|
--bg-sidebar: #F5F5F5;
|
|
--bg-card: #F5F5F5;
|
|
--bg-card-hover: #EEEEEE;
|
|
|
|
--surface: #F5F5F5;
|
|
--on-surface: #1E2124;
|
|
--text-main: #1E2124;
|
|
--text-secondary: #666666;
|
|
--text-muted: #999999;
|
|
|
|
--surface-variant: #EEEEEE;
|
|
--on-surface-variant: #999999;
|
|
|
|
--outline: #CCCCCC;
|
|
--outline-variant: #DDDDDD;
|
|
--border: #DDDDDD;
|
|
--border-light: #EEEEEE;
|
|
|
|
--error: #ED4245;
|
|
|
|
--header-bg: #5865F2;
|
|
--header-text: #FFFFFF;
|
|
|
|
--tag-bg: #DDF4FF;
|
|
--tag-text: #5865F2;
|
|
--tag-green-bg: #D1FAE5;
|
|
--tag-green-text: #065F46;
|
|
--tag-red-bg: #FEE2E2;
|
|
--tag-red-text: #991B1B;
|
|
--tag-yellow-bg: #FEF3C7;
|
|
--tag-yellow-text: #92400E;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.5);
|
|
--selection-bg: rgba(88, 101, 242, 0.15);
|
|
--selection-border: #5865F2;
|
|
}
|
|
|
|
/* 7. DRACULA - LIGHT */
|
|
:root[data-theme="light"][data-theme-id="DRACULA"] {
|
|
--primary: #BD93F9;
|
|
--primary-hover: #A878E8;
|
|
--primary-light: rgba(189, 147, 249, 0.15);
|
|
--on-primary: #FFFFFF;
|
|
--primary-container: #E8D5FF;
|
|
--on-primary-container: #2A0A4A;
|
|
|
|
--secondary: #50FA7B;
|
|
--on-secondary: #FFFFFF;
|
|
|
|
--tertiary: #FF79C6;
|
|
--on-tertiary: #FFFFFF;
|
|
|
|
--background: #FFFFFF;
|
|
--on-background: #21222C;
|
|
--bg-body: #FFFFFF;
|
|
--bg-sidebar: #F5F5F5;
|
|
--bg-card: #F5F5F5;
|
|
--bg-card-hover: #EEEEEE;
|
|
|
|
--surface: #F5F5F5;
|
|
--on-surface: #21222C;
|
|
--text-main: #21222C;
|
|
--text-secondary: #666666;
|
|
--text-muted: #999999;
|
|
|
|
--surface-variant: #EEEEEE;
|
|
--on-surface-variant: #999999;
|
|
|
|
--outline: #CCCCCC;
|
|
--outline-variant: #DDDDDD;
|
|
--border: #DDDDDD;
|
|
--border-light: #EEEEEE;
|
|
|
|
--error: #FF5555;
|
|
|
|
--header-bg: #BD93F9;
|
|
--header-text: #FFFFFF;
|
|
|
|
--tag-bg: #E8D5FF;
|
|
--tag-text: #BD93F9;
|
|
--tag-green-bg: #D1FAE5;
|
|
--tag-green-text: #065F46;
|
|
--tag-red-bg: #FEE2E2;
|
|
--tag-red-text: #991B1B;
|
|
--tag-yellow-bg: #FEF3C7;
|
|
--tag-yellow-text: #92400E;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.5);
|
|
--selection-bg: rgba(189, 147, 249, 0.15);
|
|
--selection-border: #BD93F9;
|
|
}
|
|
|
|
/* 8. ONE DARK PRO - LIGHT */
|
|
:root[data-theme="light"][data-theme-id="ONE_DARK_PRO"] {
|
|
--primary: #61AFEF;
|
|
--primary-hover: #4A9FDF;
|
|
--primary-light: rgba(97, 175, 239, 0.15);
|
|
--on-primary: #FFFFFF;
|
|
--primary-container: #D0E8FF;
|
|
--on-primary-container: #001E36;
|
|
|
|
--secondary: #98C379;
|
|
--on-secondary: #FFFFFF;
|
|
|
|
--tertiary: #E5C07B;
|
|
--on-tertiary: #FFFFFF;
|
|
|
|
--background: #FFFFFF;
|
|
--on-background: #1E2127;
|
|
--bg-body: #FFFFFF;
|
|
--bg-sidebar: #F5F5F5;
|
|
--bg-card: #F5F5F5;
|
|
--bg-card-hover: #EEEEEE;
|
|
|
|
--surface: #F5F5F5;
|
|
--on-surface: #1E2127;
|
|
--text-main: #1E2127;
|
|
--text-secondary: #666666;
|
|
--text-muted: #999999;
|
|
|
|
--surface-variant: #EEEEEE;
|
|
--on-surface-variant: #999999;
|
|
|
|
--outline: #CCCCCC;
|
|
--outline-variant: #DDDDDD;
|
|
--border: #DDDDDD;
|
|
--border-light: #EEEEEE;
|
|
|
|
--error: #E06C75;
|
|
|
|
--header-bg: #61AFEF;
|
|
--header-text: #FFFFFF;
|
|
|
|
--tag-bg: #D0E8FF;
|
|
--tag-text: #61AFEF;
|
|
--tag-green-bg: #D1FAE5;
|
|
--tag-green-text: #065F46;
|
|
--tag-red-bg: #FEE2E2;
|
|
--tag-red-text: #991B1B;
|
|
--tag-yellow-bg: #FEF3C7;
|
|
--tag-yellow-text: #92400E;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.5);
|
|
--selection-bg: rgba(97, 175, 239, 0.15);
|
|
--selection-border: #61AFEF;
|
|
}
|
|
|
|
/* 9. TOKYO NIGHT - LIGHT */
|
|
:root[data-theme="light"][data-theme-id="TOKYO_NIGHT"] {
|
|
--primary: #7AA2F7;
|
|
--primary-hover: #6A92E7;
|
|
--primary-light: rgba(122, 162, 247, 0.15);
|
|
--on-primary: #FFFFFF;
|
|
--primary-container: #D0E8FF;
|
|
--on-primary-container: #001E36;
|
|
|
|
--secondary: #9ECE6A;
|
|
--on-secondary: #FFFFFF;
|
|
|
|
--tertiary: #BB9AF7;
|
|
--on-tertiary: #FFFFFF;
|
|
|
|
--background: #FFFFFF;
|
|
--on-background: #1A1B26;
|
|
--bg-body: #FFFFFF;
|
|
--bg-sidebar: #F5F5F5;
|
|
--bg-card: #F5F5F5;
|
|
--bg-card-hover: #EEEEEE;
|
|
|
|
--surface: #F5F5F5;
|
|
--on-surface: #1A1B26;
|
|
--text-main: #1A1B26;
|
|
--text-secondary: #666666;
|
|
--text-muted: #999999;
|
|
|
|
--surface-variant: #EEEEEE;
|
|
--on-surface-variant: #999999;
|
|
|
|
--outline: #CCCCCC;
|
|
--outline-variant: #DDDDDD;
|
|
--border: #DDDDDD;
|
|
--border-light: #EEEEEE;
|
|
|
|
--error: #F7768E;
|
|
|
|
--header-bg: #7AA2F7;
|
|
--header-text: #FFFFFF;
|
|
|
|
--tag-bg: #D0E8FF;
|
|
--tag-text: #7AA2F7;
|
|
--tag-green-bg: #D1FAE5;
|
|
--tag-green-text: #065F46;
|
|
--tag-red-bg: #FEE2E2;
|
|
--tag-red-text: #991B1B;
|
|
--tag-yellow-bg: #FEF3C7;
|
|
--tag-yellow-text: #92400E;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.5);
|
|
--selection-bg: rgba(122, 162, 247, 0.15);
|
|
--selection-border: #7AA2F7;
|
|
}
|
|
|
|
/* 10. NORD - LIGHT */
|
|
:root[data-theme="light"][data-theme-id="NORD"] {
|
|
--primary: #88C0D0;
|
|
--primary-hover: #7AB0C0;
|
|
--primary-light: rgba(136, 192, 208, 0.15);
|
|
--on-primary: #FFFFFF;
|
|
--primary-container: #D0E8FF;
|
|
--on-primary-container: #001E36;
|
|
|
|
--secondary: #A3BE8C;
|
|
--on-secondary: #FFFFFF;
|
|
|
|
--tertiary: #EBCB8B;
|
|
--on-tertiary: #FFFFFF;
|
|
|
|
--background: #FFFFFF;
|
|
--on-background: #2E3440;
|
|
--bg-body: #FFFFFF;
|
|
--bg-sidebar: #F5F5F5;
|
|
--bg-card: #F5F5F5;
|
|
--bg-card-hover: #EEEEEE;
|
|
|
|
--surface: #F5F5F5;
|
|
--on-surface: #2E3440;
|
|
--text-main: #2E3440;
|
|
--text-secondary: #666666;
|
|
--text-muted: #999999;
|
|
|
|
--surface-variant: #EEEEEE;
|
|
--on-surface-variant: #999999;
|
|
|
|
--outline: #CCCCCC;
|
|
--outline-variant: #DDDDDD;
|
|
--border: #DDDDDD;
|
|
--border-light: #EEEEEE;
|
|
|
|
--error: #BF616A;
|
|
|
|
--header-bg: #88C0D0;
|
|
--header-text: #FFFFFF;
|
|
|
|
--tag-bg: #D0E8FF;
|
|
--tag-text: #88C0D0;
|
|
--tag-green-bg: #D1FAE5;
|
|
--tag-green-text: #065F46;
|
|
--tag-red-bg: #FEE2E2;
|
|
--tag-red-text: #991B1B;
|
|
--tag-yellow-bg: #FEF3C7;
|
|
--tag-yellow-text: #92400E;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.5);
|
|
--selection-bg: rgba(136, 192, 208, 0.15);
|
|
--selection-border: #88C0D0;
|
|
}
|
|
|
|
/* 11. NIGHT OWL - LIGHT */
|
|
:root[data-theme="light"][data-theme-id="NIGHT_OWL"] {
|
|
--primary: #7FDBCA;
|
|
--primary-hover: #6FCBBA;
|
|
--primary-light: rgba(127, 219, 202, 0.15);
|
|
--on-primary: #FFFFFF;
|
|
--primary-container: #D0E8FF;
|
|
--on-primary-container: #001E36;
|
|
|
|
--secondary: #ADDB67;
|
|
--on-secondary: #FFFFFF;
|
|
|
|
--tertiary: #C792EA;
|
|
--on-tertiary: #FFFFFF;
|
|
|
|
--background: #FFFFFF;
|
|
--on-background: #011627;
|
|
--bg-body: #FFFFFF;
|
|
--bg-sidebar: #F5F5F5;
|
|
--bg-card: #F5F5F5;
|
|
--bg-card-hover: #EEEEEE;
|
|
|
|
--surface: #F5F5F5;
|
|
--on-surface: #011627;
|
|
--text-main: #011627;
|
|
--text-secondary: #666666;
|
|
--text-muted: #999999;
|
|
|
|
--surface-variant: #EEEEEE;
|
|
--on-surface-variant: #999999;
|
|
|
|
--outline: #CCCCCC;
|
|
--outline-variant: #DDDDDD;
|
|
--border: #DDDDDD;
|
|
--border-light: #EEEEEE;
|
|
|
|
--error: #EF5350;
|
|
|
|
--header-bg: #7FDBCA;
|
|
--header-text: #FFFFFF;
|
|
|
|
--tag-bg: #D0E8FF;
|
|
--tag-text: #7FDBCA;
|
|
--tag-green-bg: #D1FAE5;
|
|
--tag-green-text: #065F46;
|
|
--tag-red-bg: #FEE2E2;
|
|
--tag-red-text: #991B1B;
|
|
--tag-yellow-bg: #FEF3C7;
|
|
--tag-yellow-text: #92400E;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.5);
|
|
--selection-bg: rgba(127, 219, 202, 0.15);
|
|
--selection-border: #7FDBCA;
|
|
}
|
|
|
|
/* 12. ANTHRACITE - LIGHT */
|
|
:root[data-theme="light"][data-theme-id="ANTHRACITE"] {
|
|
--primary: #BB86FC;
|
|
--primary-hover: #AA75EB;
|
|
--primary-light: rgba(187, 134, 252, 0.15);
|
|
--on-primary: #FFFFFF;
|
|
--primary-container: #E8D5FF;
|
|
--on-primary-container: #2A0A4A;
|
|
|
|
--secondary: #03DAC6;
|
|
--on-secondary: #FFFFFF;
|
|
|
|
--tertiary: #CF6679;
|
|
--on-tertiary: #FFFFFF;
|
|
|
|
--background: #FFFFFF;
|
|
--on-background: #121212;
|
|
--bg-body: #FFFFFF;
|
|
--bg-sidebar: #F5F5F5;
|
|
--bg-card: #F5F5F5;
|
|
--bg-card-hover: #EEEEEE;
|
|
|
|
--surface: #F5F5F5;
|
|
--on-surface: #121212;
|
|
--text-main: #121212;
|
|
--text-secondary: #666666;
|
|
--text-muted: #999999;
|
|
|
|
--surface-variant: #EEEEEE;
|
|
--on-surface-variant: #999999;
|
|
|
|
--outline: #CCCCCC;
|
|
--outline-variant: #DDDDDD;
|
|
--border: #DDDDDD;
|
|
--border-light: #EEEEEE;
|
|
|
|
--error: #CF6679;
|
|
|
|
--header-bg: #BB86FC;
|
|
--header-text: #FFFFFF;
|
|
|
|
--tag-bg: #E8D5FF;
|
|
--tag-text: #BB86FC;
|
|
--tag-green-bg: #D1FAE5;
|
|
--tag-green-text: #065F46;
|
|
--tag-red-bg: #FEE2E2;
|
|
--tag-red-text: #991B1B;
|
|
--tag-yellow-bg: #FEF3C7;
|
|
--tag-yellow-text: #92400E;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.5);
|
|
--selection-bg: rgba(187, 134, 252, 0.15);
|
|
--selection-border: #BB86FC;
|
|
}
|
|
|
|
/* 13. CYBERPUNK - LIGHT */
|
|
:root[data-theme="light"][data-theme-id="CYBERPUNK"] {
|
|
--primary: #00FFFF;
|
|
--primary-hover: #00DDDD;
|
|
--primary-light: rgba(0, 255, 255, 0.15);
|
|
--on-primary: #0A0A14;
|
|
--primary-container: #D0F0FF;
|
|
--on-primary-container: #001A1A;
|
|
|
|
--secondary: #FF00FF;
|
|
--on-secondary: #FFFFFF;
|
|
|
|
--tertiary: #FFFF00;
|
|
--on-tertiary: #0A0A14;
|
|
|
|
--background: #FFFFFF;
|
|
--on-background: #0A0A14;
|
|
--bg-body: #FFFFFF;
|
|
--bg-sidebar: #F5F5F5;
|
|
--bg-card: #F5F5F5;
|
|
--bg-card-hover: #EEEEEE;
|
|
|
|
--surface: #F5F5F5;
|
|
--on-surface: #0A0A14;
|
|
--text-main: #0A0A14;
|
|
--text-secondary: #666666;
|
|
--text-muted: #999999;
|
|
|
|
--surface-variant: #EEEEEE;
|
|
--on-surface-variant: #999999;
|
|
|
|
--outline: #CCCCCC;
|
|
--outline-variant: #DDDDDD;
|
|
--border: #DDDDDD;
|
|
--border-light: #EEEEEE;
|
|
|
|
--error: #FF0055;
|
|
|
|
--header-bg: #00FFFF;
|
|
--header-text: #0A0A14;
|
|
|
|
--tag-bg: #D0F0FF;
|
|
--tag-text: #00FFFF;
|
|
--tag-green-bg: #D1FAE5;
|
|
--tag-green-text: #065F46;
|
|
--tag-red-bg: #FEE2E2;
|
|
--tag-red-text: #991B1B;
|
|
--tag-yellow-bg: #FEF3C7;
|
|
--tag-yellow-text: #92400E;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.5);
|
|
--selection-bg: rgba(0, 255, 255, 0.15);
|
|
--selection-border: #00FFFF;
|
|
}
|
|
|
|
/* 14. NAVY ELEGANCE - LIGHT */
|
|
:root[data-theme="light"][data-theme-id="NAVY_ELEGANCE"] {
|
|
--primary: #D4AF37;
|
|
--primary-hover: #C49F27;
|
|
--primary-light: rgba(212, 175, 55, 0.15);
|
|
--on-primary: #0B1929;
|
|
--primary-container: #FFF8E1;
|
|
--on-primary-container: #3D2A15;
|
|
|
|
--secondary: #C0C0C0;
|
|
--on-secondary: #0B1929;
|
|
|
|
--tertiary: #87CEEB;
|
|
--on-tertiary: #0B1929;
|
|
|
|
--background: #FFFFFF;
|
|
--on-background: #0B1929;
|
|
--bg-body: #FFFFFF;
|
|
--bg-sidebar: #F5F5F5;
|
|
--bg-card: #F5F5F5;
|
|
--bg-card-hover: #EEEEEE;
|
|
|
|
--surface: #F5F5F5;
|
|
--on-surface: #0B1929;
|
|
--text-main: #0B1929;
|
|
--text-secondary: #666666;
|
|
--text-muted: #999999;
|
|
|
|
--surface-variant: #EEEEEE;
|
|
--on-surface-variant: #999999;
|
|
|
|
--outline: #CCCCCC;
|
|
--outline-variant: #DDDDDD;
|
|
--border: #DDDDDD;
|
|
--border-light: #EEEEEE;
|
|
|
|
--error: #EF4444;
|
|
|
|
--header-bg: #D4AF37;
|
|
--header-text: #0B1929;
|
|
|
|
--tag-bg: #FFF8E1;
|
|
--tag-text: #D4AF37;
|
|
--tag-green-bg: #D1FAE5;
|
|
--tag-green-text: #065F46;
|
|
--tag-red-bg: #FEE2E2;
|
|
--tag-red-text: #991B1B;
|
|
--tag-yellow-bg: #FEF3C7;
|
|
--tag-yellow-text: #92400E;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.5);
|
|
--selection-bg: rgba(212, 175, 55, 0.15);
|
|
--selection-border: #D4AF37;
|
|
}
|
|
|
|
/* 15. EARTHY - LIGHT */
|
|
:root[data-theme="light"][data-theme-id="EARTHY"] {
|
|
--primary: #81C784;
|
|
--primary-hover: #71B774;
|
|
--primary-light: rgba(129, 199, 132, 0.15);
|
|
--on-primary: #FFFFFF;
|
|
--primary-container: #D1FAE5;
|
|
--on-primary-container: #0A2A15;
|
|
|
|
--secondary: #D4A574;
|
|
--on-secondary: #FFFFFF;
|
|
|
|
--tertiary: #A5D6A7;
|
|
--on-tertiary: #FFFFFF;
|
|
|
|
--background: #FFFFFF;
|
|
--on-background: #1A1510;
|
|
--bg-body: #FFFFFF;
|
|
--bg-sidebar: #F5F5F5;
|
|
--bg-card: #F5F5F5;
|
|
--bg-card-hover: #EEEEEE;
|
|
|
|
--surface: #F5F5F5;
|
|
--on-surface: #1A1510;
|
|
--text-main: #1A1510;
|
|
--text-secondary: #666666;
|
|
--text-muted: #999999;
|
|
|
|
--surface-variant: #EEEEEE;
|
|
--on-surface-variant: #999999;
|
|
|
|
--outline: #CCCCCC;
|
|
--outline-variant: #DDDDDD;
|
|
--border: #DDDDDD;
|
|
--border-light: #EEEEEE;
|
|
|
|
--error: #EF4444;
|
|
|
|
--header-bg: #81C784;
|
|
--header-text: #FFFFFF;
|
|
|
|
--tag-bg: #D1FAE5;
|
|
--tag-text: #81C784;
|
|
--tag-green-bg: #D1FAE5;
|
|
--tag-green-text: #065F46;
|
|
--tag-red-bg: #FEE2E2;
|
|
--tag-red-text: #991B1B;
|
|
--tag-yellow-bg: #FEF3C7;
|
|
--tag-yellow-text: #92400E;
|
|
|
|
--overlay-bg: rgba(0, 0, 0, 0.5);
|
|
--selection-bg: rgba(129, 199, 132, 0.15);
|
|
--selection-border: #81C784;
|
|
}
|