样式生成器预览可选明亮背景

frontend/src/lang/en.js

@@ -50,6 +50,9 @@ export default {
     legacy: 'Classic',
     lineLike: 'Line-like',
 
+    light: 'light',
+    dark: 'dark',
+
     outlines: 'Outlines',
     showOutlines: 'Show outlines',
     outlineSize: 'Outline size',

frontend/src/lang/ja.js

@@ -50,6 +50,9 @@ export default {
     legacy: '古典',
     lineLike: 'Line風',
 
+    light: '明るい',
+    dark: '暗い',
+
     outlines: 'アウトライン',
     showOutlines: 'アウトラインを表示する',
     outlineSize: 'アウトラインのサイズ',

frontend/src/lang/zh.js

@@ -50,6 +50,9 @@ export default {
     legacy: '经典',
     lineLike: '仿微信',
 
+    light: '明亮',
+    dark: '黑暗',
+
     outlines: '描边',
     showOutlines: '显示描边',
     outlineSize: '描边尺寸',

frontend/src/views/StyleGenerator/index.vue

@@ -25,11 +25,16 @@
     </el-col>
 
     <el-col :sm="24" :md="8">
-      <div id="example-container" :style="{top: `${exampleTop}px`}">
+      <div :style="{position: 'relative', top: `${exampleTop}px`}">
+        <p>
+          <el-switch v-model="exampleBgLight" :active-text="$t('stylegen.light')" :inactive-text="$t('stylegen.dark')"></el-switch>
+        </p>
+        <div id="example-container" :class="{light: exampleBgLight}">
           <div id="fakebody">
             <chat-renderer ref="renderer" :css="exampleCss"></chat-renderer>
           </div>
         </div>
+      </div>
     </el-col>
   </el-row>
 </template>
@@ -151,7 +156,8 @@ export default {
       // 防抖后延迟变化的结果
       debounceResult: '',
 
-      exampleTop: 0
+      exampleTop: 0,
+      exampleBgLight: false
     }
   },
   computed: {
@@ -209,8 +215,7 @@ export default {
 
 <style scoped>
 #example-container {
-  position: relative;
-  height: calc(100vh - 110px);
+  height: calc(100vh - 150px);
 
   background-color: #444;
   background-image:
@@ -236,6 +241,20 @@ export default {
   overflow: hidden;
 }
 
+#example-container.light {
+  background-color: #ddd;
+  background-image:
+    -moz-linear-gradient(45deg, #eee 25%, transparent 25%),
+    -moz-linear-gradient(-45deg, #eee 25%, transparent 25%),
+    -moz-linear-gradient(45deg, transparent 75%, #eee 75%),
+    -moz-linear-gradient(-45deg, transparent 75%, #eee 75%);
+  background-image:
+    -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #eee), color-stop(.25, transparent)),
+    -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #eee), color-stop(.25, transparent)),
+    -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #eee)),
+    -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #eee));
+}
+
 #fakebody {
   outline: 1px #999 dashed;
   height: 100%;