chore(ui): improve dark ui

Author: janryWang

packages/react-settings-form/src/components/FoldItem/styles.less

@@ -38,6 +38,6 @@
     margin-right: -10px;
     margin-bottom: 10px;
     padding: 10px 10px 0 10px;
-    background-color: @border-color-split;
+    background-color: var(--dn-composite-panel-highlight-bg-color);
   }
 }

packages/react/src/panels/styles.less

@@ -103,8 +103,7 @@
 
     &-content {
       width: 300px;
-      border-right: 1px solid
-        var(--dn-composite-panel-tabs-content-border-color);
+      border-right: 1px solid var(--dn-composite-panel-tabs-content-border-color);
       background: var(--dn-composite-panel-tabs-content-bg-color);
       display: flex;
       flex-direction: column;
@@ -126,16 +125,15 @@
       color: var(--dn-composite-panel-tabs-header-color);
       line-height: 18px;
       font-size: 16px;
-      border-bottom: 1px solid
-        var(--dn-composite-panel-tabs-content-border-color);
+      border-bottom: 1px solid var(--dn-composite-panel-tabs-content-border-color);
       display: flex;
       justify-content: space-between;
 
       &-actions {
         display: flex;
         align-items: center;
 
-        & > * {
+        &>* {
           margin-right: 8px;
 
           &:last-child {
@@ -233,7 +231,7 @@
       display: flex;
       align-items: center;
 
-      & > * {
+      &>* {
         margin-right: 8px;
 
         &:last-child {
@@ -278,6 +276,7 @@
     z-index: 2;
     background: var(--dn-composite-panel-tabs-content-bg-color);
     border: 1px solid var(--dn-composite-panel-tabs-content-border-color);
+    color: var(--dn-composite-panel-tabs-color);
     box-shadow: 0 0 6px rgb(0 0 0 / 10%);
     border-radius: 3px;
     display: flex;
@@ -295,4 +294,4 @@
       transform: rotate(45deg);
     }
   }
-}
+}

packages/react/src/theme.less

@@ -46,6 +46,8 @@
   --dn-aux-selector-btn-active-border-color: #096dd9;
 
   --dn-composite-panel-tabs-bg-color: #fff;
+  --dn-composite-panel-tabs-active-bg-color: #fff;
+  --dn-composite-panel-highlight-bg-color: #f0f0f0;
   --dn-composite-panel-tabs-color: #666;
   --dn-composite-panel-tabs-hover-color: #1890ff;
   --dn-composite-panel-tabs-content-border-color: #eee;
@@ -133,10 +135,10 @@
   --dn-resize-handle-color: #666;
   --dn-resize-handle-hover-color: #aaa;
 
-  --dn-mobile-simulator-bg-color: #2f2f2f;
-  --dn-mobile-simulator-body-bg-color: #2f2f2f;
-  --dn-responsive-simulator-bg-color: #2f2f2f;
-  --dn-pc-simulator-bg-color: #2f2f2f;
+  --dn-mobile-simulator-bg-color: #222;
+  --dn-mobile-simulator-body-bg-color: #222;
+  --dn-responsive-simulator-bg-color: #222;
+  --dn-pc-simulator-bg-color: #222;
 
   --dn-aux-selector-btn-color: #fff;
   --dn-aux-selector-btn-bg-color: #1890ff;
@@ -148,7 +150,9 @@
   --dn-aux-selector-btn-active-bg-color: #096dd9;
   --dn-aux-selector-btn-active-border-color: #096dd9;
 
-  --dn-composite-panel-tabs-bg-color: #2d2d2d;
+  --dn-composite-panel-tabs-bg-color: #2f2f2f;
+  --dn-composite-panel-tabs-active-bg-color: #222;
+  --dn-composite-panel-highlight-bg-color: #181818;
   --dn-composite-panel-tabs-color: #aaa;
   --dn-composite-panel-tabs-hover-color: #1890ff;
   --dn-composite-panel-tabs-content-border-color: #333;
@@ -163,8 +167,8 @@
   --dn-drag-source-item-hover-border-color: #1890ff;
   --dn-drag-source-item-hover-color: #1890ff;
 
-  --dn-main-panel-header-bg-color: #333;
-  --dn-main-panel-header-border-color: #111;
+  --dn-main-panel-header-bg-color: #222;
+  --dn-main-panel-header-border-color: #333;
   --dn-workspace-panel-bg-color: #222;
 
   --dn-scrollbar-color: #a0a0a054;
@@ -226,14 +230,23 @@
 
   color: rgba(0, 0, 0, 0.85);
   font-size: 14px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-family: -apple-system,
+  BlinkMacSystemFont,
+  'Segoe UI',
+  Roboto,
+  'Helvetica Neue',
+  Arial,
+  'Noto Sans',
+  sans-serif,
+  'Apple Color Emoji',
+  'Segoe UI Emoji',
+  'Segoe UI Symbol',
+  'Noto Color Emoji';
   font-variant: tabular-nums;
   line-height: 1.5715;
   font-feature-settings: 'tnum';
 
   * {
     box-sizing: border-box;
   }
-}
+}