arco-design · hehehai · Oct 4, 2022
diff --git a/packages/arco-vue-docs/components/article/style.less b/packages/arco-vue-docs/components/article/style.less
@@ -78,7 +78,7 @@
   & :deep(.code-content) {
     box-sizing: border-box;
     margin: 0;
-    padding: 28px 48px;
+    padding: 28px;
     background-color: var(--color-neutral-2);
     border-radius: 4px;
 

diff --git a/packages/arco-vue-docs/components/palette-card/index.vue b/packages/arco-vue-docs/components/palette-card/index.vue
@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <h3
+      :style="{
+        textAlign: 'center',
+        color: theme === 'light' ? '#333' : '#fff',
+      }"
+    >
+      {{ title }}
+    </h3>
+    <div className="color-palette-wrapper">
+      <template v-for="item in palette" :key="item.index">
+        <div
+          className="color-palette-item"
+          :style="item.style"
+          :aria-label="item.colorString"
+          @click="handleCopyColor(item.colorString)"
+        >
+          <div className="color-palette-item-left">
+            <div className="color-name">{{ `${name}-${item.index + 1}` }}</div>
+          </div>
+          <span className="color-palette-value">{{ item.colorString }}</span>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue';
+import { colord } from 'colord';
+import { Message } from '@web-vue/components/index';
+import clipboard from '../../utils/clipboard';
+
+export default defineComponent({
+  name: 'PaletteCard',
+  props: {
+    colors: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    name: String,
+    format: String,
+    theme: String,
+    title: String,
+  },
+  setup(props) {
+    const palette = computed(() =>
+      props.colors.map((c, index) => {
+        const color = colord(c);
+        const colorString =
+          props.format === 'hex'
+            ? color.toHex()
+            : props.format === 'rgb'
+            ? color.toRgbString()
+            : color.toHslString();
+
+        return {
+          index,
+          colorString,
+          style: {
+            backgroundColor: color.toHex(),
+            color: color.isLight() ? '#000' : '#fff',
+            fontWeight: index === 5 ? 'bold' : 400,
+          },
+        };
+      })
+    );
+
+    const handleCopyColor = (text: string) => {
+      if (text) {
+        clipboard(text)
+          .then(() => {
+            Message.success(`Copy Success! ${text}`);
+          })
+          .catch(() => {
+            Message.error('Copy Failed! Please try again.');
+          });
+      }
+    };
+
+    return {
+      palette,
+      handleCopyColor,
+    };
+  },
+});
+</script>
+
+<style scoped lang="less" src="./style.less" />
diff --git a/packages/arco-vue-docs/components/palette-card/style.less b/packages/arco-vue-docs/components/palette-card/style.less
@@ -0,0 +1,58 @@
+.color-palette-wrapper {
+  width: 100%;
+  margin-bottom: 20px;
+
+  &:hover {
+    .color-palette-value {
+      opacity: 1;
+    }
+
+    // .color-name,
+    // .color-contrast {
+    //   height: 23px;
+    //   line-height: 23px;
+    //   opacity: 1;
+    //   font-size: 12px;
+    // }
+  }
+}
+
+.color-palette-value {
+  font-size: 12px;
+  opacity: 0;
+  transition: all 0.2s;
+}
+
+.color-palette-item {
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+  width: 100%;
+  height: 46px;
+  padding: 0 10px;
+  overflow: hidden;
+  line-height: 46px;
+  cursor: pointer;
+  transition: transform 0.2s;
+
+  &:hover {
+    transform: scale(1.05, 1.05);
+  }
+
+  &:first-child {
+    border-radius: 6px 6px 0 0;
+  }
+
+  &:last-child {
+    border-radius: 0 0 6px 6px;
+  }
+
+  .color-name,
+  .color-contrast {
+    transition: all 0.2s;
+  }
+
+  .color-contrast {
+    opacity: 0;
+  }
+}
diff --git a/packages/arco-vue-docs/docs/dark.en-US.md b/packages/arco-vue-docs/docs/dark.en-US.md
@@ -11,6 +11,8 @@ description: The dark theme is built in the component library, and you can easil
 
 The component library uses the arco-theme attribute on the body tag to indicate the current theme, so you only need to modify this attribute to complete the theme switch.
 
+Note: By setting arco-theme as dark, you only switch the component library to dark mode. You also need to use some CSS variables to adjust the overall page style to dark.
+
 ```ts
 // Set as dark theme
 document.body.setAttribute('arco-theme', 'dark')
@@ -19,6 +21,33 @@ document.body.setAttribute('arco-theme', 'dark')
 document.body.removeAttribute('arco-theme');
 ```
 
-## Principle and built-in colors
+Automatically switch following the system theme
+
+```ts
+const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");
+
+darkThemeMq.addListener(e => {
+ if (e.matches) {
+   document.body.setAttribute('arco-theme', 'dark');
+ } else {
+    document.body.removeAttribute('arco-theme');
+  }
+});
+```
+
+Adjust background and font
+
+```css
+body {
+  background-color: var(--color-bg-1);
+  color: var(--color-text-1);
+}
+```
+
+## Theory
+
+ArcoDesign uses [CSS variables](https://developer.mozilla.org/zh-CN/docs/Web/CSS/--*) to build the dark theme. There are two sets of color palettes built into the component, one set is the default bright color palette and the other is the dark one generated from the bright color palette. If you're interested in the current color palette, you can view more here: [ArcoDesign Color](/vue/docs/palette).
+
+Less variables and CSS variables co-exist in ArcoDesign and the color algorithm for bright and dark colors is built-in, which can change the color palette more flexibly.
 
-Refer to [Dark Mode](https://arco.design/react/docs/palette) and [Color](https://arco.design/react/docs/palette)
+For example, if you want to change the dominant color, you only need to change the value of @arcoblue-6. The algorithm will automatically generate colors from 1 to 10 for you, and will also automatically generate the inverted colors from 1 to 10 in dark colors, which is very convenient.
diff --git a/packages/arco-vue-docs/docs/dark.zh-CN.md b/packages/arco-vue-docs/docs/dark.zh-CN.md
@@ -2,12 +2,14 @@
 meta:
   type: 开发指南
 title: 暗黑模式
-description: 组件库内置暗色的主题，你可以轻易的切换到暗色。
+description: 组件库内置暗色的主题，你可以轻易的切换到暗色，也可以简单的通过调整色板来自动生成基于色板的新暗色主题。（点击官网右上角图标可进行暗黑模式预览。）
 ```
 
-## 切换到暗黑模式
+## 如何切换暗黑模式
 
-组件库通过 body 标签上的 arco-theme 属性来标明当前的主题，所以你只要修改这个属性，即可完成主题的切换。
+组件库通过 `body` 标签上的 `arco-theme` 属性来标明当前的主题，所以你只要修改这个属性，即可完成主题的切换。
+
+**注意：通过设置 arco-theme 为 dark，只是将组件库切换成了暗色模式，你的页面的整体风格，需要利用一些 CSS 变量 调整为暗色。**
 
 ```ts
 // 设置为暗黑主题
@@ -17,6 +19,33 @@ document.body.setAttribute('arco-theme', 'dark')
 document.body.removeAttribute('arco-theme');
 ```
 
-## 原理和内置颜色
+跟随系统主题自动切换
+
+```ts
+const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");
+
+darkThemeMq.addListener(e => {
+ if (e.matches) {
+   document.body.setAttribute('arco-theme', 'dark');
+ } else {
+    document.body.removeAttribute('arco-theme');
+  }
+});
+```
+
+调整整体背景和字体
+
+```css
+body {
+  background-color: var(--color-bg-1);
+  color: var(--color-text-1);
+}
+```
+
+## 原理
+
+ArcoDesign 使用 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/--*) 来构建的暗黑主题。组件内部内置了两套色板，一套默认的亮色，另外一套是根据亮色色板生成的暗色色板。如果你对当前色板感兴趣，可以看这里：[ArcoDesign 色板](/vue/docs/palette)。
+
+ArcoDesign 内部 Less 变量和 CSS 变量共存，并且内置了亮色和暗色的色彩算法，可以更灵活的更改色板。
 
-可参考 [暗黑模式](https://arco.design/react/docs/palette) 和 [颜色](https://arco.design/react/docs/palette)
+比如你想更改主色，你只需要更改 @arcoblue-6 这个变量的值即可，算法会自动帮你生成 1号到 10号的颜色，并且会自动生成暗色下反转后的 1号到 10号颜色。随心所欲，尽在掌握。
diff --git a/packages/arco-vue-docs/docs/i18n.en-US.md b/packages/arco-vue-docs/docs/i18n.en-US.md
@@ -33,10 +33,12 @@ export default {
 
 ## Supported regional languages
 
-| Language            |Area code|
-|---------------------|---|
-| Simple Chinese      |zh-CN|
-| English (US)        |en-US|
-| Japanese            |ja-JP|
-| Traditional Chinese |zh-TW|
-| Portuguese          |pt-PT|
+| Language            |Area code| Version |
+|---------------------|-----|-----|
+| Simple Chinese      |zh-CN| - |
+| English (US)        |en-US| - |
+| Japanese            |ja-JP| - |
+| Traditional Chinese |zh-TW| 2.36.0 |
+| Portuguese          |pt-PT| 2.36.0 |
+
+If you have a new language requirement, please raise an [issue](https://arco.design/issue-helper?repo=arco-design-vue) ~
diff --git a/packages/arco-vue-docs/docs/i18n.zh-CN.md b/packages/arco-vue-docs/docs/i18n.zh-CN.md
@@ -31,10 +31,12 @@ export default {
 
 ## 支持的地区语言
 
-| 语言         |地区编码|
-|------------|---|
-| 简体中文       |zh-CN|
-| 英文         |en-US|
-| 日文         |ja-JP|
-| 繁体中文（中国台湾） |zh-TW|
-| 葡萄牙语       |pt-PT|
+| 语言         |地区编码| 版本 |
+|------------|-----|-----|
+| 简体中文       |zh-CN| - |
+| 英文         |en-US| - |
+| 日文         |ja-JP| - |
+| 繁体中文（中国台湾） |zh-TW| 2.36.0 |
+| 葡萄牙语       |pt-PT| 2.36.0 |
+
+如果有新的语言需求，请提 [issue](https://arco.design/issue-helper?repo=arco-design-vue) ~
diff --git a/packages/arco-vue-docs/docs/start.en-US.md b/packages/arco-vue-docs/docs/start.en-US.md
@@ -35,6 +35,15 @@ app.use(ArcoVue);
 app.mount('#app');
 ```
 
+<div style="margin-top: 20px; padding: 20px; border-radius: 4px; background-color: var(--color-neutral-2);">
+<iframe src="https://codesandbox.io/embed/hello-arco-vue-07l7zu?autoresize=1&fontsize=15&hidenavigation=1&theme=dark"
+     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+     title="hello-arco-vue"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
+</div>
+
 ## On-demand Import (template)
 
 If you use the template method for development, you can use the [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) and [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) plugin to enable on-demand import and automatic import support.
@@ -118,6 +127,6 @@ app.mount('#app');
 
 ## Supported platforms
 
-| [<img src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/08095282566ac4e0fd98f89aed934b65.png~tplv-uwbnlip3yd-png.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Edge | [<img src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/40ad73571879dd8d9fd3fd524e0e45a4.png~tplv-uwbnlip3yd-png.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/4f59d35f6d6837b042c8badd95871b1d.png~tplv-uwbnlip3yd-png.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/eee2667f837a9c2ed531805850bf43ec.png~tplv-uwbnlip3yd-png.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3240334d3967dd263c8f4cdd2d93c525.png~tplv-uwbnlip3yd-png.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera |
+| [<img src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/08095282566ac4e0fd98f89aed934b65.png~tplv-uwbnlip3yd-png.png" alt="Edge" width="24" height="24" />](http://godban.github.io/browsers-support-badges/)<br/>Edge | [<img src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/40ad73571879dd8d9fd3fd524e0e45a4.png~tplv-uwbnlip3yd-png.png" alt="Firefox" width="24" height="24" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/4f59d35f6d6837b042c8badd95871b1d.png~tplv-uwbnlip3yd-png.png" alt="Chrome" width="24" height="24" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/eee2667f837a9c2ed531805850bf43ec.png~tplv-uwbnlip3yd-png.png" alt="Safari" width="24" height="24" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3240334d3967dd263c8f4cdd2d93c525.png~tplv-uwbnlip3yd-png.png" alt="Opera" width="24" height="24" />](http://godban.github.io/browsers-support-badges/)<br/>Opera |
 |-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | ≥ 79                                                                                                                                                                                                                          | ≥ 78                                                                                                                                                                                                                                | ≥ 64                                                                                                                                                                                                                              | ≥ 12                                                                                                                                                                                                                              | ≥ 53                                                                                                                                                                                                                            |