feat(cli/generators): support dark mode

affects: @varlet/cli
varletjs · Nov 19, 2021 · 4795af8 · 4795af8
1 parent b6231b2
commit 4795af8
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 5 deletions.
diff --git a/packages/varlet-cli/generators/sfc/docs/home.zh-CN.md b/packages/varlet-cli/generators/sfc/docs/home.zh-CN.md
@@ -1,6 +1,8 @@
 <div class="varlet-introduce">
-  <img class="varlet-introduce__image" src="../public/logo.svg" />
-  <div class="varlet-introduce__name">Basic</div>  
+  <div class="varlet-introduce__row">
+    <img class="varlet-introduce__image" src="../public/logo.svg" />
+    <div class="varlet-introduce__name">Basic UI</div>  
+  </div>
   <div class="varlet-introduce__des">一个组件库</div>
 </div>
 

diff --git a/packages/varlet-cli/generators/sfc/varlet.config.js b/packages/varlet-cli/generators/sfc/varlet.config.js
@@ -5,6 +5,14 @@ module.exports = {
   logo: './logo.svg',
   useMobile: true,
   themes: {
+    'color-body': '#fff',
+    'color-bar': '#fff',
+    'color-sub-bar': '#f5f5f5',
+    'color-text': '#555',
+    'color-sub-text': '#888',
+    'color-border': 'rgba(0, 0, 0, 0.12)',
+    'color-shadow': '#eee',
+    'color-introduce-border': '#009688',
     'color-primary': '#009688',
     'color-link': '#009688',
     'color-type': '#009688',
@@ -13,12 +21,37 @@ module.exports = {
     'color-side-bar': '#009688',
     'color-side-bar-active-background': '#00968821',
     'color-app-bar': '#009688',
+    'color-nav-button-hover-background': 'rgba(0, 0, 0, 0.08)',
     'color-pc-language-active': '#009688',
     'color-pc-language-active-background': '#00968821',
     'color-mobile-language-active': '#009688',
     'color-mobile-language-active-background': '#00968821',
     'color-mobile-cell-hover': '#009688'
   },
+  darkThemes: {
+    'color-body': '#121212',
+    'color-bar': '#1e1e1e',
+    'color-sub-bar': '#272727',
+    'color-text': '#fff',
+    'color-sub-text': '#aaa',
+    'color-border': '#333',
+    'color-shadow': '#121212',
+    'color-introduce-border': '#555',
+    'color-primary': '#009688',
+    'color-link': '#009688',
+    'color-type': '#009688',
+    'color-progress': '#009688',
+    'color-progress-track': '#202020',
+    'color-side-bar': '#009688',
+    'color-side-bar-active-background': '#00968821',
+    'color-app-bar': '#009688',
+    'color-nav-button-hover-background': 'rgba(255, 255, 255, 0.08)',
+    'color-pc-language-active': '#009688',
+    'color-pc-language-active-background': '#00968821',
+    'color-mobile-language-active': '#009688',
+    'color-mobile-language-active-background': '#00968821',
+    'color-mobile-cell-hover': '#009688',
+  },
   highlight: {
     style: './highlight.css',
   },

diff --git a/packages/varlet-cli/generators/tsx/docs/home.zh-CN.md b/packages/varlet-cli/generators/tsx/docs/home.zh-CN.md
@@ -1,6 +1,8 @@
 <div class="varlet-introduce">
-  <img class="varlet-introduce__image" src="../public/logo.svg" />
-  <div class="varlet-introduce__name">Basic</div>  
+  <div class="varlet-introduce__row">
+    <img class="varlet-introduce__image" src="../public/logo.svg" />
+    <div class="varlet-introduce__name">Basic UI</div>  
+  </div>
   <div class="varlet-introduce__des">一个组件库</div>
 </div>
 

diff --git a/packages/varlet-cli/generators/tsx/varlet.config.js b/packages/varlet-cli/generators/tsx/varlet.config.js
@@ -5,6 +5,14 @@ module.exports = {
   logo: './logo.svg',
   useMobile: true,
   themes: {
+    'color-body': '#fff',
+    'color-bar': '#fff',
+    'color-sub-bar': '#f5f5f5',
+    'color-text': '#555',
+    'color-sub-text': '#888',
+    'color-border': 'rgba(0, 0, 0, 0.12)',
+    'color-shadow': '#eee',
+    'color-introduce-border': '#009688',
     'color-primary': '#009688',
     'color-link': '#009688',
     'color-type': '#009688',
@@ -13,12 +21,37 @@ module.exports = {
     'color-side-bar': '#009688',
     'color-side-bar-active-background': '#00968821',
     'color-app-bar': '#009688',
+    'color-nav-button-hover-background': 'rgba(0, 0, 0, 0.08)',
     'color-pc-language-active': '#009688',
     'color-pc-language-active-background': '#00968821',
     'color-mobile-language-active': '#009688',
     'color-mobile-language-active-background': '#00968821',
     'color-mobile-cell-hover': '#009688'
   },
+  darkThemes: {
+    'color-body': '#121212',
+    'color-bar': '#1e1e1e',
+    'color-sub-bar': '#272727',
+    'color-text': '#fff',
+    'color-sub-text': '#aaa',
+    'color-border': '#333',
+    'color-shadow': '#121212',
+    'color-introduce-border': '#555',
+    'color-primary': '#009688',
+    'color-link': '#009688',
+    'color-type': '#009688',
+    'color-progress': '#009688',
+    'color-progress-track': '#202020',
+    'color-side-bar': '#009688',
+    'color-side-bar-active-background': '#00968821',
+    'color-app-bar': '#009688',
+    'color-nav-button-hover-background': 'rgba(255, 255, 255, 0.08)',
+    'color-pc-language-active': '#009688',
+    'color-pc-language-active-background': '#00968821',
+    'color-mobile-language-active': '#009688',
+    'color-mobile-language-active-background': '#00968821',
+    'color-mobile-cell-hover': '#009688',
+  },
   highlight: {
     style: './highlight.css',
   },

diff --git a/packages/varlet-cli/site/mobile/App.vue b/packages/varlet-cli/site/mobile/App.vue
@@ -51,7 +51,7 @@
             color="transparent"
             text-color="#fff"
             @click.stop="showMenu = true"
-            v-if="languages || darkMode"
+            v-if="languages"
           >
             <var-site-icon name="translate" :size="24" />
             <var-site-icon name="chevron-down" :size="22" />