btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

💄 Minor stylings

Browse Source
This commit is contained in:
Liyas Thomas
2019-10-05 14:57:24 +05:30
parent 21386b924e
commit 82ad9cbf5e
5 changed files with 103 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
assets/css/themes.scss
View File

@@ -1,18 +1,82 @@
/**
Main Themes:
- auto
- dark (default)
- light
- black
- auto
*/
// 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.light {
// Dark Background color
--bg-dark-color: #e8f0fe;
// Background color
--bg-color: #ffffff;
// 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: #ffffff;
}
:root.black {
// Dark Background color
--bg-dark-color: rgb(23, 24, 26);
// Background color
--bg-color: #000000;
// 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);
}
@media(prefers-color-scheme: light) {
:root.auto {
// Dark Background color
--bg-dark-color: #e8f0fe;
// Background color
--bg-color: #fff;
--bg-color: #ffffff;
// Auto-complete color
--atc-color: #ebebeb;
// Text color
@@ -52,67 +116,3 @@
--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;
}