support light mode

kestra-io · Oct 25, 2024 · 43abb10 · 43abb10
1 parent 8c37d4d
commit 43abb10
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 6 deletions.
diff --git a/ui/src/assets/dots-bg-2.jpg → ui/src/assets/dots-bg-dark.jpg b/ui/src/assets/dots-bg-2.jpg → ui/src/assets/dots-bg-dark.jpg
diff --git a/ui/src/assets/dots-bg.jpg b/ui/src/assets/dots-bg.jpg
diff --git a/ui/src/assets/icons/blueprint-dark.svg b/ui/src/assets/icons/blueprint-dark.svg
diff --git a/ui/src/assets/icons/blueprint.svg b/ui/src/assets/icons/blueprint.svg
diff --git a/ui/src/override/components/flows/blueprints/BlueprintsLayout.vue b/ui/src/override/components/flows/blueprints/BlueprintsLayout.vue
@@ -5,9 +5,11 @@
 </template>
 
 <style scoped lang="scss">
+    @import "@kestra-io/ui-libs/src/scss/variables.scss";
+
     .blueprints {
-        background: url(../../../../assets/dots-bg-2.jpg) no-repeat top left;
-        background-color: #1C1E27;
+        background: var(--bg-dots-image) no-repeat top left;
+        background-color: var(--bg-dots-color);
         background-size: 1654px;
     }
 </style>
diff --git a/ui/src/override/components/flows/blueprints/BlueprintsPageHeader.vue b/ui/src/override/components/flows/blueprints/BlueprintsPageHeader.vue
@@ -2,6 +2,7 @@
     <nav class="header container">
         <div class="image-box">
             <img src="../../../../assets/icons/blueprint.svg" :alt="$t('blueprints.header.alt')">
+            <img src="../../../../assets/icons/blueprint-dark.svg" :alt="$t('blueprints.header.alt')" class="blueprint-dark">
         </div>
         <h4 class="catch-phrase">
             {{ $t("blueprints.header.catch phrase.2") }}
@@ -20,18 +21,32 @@
         padding-bottom: calc(2 * var(--spacer));
 
         .catch-phrase {
-            color: $white;
+            color: var(--bs-heading-color);
             margin-bottom: 0;
         }
 
         .image-box{
             border: 1px solid var(--bs-border-color);
-            background-color: #2F334280;
+            background-color: var(--bs-card-bg);
             padding: 9px;
             border-radius: 7px;
             box-shadow:
                 0px 4px 12px 0px #53009F,
                 1px 1px 0px 0px #FF4BBD;
+
+            & > img.blueprint-dark {
+                display: none;
+            }
+        }
+
+        .dark & {
+            .image-box > img{
+                display: none;
+            }
+
+            .image-box > img.blueprint-dark{
+                display: block;
+            }
         }
     }
 </style>
diff --git a/ui/src/styles/layout/root-dark.scss b/ui/src/styles/layout/root-dark.scss
@@ -81,6 +81,8 @@ html.dark {
 
     --input-suffix-color: #C6C1D9;
     --white-black-font-color: #{$white};
+    --bg-dots-image: url(../../assets/dots-bg-dark.jpg);
+    --bg-dots-color: $gray-900;
 
     $content-information: #c7f0ff;
     $content-running: #bbbbff;

diff --git a/ui/src/styles/layout/root.scss b/ui/src/styles/layout/root.scss
@@ -42,6 +42,8 @@
     --input-suffix-color: #574F6C;
     --white-black-font-color: #{$black};
     --top-navbar-height: 79px;
+    --bg-dots-image: url(./assets/dots-bg.jpg);
+    --bg-dots-color: #FAFAFF;
 }
 
 :root {