mirror of https://github.com/gabehf/Koito.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
433 lines
11 KiB
433 lines
11 KiB
/* Theme Definitions */
|
|
|
|
[data-theme="varia"]{
|
|
/* Backgrounds */
|
|
--color-bg:rgb(25, 25, 29);
|
|
--color-bg-secondary: #222222;
|
|
--color-bg-tertiary: #333333;
|
|
|
|
/* Foregrounds */
|
|
--color-fg: #eeeeee;
|
|
--color-fg-secondary: #aaaaaa;
|
|
--color-fg-tertiary: #888888;
|
|
|
|
/* Accents */
|
|
--color-primary:rgb(203, 110, 240);
|
|
--color-primary-dim: #c28379;
|
|
--color-accent: #f0ad0a;
|
|
--color-accent-dim: #d08d08;
|
|
|
|
/* Status Colors */
|
|
--color-error: #f44336;
|
|
--color-warning: #ff9800;
|
|
--color-success: #4caf50;
|
|
--color-info: #2196f3;
|
|
|
|
/* Borders and Shadows */
|
|
--color-border: var(--color-bg-tertiary);
|
|
--color-shadow: rgba(0, 0, 0, 0.5);
|
|
|
|
/* Interactive Elements */
|
|
--color-link: var(--color-primary);
|
|
--color-link-hover: var(--color-primary-dim);
|
|
}
|
|
|
|
[data-theme="wine"] {
|
|
/* Backgrounds */
|
|
--color-bg: #23181E;
|
|
--color-bg-secondary: #2C1C25;
|
|
--color-bg-tertiary: #422A37;
|
|
|
|
/* Foregrounds */
|
|
--color-fg: #FCE0B3;
|
|
--color-fg-secondary:#C7AC81;
|
|
--color-fg-tertiary:#A78E64;
|
|
|
|
/* Accents */
|
|
--color-primary: #EA8A64;
|
|
--color-primary-dim: #BD7255;
|
|
--color-accent: #FAE99B;
|
|
--color-accent-dim: #C6B464;
|
|
|
|
/* Status Colors */
|
|
--color-error: #fca5a5;
|
|
--color-warning: #fde68a;
|
|
--color-success: #bbf7d0;
|
|
--color-info: #bae6fd;
|
|
|
|
/* Borders and Shadows */
|
|
--color-border: var(--color-bg-tertiary);
|
|
--color-shadow: rgba(0, 0, 0, 0.05);
|
|
|
|
/* Interactive Elements */
|
|
--color-link: var(--color-primary);
|
|
--color-link-hover: var(--color-primary-dim);
|
|
}
|
|
|
|
[data-theme="asuka"] {
|
|
/* Backgrounds */
|
|
--color-bg: #3B1212;
|
|
--color-bg-secondary: #471B1B;
|
|
--color-bg-tertiary: #020202;
|
|
|
|
/* Foregrounds */
|
|
--color-fg: #F1E9E6;
|
|
--color-fg-secondary: #CCB6AE;
|
|
--color-fg-tertiary: #9F8176;
|
|
|
|
/* Accents */
|
|
--color-primary: #F1E9E6;
|
|
--color-primary-dim: #CCB6AE;
|
|
--color-accent: #41CE41;
|
|
--color-accent-dim: #3BA03B;
|
|
|
|
/* Status Colors */
|
|
--color-error: #EB97A8;
|
|
--color-warning: #FFD700;
|
|
--color-success: #32CD32;
|
|
--color-info: #1E90FF;
|
|
|
|
/* Borders and Shadows (derived from existing colors for consistency) */
|
|
--color-border: var(--color-bg-tertiary);
|
|
--color-shadow: rgba(0, 0, 0, 0.1); /* Slightly more prominent shadow for contrast */
|
|
|
|
/* Interactive Elements */
|
|
--color-link: var(--color-primary);
|
|
--color-link-hover: var(--color-primary-dim);
|
|
}
|
|
|
|
[data-theme="midnight"] {
|
|
/* Backgrounds */
|
|
--color-bg:rgb(8, 15, 24);
|
|
--color-bg-secondary:rgb(15, 27, 46);
|
|
--color-bg-tertiary:rgb(15, 41, 70);
|
|
|
|
/* Foregrounds */
|
|
--color-fg: #dbdfe7;
|
|
--color-fg-secondary: #9ea3a8;
|
|
--color-fg-tertiary: #74787c;
|
|
|
|
/* Accents */
|
|
--color-primary: #1a97eb;
|
|
--color-primary-dim: #2680aa;
|
|
--color-accent: #f0ad0a;
|
|
--color-accent-dim: #d08d08;
|
|
|
|
/* Status Colors */
|
|
--color-error: #f44336;
|
|
--color-warning: #ff9800;
|
|
--color-success: #4caf50;
|
|
--color-info: #2196f3;
|
|
|
|
/* Borders and Shadows */
|
|
--color-border: var(--color-bg-tertiary);
|
|
--color-shadow: rgba(0, 0, 0, 0.5);
|
|
|
|
/* Interactive Elements */
|
|
--color-link: var(--color-primary);
|
|
--color-link-hover: var(--color-primary-dim);
|
|
}
|
|
|
|
/* TODO: Adjust */
|
|
[data-theme="catppuccin"] {
|
|
/* Backgrounds */
|
|
--color-bg: #1e1e2e;
|
|
--color-bg-secondary: #181825;
|
|
--color-bg-tertiary: #11111b;
|
|
|
|
/* Foregrounds */
|
|
--color-fg: #cdd6f4;
|
|
--color-fg-secondary: #a6adc8;
|
|
--color-fg-tertiary: #9399b2;
|
|
|
|
/* Accents */
|
|
--color-primary: #cba6f7;
|
|
--color-primary-dim: #739df0;
|
|
--color-accent: #f38ba8;
|
|
--color-accent-dim: #d67b94;
|
|
|
|
/* Status Colors */
|
|
--color-error: #f38ba8;
|
|
--color-warning: #f9e2af;
|
|
--color-success: #a6e3a1;
|
|
--color-info: #89dceb;
|
|
|
|
/* Borders and Shadows */
|
|
--color-border: var(--color-bg-tertiary);
|
|
--color-shadow: rgba(0, 0, 0, 0.5);
|
|
|
|
/* Interactive Elements */
|
|
--color-link: var(--color-primary);
|
|
--color-link-hover: var(--color-primary-dim);
|
|
}
|
|
|
|
[data-theme="pearl"] {
|
|
/* Backgrounds */
|
|
--color-bg: #FFFFFF;
|
|
--color-bg-secondary: #EEEEEE;
|
|
--color-bg-tertiary: #E0E0E0;
|
|
|
|
/* Foregrounds */
|
|
--color-fg: #333333;
|
|
--color-fg-secondary: #555555;
|
|
--color-fg-tertiary: #777777;
|
|
|
|
/* Accents */
|
|
--color-primary: #007BFF;
|
|
--color-primary-dim: #0056B3;
|
|
--color-accent: #28A745;
|
|
--color-accent-dim: #1E7E34;
|
|
|
|
/* Status Colors */
|
|
--color-error: #DC3545;
|
|
--color-warning: #CE9B00;
|
|
--color-success: #099B2B;
|
|
--color-info: #02B3CE;
|
|
|
|
/* Borders and Shadows */
|
|
--color-border: var(--color-bg-tertiary);
|
|
--color-shadow: rgba(0, 0, 0, 0.1);
|
|
|
|
/* Interactive Elements */
|
|
--color-link: var(--color-primary);
|
|
--color-link-hover: var(--color-primary-dim);
|
|
}
|
|
|
|
[data-theme="urim"] {
|
|
/* Backgrounds */
|
|
--color-bg: #101713;
|
|
--color-bg-secondary: #1B2921;
|
|
--color-bg-tertiary: #273B30;
|
|
|
|
/* Foregrounds */
|
|
--color-fg: #D2E79E;
|
|
--color-fg-secondary: #B4DA55;
|
|
--color-fg-tertiary: #7E9F2A;
|
|
|
|
/* Accents */
|
|
--color-primary: #ead500;
|
|
--color-primary-dim: #C1B210;
|
|
--color-accent: #28A745;
|
|
--color-accent-dim: #1E7E34;
|
|
|
|
/* Status Colors */
|
|
--color-error: #EE5237;
|
|
--color-warning: #FFC107;
|
|
--color-success: #28A745;
|
|
--color-info: #17A2B8;
|
|
|
|
/* Borders and Shadows */
|
|
--color-border: var(--color-bg-tertiary);
|
|
--color-shadow: rgba(0, 0, 0, 0.1);
|
|
|
|
/* Interactive Elements */
|
|
--color-link: var(--color-primary);
|
|
--color-link-hover: var(--color-primary-dim);
|
|
}
|
|
|
|
[data-theme="yuu"] {
|
|
/* Backgrounds */
|
|
--color-bg: #161312;
|
|
--color-bg-secondary: #272120;
|
|
--color-bg-tertiary: #382F2E;
|
|
|
|
/* Foregrounds */
|
|
--color-fg: #faf5f4;
|
|
--color-fg-secondary: #CCC7C6;
|
|
--color-fg-tertiary: #B0A3A1;
|
|
|
|
/* Accents */
|
|
--color-primary: #ff826d;
|
|
--color-primary-dim: #CE6654;
|
|
--color-accent: #464DAE;
|
|
--color-accent-dim: #393D74;
|
|
|
|
/* Status Colors */
|
|
--color-error: #FF6247;
|
|
--color-warning: #FFC107;
|
|
--color-success: #3ECE5F;
|
|
--color-info: #41C4D8;
|
|
|
|
/* Borders and Shadows */
|
|
--color-border: var(--color-bg-tertiary);
|
|
--color-shadow: rgba(0, 0, 0, 0.1);
|
|
|
|
/* Interactive Elements */
|
|
--color-link: var(--color-primary);
|
|
--color-link-hover: var(--color-primary-dim);
|
|
}
|
|
|
|
[data-theme="match"] {
|
|
/* Backgrounds */
|
|
--color-bg: #071014;
|
|
--color-bg-secondary: #0A181E;
|
|
--color-bg-tertiary: #112A34;
|
|
|
|
/* Foregrounds */
|
|
--color-fg: #ebeaeb;
|
|
--color-fg-secondary: #BDBDBD;
|
|
--color-fg-tertiary: #A2A2A2;
|
|
|
|
/* Accents */
|
|
--color-primary: #fda827;
|
|
--color-primary-dim: #C78420;
|
|
--color-accent: #277CFD;
|
|
--color-accent-dim: #1F60C1;
|
|
|
|
/* Status Colors */
|
|
--color-error: #F14426;
|
|
--color-warning: #FFC107;
|
|
--color-success: #28A745;
|
|
--color-info: #17A2B8;
|
|
|
|
/* Borders and Shadows */
|
|
--color-border: var(--color-bg-tertiary);
|
|
--color-shadow: rgba(0, 0, 0, 0.1);
|
|
|
|
/* Interactive Elements */
|
|
--color-link: var(--color-primary);
|
|
--color-link-hover: var(--color-primary-dim);
|
|
}
|
|
|
|
[data-theme="lemon"] {
|
|
/* Backgrounds */
|
|
--color-bg: #1a171a;
|
|
--color-bg-secondary: #2E272E;
|
|
--color-bg-tertiary: #443844;
|
|
|
|
/* Foregrounds */
|
|
--color-fg: #E6E2DC;
|
|
--color-fg-secondary: #B2ACA1;
|
|
--color-fg-tertiary: #968F82;
|
|
|
|
/* Accents */
|
|
--color-primary: #f5c737;
|
|
--color-primary-dim: #C29D2F;
|
|
--color-accent: #277CFD;
|
|
--color-accent-dim: #1F60C1;
|
|
|
|
/* Status Colors */
|
|
--color-error: #F14426;
|
|
--color-warning: #FFC107;
|
|
--color-success: #28A745;
|
|
--color-info: #17A2B8;
|
|
|
|
/* Borders and Shadows */
|
|
--color-border: var(--color-bg-tertiary);
|
|
--color-shadow: rgba(0, 0, 0, 0.1);
|
|
|
|
/* Interactive Elements */
|
|
--color-link: var(--color-primary);
|
|
--color-link-hover: var(--color-primary-dim);
|
|
}
|
|
|
|
[data-theme="autumn"] {
|
|
/* Backgrounds */
|
|
--color-bg:rgb(44, 25, 18);
|
|
--color-bg-secondary:rgb(70, 40, 18);
|
|
--color-bg-tertiary: #4b2f1c;
|
|
|
|
/* Foregrounds */
|
|
--color-fg: #fef9f3;
|
|
--color-fg-secondary: #dbc6b0;
|
|
--color-fg-tertiary: #a3917a;
|
|
|
|
/* Accents */
|
|
--color-primary: #d97706;
|
|
--color-primary-dim: #b45309;
|
|
--color-accent: #8c4c28;
|
|
--color-accent-dim: #6b3b1f;
|
|
|
|
/* Status Colors */
|
|
--color-error: #d1433f;
|
|
--color-warning: #e38b29;
|
|
--color-success: #6b8e23;
|
|
--color-info: #c084fc;
|
|
|
|
/* Borders and Shadows */
|
|
--color-border: var(--color-bg-tertiary);
|
|
--color-shadow: rgba(0, 0, 0, 0.4);
|
|
|
|
/* Interactive Elements */
|
|
--color-link: var(--color-primary);
|
|
--color-link-hover: var(--color-primary-dim);
|
|
}
|
|
|
|
[data-theme="black"] {
|
|
/* Backgrounds */
|
|
--color-bg: #000000;
|
|
--color-bg-secondary: #1a1a1a;
|
|
--color-bg-tertiary: #2a2a2a;
|
|
|
|
/* Foregrounds */
|
|
--color-fg: #dddddd;
|
|
--color-fg-secondary: #aaaaaa;
|
|
--color-fg-tertiary: #888888;
|
|
|
|
/* Accents */
|
|
--color-primary: #08c08c;
|
|
--color-primary-dim: #08c08c;
|
|
--color-accent: #f0ad0a;
|
|
--color-accent-dim: #d08d08;
|
|
|
|
/* Status Colors */
|
|
--color-error: #f44336;
|
|
--color-warning: #ff9800;
|
|
--color-success: #4caf50;
|
|
--color-info: #2196f3;
|
|
|
|
/* Borders and Shadows */
|
|
--color-border: var(--color-bg-tertiary);
|
|
--color-shadow: rgba(0, 0, 0, 0.5);
|
|
|
|
/* Interactive Elements */
|
|
--color-link: #0af0af;
|
|
--color-link-hover: #08c08c;
|
|
}
|
|
|
|
|
|
/* Theme Helper Classes */
|
|
|
|
/* Foreground Text */
|
|
.color-fg { color: var(--color-fg); }
|
|
.color-fg-secondary { color: var(--color-fg-secondary); }
|
|
.color-fg-tertiary { color: var(--color-fg-tertiary); }
|
|
.hover-color-fg:hover { color: var(--color-fg); }
|
|
.hover-color-fg-secondary:hover { color: var(--color-fg-secondary); }
|
|
.hover-color-fg-tertiary:hover { color: var(--color-fg-tertiary); }
|
|
|
|
/* Backgrounds */
|
|
.bg { background-color: var(--color-bg); }
|
|
.bg-secondary { background-color: var(--color-bg-secondary); }
|
|
.bg-tertiary { background-color: var(--color-bg-tertiary); }
|
|
.hover-bg:hover { background-color: var(--color-bg); }
|
|
.hover-bg-secondary:hover { background-color: var(--color-bg-secondary); }
|
|
.hover-bg-tertiary:hover { background-color: var(--color-bg-tertiary); }
|
|
|
|
/* Borders */
|
|
.border { border: 1px solid var(--color-border); }
|
|
|
|
/* Accent Colors */
|
|
.color-primary { color: var(--color-primary); }
|
|
.bg-primary { background-color: var(--color-primary); }
|
|
.color-accent { color: var(--color-accent); }
|
|
.bg-secondary-accent { background-color: var(--color-accent); }
|
|
|
|
/* Status Colors */
|
|
.error { color: var(--color-error); }
|
|
.bg-error { background-color: var(--color-error); }
|
|
|
|
.warning { color: var(--color-warning); }
|
|
.bg-warning { background-color: var(--color-warning); }
|
|
|
|
.success { color: var(--color-success); }
|
|
.bg-success { background-color: var(--color-success); }
|
|
|
|
|
|
.info { color: var(--color-info); }
|
|
.bg-info { background-color: var(--color-info); }
|
|
|
|
/* Links */
|
|
.link { color: var(--color-link); transition: color var(--transition-speed); }
|
|
.link:hover { color: var(--color-link-hover); }
|