now adding new themes/colorschemes is easier and cleaner

2 files changed, 59 insertions, 78 deletions

diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
index 3011986..b2ca97b 100644
--- a/src/styles/_theme.scss
+++ b/src/styles/_theme.scss
@@ -2,86 +2,67 @@
 
 $defFont: 'Quicksand', sans-serif;
 
-/* Inspired by Dracula */
-/*
-$defBG: #282A36;
-$altBG: #383A59;
-
-$floatingContainerBG: #282C3466;
-$floatingBG: #2e323b;
-
-$formPaneBG: $defBG;
-
-$defFG: #F2F2F2;
-$altFG: #FF79C6;
-
-$defLink: $defFG;
-$altLink: $altFG;
-
-$paneBorderColor: pink;
-$formPaneBorderColor: $paneBorderColor;
-
-$defBorderColor: lightgreen;
-$altBorderColor: pink;
-
-$underline0: gray;
-$underline1: lightblue;
-$underline2: #FF79C6;
-
-$labelUnderlineColor: $underline1;
-
-$tableDefBorderColor: $underline1;
-$tableAltBorderColor: $underline2;
-$tableDisabledBorderColor: $underline0;
-
+/* light colorscheme, use this as template */
+// $disabledColor: gray;
+// $warningColor: red;
+// $shadowColor: #232627;
+// 
+// $background0: #282C3466; /* background for floating div */
+// $background1: #F7F2DF;
+// $background2: #A480CF;
+// $background3: #ECF5D9; /* foreground for floating div */
+// $background4: $background1; /* for form pane bg */
+// 
+// $foreground1: #000000;
+// $foreground2: #F83A59;
+// 
+// $link1: $foreground1;
+// $link2: $foreground2;
+// 
+// $defFG: $foreground1;
+// $altFG: $foreground2;
+// 
+// $border1: #232627;
+// $border2: lightgreen;
+// 
+// $underline0: $disabledColor;
+// $underline1: #F83A59;
+// $underline2: #FF79C6;
+// $underline3: $warningColor;
+// 
+// $defBigShadow: 0px 2px 4px $shadowColor;
+// $floatingShadow: 6px 6px 6px $shadowColor;
+/* template ends here */
+
+/* main dark theme inspired by dracula */
+/* my personal favourite */
+/* I name it dorakura (ドラクラー) */
+$disabledColor: gray;
 $warningColor: red;
-$warningBorderColor: $warningColor;
-
 $shadowColor: #232627;
-$defBigShadow: 0px 8px 4px $shadowColor;
-$floatingShadow: 6px 6px 6px $shadowColor;
-*/
-
-$background0: #282C3466;
-$background1: #ECF5D9;
-$background2: #A480CF;
-$background3: #F7F2DF;
-
-$underline0: gray;
-$underline1: #F83A59;
-$underline2: #FF79C6;
-
-$defBG: $background1;
-/*$altBG: #F83A59;*/
-$altBG: $background2;
-
-$floatingContainerBG: $background0;
-$floatingBG: $background3;
-
-$formPaneBG: $defBG;
 
-$defFG: #000000;
-$altFG: #F83A59;
+$background0: #282C3466; /* background for floating div */
+$background1: #282A36;
+$background2: #383A59;
+$background3: #2E323B; /* foreground for floating div */
+$background4: #00000000; /* for form pane bg */
 
-$defLink: $defFG;
-$altLink: $altFG;
+$foreground1: #FFFFFF;
+$foreground2: #FF79C6;
 
-$paneBorderColor: #232627;
-$formPaneBorderColor: $paneBorderColor;
+$link1: $foreground1;
+$link2: $foreground2;
 
-$defBorderColor: lightgreen;
-$altBorderColor: #232627;
+$defFG: $foreground1;
+$altFG: $foreground2;
 
+$border1: pink;
+$border2: lightgreen;
 
-$labelUnderlineColor: $underline1;
-
-$tableDefBorderColor: $underline1;
-$tableAltBorderColor: $underline2;
-$tableDisabledBorderColor: $underline0;
-
-$warningColor: red;
-$warningBorderColor: $warningColor;
+$underline0: $disabledColor;
+$underline1: lightblue;
+$underline2: #FF79C6;
+$underline3: $warningColor;
 
-$shadowColor: #232627;
 $defBigShadow: 0px 2px 4px $shadowColor;
 $floatingShadow: 6px 6px 6px $shadowColor;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 8605e07..9bf0904 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -27,8 +27,8 @@ html, body {
 }
 
 body {
-  background-color: $defBG;
-  color: $defFG;
+  background-color: $background1;
+  color: $foreground1;
   margin: 0;
 }
 
@@ -51,7 +51,7 @@ body {
 
 .BillingPageFlex div {
   box-sizing: border-box;
-  border: 1px solid $altBorderColor;
+  border: 1px solid $border1;
 }
 
 .floatingMenuBG {
@@ -59,7 +59,7 @@ body {
   width: 100%;
   position: fixed;
   top: 0; left: 0;
-  background-color: $floatingContainerBG;
+  background-color: $background0;
 }
 
 .floatingMenu {
@@ -73,9 +73,9 @@ body {
   margin: 0 auto;
   top: 15vh;
 
-  background-color: $floatingBG;
+  background-color: $background3;
   box-shadow: $floatingShadow;
-  border: 1px solid $defBorderColor;
+  border: 1px solid $border2;
 
   padding: 1.5rem;
 }