💄 style: 设置默认主题样式

config/config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'umi';
 import { resolve } from 'path';
+import theme from '../src/theme/theme';
 
 const isDev = process.env.NODE_ENV === 'development';
 
@@ -8,6 +9,7 @@ export default defineConfig({
   alias: {
     theme: resolve(__dirname, '../src/theme'),
   },
+  theme,
   // chrome 插件配置项
   extensions: {
     name: `Power Yuque${isDev ? ' DEV' : ''}`,

src/theme/override.less

@@ -0,0 +1,3 @@
+@import '~antd/es/style/themes/default';
+
+@primary-color: hsl(146, 51%, 52%);

src/theme/style/index.less

@@ -3,6 +3,7 @@
 @import 'border';
 @import 'image';
 @import 'button';
+@import 'layout';
 
 @import 'card';
 

src/theme/style/layout.less

@@ -0,0 +1,6 @@
+.flex-center-children {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}

src/theme/theme.ts

@@ -0,0 +1,9 @@
+import fs from 'fs';
+import lessToJs from 'less-vars-to-js';
+import path from 'path';
+
+const themeVariables = lessToJs(
+  fs.readFileSync(path.join(__dirname, './override.less'), 'utf8'),
+);
+
+export default themeVariables;

types/index.d.ts

@@ -1,6 +1,7 @@
 declare module '*.css';
 declare module '*.less';
 declare module '*.png';
+declare module 'less-vars-to-js';
 declare module '*.svg' {
   export function ReactComponent(
     props: React.SVGProps<SVGSVGElement>,