theming

src/layout/components/AppMain.vue

@@ -50,7 +50,7 @@ if (!appStore.utc) {
 </script>
 <style lang="scss" scoped>
 .app-main {
-  height: calc(100% - 40px);
+  height: calc(100% - 39px);
   background: #f7f9fa;
 }
 </style>

src/layout/components/SideBar.vue

@@ -149,10 +149,9 @@ const filterMenus = (menus: any[]) => {
 <style lang="scss" scoped>
 .side-bar {
   background: #252a2f;
-  height: 100%;
-  min-height: 700px;
+  height: 100vh;
   position: relative;
-  margin-bottom: 100px;
+  overflow-y: visible;
 }
 
 .el-menu-vertical:not(.el-menu--collapse) {

src/styles/jetbrains-dark.scss

@@ -30,7 +30,8 @@
 }
 
 .el-pagination.is-background .el-pager li:not(.disabled).active {
-  background: var(--spp-other-green);
+  background: var(--spp-light-grey);
+  color: ghostwhite !important;
 }
 
 .el-input__inner {
@@ -108,7 +109,7 @@
 }
 
 .settings input {
-  background: var(--spp-dark-green) !important;
+  background: var(--nice-black) !important;
   border: 1px solid var(--spp-blue) !important;
   color: var(--spp-white);
 }
@@ -120,6 +121,20 @@
 .el-switch__core {
   --el-switch-off-color: var(--spp-dark-green);
   --el-switch-on-color: var(--spp-red);
+  background-color: var(--spp-darkest-green) !important;
+  border-color: var(--border-color) !important;
+}
+
+.el-switch__core .el-switch__inner .is-icon, .el-switch__core .el-switch__inner .is-text {
+  color: var(--spp-light-grey);
+}
+
+.el-switch__action {
+  background-color: ghostwhite !important;
+}
+
+.is-checked > .el-switch__core  {
+  background-color: var(--spp-white) !important;
 }
 
 .alarm-tool {
@@ -140,7 +155,7 @@
 }
 
 .timeline-table-i {
-  border-left: 4px solid var(--spp-other-green) !important;
+  border-left: 4px solid var(--border-color) !important;
 }
 
 .timeline-table-i::before {
@@ -184,20 +199,28 @@
   background-color: var(--nice-black) !important;
 }
 
+.el-pagination__jump {
+  color: var(--spp-light-grey) !important;
+}
+
 .el-pager li.active {
-  background-color: var(--spp-other-green);
+  background-color: var(--border-color);
+  color: var(--spp-light-grey) !important;
 }
 
 .el-pager li {
   background-color: var(--spp-green);
+  color: var(--spp-white) !important;
 }
 
-.el-pager li.active {
-  color: var(--spp-white);
+.btn-prev[type="button"] {
+  background-color: var(--border-color);
+  color: var(--spp-light-grey) !important;
 }
 
 .el-pager + button.btn-next[type="button"] {
-  background-color: var(--spp-grey);
+  background-color: var(--border-color);
+  color: var(--spp-light-grey) !important;
 }
 
 .toggle-selection {
@@ -259,10 +282,6 @@
   color: var(--spp-light-grey) !important;
 }
 
-.unit {
-  color: var(--spp-white) !important;
-}
-
 .profile-item.level0 {
   &:hover {
     color: var(--spp-red) !important;
@@ -414,7 +433,7 @@ a {
 
 .timeline-table-i {
   &::before {
-    background-color: #448dfe !important;
+    background-color: var(--spp-white) !important;
   }
 }
 
@@ -481,3 +500,23 @@ a {
 .scroll-handler__wrapper .scroll-to.active {
   background-color: var(--border-color) !important;
 }
+
+.el-input-group__append, .el-input-group__prepend {
+  background-color: var(--spp-darkest-green) !important;
+  border-color: var(--spp-darkest-green);
+}
+
+.tabs span.active input.tab-name.view {
+  //background-color: var(--border-color) !important;
+  color: var(--spp-light-grey) !important;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+.tab-header {
+  background-color: var(--nice-black) !important;
+}
+
+.timeline-item {
+  color: var(--spp-light-grey) !important;
+}

src/styles/lib.scss

@@ -48,23 +48,23 @@
 }
 
 .green {
-  color: #4caf50;
+  color: #629755;
 }
 
 .red {
-  color: #e54c17;
+  color: #e1483b;
 }
 
 .blue {
-  color: #448dfe;
+  color: #6897BB;
 }
 
 .purple {
-  color: #6e40aa;
+  color: #9876AA;
 }
 
 .yellow {
-  color: #fbb03b;
+  color: #FFC66D;
 }
 
 .grey {
@@ -76,23 +76,23 @@
 }
 
 .bg-green {
-  background-color: #4caf50;
+  background-color: #629755;
 }
 
 .bg-red {
-  background-color: #e54c17;
+  background-color: #e1483b;
 }
 
 .bg-blue {
-  background-color: #448dfe;
+  background-color: #6897BB;
 }
 
 .bg-purple {
-  background-color: #6e40aa;
+  background-color: #9876AA;
 }
 
 .bg-yellow {
-  background-color: #fbb03b;
+  background-color: #FFC66D;
 }
 
 .bg-grey {

src/views/dashboard/data.ts

@@ -254,13 +254,15 @@ export const QueryOrders = [
 ];
 export const TextColors: { [key: string]: string } = {
   green: "#629755",
-  blue: "#409EFF",
+  blue: "#6897BB",
   red: "#e1483b",
   grey: "#909399",
   white: "#fff",
   black: "#000",
-  orange: "#E6A23C",
+  orange: "#CC7832",
   purple: "#9876AA",
+  yellow: "#FFC66D",
+  brown: "#8A653B",
 };
 
 export const CalculationOpts = [

src/views/dashboard/graphs/Line.vue

@@ -117,19 +117,20 @@ function getOption() {
   let color: string[] = [];
   switch (keys.length) {
     case 2:
-      color = ["#629755", "#9876AA"];
+      color = ["#6897BB", "#9876AA"];
       break;
     case 1:
-      color = ["#629755"];
+      color = ["#6897BB"];
       break;
     default:
       color = [
-        "#629755",
+        "#6897BB",
         "#9876AA",
-        "#CC7832",
-        "#8A653B",
-        "#e1483b",
+        "#629755",
         "#FFC66D",
+        "#CC7832",
+        "#e1483b",
+        "#8A653B",
       ];
       break;
   }

src/views/dashboard/graphs/TopList.vue

@@ -35,7 +35,7 @@ limitations under the License. -->
       <el-progress
         :stroke-width="6"
         :percentage="(i.value / maxValue) * 100"
-        :color="TextColors[config.color || 'red']"
+        :color="TextColors[config.color || 'purple']"
         :show-text="false"
       />
     </div>