50 lines
1.9 KiB
CSS
50 lines
1.9 KiB
CSS
|
/* dark theme using catppuccin mocha, light using catppuccin latte - https://github.com/catppuccin/catppuccin */
|
||
|
|
:root {
|
||
|
|
--vt-c-white: #eff1f5; /* Base (latte) */
|
||
|
|
--vt-c-white-soft: #bcc0cc; /* Surface1 (latte) */
|
||
|
|
--vt-c-white-mute: #ccd0da; /* Surface0 (latte) */
|
||
|
|
|
||
|
|
--vt-c-black: #1e1e2e; /* Base (mocha) */
|
||
|
|
--vt-c-black-soft: #45475a; /* Surface1 (mocha) */
|
||
|
|
--vt-c-black-mute: #313244; /* Surface0 (mocha) */
|
||
|
|
|
||
|
|
--vt-c-text-light: #4c4f69; /* Text (latte) */
|
||
|
|
--vt-c-text-dark: #cdd6f4; /* Text (mocha) */
|
||
|
|
|
||
|
|
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29); /* Overlay1 (mocha) */
|
||
|
|
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12); /* Overlay1 (mocha) */
|
||
|
|
--vt-c-divider-dark-1: rgba(127, 132, 156, 0.65); /* Overlay1 (mocha) */
|
||
|
|
--vt-c-divider-dark-2: rgba(127, 132, 156, 0.48); /* Overlay1 (mocha) */
|
||
|
|
|
||
|
|
--vt-c-text-light-1: var(--vt-c-text-light);
|
||
|
|
--vt-c-text-light-2: rgba(92, 95, 119, 0.66); /* Subtext1 (latte) */
|
||
|
|
--vt-c-text-dark-1: var(--vt-c-text-dark);
|
||
|
|
--vt-c-text-dark-2: rgba(186, 194, 222, 0.64); /* Subtext1 (mocha) */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* semantic color variables for this project */
|
||
|
|
:root {
|
||
|
|
--color-background: var(--vt-c-white);
|
||
|
|
--color-background-soft: var(--vt-c-white-soft);
|
||
|
|
--color-background-mute: var(--vt-c-white-mute);
|
||
|
|
|
||
|
|
--color-border: var(--vt-c-divider-light-2);
|
||
|
|
--color-border-hover: var(--vt-c-divider-light-1);
|
||
|
|
|
||
|
|
--color-heading: var(--vt-c-text-light-1);
|
||
|
|
--color-text: var(--vt-c-text-light-1);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
:root {
|
||
|
|
--color-background: var(--vt-c-black);
|
||
|
|
--color-background-soft: var(--vt-c-black-soft);
|
||
|
|
--color-background-mute: var(--vt-c-black-mute);
|
||
|
|
|
||
|
|
--color-border: var(--vt-c-divider-dark-2);
|
||
|
|
--color-border-hover: var(--vt-c-divider-dark-1);
|
||
|
|
|
||
|
|
--color-heading: var(--vt-c-text-dark-1);
|
||
|
|
--color-text: var(--vt-c-text-dark-2);
|
||
|
|
}
|
||
|
|
}
|