diff --git a/src/avatar/index.js b/src/avatar/index.js
index d74b8eb..9b4c94a 100644
--- a/src/avatar/index.js
+++ b/src/avatar/index.js
@@ -84,7 +84,7 @@ class Avatar extends Component {
           width: map.get($v, 'h');
           height: map.get($v, 'h');
           font-size: map.get($v, 'f');
-          --size: #{map.get($v, 'h') - 8px};
+          --wc-icon-size: #{map.get($v, 'h') - 8px};
         }
       }
     `
diff --git a/src/code/index.js b/src/code/index.js
index 9d2ee87..5d275d3 100644
--- a/src/code/index.js
+++ b/src/code/index.js
@@ -80,7 +80,7 @@ class Code extends Component {
           }
 
           .act {
-            --size: 18px;
+            --wc-icon-size: 18px;
             margin: 0 6px;
             color: var(--color-grey-2);
             cursor: pointer;
diff --git a/src/collapse/index.js b/src/collapse/index.js
index 4295dc9..b4b961f 100644
--- a/src/collapse/index.js
+++ b/src/collapse/index.js
@@ -95,7 +95,7 @@ class CollapseItem extends Component {
 
         wc-icon {
           margin: 0 8px;
-          --size: 12px;
+          --wc-icon-size: 12px;
           color: #636465;
           transform: rotate(0);
           transition: transform 0.2s ease-in-out;
diff --git a/src/drawer/index.js b/src/drawer/index.js
index ad88d92..2ffafaa 100644
--- a/src/drawer/index.js
+++ b/src/drawer/index.js
@@ -84,7 +84,7 @@ class Drawer extends Component {
         user-select: none;
 
         wc-icon {
-          --size: 16px;
+          --wc-icon-size: 16px;
           margin-right: 8px;
           color: var(--color-grey-3);
           cursor: pointer;
diff --git a/src/dropdown/index.js b/src/dropdown/index.js
index c6cef81..8ea60f0 100644
--- a/src/dropdown/index.js
+++ b/src/dropdown/index.js
@@ -38,7 +38,7 @@ class Dropdown extends Component {
         padding: 0 8px;
 
         .arrow {
-          --size: 12px;
+          --wc-icon-size: 12px;
           margin-left: 6px;
           transform: rotate(-90deg);
         }
diff --git a/src/form/button.js b/src/form/button.js
index a519357..bc57e16 100644
--- a/src/form/button.js
+++ b/src/form/button.js
@@ -51,7 +51,7 @@ class Button extends Component {
           width: 100%;
           min-width: 1px;
           height: inherit;
-          padding: var(--button-padding, 0 4px);
+          padding: var(--wc-button-padding, 0 4px);
           line-height: 1;
           border: 1px solid transparent;
           border-radius: inherit;
@@ -71,7 +71,7 @@ class Button extends Component {
 
         .icon {
           margin-right: 4px;
-          --size: var(--icon-size, 14px);
+          --wc-icon-size: var(--wc-button-icon-size, 14px);
         }
       }
       :host(:focus-within) {
@@ -121,7 +121,7 @@ class Button extends Component {
           font-size: map.get($v, 'f');
 
           .icon {
-            --size: var(--icon-size, #{map.get($v, 'f')});
+            --wc-icon-size: var(--wc-button-icon-size, #{map.get($v, 'f')});
           }
         }
         :host([size='#{$s}'][circle]) {
diff --git a/src/form/input.js b/src/form/input.js
index 13dc14f..05df8bd 100644
--- a/src/form/input.js
+++ b/src/form/input.js
@@ -105,7 +105,7 @@ class Input extends Component {
         }
         /* ----- */
         .close {
-          --size: 18px;
+          --wc-icon-size: 18px;
           margin: 0 8px 0 4px;
           padding: 4px;
           border-radius: 50%;
@@ -118,7 +118,7 @@ class Input extends Component {
           }
         }
         .icon {
-          --size: 16px;
+          --wc-icon-size: 16px;
           margin: 0 8px 0 4px;
           color: var(--color-grey-2);
         }
@@ -192,7 +192,7 @@ class Input extends Component {
         }
 
         .icon {
-          --size: 24px;
+          --wc-icon-size: 24px;
           margin: 0 20px 0 4px;
         }
       }
@@ -231,7 +231,7 @@ class Input extends Component {
           font-size: 12px;
         }
         .icon {
-          --size: 14px;
+          --wc-icon-size: 14px;
         }
         .prepend,
         .append {
@@ -311,11 +311,11 @@ class Input extends Component {
             font-size: map.get($v, 'f');
           }
           .icon {
-            --size: #{map.get($v, 'f')};
+            --wc-icon-size: #{map.get($v, 'f')};
           }
           @if $s == 'xxxl' {
             .icon {
-              --size: 22px;
+              --wc-icon-size: 22px;
               margin: 0 12px 0 4px;
             }
           }
diff --git a/src/form/number.js b/src/form/number.js
index 0d6c034..602efee 100644
--- a/src/form/number.js
+++ b/src/form/number.js
@@ -141,7 +141,7 @@ class WcNumber extends Component {
           font-size: map.get($v, 'f');
 
           .icon {
-            --size: #{map.get($v, 'f')};
+            --wc-icon-size: #{map.get($v, 'f')};
           }
         }
         :host([size='#{$s}'][circle]) {
diff --git a/src/form/passwd.js b/src/form/passwd.js
index 79ceef5..6f4889c 100644
--- a/src/form/passwd.js
+++ b/src/form/passwd.js
@@ -78,7 +78,7 @@ class Passwd extends Component {
     css`
       .label {
         .icon {
-          --size: 16px;
+          --wc-icon-size: 16px;
           margin: 0 8px 0 4px;
           color: var(--color-grey-2);
           cursor: pointer;
@@ -120,7 +120,7 @@ class Passwd extends Component {
 
           @if $s == 'xxl' {
             .icon {
-              --size: 18px;
+              --wc-icon-size: 18px;
             }
           }
 
@@ -129,7 +129,7 @@ class Passwd extends Component {
               padding: 0 6px 0 10px;
             }
             .icon {
-              --size: 22px;
+              --wc-icon-size: 22px;
               margin: 0 12px 0 4px;
             }
           }
diff --git a/src/form/select.js b/src/form/select.js
index 8cc053d..f24d926 100644
--- a/src/form/select.js
+++ b/src/form/select.js
@@ -25,7 +25,7 @@ class Select extends Component {
   static styles = css`
     .icon {
       margin-right: 10px;
-      --size: 14px;
+      --wc-icon-size: 14px;
       line-height: 100%;
       transform: rotate(90deg);
       transition: transform 0.2s ease-in-out;
diff --git a/src/form/star.js b/src/form/star.js
index 08276b2..72e5eac 100644
--- a/src/form/star.js
+++ b/src/form/star.js
@@ -22,7 +22,7 @@ class Star extends Component {
       :host {
         display: flex;
         font-size: 14px;
-        --size: 32px;
+        --wc-icon-size: 32px;
         cursor: pointer;
         user-select: none;
       }
@@ -83,7 +83,7 @@ class Star extends Component {
 
       @loop $s, $v in $sizes {
         :host([size='#{$s}']) {
-          --size: #{map.get($v, 'h')};
+          --wc-icon-size: #{map.get($v, 'h')};
           font-size: map.get($v, 'f');
         }
       }
diff --git a/src/icon/index.js b/src/icon/index.js
index a44e704..647699f 100644
--- a/src/icon/index.js
+++ b/src/icon/index.js
@@ -29,8 +29,8 @@ class Icon extends Component {
   static styles = css`
     :host {
       display: inline-flex;
-      width: var(--size, 32px);
-      height: var(--size, 32px);
+      width: var(--wc-icon-size, 32px);
+      height: var(--wc-icon-size, 32px);
     }
     :host(:not([name])) {
       display: none;
diff --git a/src/image-preview/index.js b/src/image-preview/index.js
index 132c1ae..a027f58 100644
--- a/src/image-preview/index.js
+++ b/src/image-preview/index.js
@@ -66,7 +66,7 @@ class ImagePreview extends Component {
       background-color: #606266;
       border-color: #fff;
       border-radius: 50%;
-      --size: 22px;
+      --wc-icon-size: 22px;
     }
     .left,
     .right {
@@ -98,7 +98,7 @@ class ImagePreview extends Component {
       color: #e5e5e5;
       border-radius: 22px;
       transform: translateX(-50%);
-      --size: 22px;
+      --wc-icon-size: 22px;
       wc-icon {
         cursor: pointer;
       }
diff --git a/src/layer/index.js b/src/layer/index.js
index e577436..55fd01a 100644
--- a/src/layer/index.js
+++ b/src/layer/index.js
@@ -106,7 +106,7 @@ class Layer extends Component {
           color: var(--color-dark-2);
 
           wc-icon {
-            --size: 14px;
+            --wc-icon-size: 14px;
 
             &:hover {
               color: var(--color-red-1);
@@ -139,7 +139,7 @@ class Layer extends Component {
             border-radius: 3px;
             font-weight: normal;
             text-indent: 8px;
-            --size: 16px;
+            --wc-icon-size: 16px;
             color: var(--color-dark-1);
             box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
           }
diff --git a/src/notify/index.js b/src/notify/index.js
index b4ed352..79f6a6a 100644
--- a/src/notify/index.js
+++ b/src/notify/index.js
@@ -108,7 +108,7 @@ class Notify extends Component {
         line-height: 2;
 
         wc-icon {
-          --size: 14px;
+          --wc-icon-size: 14px;
           cursor: pointer;
         }
       }
diff --git a/src/option/index.js b/src/option/index.js
index 73f94cd..91f8d1e 100644
--- a/src/option/index.js
+++ b/src/option/index.js
@@ -64,7 +64,7 @@ class OptionGroup extends Component {
         color: var(--color-grey-2);
 
         .ico {
-          --size: 12px;
+          --wc-icon-size: 12px;
         }
       }
 
@@ -133,7 +133,7 @@ class Option extends Component {
         color: var(--color-dark-1);
 
         .ico {
-          --size: 12px;
+          --wc-icon-size: 12px;
           color: var(--color-grey-2);
         }
         .name {
diff --git a/src/popconfirm/index.js b/src/popconfirm/index.js
index 053606c..c61a72a 100644
--- a/src/popconfirm/index.js
+++ b/src/popconfirm/index.js
@@ -99,7 +99,7 @@ class Popconfirm extends Component {
         white-space: nowrap;
         wc-icon {
           margin-right: 5px;
-          --size: 14px;
+          --wc-icon-size: 14px;
         }
       }
 
diff --git a/src/result/index.js b/src/result/index.js
index de4150a..24eba67 100644
--- a/src/result/index.js
+++ b/src/result/index.js
@@ -39,7 +39,7 @@ class Result extends Component {
         }
       }
       :host([type='error']) .icon {
-        --size: 24px;
+        --wc-icon-size: 24px;
         background: #f56c6c;
       }
       :host([type='info']) .icon {
diff --git a/src/sandbox/index.js b/src/sandbox/index.js
index 9a8fb88..021f2f1 100644
--- a/src/sandbox/index.js
+++ b/src/sandbox/index.js
@@ -70,7 +70,7 @@ class Sandbox extends Component {
       border-right: 1px solid var(--color-plain-3);
       border-bottom: 1px solid var(--color-plain-3);
       background: var(--color-plain-1);
-      --size: 16px;
+      --wc-icon-size: 16px;
       cursor: pointer;
 
       &:hover:not([disabled]),
diff --git a/src/steps/index.js b/src/steps/index.js
index 57ee292..ee8208d 100644
--- a/src/steps/index.js
+++ b/src/steps/index.js
@@ -122,11 +122,11 @@ class Step extends Component {
       height: 26px;
       border: 1px solid var(--color-grey-1);
       border-radius: 50%;
-      --size: 14px;
+      --wc-icon-size: 14px;
 
       &.custom {
         border: 0;
-        --size: 26px;
+        --wc-icon-size: 26px;
       }
     }
     .group {
diff --git a/src/swipe/index.js b/src/swipe/index.js
index 768201b..2fd7984 100644
--- a/src/swipe/index.js
+++ b/src/swipe/index.js
@@ -131,7 +131,7 @@ class Swipe extends Component {
       background-color: #606266;
       border-color: #fff;
       border-radius: 50%;
-      --size: 12px;
+      --wc-icon-size: 12px;
       transition: opacity ease-in-out 0.2s;
       &:hover {
         opacity: 1 !important;
diff --git a/src/tabs/index.js b/src/tabs/index.js
index 0f55186..211388b 100644
--- a/src/tabs/index.js
+++ b/src/tabs/index.js
@@ -65,7 +65,7 @@ class Tabs extends Component {
         max-width: 120px;
         margin: 0 16px;
         padding: 0 6px;
-        --size: 16px;
+        --wc-icon-size: 16px;
         cursor: pointer;
 
         [slot='label'] {
diff --git a/src/tag/index.js b/src/tag/index.js
index e6fbb6a..c4503b7 100644
--- a/src/tag/index.js
+++ b/src/tag/index.js
@@ -100,7 +100,7 @@ class Tag extends Component {
             line-height: calc(map.get($v, 'h') - 2px);
           }
           .close-btn {
-            --size: 10px;
+            --wc-icon-size: 10px;
             transform: scale(map.get($v, 's'));
           }
         }
diff --git a/src/timeline/index.js b/src/timeline/index.js
index 7c914ee..2e34767 100644
--- a/src/timeline/index.js
+++ b/src/timeline/index.js
@@ -109,7 +109,7 @@ class Item extends Component {
       border-radius: 50%;
       background: var(--color-grey-1);
       color: #fff;
-      --size: 14px;
+      --wc-icon-size: 14px;
     }
     .group {
       flex: 1;
diff --git a/开发规范.md b/开发规范.md
index 3a13171..24fa4ca 100644
--- a/开发规范.md
+++ b/开发规范.md
@@ -22,4 +22,36 @@
   - `size=xxl`  加加大号, 44px
 
 4. 自带点击事件的组件, 统一增加"节流/防抖"逻辑
-  > 统一为增加 `lazy="1000"` 属性实现
\ No newline at end of file
+  > 统一为增加 `lazy="1000"` 属性实现
+
+
+5. 暗色主题
+各组件, 需要适配暗色主题。
+
+```css
+@media (prefers-color-scheme: dark) {
+  // ...
+}
+```
+
+6. 组件的额外自定义样式, 尽量使用css变量来做穿透
+各组件的穿透样式变量名, 需要带命名空间
+
+```css
+
+// 外部定义
+...
+--wc-button-border-color: #f30;
+...
+
+// 内部实现
+
+button {
+  ...
+  border: 1px solid var(--wc-button-border-color, var(--color-plain-1));
+  // or
+  border: 1px solid var(--wc-button-border-color, #f2f5fc);
+  ...
+}
+
+```