Merge pull request #9589 from qkiroc/style/dark-code

style: 完善amis暗黑主题

packages/amis-ui/scss/_properties.scss

@@ -423,7 +423,7 @@ $Table-strip-bg: transparent;
   --Layout-asideLink-onActive-arrowColor: var(
     --Layout-asideLink-onActive-color
   );
-  --Layout-asideLink-onActive-color: var(--colors-brand-4);
+  --Layout-asideLink-onActive-color: var(--colors-brand-6);
   --Layout-asideLink-onHover-color: var(--colors-brand-6);
   --Layout-asideLink-onHover-iconColor: var(--colors-brand-6);
   --Layout-asideLink-onHover-iconSize: var(--sizes-size-9);

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;
   }

packages/amis-ui/scss/themes/dark.scss

@@ -25,4 +25,10 @@
   --button-danger-default-font-color: var(--colors-neutral-text-2);
   --button-danger-hover-font-color: var(--colors-neutral-text-2);
   --button-danger-active-font-color: var(--colors-neutral-text-2);
+  --Layout-aside-bg: var(--colors-neutral-fill-10);
+  --Layout-asideLink-color: var(--colors-neutral-text-2);
+  --Layout-aside-subList-bg: var(--colors-neutral-fill-10);
+  --Layout-brand-bg: var(--colors-neutral-fill-10);
+  --Layout-brand-color: var(--colors-neutral-text-2);
+  --Layout-asideLink-onActive-color: var(--colors-brand-4);
 }

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;
     }

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