mirror of
https://github.com/morris/vanilla-todo.git
synced 2025-09-08 21:20:40 +02:00
80 lines
2.1 KiB
CSS
80 lines
2.1 KiB
CSS
:root {
|
|
/* Named color scheme */
|
|
--white: #fefefe;
|
|
--black: #0a0a0b;
|
|
--grey1: #545e75;
|
|
--grey2: #b0b0b8;
|
|
--grey3: #d2d2d6;
|
|
--grey4: #e4ecf0;
|
|
--red: #ce2d4f;
|
|
|
|
/* UI color mapping */
|
|
--main-text: var(--black);
|
|
--main-bg: var(--white);
|
|
--main-border: var(--grey2);
|
|
--main-border-light: var(--grey3);
|
|
--header-text: var(--grey1);
|
|
--header-bg: var(--white);
|
|
--highlight-text: var(--red);
|
|
--disabled-text: var(--grey2);
|
|
--aside-text: var(--grey1);
|
|
--button-text: var(--grey1);
|
|
--button-bg: transparent;
|
|
--button-active-text: var(--black);
|
|
--button-active-bg: var(--grey4);
|
|
--button-highlight-text: var(--red);
|
|
}
|
|
|
|
.-invertcolorscheme {
|
|
--main-text: var(--white);
|
|
--main-bg: var(--black);
|
|
--main-border: var(--grey3);
|
|
--main-border-light: var(--grey2);
|
|
--header-text: var(--grey2);
|
|
--header-bg: var(--black);
|
|
--highlight-text: var(--red);
|
|
--disabled-text: var(--grey1);
|
|
--aside-text: var(--grey2);
|
|
--button-text: var(--grey2);
|
|
--button-bg: transparent;
|
|
--button-active-text: var(--white);
|
|
--button-active-bg: var(--grey1);
|
|
--button-highlight-text: var(--red);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--main-text: var(--white);
|
|
--main-bg: var(--black);
|
|
--main-border: var(--grey3);
|
|
--main-border-light: var(--grey2);
|
|
--header-text: var(--grey2);
|
|
--header-bg: var(--black);
|
|
--highlight-text: var(--red);
|
|
--disabled-text: var(--grey1);
|
|
--aside-text: var(--grey2);
|
|
--button-text: var(--grey2);
|
|
--button-bg: transparent;
|
|
--button-active-text: var(--white);
|
|
--button-active-bg: var(--grey1);
|
|
--button-highlight-text: var(--red);
|
|
}
|
|
|
|
.-invertcolorscheme {
|
|
--main-text: var(--black);
|
|
--main-bg: var(--white);
|
|
--main-border: var(--grey2);
|
|
--main-border-light: var(--grey3);
|
|
--header-text: var(--grey1);
|
|
--header-bg: var(--white);
|
|
--highlight-text: var(--red);
|
|
--disabled-text: var(--grey2);
|
|
--aside-text: var(--grey1);
|
|
--button-text: var(--grey1);
|
|
--button-bg: transparent;
|
|
--button-active-text: var(--black);
|
|
--button-active-bg: var(--grey4);
|
|
--button-highlight-text: var(--red);
|
|
}
|
|
}
|