style: 完善amis暗黑主题

qkiroc · Feb 4, 2024 · eff8cbb · eff8cbb
1 parent 98f2bb2
commit eff8cbb
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 10 deletions.
diff --git a/packages/amis-ui/scss/components/form/_excel.scss b/packages/amis-ui/scss/components/form/_excel.scss
@@ -24,10 +24,10 @@
     padding: var(--gap-md);
     border-width: 2px;
     border-radius: 2px;
-    border-color: #eeeeee;
+    border-color: var(--colors-neutral-line-8);
     border-style: dashed;
-    background-color: #fafafa;
-    color: #bdbdbd;
+    background-color: var(--colors-neutral-fill-10);
+    color: var(--colors-neutral-text-6);
     outline: none;
     transition: border 0.24s ease-in-out;
   }

diff --git a/packages/amis/src/renderers/Code.tsx b/packages/amis/src/renderers/Code.tsx
@@ -167,7 +167,6 @@ export default class Code extends React.Component<CodeProps> {
 
   static defaultProps: Partial<CodeProps> = {
     language: 'plaintext',
-    editorTheme: 'vs',
     tabSize: 4,
     wordWrap: true
   };
@@ -267,12 +266,11 @@ export default class Code extends React.Component<CodeProps> {
 
     return language;
   }
-
   /** 注册并返回当前主题名称，如果未自定义主题，则范围editorTheme值，默认为'vs' */
   registerAndGetTheme() {
     const monaco = this.monaco;
-    const {editorTheme = 'vs'} = this.props;
-
+    let {theme, editorTheme} = this.props;
+    editorTheme = editorTheme || (theme === 'dark' ? 'vs-dark' : 'vs');
     if (!monaco) {
       return editorTheme;
     }

diff --git a/packages/amis/src/renderers/Form/DiffEditor.tsx b/packages/amis/src/renderers/Form/DiffEditor.tsx
@@ -73,7 +73,6 @@ function normalizeValue(value: any, language?: string) {
 export class DiffEditor extends React.Component<DiffEditorProps, any> {
   static defaultProps: Partial<DiffEditorProps> = {
     language: 'javascript',
-    theme: 'vs',
     options: {
       automaticLayout: false,
       selectOnLineNumbers: true,

diff --git a/packages/amis/src/renderers/Form/Editor.tsx b/packages/amis/src/renderers/Form/Editor.tsx
@@ -128,7 +128,7 @@ export interface EditorProps extends FormControlProps {
 export default class EditorControl extends React.Component<EditorProps, any> {
   static defaultProps: Partial<EditorProps> = {
     language: 'javascript',
-    editorTheme: 'vs',
+    editorTheme: '',
     allowFullscreen: true,
     options: {
       automaticLayout: true,
@@ -285,6 +285,7 @@ export default class EditorControl extends React.Component<EditorProps, any> {
       disabled,
       options,
       editorTheme,
+      theme,
       size,
       data,
       allowFullscreen,
@@ -325,7 +326,7 @@ export default class EditorControl extends React.Component<EditorProps, any> {
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
           language={language}
-          editorTheme={editorTheme}
+          editorTheme={editorTheme || (theme === 'dark' ? 'vs-dark' : 'vs')}
           editorDidMount={this.handleEditorMounted}
           childProps={{
             placeholder: placeholder