diff --git a/frontend/src/layout/components/Topbar.vue b/frontend/src/layout/components/Topbar.vue
index 26e432fa7a..3592055604 100644
--- a/frontend/src/layout/components/Topbar.vue
+++ b/frontend/src/layout/components/Topbar.vue
@@ -257,6 +257,14 @@ export default {
             value: val
           })
         }
+
+        if (this.uiInfo['ui.themeStr'] && this.uiInfo['ui.themeStr'].paramValue) {
+          if (this.uiInfo['ui.themeStr'].paramValue === 'dark') {
+            document.body.className = 'blackTheme'
+          } else if (this.uiInfo['ui.themeStr'].paramValue === 'light') {
+            document.body.className = ''
+          }
+        }
         this.axiosFinished = true
       })
     },
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 23126c2d41..61c0eb804d 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -386,15 +386,31 @@ div:focus {
     }
 }
 
+.blackTheme .el-textarea__inner {
+    background-color: var(--MainBG) !important;    
+}
+.blackTheme .el-textarea__inner:not(:focus) {
+    
+    border-color: var(--border-color-input) !important;
+}
+
 .blackTheme .el-input__inner {
     background-color: var(--MainBG) !important;    
 }
 .blackTheme .el-input__inner:not(:focus) {
     
-    // border: none !important;
     border-color: var(--border-color-input) !important;
 }
 
+.blackTheme .el-input-number__decrease {
+    background-color: var(--MainBG) !important;
+    border: none !important;
+}
+.blackTheme .el-input-number__increase {
+    background-color: var(--MainBG) !important;
+    border: none !important;
+}
+
 
 .el-pagination {
     button:disabled {