feat: dark theme for file modal & nav & kernel panel

difizen · Aug 22, 2024 · af5be53 · af5be53
1 parent 68b4987
commit af5be53
Show file tree

Hide file tree

Showing 16 changed files with 423 additions and 252 deletions.
diff --git a/packages/libro-jupyter/src/file/file-color-registry.ts b/packages/libro-jupyter/src/file/file-color-registry.ts
@@ -0,0 +1,28 @@
+import type { ColorRegistry } from '@difizen/mana-app';
+import { Color, ColorContribution } from '@difizen/mana-app';
+import { singleton } from '@difizen/mana-app';
+
+@singleton({ contrib: ColorContribution })
+export class FileColorContribution implements ColorContribution {
+  registerColors(colors: ColorRegistry): void {
+    // common
+    colors.register(
+      // #region antd variable
+      {
+        id: 'libro.file.label.text',
+        defaults: { dark: '#F8F8FB', light: Color.rgba(0, 0, 0, 0.85) },
+        description: '',
+      },
+      {
+        id: 'libro.file.text',
+        defaults: { dark: '#E3E4E6', light: Color.rgba(0, 0, 0, 0.65) },
+        description: '',
+      },
+      {
+        id: 'libro.file.type.border',
+        defaults: { dark: '#3B3C42', light: Color.rgba(0, 10, 26, 0.1) },
+        description: '',
+      },
+    );
+  }
+}
diff --git a/packages/libro-jupyter/src/file/file-create-modal.tsx b/packages/libro-jupyter/src/file/file-create-modal.tsx
@@ -1,7 +1,8 @@
 import type { ModalItemProps, ModalItem } from '@difizen/mana-app';
+import { ThemeService } from '@difizen/mana-app';
 import { CommandRegistry } from '@difizen/mana-app';
 import { URI, useInject, ViewManager } from '@difizen/mana-app';
-import { Col, Form, message, Row, Input, Modal } from 'antd';
+import { Col, Form, message, Row, Input, Modal, ConfigProvider, theme } from 'antd';
 import type { InputRef } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 import './index.less';
@@ -33,6 +34,7 @@ export const FileCreateModalComponent: React.FC<ModalItemProps<ModalItemType>> =
   const [fileType, setFileType] = useState<FileType>(data?.fileType);
   const [fileView, setFileView] = useState<FileView>();
   const inputRef = useRef<InputRef>(null);
+  const themeService = useInject(ThemeService);
   const [form] = Form.useForm();
 
   const onFinish = async (values: { fileName: string }) => {
@@ -83,106 +85,115 @@ export const FileCreateModalComponent: React.FC<ModalItemProps<ModalItemType>> =
     inputRef.current?.focus();
   });
   return (
-    <Modal
-      title="新建文件"
-      open={visible}
-      onCancel={close}
-      width={788}
-      cancelText="取消"
-      okText="确定"
-      onOk={() => {
-        form.submit();
+    <ConfigProvider
+      theme={{
+        algorithm:
+          themeService.getCurrentTheme().type === 'dark'
+            ? theme.darkAlgorithm
+            : theme.defaultAlgorithm,
       }}
-      keyboard={true}
-      wrapClassName="libro-create-file-modal"
     >
-      <div className="libro-create-file-path-container">
-        <div className="libro-create-file-des">创建位置：</div>
-        <span className="libro-create-file-path">{data?.path}</span>
-      </div>
-      <div className="libro-create-file-des">文件类型：</div>
-      <Row>
-        <Col
-          className="gutter-row"
-          style={{ paddingLeft: 'unset', paddingRight: '16px' }}
-        >
-          <div
-            className={`libro-create-file-type ${
-              fileType === '.ipynb' ? 'active' : ''
-            }`}
-            onClick={() => {
-              setFileType('.ipynb');
-              inputRef.current?.focus();
-            }}
+      <Modal
+        title="新建文件"
+        open={visible}
+        onCancel={close}
+        width={788}
+        cancelText="取消"
+        okText="确定"
+        onOk={() => {
+          form.submit();
+        }}
+        keyboard={true}
+        wrapClassName="libro-create-file-modal"
+      >
+        <div className="libro-create-file-path-container">
+          <div className="libro-create-file-des">创建位置：</div>
+          <span className="libro-create-file-path">{data?.path}</span>
+        </div>
+        <div className="libro-create-file-des">文件类型：</div>
+        <Row>
+          <Col
+            className="gutter-row"
+            style={{ paddingLeft: 'unset', paddingRight: '16px' }}
           >
-            <NotebookIcon />
-            <span className="libro-create-file-type-text">Notebook</span>
-          </div>
-        </Col>
-        <Col
-          className="gutter-row"
-          style={{ paddingLeft: 'unset', paddingRight: '16px' }}
-        >
-          <div
-            className={`libro-create-file-type ${fileType === '.py' ? 'active' : ''}`}
-            onClick={() => {
-              setFileType('.py');
-              inputRef.current?.focus();
-            }}
+            <div
+              className={`libro-create-file-type ${
+                fileType === '.ipynb' ? 'active' : ''
+              }`}
+              onClick={() => {
+                setFileType('.ipynb');
+                inputRef.current?.focus();
+              }}
+            >
+              <NotebookIcon />
+              <span className="libro-create-file-type-text">Notebook</span>
+            </div>
+          </Col>
+          <Col
+            className="gutter-row"
+            style={{ paddingLeft: 'unset', paddingRight: '16px' }}
           >
-            <PythonIcon />
-            <span className="libro-create-file-type-text">Python</span>
-          </div>
-        </Col>
-        <Col
-          className="gutter-row"
-          style={{ paddingLeft: 'unset', paddingRight: '16px' }}
-        >
-          <div
-            className={`libro-create-file-type ${fileType === '.json' ? 'active' : ''}`}
-            onClick={() => {
-              setFileType('.json');
-              inputRef.current?.focus();
-            }}
+            <div
+              className={`libro-create-file-type ${fileType === '.py' ? 'active' : ''}`}
+              onClick={() => {
+                setFileType('.py');
+                inputRef.current?.focus();
+              }}
+            >
+              <PythonIcon />
+              <span className="libro-create-file-type-text">Python</span>
+            </div>
+          </Col>
+          <Col
+            className="gutter-row"
+            style={{ paddingLeft: 'unset', paddingRight: '16px' }}
           >
-            <JSONIcon />
-            <span className="libro-create-file-type-text">JSON</span>
-          </div>
-        </Col>
-        <Col
-          className="gutter-row"
-          style={{ paddingLeft: 'unset', paddingRight: '16px' }}
-        >
-          <div
-            className={`libro-create-file-type ${
-              fileType === undefined ? 'active' : ''
-            }`}
-            onClick={() => {
-              setFileType(undefined);
-              inputRef.current?.focus();
-            }}
+            <div
+              className={`libro-create-file-type ${fileType === '.json' ? 'active' : ''}`}
+              onClick={() => {
+                setFileType('.json');
+                inputRef.current?.focus();
+              }}
+            >
+              <JSONIcon />
+              <span className="libro-create-file-type-text">JSON</span>
+            </div>
+          </Col>
+          <Col
+            className="gutter-row"
+            style={{ paddingLeft: 'unset', paddingRight: '16px' }}
           >
-            <MoreIcon />
-            <span className="libro-create-file-type-text">其他</span>
-          </div>
-        </Col>
-      </Row>
-      <Form
-        layout="vertical"
-        autoComplete="off"
-        form={form}
-        onFinish={onFinish}
-        className="libro-create-file-form"
-      >
-        <Form.Item
-          name="fileName"
-          label="文件名称"
-          rules={[{ required: true, validator: validateFileName }]}
+            <div
+              className={`libro-create-file-type ${
+                fileType === undefined ? 'active' : ''
+              }`}
+              onClick={() => {
+                setFileType(undefined);
+                inputRef.current?.focus();
+              }}
+            >
+              <MoreIcon />
+              <span className="libro-create-file-type-text">其他</span>
+            </div>
+          </Col>
+        </Row>
+        <Form
+          layout="vertical"
+          autoComplete="off"
+          form={form}
+          onFinish={onFinish}
+          className="libro-create-file-form"
         >
-          <Input addonAfter={fileType || ''} ref={inputRef} />
-        </Form.Item>
-      </Form>
-    </Modal>
+          <Form.Item
+            name="fileName"
+            label="文件名称"
+            rules={[{ required: true, validator: validateFileName }]}
+          >
+            <Input addonAfter={fileType || ''} ref={inputRef} />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </ConfigProvider>
   );
 };
 

diff --git a/packages/libro-jupyter/src/file/file-createdir-modal.tsx b/packages/libro-jupyter/src/file/file-createdir-modal.tsx
@@ -1,8 +1,9 @@
 import type { ModalItem, ModalItemProps } from '@difizen/mana-app';
+import { ThemeService } from '@difizen/mana-app';
 import { URI } from '@difizen/mana-app';
 import { ViewManager } from '@difizen/mana-app';
 import { useInject } from '@difizen/mana-app';
-import { Form, message, Input, Modal } from 'antd';
+import { Form, message, Input, Modal, ConfigProvider, theme } from 'antd';
 import type { InputRef } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 
@@ -19,6 +20,7 @@ export const FileCreateDirModalComponent: React.FC<
 > = ({ visible, close, data }: ModalItemProps<FileDirCreateModalItemType>) => {
   const fileService = useInject(JupyterFileService);
   const viewManager = useInject(ViewManager);
+  const themeService = useInject(ThemeService);
   const inputRef = useRef<InputRef>(null);
   const [fileView, setFileView] = useState<FileView>();
   const [form] = Form.useForm();
@@ -61,44 +63,53 @@ export const FileCreateDirModalComponent: React.FC<
     inputRef.current?.focus();
   });
   return (
-    <Modal
-      title="新建文件夹"
-      open={visible}
-      onCancel={close}
-      cancelText="取消"
-      okText="确定"
-      onOk={() => {
-        form.submit();
+    <ConfigProvider
+      theme={{
+        algorithm:
+          themeService.getCurrentTheme().type === 'dark'
+            ? theme.darkAlgorithm
+            : theme.defaultAlgorithm,
       }}
-      keyboard={true}
-      wrapClassName="libro-create-dir-modal"
-      width={524}
     >
-      <div className="libro-create-file-des">创建位置：</div>
-      <span className="libro-create-file-path">{data?.path}</span>
-      <Form
-        layout="vertical"
-        autoComplete="off"
-        form={form}
-        onFinish={onFinish}
-        className="libro-create-dir-file-form"
+      <Modal
+        title="新建文件夹"
+        open={visible}
+        onCancel={close}
+        cancelText="取消"
+        okText="确定"
+        onOk={() => {
+          form.submit();
+        }}
+        keyboard={true}
+        wrapClassName="libro-create-dir-modal"
+        width={524}
       >
-        <Form.Item
-          name="dirName"
-          label="文件夹名称"
-          rules={[{ required: true, validator: validateDirName }]}
+        <div className="libro-create-file-des">创建位置：</div>
+        <span className="libro-create-file-path">{data?.path}</span>
+        <Form
+          layout="vertical"
+          autoComplete="off"
+          form={form}
+          onFinish={onFinish}
+          className="libro-create-dir-file-form"
         >
-          <Input
-            ref={inputRef}
-            onKeyDown={async (e) => {
-              if (e.keyCode === 13) {
-                form.submit();
-              }
-            }}
-          />
-        </Form.Item>
-      </Form>
-    </Modal>
+          <Form.Item
+            name="dirName"
+            label="文件夹名称"
+            rules={[{ required: true, validator: validateDirName }]}
+          >
+            <Input
+              ref={inputRef}
+              onKeyDown={async (e) => {
+                if (e.keyCode === 13) {
+                  form.submit();
+                }
+              }}
+            />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </ConfigProvider>
   );
 };