From 13c681dc398f9b5788a1ad5808422a79dba6ae67 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Thu, 28 Jan 2021 23:09:09 +0100
Subject: [PATCH] Added first bits of the dark theme styles

---
 src/App.scss                      | 12 ++++++++++++
 src/common/AsideMenu.scss         |  6 +++---
 src/index.scss                    | 19 +++++++++++--------
 src/servers/ServersListGroup.scss |  2 +-
 src/utils/DropdownBtn.scss        |  2 +-
 src/utils/base.scss               | 14 +++++++++++---
 src/visits/VisitsTable.scss       |  2 +-
 7 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index a6566e27..4a4f3b38 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -24,3 +24,15 @@
     padding: 0 15px;
   }
 }
+
+html:not([data-theme='dark']) {
+  --primary-color: #{$lightPrimaryColor};
+  --secondary-color: #{$lightSecondaryColor};
+  --text-color: #{$lightTextColor};
+}
+
+html[data-theme='dark'] {
+  --primary-color: #{$darkPrimaryColor};
+  --secondary-color: #{$darkSecondaryColor};
+  --text-color: #{$darkTextColor};
+}
diff --git a/src/common/AsideMenu.scss b/src/common/AsideMenu.scss
index 09e0dc3e..60a48c1a 100644
--- a/src/common/AsideMenu.scss
+++ b/src/common/AsideMenu.scss
@@ -3,7 +3,7 @@
 
 .aside-menu {
   width: $asideMenuWidth;
-  background-color: white;
+  background-color: var(--primary-color);
   box-shadow: rgba(0, 0, 0, .05) 0 8px 15px;
   position: fixed !important;
   padding-top: 13px;
@@ -18,7 +18,7 @@
 
   @media (min-width: $mdMin) {
     padding: 30px 15px 15px;
-    border-right: 1px solid #eeeeee;
+    border-right: 1px solid rgba(0, 0, 0, .07);
   }
 
   @media (max-width: $smMax) {
@@ -50,7 +50,7 @@
 }
 
 .aside-menu__item:hover {
-  background-color: $lightColor;
+  background-color: var(--secondary-color);
 }
 
 .aside-menu__item--selected {
diff --git a/src/index.scss b/src/index.scss
index d5542c25..9e5ee63b 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -2,15 +2,16 @@
 @import 'node_modules/bootstrap/scss/bootstrap.scss';
 @import './common/react-tagsinput.scss';
 
+* {
+  outline: none !important;
+}
+
 html,
 body,
 #root {
   height: 100%;
-  background: $lightColor;
-}
-
-* {
-  outline: none !important;
+  background: var(--secondary-color);
+  color: var(--text-color);
 }
 
 .bg-main {
@@ -21,8 +22,10 @@ body,
   box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
 }
 
-.card-header {
-  background-color: white;
+.card,
+.card-header,
+.card-body {
+  background-color: var(--primary-color);
 }
 
 .card-footer {
@@ -56,7 +59,7 @@ body,
 }
 
 .table-hover tbody tr:hover {
-  background-color: $lightColor;
+  background-color: var(--secondary-color);
 }
 
 .react-datepicker__input-container,
diff --git a/src/servers/ServersListGroup.scss b/src/servers/ServersListGroup.scss
index 78457102..e51a58b6 100644
--- a/src/servers/ServersListGroup.scss
+++ b/src/servers/ServersListGroup.scss
@@ -18,7 +18,7 @@
 }
 
 .servers-list__server-item:hover {
-  background-color: $lightColor;
+  background-color: var(--secondary-color);
 }
 
 .servers-list__server-item-icon {
diff --git a/src/utils/DropdownBtn.scss b/src/utils/DropdownBtn.scss
index 6cfae1dc..2327d45b 100644
--- a/src/utils/DropdownBtn.scss
+++ b/src/utils/DropdownBtn.scss
@@ -7,7 +7,7 @@
 .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover,
 .show > .dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle {
   color: #6c757d;
-  background-color: white;
+  background-color: var(--primary-color);
   text-align: left;
   border-color: rgba(0, 0, 0, .125);
 }
diff --git a/src/utils/base.scss b/src/utils/base.scss
index 8b70dc17..dfb8b476 100644
--- a/src/utils/base.scss
+++ b/src/utils/base.scss
@@ -16,6 +16,14 @@ $lightGrey: #dddddd;
 $dangerColor: #dc3545;
 $mediumGrey: #dee2e6;
 
+// Themes
+$lightPrimaryColor: #ffffff;
+$lightSecondaryColor: $lightColor;
+$lightTextColor: #212529;
+$darkPrimaryColor: #161b22;
+$darkSecondaryColor: #0d1117;
+$darkTextColor: #ffffff;
+
 // Misc
 $headerHeight: 57px;
 $asideMenuWidth: 260px;
@@ -23,6 +31,6 @@ $footer-height: 2.3rem;
 $footer-margin: .8rem;
 
 // Bootstrap overwrites
-//$theme-colors: (
-//  'primary': $mainColor
-//);
+$theme-colors: (
+  'primary': $mainColor
+);
diff --git a/src/visits/VisitsTable.scss b/src/visits/VisitsTable.scss
index a8ad3f24..2b20f59c 100644
--- a/src/visits/VisitsTable.scss
+++ b/src/visits/VisitsTable.scss
@@ -4,7 +4,7 @@
 .visits-table {
   margin: 1.5rem 0 0;
   position: relative;
-  background-color: white;
+  background-color: var(--primary-color);
   overflow-y: hidden;
 }