69 lines
2.5 KiB
SCSS
69 lines
2.5 KiB
SCSS
:root,
|
|
[data-theme="light"] {
|
|
--background-color: #fff;
|
|
--primary-foreground-color: #4a4a4a;
|
|
--secondary-foreground-color: #000;
|
|
--primary-subtle-color: #0470ee;
|
|
--secondary-subtle-color: #f4f8fd;
|
|
--titles-color: #333;
|
|
--link-color: #293951;
|
|
--primary-border-color: #9b9b9b;
|
|
--secondary-border-color: aliceblue;
|
|
--article-shadow-normal: 0 10px 10px rgba(0,0,0,0.08);
|
|
--article-shadow-hover: 0 4px 60px 0 rgba(0,0,0,0.2);
|
|
--transparent-background-color: rgba(255,255,255,0.99);
|
|
--footer-background-color: #133467;
|
|
--submenu-shadow-color-opacity: 0.25;
|
|
--button-shadow-color-normal: rgba(108, 108, 108, 0.2);
|
|
--button-shadow-color-hover: rgba(108, 108, 108, 0.3);
|
|
--toggle-darkmode-button-color: #fff;
|
|
--table-background-color-odd: #fafafa;
|
|
--table-head-border-bottom: #e2e2e2;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--background-color: #111;
|
|
--primary-foreground-color: #ccc;
|
|
--secondary-foreground-color: #fff;
|
|
--primary-subtle-color: #2c2fe6;
|
|
--secondary-subtle-color: #141920;
|
|
--titles-color: #b4b4b4;
|
|
--link-color: #b6b7f6;
|
|
--primary-border-color: #1d1d1d;
|
|
--secondary-border-color: #0f0f0f;
|
|
--article-shadow-normal: 0 4px 5px 5px rgba(0,0,0,0.1);
|
|
--article-shadow-hover: 0 4px 5px 10px rgba(0,0,0,0.1);
|
|
--transparent-background-color: rgba(0,0,0,0.99);
|
|
--footer-background-color: #080808;
|
|
--submenu-shadow-color-opacity: 0.55;
|
|
--button-shadow-color-normal: rgba(10, 10, 10, 0.5);
|
|
--button-shadow-color-hover: rgba(10, 10, 10, 0.5);
|
|
--toggle-darkmode-button-color: #efd114;
|
|
--table-background-color-odd: #050505;
|
|
--table-head-border-bottom: #1d1d1d;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) {
|
|
--background-color: #111;
|
|
--primary-foreground-color: #ccc;
|
|
--secondary-foreground-color: #fff;
|
|
--primary-subtle-color: #2c2fe6;
|
|
--secondary-subtle-color: #141920;
|
|
--titles-color: #b4b4b4;
|
|
--link-color: #b6b7f6;
|
|
--primary-border-color: #1d1d1d;
|
|
--secondary-border-color: #0f0f0f;
|
|
--article-shadow-normal: 0 4px 5px 5px rgba(0,0,0,0.1);
|
|
--article-shadow-hover: 0 4px 5px 10px rgba(0,0,0,0.1);
|
|
--transparent-background-color: rgba(0,0,0,0.99);
|
|
--footer-background-color: #080808;
|
|
--submenu-shadow-color-opacity: 0.55;
|
|
--button-shadow-color-normal: rgba(10, 10, 10, 0.5);
|
|
--button-shadow-color-hover: rgba(10, 10, 10, 0.5);
|
|
--toggle-darkmode-button-color: #efd114;
|
|
--table-background-color-odd: #050505;
|
|
--table-head-border-bottom: #1d1d1d;
|
|
}
|
|
}
|