feat(lab): enhance dark mode styles

difizen · Aug 26, 2024 · f3a29a9 · f3a29a9
1 parent ffede61
commit f3a29a9
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 24 deletions.
diff --git a/packages/libro-lab/src/index.less b/packages/libro-lab/src/index.less
@@ -1,12 +1,22 @@
+/* stylelint-disable selector-no-vendor-prefix */
+a:-webkit-any-link {
+  color: unset;
+}
+
+.libro-lab-layout {
+  .ant-empty {
+    .ant-empty-description {
+      color: var(--mana-ant-color-text-description);
+    }
+  }
+}
+
 #libro-lab-content-layout-left {
   .mana-side-tab-view {
     .mana-tabs-left {
       .mana-tabs-nav {
-        background-color: #f0f2f51f;
+        background-color: var(--mana-ant-color-bg-elevated);
         min-width: 40px;
-        box-shadow:
-          1px 0 0 0 #000a1a02,
-          2px 0 0 0 #ffffff0c;
 
         .mana-tabs-ink-bar {
           display: none;
@@ -52,9 +62,14 @@
       }
 
       .mana-tabs-content-holder {
-        background-image: linear-gradient(269deg, #c8c8cd1f 0%, #ffffff1f 100%);
+        background-image: linear-gradient(
+          269deg,
+          var(--mana-libro-lab-content-tab-nav) 0%,
+          var(--mana-libro-background)
+        );
         border-left: none;
-        background-color: unset;
+        box-shadow: var(--mana-ant-box-shadow-tabs-overflow-left);
+        padding-left: 2px;
 
         .mana-tab-side-pane-content {
           height: calc(100% - 32px);
@@ -79,8 +94,3 @@
 #libro-lab-content-layout-main-container {
   overflow: auto;
 }
-
-/* stylelint-disable selector-no-vendor-prefix */
-a:-webkit-any-link {
-  color: unset;
-}
diff --git a/packages/libro-lab/src/kernel-and-terminal-panel/collapse/index.less b/packages/libro-lab/src/kernel-and-terminal-panel/collapse/index.less
@@ -25,7 +25,7 @@
   .libro-panel-collapse-header-closeAll {
     // display: inline-block;
     cursor: pointer;
-    color: rgba(0, 10, 26, 47%);
+    color: var(--mana-ant-color-text-secondary);
     float: right;
   }
 }

diff --git a/packages/libro-lab/src/toc/libro-toc-panel-view.tsx b/packages/libro-lab/src/toc/libro-toc-panel-view.tsx
@@ -5,13 +5,14 @@ import {
   inject,
   prop,
   singleton,
+  ThemeService,
   useInject,
   view,
   ViewInstance,
   ViewManager,
   ViewRender,
 } from '@difizen/mana-app';
-import { Empty } from 'antd';
+import { ConfigProvider, Empty, theme } from 'antd';
 
 import { TocIcon } from '../common/index.js';
 import { LayoutService } from '../layout/layout-service.js';
@@ -21,18 +22,28 @@ import './index.less';
 
 const TocViewRender: React.FC = () => {
   const tocPanelView = useInject<TocPanelView>(ViewInstance);
+  const themeService = useInject<ThemeService>(ThemeService);
   return (
-    <div className="libro-lab-toc-panel">
-      {tocPanelView.libroTocView ? (
-        <ViewRender view={tocPanelView.libroTocView}></ViewRender>
-      ) : (
-        <Empty
-          image={Empty.PRESENTED_IMAGE_SIMPLE}
-          description="该文件格式暂不支持大纲"
-          className="libro-lab-toc-empty"
-        />
-      )}
-    </div>
+    <ConfigProvider
+      theme={{
+        algorithm:
+          themeService.getCurrentTheme().type === 'dark'
+            ? theme.darkAlgorithm
+            : theme.defaultAlgorithm,
+      }}
+    >
+      <div className="libro-lab-toc-panel">
+        {tocPanelView.libroTocView ? (
+          <ViewRender view={tocPanelView.libroTocView}></ViewRender>
+        ) : (
+          <Empty
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+            description="该文件格式暂不支持大纲"
+            className="libro-lab-toc-empty"
+          />
+        )}
+      </div>
+    </ConfigProvider>
   );
 };