Add 'src/color_variables.scss'

src/color_variables.scss

@@ -0,0 +1,171 @@
+@import "materialize-css/sass/components/_color-variables.scss";
+
+$shades: (
+  "black":        #FFFFFF,
+  "white":        #000000,
+  "transparent":  transparent
+);
+
+$light-blue: (
+  "darken-1":   #039be5
+);
+
+$green: (
+  "base":       #4CAF50
+);
+
+$grey: (
+  "base":       #9e9e9e,
+  "lighten-2":  #e0e0e0,
+  "lighten-1":  #bdbdbd
+);
+
+$orange: (
+  "accent-2":    #ffab40
+);
+
+
+$blue: (
+  "base":       #2196F3,
+  "lighten-5":  #E3F2FD,
+  "lighten-4":  #BBDEFB,
+  "lighten-3":  #90CAF9,
+  "lighten-2":  #64B5F6,
+  "lighten-1":  #42A5F5,
+  "darken-1":   #1E88E5,
+  "darken-2":   #1976D2,
+  "darken-3":   #1565C0,
+  "darken-4":   #0D47A1,
+  "accent-1":    #82B1FF,
+  "accent-2":    #448AFF,
+  "accent-3":    #2979FF,
+  "accent-4":    #2962FF
+);
+
+
+// override materialize css colors, because there are too many of them, and they are not used
+$colors: (
+  "materialize-red": $materialize-red,
+  "red": $red,
+  "teal": $blue,
+  "orange": $orange,
+  "grey": $grey,
+  "green": $green,
+  "light-blue": $light-blue
+);
+
+.page-content {
+    background: #383c4a;
+}
+
+.main-app-content{
+    background: #383c4a !important;
+}
+
+.app-history-panel{
+    background: #383c4a !important;
+}
+
+
+.main-app-sidebar {
+    background: #2a2e3a !important;
+}
+
+
+.collection-item {
+    background-color: #383c4a !important; 
+}
+
+.collection-item.active {
+    background-color: #404552 !important;
+    color: #1e70bf  !important;
+}
+
+p {
+    color: white;
+}
+
+.white-text {
+   color: white  !important;
+}
+
+h2 {
+    color: white;
+}
+
+h5 {
+    color: white;
+}
+
+label {
+    color: white !important;
+}
+
+textarea {
+    color: white;
+}
+
+table {
+    color: white;
+}
+
+input {
+    color: white !important;
+}
+
+
+code.log-content {
+    background-color: #2a2e3a;
+    color: white;
+}
+
+.welcome-panel {
+    background-color: #2a2e3a;
+    color: white;
+}
+
+.shadow-top-bottom {
+    box-shadow: 0 0px 0px 0px #888888 inset, 0 0px 0px -0px #888888 inset !important;
+    -webkit-box-shadow: 0 0px 0px -4px #7d7d7d inset, 0 0px 0px -0px #888888 inset !important;
+    -moz-box-shadow: 0 0px 0px 0px #888888 inset, 0 0px 0px -0px #888888 inset !important;
+}
+
+.app-sidebar {
+    box-shadow: 0 0px 0px 0px #888888 inset, 0 0px 0px 0px #888888 inset !important;
+    -webkit-box-shadow: 0 0px 0px 4px #7d7d7d inset, 0 0px 0px -0px #888888 inset !important;
+    -moz-box-shadow: 0 0px 0px 0px #888888 inset, 0 0px 0px -0px #888888 inset !important;
+}
+
+.server-header {
+    color: #039be5 !important;
+}
+
+.search-panel {
+    background: #404552 !important;
+}
+
+.search-panel.collapsed {
+  background: #2a2e3a !important;
+}
+
+label.active {
+    color: #2196f3 !important;
+}
+
+
+table.striped > tbody > tr:nth-child(odd) {
+    background-color: #404552 !important;
+}
+
+table.highlight > tbody > tr:hover{
+    background-color: #f2f2f280 !important;
+}
+
+
+.content-header {
+    background: #2196F3 !important;
+}
+
+.execution-instance-tabs .tab > a.active > i {
+    color: #00ff43 !important;
+}