feat:画布主题

src/services/theme.ts

@@ -90,7 +90,7 @@ export function switchTheme(themeName?: string) {
       },
     }
   }
-  meta2d?.setOptions(options);
-  meta2d?.render();
+  // meta2d?.setOptions(options);
+  // meta2d?.render();
   localStorage.setItem('le-theme', themeName||'dark');
 }

src/views/Preview.vue

@@ -113,6 +113,8 @@ const open = async () => {
 };
 
 const opened = () => {
+  meta2d.store.options.shadowColor = '#0000'
+  meta2d.canvas.parentElement.style.background = meta2d.store.data.background|| meta2d.store.theme[theme].background;
   let fit: any =
     (meta2d.store.data as any).scaleMode === '3'
       ? 'height'

src/views/components/FileProps.vue

@@ -100,6 +100,17 @@
               @remove="fileRemoved"
             />
           </div>
+          <div class="form-item">
+            <label>主题</label>
+            <t-select
+              v-model="data.theme"
+              placeholder="暗黑"
+              :options="themeOptions"
+              @change="changeTheme"
+              clearable
+              class="shrink-0"
+            />
+          </div>
         </t-space>
         <t-space direction="vertical" size="small" class="mt-8">
           <t-collapse
@@ -388,6 +399,17 @@ const cases = [
   }
 ];
 
+const themeOptions = [
+  {
+    label: '暗黑',
+    value: 'dark',
+  },
+  {
+    label: '明亮',
+    value: 'light',
+  },
+];
+
 const screenList = reactive([
   {
     name: '大屏',
@@ -500,6 +522,11 @@ const changeValue = (e: any, key: string) => {
   openData();
 };
 
+const changeTheme = (e)=>{
+  meta2d.setTheme(e);
+  data.meta2dData.background = meta2d.store.data.background;
+}
+
 const changeName = (e: any, key: string) => {
   setMeta2dData({name:e});
 };

src/views/components/View.vue

@@ -2281,7 +2281,7 @@ const theme = computed(() => {
 .meta2d {
   display: flex;
   flex-direction: column;
-  background-color: var(--color-background-editor);
+  background-color:#080b0f;
   border-left: 1px solid var(--color-border);
 
   .tools {