Merge pull request #147 from TuSimple/freestyle

Freestyle

CHANGELOG.en-US.md

@@ -1,4 +1,8 @@
 # CHANGELOG
+## 1.3.3 (2020-06-03)
+### Features
+- Add `$NOs.theme` to get the current theme of the OS.
+
 ## 1.3.2 (2020-06-02)
 ### Fixes
 - Fix the problem that `n-log`'s loading indicator uses monospace font.

CHANGELOG.zh-CN.md

@@ -1,4 +1,8 @@
 # CHANGELOG
+## 1.3.3 (2020-06-03)
+### Features
+- 增加了 `$NOs.theme` 来获取当前操作系统的主题
+
 ## 1.3.2 (2020-06-02)
 ### Fixes
 - 修正了 `n-log` 的加载器显示等宽字体的问题

demo/documentation/components/configProvider/enUS/index.md

@@ -6,6 +6,7 @@ theme
 namespace
 inherit-theme
 theme-environment
+os-theme
 language
 transparent
 ```

demo/documentation/components/configProvider/enUS/osTheme.md

@@ -0,0 +1,9 @@
+# Use OS Theme
+Naive-ui provides `$NOs.theme` property to get the current theme of your OS.
+```html
+<n-config-provider :theme="$NOs.theme">
+  <n-card>
+    Your current system theme is {{ JSON.stringify($NOs.theme) }}.
+  </n-card>
+</n-config-provider>
+```

demo/documentation/components/configProvider/zhCN/index.md

@@ -6,6 +6,7 @@ theme
 namespace
 inherit-theme
 theme-environment
+os-theme
 language
 transparent
 ```

demo/documentation/components/configProvider/zhCN/osTheme.md

@@ -0,0 +1,9 @@
+# 使用操作系统主题
+Naive-ui 提供 `$NOs.theme` 属性来获取当前操作系统的主题。
+```html
+<n-config-provider :theme="$NOs.theme">
+  <n-card>
+    当前操作系统的主题是 {{ JSON.stringify($NOs.theme) }}。
+  </n-card>
+</n-config-provider>
+```

demo/entry.vue

@@ -96,7 +96,11 @@ export default {
     },
     theme: {
       get () {
-        return this.$route.params.theme === 'light' ? 'light' : 'dark'
+        switch (this.$route.params.theme) {
+          case 'os-theme': return this.$NOs.theme
+          case 'dark': return 'dark'
+          default: return 'light'
+        }
       },
       set (theme) {
         this.$router.push(changeThemeInPath(this.$route.fullPath, theme))

demo/routes/routes.js

@@ -170,6 +170,6 @@ export const routes = [
   },
   {
     path: '/*',
-    redirect: '/zh-CN/light'
+    redirect: '/zh-CN/os-theme'
   }
 ]

src/ConfigProvider/index.js

@@ -1,9 +1,11 @@
 /* istanbul ignore file */
 import ConfigProvider from './src/main.vue'
+import installOsProperty from './src/installOsProperty'
 
 ConfigProvider.install = function (Vue) {
   Vue.component(ConfigProvider.name, ConfigProvider)
   Vue.component('NApp', ConfigProvider)
+  installOsProperty(Vue)
 }
 
 export default ConfigProvider

src/ConfigProvider/src/installOsProperty.js

@@ -0,0 +1,47 @@
+export default function installOsProperty (Vue) {
+  let osTheme = null
+  // Mql means media query list
+  let darkMql = null
+  let lightMql = null
+  function handleDarkMqlChange (e) {
+    if (e.matches) {
+      os.theme = 'dark'
+    }
+  }
+  function handleLightMqlChange (e) {
+    if (e.matches) {
+      os.theme = 'light'
+    }
+  }
+  if (window.matchMedia) {
+    darkMql = window.matchMedia('(prefers-color-scheme: dark)')
+    lightMql = window.matchMedia('(prefers-color-scheme: light)')
+    if (darkMql.matches) {
+      osTheme = 'dark'
+    } else if (lightMql.matches) {
+      osTheme = 'light'
+    }
+    if (darkMql.addEventListener) {
+      darkMql.addEventListener('change', handleDarkMqlChange)
+      lightMql.addEventListener('change', handleLightMqlChange)
+    } else if (darkMql.addListener) {
+      darkMql.addListener(handleDarkMqlChange)
+      lightMql.addListener(handleLightMqlChange)
+    }
+  }
+  const os = Vue.observable({
+    theme: osTheme
+  })
+  Vue.prototype.$NOs = os
+  return () => {
+    if (window.matchMedia) {
+      if (darkMql.removeEventListener) {
+        darkMql.removeEventListener('change', handleDarkMqlChange)
+        lightMql.removeEventListener('change', handleLightMqlChange)
+      } else if (darkMql.removeListener) {
+        darkMql.removeListener(handleDarkMqlChange)
+        lightMql.removeListener(handleLightMqlChange)
+      }
+    }
+  }
+}