119 lines
2.6 KiB
SCSS
119 lines
2.6 KiB
SCSS
/**
|
|
Main Themes:
|
|
|
|
- auto
|
|
- dark (default)
|
|
- light
|
|
- black
|
|
*/
|
|
|
|
@media(prefers-color-scheme: light) {
|
|
:root.auto {
|
|
// Dark Background color
|
|
--bg-dark-color: #e8f0fe;
|
|
// Background color
|
|
--bg-color: #fff;
|
|
// Auto-complete color
|
|
--atc-color: #ebebeb;
|
|
// Text color
|
|
--fg-color: #525252;
|
|
// Light Text color
|
|
--fg-light-color: rgb(150, 155, 160);
|
|
// Border color
|
|
--brd-color: #f2f2f2;
|
|
// Error color
|
|
--err-color: invert(#303341, 1);
|
|
// Acent color
|
|
--ac-color: #57b5f9;
|
|
// Active text color
|
|
--act-color: #fff;
|
|
}
|
|
}
|
|
|
|
@media(prefers-color-scheme: dark) {
|
|
:root.auto {
|
|
// Dark Background color
|
|
--bg-dark-color: rgb(41, 42, 45);
|
|
// Background color
|
|
--bg-color: rgb(37, 38, 40);
|
|
// Auto-complete color
|
|
--atc-color: rgb(49, 49, 55);
|
|
// Text color
|
|
--fg-color: rgb(247, 248, 248);
|
|
// Light Text color
|
|
--fg-light-color: rgb(150, 155, 160);
|
|
// Border color
|
|
--brd-color: rgb(48, 47, 55);
|
|
// Error color
|
|
--err-color: rgb(41, 42, 45);
|
|
// Acent color
|
|
--ac-color: #50fa7b;
|
|
// Active text color
|
|
--act-color: rgb(37, 38, 40);
|
|
}
|
|
}
|
|
|
|
// Dark is the default theme variant.
|
|
:root {
|
|
// Dark Background color
|
|
--bg-dark-color: rgb(41, 42, 45);
|
|
// Background color
|
|
--bg-color: rgb(37, 38, 40);
|
|
// Auto-complete color
|
|
--atc-color: rgb(49, 49, 55);
|
|
// Text color
|
|
--fg-color: rgb(247, 248, 248);
|
|
// Light Text color
|
|
--fg-light-color: rgb(150, 155, 160);
|
|
// Border color
|
|
--brd-color: rgb(48, 47, 55);
|
|
// Error color
|
|
--err-color: rgb(41, 42, 45);
|
|
// Acent color
|
|
--ac-color: #50fa7b;
|
|
// Active text color
|
|
--act-color: rgb(37, 38, 40);
|
|
}
|
|
|
|
:root.black {
|
|
// Dark Background color
|
|
--bg-dark-color: rgb(23, 24, 26);
|
|
// Background color
|
|
--bg-color: #000;
|
|
// Auto-complete color
|
|
--atc-color: rgb(49, 49, 55);
|
|
// Text color
|
|
--fg-color: rgb(247, 248, 248);
|
|
// Light Text color
|
|
--fg-light-color: rgb(150, 155, 160);
|
|
// Border color
|
|
--brd-color: rgb(48, 47, 55);
|
|
// Error color
|
|
--err-color: rgb(41, 42, 45);
|
|
// Acent color
|
|
--ac-color: #50fa7b;
|
|
// Active text color
|
|
--act-color: rgb(37, 38, 40);
|
|
}
|
|
|
|
:root.light {
|
|
// Dark Background color
|
|
--bg-dark-color: #e8f0fe;
|
|
// Background color
|
|
--bg-color: #fff;
|
|
// Auto-complete color
|
|
--atc-color: #ebebeb;
|
|
// Text color
|
|
--fg-color: #525252;
|
|
// Light Text color
|
|
--fg-light-color: rgb(150, 155, 160);
|
|
// Border color
|
|
--brd-color: #f2f2f2;
|
|
// Error color
|
|
--err-color: invert(#303341, 1);
|
|
// Acent color
|
|
--ac-color: #57b5f9;
|
|
// Active text color
|
|
--act-color: #fff;
|
|
}
|