150 lines
8.6 KiB
CSS
150 lines
8.6 KiB
CSS
@media(prefers-color-scheme: dark) {
|
|
:root {
|
|
/*────────── Color Palette ──────────*/
|
|
color-scheme: dark;
|
|
/* Grayscale */
|
|
--color-d-gray-10: hsla(32, 48%, 85%, 1);
|
|
--color-d-gray-20: hsla(34, 39%, 74%, 1);
|
|
--color-d-gray-30: hsla(34, 31%, 68%, 1);
|
|
--color-d-gray-40: hsla(35, 27%, 55%, 1);
|
|
--color-d-gray-50: hsla(34, 24%, 46%, 1);
|
|
--color-d-gray-60: hsla(33, 27%, 33%, 1);
|
|
--color-d-gray-70: hsla(31, 27%, 25%, 1);
|
|
--color-d-gray-80: hsla(28, 22%, 19%, 1);
|
|
--color-d-gray-90: hsla(33, 20%, 17%, 1);
|
|
--color-d-gray-100: hsla(30, 19%, 15%, 1);
|
|
--color-d-gray-110: hsla(30, 17%, 14%, 1);
|
|
--color-d-gray-120: hsla(29, 16%, 13%, 1);
|
|
--color-d-gray-130: hsla(24, 18%, 11%, 1);
|
|
--color-d-gray-140: hsla(32, 21%, 9%, 1);
|
|
--color-d-alpha-gray: hsla(34, 24%, 40%, 0.2);
|
|
/* Red */
|
|
--color-d-red-10: hsla(5, 94%, 73%, 1);
|
|
--color-d-red-20: hsla(4, 91%, 67%, 1);
|
|
--color-d-red-30: hsla(4, 88%, 61%, 1);
|
|
--color-d-red-40: hsla(2, 75%, 52%, 1);
|
|
--color-d-alpha-red: hsla(350, 84%, 63%, 0.2);
|
|
/* Green */
|
|
--color-d-green-10: hsla(152, 51%, 54%, 1);
|
|
--color-d-green-20: hsla(154, 57%, 42%, 1);
|
|
--color-d-green-30: hsla(155, 78%, 29%, 1);
|
|
--color-d-green-40: hsla(154, 75%, 26%, 1);
|
|
--color-d-alpha-green: hsla(74, 69%, 44%, 0.2);
|
|
/*────────── Window ──────────*/
|
|
/* Scrollbar */
|
|
--scrollbar-bg: transparent;
|
|
--scrollbar-thumb-bg: var(--background-modifier-border);
|
|
--scrollbar-active-thumb-bg: var(--background-modifier-border-hover);
|
|
/*────────── Foundations ──────────*/
|
|
/* Background */
|
|
--background-primary: var(--color-d-gray-100);
|
|
--background-primary-alt: var(--color-d-gray-110);
|
|
--background-secondary: var(--color-d-gray-120);
|
|
--background-secondary-alt: var(--color-d-gray-120);
|
|
--background-modifier-hover: rgba(0, 0, 0, 0.3);
|
|
--background-modifier-active-hover: var(--color-d-gray-70);
|
|
--background-modifier-border: var(--color-d-gray-80);
|
|
--background-modifier-border-hover: color-mix(in srgb, var(--color-d-gray-70) 40%, var(--color-d-gray-80));
|
|
--background-modifier-border-focus: color-mix(in srgb, var(--color-d-gray-70) 40%, var(--color-d-gray-80));
|
|
--background-modifier-box-shadow: rgba(0, 0, 0, 0.3);
|
|
/* Text Color */
|
|
--text-normal: var(--color-d-gray-20);
|
|
--text-muted: var(--color-d-gray-40);
|
|
--text-faint: var(--color-d-gray-50);
|
|
--text-selection: var(--color-d-alpha-gray);
|
|
/* Icon Colors */
|
|
--icon-color: color-mix(in srgb, var(--color-d-gray-60) 30%, var(--color-d-gray-50));
|
|
--icon-opacity: 1;
|
|
--icon-bg: transparent;
|
|
--icon-color-hover: color-mix(in srgb, var(--color-d-gray-50) 70%, var(--color-d-gray-40));
|
|
--icon-opacity-hover: 1;
|
|
--icon-bg-hover: transparent;
|
|
--icon-color-focused: var(--color-d-gray-50);
|
|
--icon-bg-pressed: transparent;
|
|
--icon-color-active: var(--color-d-gray-40);
|
|
--icon-opacity-active: 1;
|
|
--icon-bg-active: var(--color-d-gray-80);
|
|
--icon-bg-active-menu: transparent;
|
|
/*────────── Components ──────────*/
|
|
/* Button */
|
|
--button-inset-shadow-size: 2px;
|
|
--button-shadow: var(--input-shadow);
|
|
--button-shadow-hover: var(--input-shadow-hover);
|
|
--button-shadow-active: var(--input-shadow-active);
|
|
--button-shadow-focus: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.05),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.3),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.24),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.25),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.55),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.3),
|
|
0px 2px 6px -1px rgba(0, 0, 0, 0.25),
|
|
0px 0px 0px 3px var(--color-d-alpha-gray);
|
|
--button-accent-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.3),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.26),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.35),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.37),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.27),
|
|
0px 2px 4px -1px rgba(0, 0, 0, 0.14);
|
|
--button-accent-shadow-hover: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.15),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.34),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.26),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.35),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.37),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.3),
|
|
0px 2px 6px -1px rgba(0, 0, 0, 0.19);
|
|
--button-accent-shadow-active: var(--input-shadow-active);
|
|
--button-accent-shadow-focus: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.12),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.28),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.11),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.52),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.27),
|
|
0px 2px 6px -1px rgba(0, 0, 0, 0.24),
|
|
0px 0px 0px 3px var(--color-d-alpha-gray);
|
|
/* Prompt */
|
|
--prompt-input-background: var(--background-primary);
|
|
--prompt-results-background: var(--background-primary);
|
|
--prompt-suggestion-color: var(--color-d-gray-40);
|
|
--prompt-suggestion-highlight-color: color-mix(in srgb, var(--prompt-suggestion-color) 70%, white);
|
|
--prompt-suggestion-color-selected: var(--color-d-gray-20);
|
|
--prompt-suggestion-highlight-color-selected: var(--color-d-gray-20);
|
|
--prompt-suggestion-background-selected: rgba(0, 0, 0, 0.1);
|
|
--prompt-suggestion-shadow-selected: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.14),
|
|
0px 2px 6px 0px rgba(0, 0, 0, 0.12);
|
|
--prompt-instructions-background: color-mix(in hsl, var(--editor-bg-color) 60%, var(--background-secondary));
|
|
--prompt-separator-border: 1px solid var(--color-d-gray-90);
|
|
--prompt-border-color: var(--background-modifier-border-focus);
|
|
/* Text Input */
|
|
--background-modifier-form-field: var(--color-d-gray-130);
|
|
--input-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.02),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.2),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.25),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.55),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.25),
|
|
0px 2px 4px -1px rgba(0, 0, 0, 0.2);
|
|
--input-shadow-hover: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.06),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.3),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.2),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.25),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.55),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.3),
|
|
0px 2px 6px -1px rgba(0, 0, 0, 0.25);
|
|
--input-shadow-active: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.45),
|
|
inset 0px 0px 0px calc(1px + var(--button-inset-shadow-size)) rgba(0, 0, 0, 0.15),
|
|
inset 0px 2px 8px 0px rgba(0, 0, 0, 0.57),
|
|
0px 0px 0px 1px rgba(255, 255, 255, 0.02);
|
|
--text-input-color: var(--color-d-gray-20);
|
|
--text-input-color-focused: var(--color-d-gray-20);
|
|
--text-input-bg-active: var(--color-d-gray-140);
|
|
--text-input-border-color: var(--color-d-gray-140);
|
|
--text-input-shadow-active: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.03),
|
|
inset 0px -1px 0px 0px rgba(0, 0, 0, 0.39),
|
|
0px 1px 6px 0px rgba(0, 0, 0, 0.37);
|
|
/* Emphasis */
|
|
--underline-color: var(--text-normal);
|
|
--underline-decoration-color: color-mix(in srgb, currentColor var(--link-decoration-opacity), transparent);
|
|
}
|
|
}
|