feat(Dashboard): started implementation of light theme

Related to #445 Signed-off-by: Jean-Baptiste Bianchi <jb.bianchi@neuroglia.io>
serverlessworkflow · Oct 28, 2024 · 619ee61 · 619ee61
1 parent 511d103
commit 619ee61
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 26 deletions.
diff --git a/src/dashboard/Synapse.Dashboard/compilerconfig.json b/src/dashboard/Synapse.Dashboard/compilerconfig.json
@@ -1,7 +1,8 @@
 [
   {
     "outputFile": "wwwroot/css/app.css",
-    "inputFile": "wwwroot/css/app.scss"
+    "inputFile": "wwwroot/css/app.scss",
+    "sourceMap": true
   },
   {
     "outputFile": "Layout/MainLayout.razor.css",

diff --git a/src/dashboard/Synapse.Dashboard/wwwroot/css/app.css b/src/dashboard/Synapse.Dashboard/wwwroot/css/app.css
diff --git a/src/dashboard/Synapse.Dashboard/wwwroot/css/app.min.css b/src/dashboard/Synapse.Dashboard/wwwroot/css/app.min.css
diff --git a/src/dashboard/Synapse.Dashboard/wwwroot/css/graph.scss b/src/dashboard/Synapse.Dashboard/wwwroot/css/graph.scss
@@ -50,9 +50,15 @@ $viridisScale: // generated with 13 steps, using 12 to exclude the last yellow
     }
 }
 
+[data-bs-theme="dark"] {
+    .graph-container, .graph-canvas {
+        --fill-color: #{$dark-bg-subtle-dark};
+    }
+}
+
 .graph-container, .graph-canvas {
     --stroke-color: #{$mute};
-    --fill-color: #{$dark-bg-subtle-dark};
+    --fill-color: #{$body-bg};
     display: flex;
     flex-direction: column;
 
@@ -68,6 +74,7 @@ $viridisScale: // generated with 13 steps, using 12 to exclude the last yellow
             stroke: var(--bs-btn-color);
             fill: var(--bs-btn-color);
             border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
+
             &:hover {
                 color: var(--bs-btn-hover-color);
                 fill: var(--bs-btn-hover-color);

diff --git a/src/dashboard/Synapse.Dashboard/wwwroot/css/scrollbar.scss b/src/dashboard/Synapse.Dashboard/wwwroot/css/scrollbar.scss
@@ -1,5 +1,18 @@
 @import "./theme/_variables.scss";
 
+:root,
+[data-bs-theme=light] {
+    --scrollbar-background: #{$body-bg};
+    --scrollbar-background-active: inherit;
+    --scrollbar-thumb-background: inherit;
+}
+
+[data-bs-theme="dark"] {
+    --scrollbar-background: #{$body-bg-dark};
+    --scrollbar-background-active: #{$dark-bg-subtle-dark};
+    --scrollbar-thumb-background: #{$primary-bg-subtle-dark};
+}
+
 ::-webkit-scrollbar {
     width: 4px;
     height: 4px;
@@ -11,7 +24,7 @@
 }
 
 ::-webkit-scrollbar-thumb {
-    background: $primary-bg-subtle-dark;
+    background: var(--scrollbar-thumb-background);
     border: 0px none #ffffff;
     border-radius: $border-radius;
 }
@@ -25,17 +38,17 @@
 }
 
 ::-webkit-scrollbar-track {
-    background: $body-bg-dark;
+    background: var(--scrollbar-background);
     border: 0px none #ffffff;
     border-radius: $border-radius;
 }
 
 ::-webkit-scrollbar-track:hover {
-    background: $dark-bg-subtle-dark;
+    background: var(--scrollbar-background-active);
 }
 
 ::-webkit-scrollbar-track:active {
-    background: $dark-bg-subtle-dark;
+    background: var(--scrollbar-background-active);
 }
 
 ::-webkit-scrollbar-corner {

diff --git a/src/dashboard/Synapse.Dashboard/wwwroot/css/table.scss b/src/dashboard/Synapse.Dashboard/wwwroot/css/table.scss
@@ -1,4 +1,12 @@
-.table-container {
+@import "./theme/_variables.scss";
+
+[data-bs-theme="dark"] {
+    .table {
+        --#{$prefix}table-color: #{$body-color-dark};
+    }
+}
+
+.table-container {
     max-height: 100%;
     overflow-y: scroll;
     flex-grow: 1;
@@ -11,7 +19,6 @@
         right: 0;
         bottom: 0;
         left: 0;
-        background: rgba(var(--bs-gray-900-rgb), 0.3);
         display: flex;
         align-items: center;
         justify-content: center;

diff --git a/src/dashboard/Synapse.Dashboard/wwwroot/css/theme/_variables.scss b/src/dashboard/Synapse.Dashboard/wwwroot/css/theme/_variables.scss
@@ -58,19 +58,11 @@ $mute-text-dark: $mute;
 
 @import "../../lib/bootstrap/scss/variables-dark";
 
-$table-color: $body-color-dark;
-
 @import "../../lib/bootstrap/scss/functions";
 @import "../../lib/bootstrap/scss/maps";
 @import "../../lib/bootstrap/scss/mixins";
 
-$extra-colors: ( 
-    "accent": $accent,
-    "cinereous": $cinereous,
-    "verdigris": $verdigris,
-    "icterine": $icterine,
-    "mute": $mute 
-);
+$extra-colors: ( "accent": $accent, "cinereous": $cinereous, "verdigris": $verdigris, "icterine": $icterine, "mute": $mute );
 
 $colors: map-merge( $colors, $extra-colors );
 $theme-colors: map-merge( $theme-colors, $extra-colors );
@@ -88,4 +80,4 @@ $utilities-bg-subtle: map-merge( $utilities-bg-subtle, $extra-colors );
 $utilities-border-subtle: map-merge( $utilities-border-subtle, $extra-colors );
 
 $utilities-text-colors: map-loop( $utilities-text, rgba-css-var, "$key", "text" );
-$utilities-bg-colors: map-loop( $utilities-colors, rgba-css-var, "$key", "bg" );
+$utilities-bg-colors: map-loop( $utilities-colors, rgba-css-var, "$key", "bg" );