now adding new themes/colorschemes is easier and cleaner

1 files changed, 53 insertions, 72 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;