feat: 增加暗黑主题

packages/editor/src/App.less

@@ -1,2 +1,31 @@
 @primary-color: #7d33ff;
 @border-color: #e8e9eb;
+html[data-theme='dark'] {
+  // 系统风格
+  --mars-primary-color: #7d33ff;
+  --mars-border-color: #e8e9eb;
+  // 暗黑主题
+  --mars-theme-color: #101520;
+  // 暗黑主题文字颜色
+  --mars-theme-text-color: #fff;
+  // 暗黑主题次级文字颜色
+  --mars-theme-text-secondary-color: #b4b4b4;
+  --mars-theme-border-color: transparent;
+  // 卡片边框颜色
+  --mars-theme-card-border-color: #303030;
+  // 卡片文字颜色
+  --mars-theme-card-text-color: rgba(255, 255, 255, 0.85);
+  // 暗黑背景颜色
+  --mars-theme-bg-color: #1e2430;
+  background-color: #1e2430;
+}
+html {
+  --mars-primary-color: #7d33ff;
+  --mars-border-color: #e8e9eb;
+  --mars-theme-color: #fff;
+  --mars-theme-text-color: #000;
+  --mars-theme-border-color: #e8e9eb;
+  --mars-theme-card-border-color: #f0f0f0;
+  --mars-theme-card-text-color: #000000bd;
+  --mars-theme-bg-color: #f5f5f5;
+}

packages/editor/src/App.tsx

@@ -13,8 +13,12 @@ dayjs.extend(weekday);
 dayjs.extend(localeData);
 dayjs.locale('zh-cn');
 import './App.less';
+import storage from './utils/storage';
+import { usePageStore } from './stores/pageStore';
 
 function App() {
+  const isDark = storage.get('marsview-theme');
+  const marsTheme = usePageStore((state) => state.theme);
   return (
     <ConfigProvider
       locale={locale}
@@ -26,6 +30,7 @@ function App() {
           colorLink: '#7D33FF',
           colorInfo: '#7D33FF',
         },
+        algorithm: marsTheme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
       }}
     >
       <AntdApp>

packages/editor/src/components/ApiConfig/index.module.less

@@ -1,7 +1,7 @@
 .title {
-  background: #f2f2f4;
-  border-top: 1px solid #e5e5e5;
-  color: #070c14;
+  background: var(--mars-theme-color);
+  border-top: 1px solid var(--mars-theme-text-secondary-color);
+  color: var(--mars-theme-text-color);
   font-size: 14px;
   font-weight: 500;
   line-height: 30px;

packages/editor/src/components/EventConfig/ActionModal/index.module.less

@@ -1,14 +1,15 @@
 /*****行为弹框********/
 .actionBox {
   display: flex;
-  border: 1px solid @border-color;
+  border: 1px solid var(--mars-theme-card-border-color);
   border-radius: 8px;
   margin-top: 15px;
   .menuAction {
     width: 200px;
     height: 500px;
     overflow: auto;
-    border-right: 1px solid @border-color;
+    border-right: 1px solid var(--mars-theme-card-border-color);
+    background-color: var(--mars-theme-color);
     ul,
     li {
       list-style: none;
@@ -17,13 +18,13 @@
       line-height: 32px;
       font-size: 14px;
       font-weight: 500;
-      background-color: #f5f5f5;
+      background-color: var(--mars-theme-color);
       .navTitle {
         padding-left: 10px;
       }
       .subItem {
         line-height: 32px;
-        background-color: #fff;
+        background-color: var(--mars-theme-bg-color);
         padding-left: 30px;
         font-weight: normal;
         cursor: pointer;

packages/editor/src/components/EventConfig/index.module.less

@@ -5,9 +5,9 @@
 .title {
   display: flex;
   justify-content: space-between;
-  background: #f2f2f4;
-  border-top: 1px solid #e5e5e5;
-  color: #070c14;
+  background: var(--mars-theme-color);
+  border-top: 1px solid var(--mars-theme-card-border-color);
+  color: var(--mars-theme-text-color);
   font-size: 14px;
   font-weight: 500;
   line-height: 30px;

packages/editor/src/components/FlowNode/index.less

@@ -2,7 +2,7 @@
   width: auto;
   height: 100vh;
   margin: -24px;
-  background-color: #f0f2f3;
+  background-color: var(--mars-theme-bg-color);
   cursor: grab;
   &.dot {
     /* 设置背景图像为重复的径向渐变，每个渐变代表一个点 */
@@ -86,7 +86,7 @@
       box-shadow: 0 1px 4px 0 rgba(10, 30, 65, 0.16);
       border-radius: 8px;
       cursor: pointer;
-      background-color: #fff;
+      background-color: var(--mars-theme-color);
       &.success {
         background-color: #52c41a;
         color: #fff;

packages/editor/src/components/SetterRender/index.module.less

@@ -1,7 +1,7 @@
 .title {
-  background: #f2f2f4;
-  border-top: 1px solid #e5e5e5;
-  color: #070c14;
+  background: var(--mars-theme-color);
+  border-top: 1px solid var(--mars-theme-card-border-color);
+  color: var(--mars-theme-text-color);
   font-size: 14px;
   font-weight: 500;
   line-height: 30px;

packages/editor/src/components/StyleConfig/index.module.less

@@ -5,9 +5,9 @@
   padding-bottom: 10px;
 }
 .title {
-  background: #f2f2f4;
-  border-top: 1px solid #e5e5e5;
-  color: #070c14;
+  background: var(--mars-theme-color);
+  border-top: 1px solid var(--mars-theme-card-border-color);
+  color: var(--mars-theme-text-color);
   font-size: 14px;
   font-weight: 500;
   line-height: 30px;

packages/editor/src/components/VariableBind/variable.module.less

@@ -1,10 +1,10 @@
 .container {
   display: flex;
-  border: 1px solid #e8e9eb;
+  border: 1px solid var(--mars-theme-card-border-color);
   height: 500px;
   .leftFn {
     width: 160px;
-    border-right: 1px solid #e8e9eb;
+    border-right: 1px solid var(--mars-theme-card-border-color);
     overflow: hidden;
     ul,
     li {
@@ -32,11 +32,11 @@
     padding-left: 10px;
     line-height: 30px;
     margin-bottom: 10px;
-    background-color: #f3f3f3;
+    background-color: var(--mars-theme-color);
   }
   .variable {
     width: 350px;
-    border-left: 1px solid #e8e9eb;
+    border-left: 1px solid var(--mars-theme-card-border-color);
     overflow-y: auto;
   }
 }

packages/editor/src/components/VsEditor.tsx

@@ -1,11 +1,13 @@
 import { isNotEmpty } from '@/packages/utils/util';
+import { usePageStore } from '@/stores/pageStore';
 import Editor, { loader, useMonaco } from '@monaco-editor/react';
 import { useEffect, useRef } from 'react';
 /**
  * 封装vscode编辑器
  */
 
 export default function VsEditor({ height, language, value, onChange }: any) {
+  const theme = usePageStore((state) => state.theme);
   const monaco = useMonaco();
   const editorRef = useRef<any>(null);
   useEffect(() => {
@@ -62,6 +64,7 @@ export default function VsEditor({ height, language, value, onChange }: any) {
     <Editor
       height={height || '150px'}
       language={language || 'javascript'}
+      theme={theme === 'dark' ? 'vs-dark' : 'vs-light'}
       value={isNotEmpty(value) ? (typeof value === 'string' ? value : JSON.stringify(value, null, 2)) : ''}
       onChange={onChange}
       onMount={(editor, monaco) => {

packages/editor/src/layout/EditLayout.tsx

@@ -7,6 +7,7 @@ import { useShallow } from 'zustand/react/shallow';
 import { usePageStore } from '@/stores/pageStore';
 import SpinLoading from '@/components/SpinLoading';
 import './layout.less';
+import Notice from './components/Notice';
 
 const Menu = lazy(() => import('./components/Menu'));
 const ConfigPanel = lazy(() => import('./components/ConfigPanel/ConfigPanel'));
@@ -29,6 +30,7 @@ const EditLayout = () => {
     <DndProvider backend={HTML5Backend}>
       {/* 编辑器 */}
       <div style={{ height: 'calc(100vh - 64px)' }}>
+        <Notice />
         <ConfigProvider
           theme={{
             components: {

packages/editor/src/layout/components/ConfigPanel/index.module.less

@@ -1,6 +1,6 @@
 .attrBox {
   height: calc(100vh - 64px);
-  border-left: 1px solid @border-color;
+  border-left: 1px solid var(--mars-theme-border-color);
   overflow: auto;
 }
 .widget {

packages/editor/src/layout/components/Header/index.module.less

@@ -1,18 +1,20 @@
-.header {
+.header,
+.layoutHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 30px;
-  background-color: #fff;
+  background-color: var(--mars-theme-color);
   height: 64px;
   line-height: 64px;
   padding: 0 20px;
   font-size: 14px;
+  color: var(--mars-theme-text-color);
 }
 .layoutHeader {
-  &:extend(.header);
-  border-bottom: 1px solid @border-color;
+  border-bottom: 1px solid var(--mars-theme-border-color);
 }
+
 .logo {
   font-size: 20px;
   display: flex;