Added first bits of the dark theme styles

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};
+}

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 {

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;
+  background: var(--secondary-color);
-}
+  color: var(--text-color);
-
-* {
-  outline: none !important;
 }
 
 .bg-main {
@@ -21,8 +22,10 @@ body,
   box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
 }
 
-.card-header {
+.card,
-  background-color: white;
+.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,

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 {

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);
 }

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: (
+$theme-colors: (
-//  'primary': $mainColor
+  'primary': $mainColor
-//);
+);

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;
 }