implemented dark theme

Author: jan hof

src/containers/TheFooter.js

@@ -3,7 +3,7 @@ import { CFooter } from '@coreui/react'
 
 const TheFooter = () => {
   return (
-    <CFooter fixed={false}>
+    <CFooter className="dark" fixed={false}>
       <div>
         <a href="http://sauer-bier.de" target="_blank" rel="noopener noreferrer">HueX</a>
         <span className="ml-1">&copy; 2020 MedicyX ltd.</span>

src/containers/TheHeader.js

@@ -44,11 +44,7 @@ const TheHeader = () => {
           className="border-0 c-subheader-nav m-0 px-0 px-md-3" 
           routes={routes} 
         />
-          <div className="d-md-down-none mfe-2 c-subheader-nav">
-            <CLink className="c-subheader-nav-link" href="#">
-              <CIcon name="cil-settings" alt="Settings" />&nbsp;Settings
-            </CLink>
-          </div>
+          
       </CSubheader>
     </CHeader>
   )

src/containers/TheLayout.js

@@ -9,7 +9,7 @@ import {
 const TheLayout = () => {
 
   return (
-    <div className="c-app c-default-layout">
+    <div className="c-app dark-theme c-default-layout">
       <TheSidebar/>
       <div className="c-wrapper">
         <TheHeader/>

src/scss/_custom.scss

@@ -2,3 +2,56 @@
 .add-padding {
   padding: 1.25rem;
 }
+
+.c-app.dark-theme.c-default-layout {
+  color: #e1e1e1 !important;
+  background-color: #0a0b18;
+  --color: #e1e1e1 !important;
+}
+.dropdown-menu.dark {
+  color: #e1e1e1;
+  background-color: #34343b;
+  border-color: #181924;
+}
+
+.dropdown-menu > .dropdown-item {
+  color: #e1e1e1 !important;
+}
+
+.dropdown-menu > .dropdown-item:hover {
+  color: #e1e1e1;
+  background-color: hsla(0, 0%, 100%, 0.1);
+}
+
+.c-app.c-dark-theme {
+  --primary: #4638c2;
+  --secondary: #4c4f54;
+  --success: #45a164;
+  --info: #4799eb;
+  --warning: #e1a82d;
+  --danger: #d16767;
+  --light: #20202a;
+  --dark: #181924;
+}
+
+.c-sidebar.c-sidebar-dark {
+  color: #e1e1e1;
+  background: #2c2c34;
+  border: 0;
+}
+
+.c-header.c-header-light,
+.c-subheader {
+  background: #2c2c34 !important;
+  border-bottom: 0 !important;
+}
+
+.breadcrumb-item.active {
+  color: #e1e1e1 !important;
+}
+
+.c-footer.dark {
+  color: #e1e1e1;
+  background: #1e1e29;
+  border-top: 1px solid #181924;
+}

src/scss/_variables.scss

@@ -1 +1,29 @@
 // Variable overrides
+$primary: #4638c2;
+$secondary: #4c4f54;
+$success: #45a164;
+$info: #4799eb;
+$warning: #e1a82d;
+$danger: #d16767;
+$light: #20202a;
+$dark: #181924;
+
+$danger-gradient: (
+  "start": #d16767,
+  "stop": #c14f4f,
+) !default;
+
+$warning-gradient: (
+  "start": #f9b115,
+  "stop": #f6960b,
+) !default;
+
+$success-gradient: (
+  "start": #45a164,
+  "stop": #2e8c47,
+) !default;
+
+$info-gradient: (
+  "start": #39f,
+  "stop": #2982cc,
+);

src/views/dashboard/Dashboard.tsx

@@ -17,32 +17,36 @@ const Dashboard = () => {
   console.log(services);
   return (
     <CRow>
-      {services.map((service) => {
-        return (
-          <CCol sm="6" lg="3">
-            <CWidgetDropdown
-              color={service.running ? "gradient-success" : "gradient-danger"}
-              header={service.name}
-              text={"Version: " + service.version}
-              footerSlot={<p className="add-padding">{service.description}</p>}
-            >
-              <CDropdown>
-                <CDropdownToggle color="transparent">
-                  <CIcon name="cil-settings" />
-                </CDropdownToggle>
-                <CDropdownMenu className="pt-0" placement="bottom-end">
-                  <CDropdownItem>
-                    {service.running ? "Disable" : "Enable"}
-                  </CDropdownItem>
-                  <CDropdownItem>Another action</CDropdownItem>
-                  <CDropdownItem>Something else here...</CDropdownItem>
-                  <CDropdownItem disabled>Disabled action</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-            </CWidgetDropdown>
-          </CCol>
-        );
-      })}
+      {services
+        .sort((a, b) => (a.running === b.running ? 0 : a.running ? -1 : 1))
+        .map((service) => {
+          return (
+            <CCol sm="6" lg="3">
+              <CWidgetDropdown
+                color={service.running ? "gradient-success" : "gradient-danger"}
+                header={service.name}
+                text={"Version: " + service.version}
+                footerSlot={
+                  <p className="add-padding">{service.description}</p>
+                }
+              >
+                <CDropdown>
+                  <CDropdownToggle color="transparent">
+                    <CIcon name="cil-settings" />
+                  </CDropdownToggle>
+                  <CDropdownMenu className="pt-0 dark" placement="bottom-end">
+                    <CDropdownItem>
+                      {service.running ? "Disable" : "Enable"}
+                    </CDropdownItem>
+                    <CDropdownItem>Another action</CDropdownItem>
+                    <CDropdownItem>Something else here...</CDropdownItem>
+                    <CDropdownItem disabled>Disabled action</CDropdownItem>
+                  </CDropdownMenu>
+                </CDropdown>
+              </CWidgetDropdown>
+            </CCol>
+          );
+        })}
     </CRow>
   );
 };