2019-08-24 23:42:41 +00:00
|
|
|
/**
|
|
|
|
|
Main Themes:
|
|
|
|
|
- dark (default)
|
|
|
|
|
- light
|
2019-09-30 20:21:30 +00:00
|
|
|
- black
|
2019-10-05 09:27:24 +00:00
|
|
|
- auto
|
2019-08-24 23:42:41 +00:00
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
// Dark is the default theme variant.
|
2019-10-20 00:57:47 +00:00
|
|
|
@mixin darkTheme {
|
2019-08-24 23:42:41 +00:00
|
|
|
// Background color
|
2019-12-17 19:13:15 +00:00
|
|
|
--bg-color: rgba(32, 33, 36, 1);
|
2019-12-09 03:35:03 +00:00
|
|
|
// Light Background color
|
2020-03-27 01:00:13 +00:00
|
|
|
--bg-light-color: rgba(255, 255, 255, 0.04);
|
2019-12-14 09:53:10 +00:00
|
|
|
// Dark Background color
|
2020-03-26 10:34:46 +00:00
|
|
|
--bg-dark-color: rgba(0, 0, 0, 0.2);
|
2019-08-24 23:42:41 +00:00
|
|
|
// Text color
|
2019-12-17 19:13:15 +00:00
|
|
|
--fg-color: rgba(255, 255, 255, 0.9);
|
2019-09-20 13:04:42 +00:00
|
|
|
// Light Text color
|
2019-12-14 09:53:10 +00:00
|
|
|
--fg-light-color: rgba(255, 255, 255, 0.5);
|
2019-09-17 08:13:12 +00:00
|
|
|
// Border color
|
2019-12-14 09:53:10 +00:00
|
|
|
--brd-color: rgba(255, 255, 255, 0.05);
|
2019-08-24 23:42:41 +00:00
|
|
|
// Error color
|
2019-12-09 04:10:47 +00:00
|
|
|
--err-color: rgba(255, 255, 255, 0.05);
|
2019-09-20 13:04:42 +00:00
|
|
|
// Acent color
|
2019-12-14 09:53:10 +00:00
|
|
|
--ac-color: rgba(80, 250, 123, 1);
|
2019-08-24 23:42:41 +00:00
|
|
|
// Active text color
|
2019-12-17 19:13:15 +00:00
|
|
|
--act-color: rgba(32, 33, 36, 1);
|
2019-12-14 09:53:10 +00:00
|
|
|
// Auto-complete color
|
2019-12-17 19:13:15 +00:00
|
|
|
--atc-color: rgba(32, 33, 36, 1);
|
|
|
|
|
// Tooltip color
|
|
|
|
|
--tt-color: rgba(53, 53, 53, 1);
|
2019-08-24 23:42:41 +00:00
|
|
|
}
|
|
|
|
|
|
2019-10-20 00:57:47 +00:00
|
|
|
@mixin lightTheme {
|
2019-12-14 09:53:10 +00:00
|
|
|
// Background color
|
|
|
|
|
--bg-color: rgba(255, 255, 255, 1);
|
2019-12-09 03:35:03 +00:00
|
|
|
// Light Background color
|
2020-03-27 01:00:13 +00:00
|
|
|
--bg-light-color: rgba(0, 0, 0, 0.05);
|
2019-12-14 09:53:10 +00:00
|
|
|
// Dark Background color
|
|
|
|
|
--bg-dark-color: rgba(0, 0, 0, 0.02);
|
2019-09-30 20:21:30 +00:00
|
|
|
// Text color
|
2019-12-17 19:13:15 +00:00
|
|
|
--fg-color: rgba(0, 0, 0, 0.9);
|
2019-09-30 20:21:30 +00:00
|
|
|
// Light Text color
|
2019-12-14 09:53:10 +00:00
|
|
|
--fg-light-color: rgba(0, 0, 0, 0.6);
|
2019-09-30 20:21:30 +00:00
|
|
|
// Border color
|
2019-12-14 09:53:10 +00:00
|
|
|
--brd-color: rgba(0, 0, 0, 0.1);
|
2019-09-30 20:21:30 +00:00
|
|
|
// Error color
|
2019-12-14 09:53:10 +00:00
|
|
|
--err-color: rgba(0, 0, 0, 0.1);
|
2019-09-30 20:21:30 +00:00
|
|
|
// Acent color
|
2019-12-14 09:53:10 +00:00
|
|
|
--ac-color: rgba(80, 250, 123, 1);
|
2019-09-30 20:21:30 +00:00
|
|
|
// Active text color
|
2019-12-14 09:53:10 +00:00
|
|
|
--act-color: rgba(255, 255, 255, 1);
|
|
|
|
|
// Auto-complete color
|
|
|
|
|
--atc-color: rgba(255, 255, 255, 1);
|
2019-12-17 19:13:15 +00:00
|
|
|
// Tooltip color
|
|
|
|
|
--tt-color: rgba(220, 220, 220, 1);
|
2019-09-30 20:21:30 +00:00
|
|
|
}
|
|
|
|
|
|
2019-10-20 00:57:47 +00:00
|
|
|
@mixin blackTheme {
|
2019-12-14 09:53:10 +00:00
|
|
|
// Background color
|
|
|
|
|
--bg-color: rgba(0, 0, 0, 1);
|
2019-12-09 03:35:03 +00:00
|
|
|
// Light Background color
|
2019-12-17 19:13:15 +00:00
|
|
|
--bg-light-color: rgba(255, 255, 255, 0.02);
|
2019-12-14 09:53:10 +00:00
|
|
|
// Dark Background color
|
2020-03-26 10:34:46 +00:00
|
|
|
--bg-dark-color: rgba(255, 255, 255, 0.04);
|
2019-08-24 23:42:41 +00:00
|
|
|
// Text color
|
2019-12-17 19:13:15 +00:00
|
|
|
--fg-color: rgba(255, 255, 255, 0.9);
|
2019-09-20 13:04:42 +00:00
|
|
|
// Light Text color
|
2019-12-14 09:53:10 +00:00
|
|
|
--fg-light-color: rgba(255, 255, 255, 0.5);
|
2019-09-17 08:13:12 +00:00
|
|
|
// Border color
|
2019-12-14 09:53:10 +00:00
|
|
|
--brd-color: rgba(255, 255, 255, 0.05);
|
2019-08-24 23:42:41 +00:00
|
|
|
// Error color
|
2019-12-14 09:53:10 +00:00
|
|
|
--err-color: rgba(255, 255, 255, 0.05);
|
2019-09-20 13:04:42 +00:00
|
|
|
// Acent color
|
2019-12-14 09:53:10 +00:00
|
|
|
--ac-color: rgba(80, 250, 123, 1);
|
2019-08-24 23:42:41 +00:00
|
|
|
// Active text color
|
2019-12-14 09:53:10 +00:00
|
|
|
--act-color: rgba(0, 0, 0, 1);
|
|
|
|
|
// Auto-complete color
|
|
|
|
|
--atc-color: rgba(0, 0, 0, 1);
|
2019-12-17 19:13:15 +00:00
|
|
|
// Tooltip color
|
|
|
|
|
--tt-color: rgba(18, 18, 18, 1);
|
2019-10-05 09:27:24 +00:00
|
|
|
}
|
2019-10-25 08:14:34 +00:00
|
|
|
|
2019-12-09 03:35:03 +00:00
|
|
|
:root {
|
|
|
|
|
@include darkTheme;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:root.light {
|
|
|
|
|
@include lightTheme;
|
|
|
|
|
}
|
|
|
|
|
|
2019-10-20 00:57:47 +00:00
|
|
|
:root.black {
|
|
|
|
|
@include blackTheme;
|
2019-09-02 10:27:24 +00:00
|
|
|
}
|
2019-12-09 03:35:03 +00:00
|
|
|
|
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
|
:root.auto {
|
|
|
|
|
@include darkTheme;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
|
|
|
:root.auto {
|
|
|
|
|
@include lightTheme;
|
|
|
|
|
}
|
|
|
|
|
}
|