diff --git a/index.html b/index.html
index babfd24..c354acc 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,13 @@
     <meta name="keywords" content="quarkd,quark design,web components,webcomponents,quarkd组件库,跨技术栈组件库,跨技术栈组件库,customelement,custom element,移动端组件库">
     <meta name="description" content="Quarkd哈啰跨技术栈移动端组件库,web components组件库,浏览器原生组件库">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quark-static@latest/theme.css" />
+
+    <!-- 本地开发使用下面资源 -->
+    <!-- <link rel="stylesheet" href="../static/theme.css"> -->
+
+
     <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-VPD45X3FFK"></script>
 <script>
diff --git a/src/assets/styles/theme.scss b/src/assets/styles/theme.scss
deleted file mode 100644
index ce97b7c..0000000
--- a/src/assets/styles/theme.scss
+++ /dev/null
@@ -1,996 +0,0 @@
-
-
-:root {
-  --font-family-base: "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --link-font-color-dark: rgba(255, 255, 255, 0.87);
-
-  --header-bg-light: #fff;
-  --line-light: rgba(60, 60, 67, .12);
-  --text-font-color-light: rgba(60, 60, 67, .92);
-
-  --brand-color: #0da6e9;
-  --nav-link-color: #0da6e9;
-
-  --brand-color-light: #bcc0ff;
-
-  --mute-light: #f6f6f7;
-
-  --main-bg: #fff;
-
-  --main-shadow: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);
-
-  --text-font-color: rgba(60, 60, 67, .92);
-  --text-code-font-color: #476582;
-
-
-  --advantage-bg: conic-gradient(from -90deg at 110% 100%, #fff 0deg, #ebecf0 90deg, #ebecf0 1turn);
-  --we-believe-bg: conic-gradient(from -90deg at 110% 100%, #fff 0deg, #ebecf0 90deg, #ebecf0 1turn);
-  --what-we-do-bg: conic-gradient(from 90deg at -10% 100%, #bcc1cd 0deg, #bcc1cd 90deg, #fff 1turn);
-
-  --arrow-light-mode-icon: url('https://cdn.jsdelivr.net/npm/quark-static@latest/arrow-light-mode.png');
-
-  color: var(--text-font-color);
-  background-color: var(--main-bg);
-  font-family: var(--font-family-base);
-
-  animation: rainbow 40s linear infinite;
-
-  --vp-c-bg: #ffffff;
-  --vp-c-bg-alt: #f6f6f7;
-  --vp-c-bg-elv: #ffffff;
-  --vp-c-bg-soft: #f6f6f7;
-
-  --vp-c-white: #ffffff;
-  --vp-c-black: #000000;
-  --vp-c-neutral: var(--vp-c-black);
-  --vp-c-neutral-inverse: var(--vp-c-white);
-
-  --vp-nav-height: 64px;
-  --vp-nav-bg-color: var(--vp-c-bg);
-  --vp-button-brand-bg: var(--vp-c-brand-1);
-  --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-brand-1) 30%, var(--vp-c-brand-next));
-  --vp-home-hero-image-background-image: linear-gradient(-45deg, var(--vp-c-brand-1) 30%, var(--vp-c-brand-next));
-  --vp-home-hero-image-filter: blur(80px);
-
-  --vp-c-brand-1: #00a98e;
-  --vp-c-brand-light: #4ad1b4;
-  --vp-c-brand-lighter: #78fadc;
-  --vp-c-brand-dark: #008269;
-  --vp-c-brand-darker: #005d47;
-  --vp-c-brand-next: #009ff7;
-  --vp-button-brand-border: var(--vp-c-brand-light);
-  --vp-button-brand-text: var(--vp-c-white);
-  --vp-button-brand-hover-border: var(--vp-c-brand-light);
-  --vp-button-brand-hover-text: var(--vp-c-white);
-  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
-  --vp-button-brand-active-border: var(--vp-c-brand-light);
-  --vp-button-brand-active-text: var(--vp-c-white);
-  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
-
-  --vp-c-text-1: rgba(60, 60, 67);
-  --vp-c-text-2: rgba(60, 60, 67, .78);
-  --vp-c-text-3: rgba(60, 60, 67, .56);
-
-}
-
-
-
-.nav-item a {
-  color: var(--text-font-color-light);
-  font-family: var(--font-family-base);
-}
-.nav-item a:hover {
-  color: var(--brand-color);
-}
-.social-links a {
-  color: rgba(60, 60, 67, .7);
-}
-.social-links a:hover svg {
-  color: rgba(60, 60, 67, .92);
-  transition: color .25s;
-}
-.header .container {
-  border-bottom: 1px solid var(--line-light);
-  background-color: var(--main-bg);
-}
-.doc-content-document p {
-  color: var(--text-font-color);
-}
-.doc-content-document table {
-  border: 1px solid var(--line-light);
-}
-.doc-content-document table th,
-.doc-content-document table td {
-  border-left: 1px solid var(--line-light);
-  color: var(--text-font-color-light);
-}
-
-.doc-content-document table td {
-  border-top: 1px solid var(--line-light);
-}
-
-.doc-content-document table code {
-  color: var(--text-code-font-color);
-  background-color: var(--mute-light);
-}
-
-.doc-content-document table td:first-child code {
-  color: var(--text-code-font-color);
-}
-.doc-nav {
-  border-right: 1px solid var(--line-light);
-}
-.doc-content-document p > code {
-  color: var(--text-code-font-color);
-  background-color: var(--mute-light);
-}
-.doc-content-document strong {
-  color: var(--text-font-color);
-}
-.doc-content-document blockquote {
-  background-color: rgba(100, 108, 255, .08);
-}
-.doc-content-document blockquote p {
-  color: #454ce1;
-}
-
-.doc-content-document ul li,
-.doc-content-document ol li {
-  color: var(--text-font-color);
-}
-
-
-
-html.dark {
-  --link-font-color-dark: rgba(255, 255, 255, 0.87);
-  --main-bg: #23272f;
-  --text-font-color: rgba(255, 255, 255, 0.87);
-  --header-bg-light: #fff;
-
-  --text-font-color-light: rgba(255, 255, 255, 0.5);
-
-  --text-code-font-color: #c9def1;
-  --brand-color: #0da6e9;
-  --nav-link-color: #fff;
-  --brand-color-light: #bcc0ff;
-  --mute-light: #313136;
-  --line-light: rgba(82, 82, 89, .32);
-
-
-  --advantage-bg: conic-gradient(from 90deg at -10% 100%, #2b303b 0deg, #2b303b 90deg, #16181d 1turn);
-  --we-believe-bg: conic-gradient(from -90deg at 110% 100%, #2b303b 0deg, #16181d 90deg, #16181d 1turn);
-  --what-we-do-bg: conic-gradient(from 90deg at -10% 100%, #2b303b 0deg, #2b303b 90deg, #16181d 1turn);
-
-  --scroll-down-dark-color: var(--link-font-color-dark);
-  --arrow-dark-mode-icon: url('https://cdn.jsdelivr.net/npm/quark-static@latest/arrow-dark-mode.png');
-  --footer-bg: conic-gradient(from 90deg at -10% 100%, #2b303b 0deg, #2b303b 90deg, #16181d 1turn);
-
-  font-family: var(--font-family-base);
-  color: var(--link-font-color-dark);
-  background-color: var(--main-bg);
-}
-
-html.dark pre {
-  color: #1e1e20;
-}
-
-html.dark .paragraph {
-  color: var(--nav-link-color);
-}
-
-
-html.dark .nav-item .nav-active {
-  color: var(--brand-color);
-}
-
-html.dark .flyout-menu .menu-wrap {
-  background: var(--main-bg);
-  box-shadow:  0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);
-  border: 1px solid rgba(84, 84, 84, .48);
-}
-
-html.dark .flyout-menu .menu-group-title {
-  color: rgba(235, 235, 235, .38);
-}
-
-html.dark .flyout-menu .menu-link {
-  color: rgba(255, 255, 255, .87);
-}
-html.dark .flyout-menu .menu-link:hover {
-  color: #0da6e9;
-}
-
-
-html.dark .nav-item a:hover,
-html.dark .nav-item button:hover {
-  color: rgba(255 255 255 / 1);
-}
-html.dark .nav-item .nav-active {
-  color: #fff;
-}
-
-html.dark .social-links a:hover svg{
-  color: #fff;
-}
-
-html.dark .doc-nav a {
-  color: #fff;
-}
-html.dark .doc-nav a:hover {
-  color: var(--brand-color);
-}
-
-html.dark .translations:before, .appearance:before, .social-links:before {
-  background-color: rgba(60, 60, 67, 0.92);
-}
-
-
-html.dark .doc-content-document p > code {
-  color: var(--text-code-font-color);
-}
-html.dark .doc-content-document strong {
-  color: var(--text-font-color);
-}
-html.dark .doc-content-document blockquote p {
-  color: #bcc0ff;
-}
-html.dark .doc-content-document a {
-  color: #9499ff;
-  text-decoration: underline;
-}
-html.dark .doc-content-document a:hover {
-  color: #bcc0ff;
-}
-
-html.dark .doc-content-document table {
-  border: 1px solid #333;
-}
-html.dark .doc-content-document table th,
-html.dark .doc-content-document table td {
-  border-left: 1px solid #333;
-  color: #fff;
-}
-html.dark .doc-content-document table td  {
-  border-top: 1px solid #333;
-}
-
-html.dark .doc-content-document ul li,
-html.dark .doc-content-document ol li
- html.dark .doc-content-document strong {
-  color: var(--text-font-color);
-}
-
-
-
-@keyframes rainbow {
-  0% {
-      --vp-c-brand-1: #00a98e;
-      --vp-c-brand-light: #4ad1b4;
-      --vp-c-brand-lighter: #78fadc;
-      --vp-c-brand-dark: #008269;
-      --vp-c-brand-darker: #005d47;
-      --vp-c-brand-next: #009ff7
-  }
-
-  1.25% {
-      --vp-c-brand-1: #00a996;
-      --vp-c-brand-light: #4bd1bd;
-      --vp-c-brand-lighter: #79fbe5;
-      --vp-c-brand-dark: #008371;
-      --vp-c-brand-darker: #005e4f;
-      --vp-c-brand-next: #009dfa
-  }
-
-  2.5% {
-      --vp-c-brand-1: #00a99f;
-      --vp-c-brand-light: #4cd1c6;
-      --vp-c-brand-lighter: #7afbee;
-      --vp-c-brand-dark: #00837a;
-      --vp-c-brand-darker: #005e56;
-      --vp-c-brand-next: #009bfc
-  }
-
-  3.75% {
-      --vp-c-brand-1: #00a9a7;
-      --vp-c-brand-light: #4dd1cf;
-      --vp-c-brand-lighter: #7bfbf8;
-      --vp-c-brand-dark: #008382;
-      --vp-c-brand-darker: #005e5e;
-      --vp-c-brand-next: #0098fd
-  }
-
-  5% {
-      --vp-c-brand-1: #00a9b0;
-      --vp-c-brand-light: #4ed1d7;
-      --vp-c-brand-lighter: #7dfaff;
-      --vp-c-brand-dark: #00838a;
-      --vp-c-brand-darker: #005e65;
-      --vp-c-brand-next: #0096fd
-  }
-
-  6.25% {
-      --vp-c-brand-1: #00a9b8;
-      --vp-c-brand-light: #4fd1e0;
-      --vp-c-brand-lighter: #7efaff;
-      --vp-c-brand-dark: #008391;
-      --vp-c-brand-darker: #005e6d;
-      --vp-c-brand-next: #0093fd
-  }
-
-  7.5% {
-      --vp-c-brand-1: #00a9c0;
-      --vp-c-brand-light: #50d0e8;
-      --vp-c-brand-lighter: #7ffaff;
-      --vp-c-brand-dark: #008399;
-      --vp-c-brand-darker: #005e74;
-      --vp-c-brand-next: #2e90fc
-  }
-
-  8.75% {
-      --vp-c-brand-1: #00a8c7;
-      --vp-c-brand-light: #51d0f0;
-      --vp-c-brand-lighter: #81f9ff;
-      --vp-c-brand-dark: #0082a0;
-      --vp-c-brand-darker: #005e7b;
-      --vp-c-brand-next: #4d8dfa
-  }
-
-  10% {
-      --vp-c-brand-1: #00a8cf;
-      --vp-c-brand-light: #52cff7;
-      --vp-c-brand-lighter: #82f8ff;
-      --vp-c-brand-dark: #0082a7;
-      --vp-c-brand-darker: #005e81;
-      --vp-c-brand-next: #638af8
-  }
-
-  11.25% {
-      --vp-c-brand-1: #00a7d5;
-      --vp-c-brand-light: #53cfff;
-      --vp-c-brand-lighter: #84f8ff;
-      --vp-c-brand-dark: #0081ae;
-      --vp-c-brand-darker: #005d87;
-      --vp-c-brand-next: #7587f5
-  }
-
-  12.5% {
-      --vp-c-brand-1: #00a6dc;
-      --vp-c-brand-light: #55ceff;
-      --vp-c-brand-lighter: #85f7ff;
-      --vp-c-brand-dark: #0081b4;
-      --vp-c-brand-darker: #005d8d;
-      --vp-c-brand-next: #8583f1
-  }
-
-  13.75% {
-      --vp-c-brand-1: #00a6e2;
-      --vp-c-brand-light: #56cdff;
-      --vp-c-brand-lighter: #87f6ff;
-      --vp-c-brand-dark: #0080b9;
-      --vp-c-brand-darker: #005c93;
-      --vp-c-brand-next: #9280ed
-  }
-
-  15% {
-      --vp-c-brand-1: #00a4e7;
-      --vp-c-brand-light: #57ccff;
-      --vp-c-brand-lighter: #88f4ff;
-      --vp-c-brand-dark: #007fbf;
-      --vp-c-brand-darker: #005b98;
-      --vp-c-brand-next: #9f7ce9
-  }
-
-  16.25% {
-      --vp-c-brand-1: #00a3ec;
-      --vp-c-brand-light: #58caff;
-      --vp-c-brand-lighter: #89f3ff;
-      --vp-c-brand-dark: #007ec3;
-      --vp-c-brand-darker: #005b9c;
-      --vp-c-brand-next: #aa78e3
-  }
-
-  17.5% {
-      --vp-c-brand-1: #00a2f1;
-      --vp-c-brand-light: #58c9ff;
-      --vp-c-brand-lighter: #8af1ff;
-      --vp-c-brand-dark: #007dc8;
-      --vp-c-brand-darker: #0059a0;
-      --vp-c-brand-next: #b574dd
-  }
-
-  18.75% {
-      --vp-c-brand-1: #00a0f4;
-      --vp-c-brand-light: #59c7ff;
-      --vp-c-brand-lighter: #8bf0ff;
-      --vp-c-brand-dark: #007bcb;
-      --vp-c-brand-darker: #0058a3;
-      --vp-c-brand-next: #be71d7
-  }
-
-  20% {
-      --vp-c-brand-1: #009ff7;
-      --vp-c-brand-light: #5ac5ff;
-      --vp-c-brand-lighter: #8ceeff;
-      --vp-c-brand-dark: #007ace;
-      --vp-c-brand-darker: #0057a6;
-      --vp-c-brand-next: #c76dd1
-  }
-
-  21.25% {
-      --vp-c-brand-1: #009dfa;
-      --vp-c-brand-light: #5ac3ff;
-      --vp-c-brand-lighter: #8decff;
-      --vp-c-brand-dark: #0078d0;
-      --vp-c-brand-darker: #0055a8;
-      --vp-c-brand-next: #cf69c9
-  }
-
-  22.5% {
-      --vp-c-brand-1: #009bfc;
-      --vp-c-brand-light: #5bc1ff;
-      --vp-c-brand-lighter: #8de9ff;
-      --vp-c-brand-dark: #0076d2;
-      --vp-c-brand-darker: #0053aa;
-      --vp-c-brand-next: #d566c2
-  }
-
-  23.75% {
-      --vp-c-brand-1: #0098fd;
-      --vp-c-brand-light: #5bbfff;
-      --vp-c-brand-lighter: #8ee7ff;
-      --vp-c-brand-dark: #0074d3;
-      --vp-c-brand-darker: #0051ab;
-      --vp-c-brand-next: #dc63ba
-  }
-
-  25% {
-      --vp-c-brand-1: #0096fd;
-      --vp-c-brand-light: #5bbcff;
-      --vp-c-brand-lighter: #8ee4ff;
-      --vp-c-brand-dark: #0071d4;
-      --vp-c-brand-darker: #004fab;
-      --vp-c-brand-next: #e160b3
-  }
-
-  26.25% {
-      --vp-c-brand-1: #0093fd;
-      --vp-c-brand-light: #5bb9ff;
-      --vp-c-brand-lighter: #8ee1ff;
-      --vp-c-brand-dark: #006fd3;
-      --vp-c-brand-darker: #004dab;
-      --vp-c-brand-next: #e65eab
-  }
-
-  27.5% {
-      --vp-c-brand-1: #2e90fc;
-      --vp-c-brand-light: #69b6ff;
-      --vp-c-brand-lighter: #99deff;
-      --vp-c-brand-dark: #006cd2;
-      --vp-c-brand-darker: #004baa;
-      --vp-c-brand-next: #e95ca2
-  }
-
-  28.75% {
-      --vp-c-brand-1: #4d8dfa;
-      --vp-c-brand-light: #7eb3ff;
-      --vp-c-brand-lighter: #abdbff;
-      --vp-c-brand-dark: #0069d1;
-      --vp-c-brand-darker: #0048a9;
-      --vp-c-brand-next: #ed5a9a
-  }
-
-  30% {
-      --vp-c-brand-1: #638af8;
-      --vp-c-brand-light: #8fb0ff;
-      --vp-c-brand-lighter: #bbd7ff;
-      --vp-c-brand-dark: #3066cf;
-      --vp-c-brand-darker: #0045a7;
-      --vp-c-brand-next: #ef5992
-  }
-
-  31.25% {
-      --vp-c-brand-1: #7587f5;
-      --vp-c-brand-light: #9fadff;
-      --vp-c-brand-lighter: #cad4ff;
-      --vp-c-brand-dark: #4963cc;
-      --vp-c-brand-darker: #0941a4;
-      --vp-c-brand-next: #f15989
-  }
-
-  32.5% {
-      --vp-c-brand-1: #8583f1;
-      --vp-c-brand-light: #aea9ff;
-      --vp-c-brand-lighter: #d8d1ff;
-      --vp-c-brand-dark: #5b5fc8;
-      --vp-c-brand-darker: #2e3ea1;
-      --vp-c-brand-next: #f25981
-  }
-
-  33.75% {
-      --vp-c-brand-1: #9280ed;
-      --vp-c-brand-light: #bca6ff;
-      --vp-c-brand-lighter: #e6cdff;
-      --vp-c-brand-dark: #6a5cc4;
-      --vp-c-brand-darker: #413a9d;
-      --vp-c-brand-next: #f25a79
-  }
-
-  35% {
-      --vp-c-brand-1: #9f7ce9;
-      --vp-c-brand-light: #c8a2ff;
-      --vp-c-brand-lighter: #f2c9ff;
-      --vp-c-brand-dark: #7758c0;
-      --vp-c-brand-darker: #503598;
-      --vp-c-brand-next: #f25c71
-  }
-
-  36.25% {
-      --vp-c-brand-1: #aa78e3;
-      --vp-c-brand-light: #d39eff;
-      --vp-c-brand-lighter: #fec6ff;
-      --vp-c-brand-dark: #8354bb;
-      --vp-c-brand-darker: #5c3193;
-      --vp-c-brand-next: #f15e69
-  }
-
-  37.5% {
-      --vp-c-brand-1: #b574dd;
-      --vp-c-brand-light: #de9bff;
-      --vp-c-brand-lighter: #ffc2ff;
-      --vp-c-brand-dark: #8d50b5;
-      --vp-c-brand-darker: #662c8e;
-      --vp-c-brand-next: #ef6061
-  }
-
-  38.75% {
-      --vp-c-brand-1: #be71d7;
-      --vp-c-brand-light: #e897ff;
-      --vp-c-brand-lighter: #ffbfff;
-      --vp-c-brand-dark: #964baf;
-      --vp-c-brand-darker: #6f2688;
-      --vp-c-brand-next: #ed635a
-  }
-
-  40% {
-      --vp-c-brand-1: #c76dd1;
-      --vp-c-brand-light: #f194fa;
-      --vp-c-brand-lighter: #ffbcff;
-      --vp-c-brand-dark: #9e47a9;
-      --vp-c-brand-darker: #772082;
-      --vp-c-brand-next: #eb6552
-  }
-
-  41.25% {
-      --vp-c-brand-1: #cf69c9;
-      --vp-c-brand-light: #f991f2;
-      --vp-c-brand-lighter: #ffb9ff;
-      --vp-c-brand-dark: #a643a2;
-      --vp-c-brand-darker: #7e197c;
-      --vp-c-brand-next: #e8694b
-  }
-
-  42.5% {
-      --vp-c-brand-1: #d566c2;
-      --vp-c-brand-light: #ff8deb;
-      --vp-c-brand-lighter: #ffb6ff;
-      --vp-c-brand-dark: #ac3f9b;
-      --vp-c-brand-darker: #841075;
-      --vp-c-brand-next: #e46c44
-  }
-
-  43.75% {
-      --vp-c-brand-1: #dc63ba;
-      --vp-c-brand-light: #ff8be3;
-      --vp-c-brand-lighter: #ffb3ff;
-      --vp-c-brand-dark: #b23b94;
-      --vp-c-brand-darker: #89046f;
-      --vp-c-brand-next: #e06f3d
-  }
-
-  45% {
-      --vp-c-brand-1: #e160b3;
-      --vp-c-brand-light: #ff88db;
-      --vp-c-brand-lighter: #ffb1ff;
-      --vp-c-brand-dark: #b7378c;
-      --vp-c-brand-darker: #8d0068;
-      --vp-c-brand-next: #db7336
-  }
-
-  46.25% {
-      --vp-c-brand-1: #e65eab;
-      --vp-c-brand-light: #ff86d2;
-      --vp-c-brand-lighter: #ffaffb;
-      --vp-c-brand-dark: #bb3485;
-      --vp-c-brand-darker: #910060;
-      --vp-c-brand-next: #d77630
-  }
-
-  47.5% {
-      --vp-c-brand-1: #e95ca2;
-      --vp-c-brand-light: #ff84ca;
-      --vp-c-brand-lighter: #ffadf2;
-      --vp-c-brand-dark: #be317d;
-      --vp-c-brand-darker: #940059;
-      --vp-c-brand-next: #d17a2a
-  }
-
-  48.75% {
-      --vp-c-brand-1: #ed5a9a;
-      --vp-c-brand-light: #ff83c1;
-      --vp-c-brand-lighter: #fface9;
-      --vp-c-brand-dark: #c12f75;
-      --vp-c-brand-darker: #970052;
-      --vp-c-brand-next: #cc7d24
-  }
-
-  50% {
-      --vp-c-brand-1: #ef5992;
-      --vp-c-brand-light: #ff82b8;
-      --vp-c-brand-lighter: #ffabe0;
-      --vp-c-brand-dark: #c32d6d;
-      --vp-c-brand-darker: #98004b;
-      --vp-c-brand-next: #c6811e
-  }
-
-  51.25% {
-      --vp-c-brand-1: #f15989;
-      --vp-c-brand-light: #ff82af;
-      --vp-c-brand-lighter: #ffabd7;
-      --vp-c-brand-dark: #c52d65;
-      --vp-c-brand-darker: #9a0043;
-      --vp-c-brand-next: #bf8418
-  }
-
-  52.5% {
-      --vp-c-brand-1: #f25981;
-      --vp-c-brand-light: #ff82a7;
-      --vp-c-brand-lighter: #ffabce;
-      --vp-c-brand-dark: #c52e5e;
-      --vp-c-brand-darker: #9a003c;
-      --vp-c-brand-next: #b98713
-  }
-
-  53.75% {
-      --vp-c-brand-1: #f25a79;
-      --vp-c-brand-light: #ff839e;
-      --vp-c-brand-lighter: #ffacc5;
-      --vp-c-brand-dark: #c62f56;
-      --vp-c-brand-darker: #9a0035;
-      --vp-c-brand-next: #b28a0f
-  }
-
-  55% {
-      --vp-c-brand-1: #f25c71;
-      --vp-c-brand-light: #ff8496;
-      --vp-c-brand-lighter: #ffadbc;
-      --vp-c-brand-dark: #c5314e;
-      --vp-c-brand-darker: #99002e;
-      --vp-c-brand-next: #ab8d0c
-  }
-
-  56.25% {
-      --vp-c-brand-1: #f15e69;
-      --vp-c-brand-light: #ff868d;
-      --vp-c-brand-lighter: #ffaeb4;
-      --vp-c-brand-dark: #c43447;
-      --vp-c-brand-darker: #980027;
-      --vp-c-brand-next: #a3900b
-  }
-
-  57.5% {
-      --vp-c-brand-1: #ef6061;
-      --vp-c-brand-light: #ff8885;
-      --vp-c-brand-lighter: #ffb0ab;
-      --vp-c-brand-dark: #c3373f;
-      --vp-c-brand-darker: #970020;
-      --vp-c-brand-next: #9c920d
-  }
-
-  58.75% {
-      --vp-c-brand-1: #ed635a;
-      --vp-c-brand-light: #ff8a7d;
-      --vp-c-brand-lighter: #ffb2a3;
-      --vp-c-brand-dark: #c13b38;
-      --vp-c-brand-darker: #940619;
-      --vp-c-brand-next: #949510
-  }
-
-  60% {
-      --vp-c-brand-1: #eb6552;
-      --vp-c-brand-light: #ff8d76;
-      --vp-c-brand-lighter: #ffb59b;
-      --vp-c-brand-dark: #be3e31;
-      --vp-c-brand-darker: #921111;
-      --vp-c-brand-next: #8b9715
-  }
-
-  61.25% {
-      --vp-c-brand-1: #e8694b;
-      --vp-c-brand-light: #ff8f6e;
-      --vp-c-brand-lighter: #ffb794;
-      --vp-c-brand-dark: #bb4229;
-      --vp-c-brand-darker: #8f1908;
-      --vp-c-brand-next: #83991b
-  }
-
-  62.5% {
-      --vp-c-brand-1: #e46c44;
-      --vp-c-brand-light: #ff9367;
-      --vp-c-brand-lighter: #ffba8c;
-      --vp-c-brand-dark: #b74622;
-      --vp-c-brand-darker: #8c1f00;
-      --vp-c-brand-next: #7a9b21
-  }
-
-  63.75% {
-      --vp-c-brand-1: #e06f3d;
-      --vp-c-brand-light: #ff9661;
-      --vp-c-brand-lighter: #ffbd86;
-      --vp-c-brand-dark: #b44a1a;
-      --vp-c-brand-darker: #882500;
-      --vp-c-brand-next: #719d27
-  }
-
-  65% {
-      --vp-c-brand-1: #db7336;
-      --vp-c-brand-light: #ff995a;
-      --vp-c-brand-lighter: #ffc17f;
-      --vp-c-brand-dark: #af4e11;
-      --vp-c-brand-darker: #842a00;
-      --vp-c-brand-next: #679e2e
-  }
-
-  66.25% {
-      --vp-c-brand-1: #d77630;
-      --vp-c-brand-light: #ff9c54;
-      --vp-c-brand-lighter: #ffc47a;
-      --vp-c-brand-dark: #ab5206;
-      --vp-c-brand-darker: #802f00;
-      --vp-c-brand-next: #5da035
-  }
-
-  67.5% {
-      --vp-c-brand-1: #d17a2a;
-      --vp-c-brand-light: #fea04f;
-      --vp-c-brand-lighter: #ffc774;
-      --vp-c-brand-dark: #a55600;
-      --vp-c-brand-darker: #7b3300;
-      --vp-c-brand-next: #51a13c
-  }
-
-  68.75% {
-      --vp-c-brand-1: #cc7d24;
-      --vp-c-brand-light: #f8a34a;
-      --vp-c-brand-lighter: #ffca70;
-      --vp-c-brand-dark: #a05900;
-      --vp-c-brand-darker: #773700;
-      --vp-c-brand-next: #44a244
-  }
-
-  70% {
-      --vp-c-brand-1: #c6811e;
-      --vp-c-brand-light: #f2a646;
-      --vp-c-brand-lighter: #ffce6c;
-      --vp-c-brand-dark: #9b5d00;
-      --vp-c-brand-darker: #713b00;
-      --vp-c-brand-next: #34a44b
-  }
-
-  71.25% {
-      --vp-c-brand-1: #bf8418;
-      --vp-c-brand-light: #ebaa42;
-      --vp-c-brand-lighter: #ffd168;
-      --vp-c-brand-dark: #956000;
-      --vp-c-brand-darker: #6c3e00;
-      --vp-c-brand-next: #1ba553
-  }
-
-  72.5% {
-      --vp-c-brand-1: #b98713;
-      --vp-c-brand-light: #e4ad3f;
-      --vp-c-brand-lighter: #ffd466;
-      --vp-c-brand-dark: #8e6300;
-      --vp-c-brand-darker: #674100;
-      --vp-c-brand-next: #00a65b
-  }
-
-  73.75% {
-      --vp-c-brand-1: #b28a0f;
-      --vp-c-brand-light: #ddb03d;
-      --vp-c-brand-lighter: #ffd764;
-      --vp-c-brand-dark: #886600;
-      --vp-c-brand-darker: #614400;
-      --vp-c-brand-next: #00a663
-  }
-
-  75% {
-      --vp-c-brand-1: #ab8d0c;
-      --vp-c-brand-light: #d5b33c;
-      --vp-c-brand-lighter: #ffda63;
-      --vp-c-brand-dark: #816900;
-      --vp-c-brand-darker: #5b4700;
-      --vp-c-brand-next: #00a76c
-  }
-
-  76.25% {
-      --vp-c-brand-1: #a3900b;
-      --vp-c-brand-light: #cdb63c;
-      --vp-c-brand-lighter: #f8dd63;
-      --vp-c-brand-dark: #7a6b00;
-      --vp-c-brand-darker: #554900;
-      --vp-c-brand-next: #00a874
-  }
-
-  77.5% {
-      --vp-c-brand-1: #9c920d;
-      --vp-c-brand-light: #c5b83d;
-      --vp-c-brand-lighter: #f0e064;
-      --vp-c-brand-dark: #736e00;
-      --vp-c-brand-darker: #4e4b00;
-      --vp-c-brand-next: #00a87d
-  }
-
-  78.75% {
-      --vp-c-brand-1: #949510;
-      --vp-c-brand-light: #bdbb3e;
-      --vp-c-brand-lighter: #e7e366;
-      --vp-c-brand-dark: #6c7000;
-      --vp-c-brand-darker: #474d00;
-      --vp-c-brand-next: #00a985
-  }
-
-  80% {
-      --vp-c-brand-1: #8b9715;
-      --vp-c-brand-light: #b4bd41;
-      --vp-c-brand-lighter: #dee668;
-      --vp-c-brand-dark: #647200;
-      --vp-c-brand-darker: #404f00;
-      --vp-c-brand-next: #00a98e
-  }
-
-  81.25% {
-      --vp-c-brand-1: #83991b;
-      --vp-c-brand-light: #abc045;
-      --vp-c-brand-lighter: #d4e86c;
-      --vp-c-brand-dark: #5c7400;
-      --vp-c-brand-darker: #385100;
-      --vp-c-brand-next: #00a996
-  }
-
-  82.5% {
-      --vp-c-brand-1: #7a9b21;
-      --vp-c-brand-light: #a2c249;
-      --vp-c-brand-lighter: #cbea70;
-      --vp-c-brand-dark: #537600;
-      --vp-c-brand-darker: #2f5200;
-      --vp-c-brand-next: #00a99f
-  }
-
-  83.75% {
-      --vp-c-brand-1: #719d27;
-      --vp-c-brand-light: #98c44e;
-      --vp-c-brand-lighter: #c1ec75;
-      --vp-c-brand-dark: #4a7700;
-      --vp-c-brand-darker: #255300;
-      --vp-c-brand-next: #00a9a7
-  }
-
-  85% {
-      --vp-c-brand-1: #679e2e;
-      --vp-c-brand-light: #8ec654;
-      --vp-c-brand-lighter: #b7ee7a;
-      --vp-c-brand-dark: #407900;
-      --vp-c-brand-darker: #185500;
-      --vp-c-brand-next: #00a9b0
-  }
-
-  86.25% {
-      --vp-c-brand-1: #5da035;
-      --vp-c-brand-light: #84c75a;
-      --vp-c-brand-lighter: #acf080;
-      --vp-c-brand-dark: #357a0a;
-      --vp-c-brand-darker: #015600;
-      --vp-c-brand-next: #00a9b8
-  }
-
-  87.5% {
-      --vp-c-brand-1: #51a13c;
-      --vp-c-brand-light: #79c961;
-      --vp-c-brand-lighter: #a1f287;
-      --vp-c-brand-dark: #277b16;
-      --vp-c-brand-darker: #005700;
-      --vp-c-brand-next: #00a9c0
-  }
-
-  88.75% {
-      --vp-c-brand-1: #44a244;
-      --vp-c-brand-light: #6dca68;
-      --vp-c-brand-lighter: #96f48e;
-      --vp-c-brand-dark: #117c1f;
-      --vp-c-brand-darker: #005700;
-      --vp-c-brand-next: #00a8c7
-  }
-
-  90% {
-      --vp-c-brand-1: #34a44b;
-      --vp-c-brand-light: #60cc70;
-      --vp-c-brand-lighter: #89f595;
-      --vp-c-brand-dark: #007d28;
-      --vp-c-brand-darker: #005801;
-      --vp-c-brand-next: #00a8cf
-  }
-
-  91.25% {
-      --vp-c-brand-1: #1ba553;
-      --vp-c-brand-light: #51cd77;
-      --vp-c-brand-lighter: #7cf69d;
-      --vp-c-brand-dark: #007e30;
-      --vp-c-brand-darker: #00590d;
-      --vp-c-brand-next: #00a7d5
-  }
-
-  92.5% {
-      --vp-c-brand-1: #00a65b;
-      --vp-c-brand-light: #48ce80;
-      --vp-c-brand-lighter: #75f7a6;
-      --vp-c-brand-dark: #007f38;
-      --vp-c-brand-darker: #005917;
-      --vp-c-brand-next: #00a6dc
-  }
-
-  93.75% {
-      --vp-c-brand-1: #00a663;
-      --vp-c-brand-light: #48cf88;
-      --vp-c-brand-lighter: #75f8ae;
-      --vp-c-brand-dark: #008040;
-      --vp-c-brand-darker: #005a20;
-      --vp-c-brand-next: #00a6e2
-  }
-
-  95% {
-      --vp-c-brand-1: #00a76c;
-      --vp-c-brand-light: #49cf91;
-      --vp-c-brand-lighter: #76f9b7;
-      --vp-c-brand-dark: #008049;
-      --vp-c-brand-darker: #005b28;
-      --vp-c-brand-next: #00a4e7
-  }
-
-  96.25% {
-      --vp-c-brand-1: #00a874;
-      --vp-c-brand-light: #49d099;
-      --vp-c-brand-lighter: #76f9c0;
-      --vp-c-brand-dark: #008151;
-      --vp-c-brand-darker: #005c30;
-      --vp-c-brand-next: #00a3ec
-  }
-
-  97.5% {
-      --vp-c-brand-1: #00a87d;
-      --vp-c-brand-light: #49d0a2;
-      --vp-c-brand-lighter: #77fac9;
-      --vp-c-brand-dark: #008159;
-      --vp-c-brand-darker: #005c37;
-      --vp-c-brand-next: #00a2f1
-  }
-
-  98.75% {
-      --vp-c-brand-1: #00a985;
-      --vp-c-brand-light: #4ad1ab;
-      --vp-c-brand-lighter: #77fad3;
-      --vp-c-brand-dark: #008261;
-      --vp-c-brand-darker: #005d3f;
-      --vp-c-brand-next: #00a0f4
-  }
-
-  to {
-      --vp-c-brand-1: #00a98e;
-      --vp-c-brand-light: #4ad1b4;
-      --vp-c-brand-lighter: #78fadc;
-      --vp-c-brand-dark: #008269;
-      --vp-c-brand-darker: #005d47;
-      --vp-c-brand-next: #009ff7
-  }
-}
diff --git a/src/docs_vue/main.ts b/src/docs_vue/main.ts
index 2fdf9ff..295a3c1 100644
--- a/src/docs_vue/main.ts
+++ b/src/docs_vue/main.ts
@@ -8,9 +8,6 @@ import "@/assets/styles/reset.scss";
 // demo 文档样式
 import "@/assets/styles/md-style.scss";
 
-// 主题 light or dark
-import "@/assets/styles/theme.scss";
-
 if (isMobile) {
   location.replace("https://quark-ecosystem.github.io/quarkd-docs/h5/demo#/");
 }