From 61b3b43527bde63de09aa110e7f357a5f3b7a6c9 Mon Sep 17 00:00:00 2001
From: mantou132 <709922234@qq.com>
Date: Sat, 7 Sep 2024 18:51:23 +0800
Subject: [PATCH] [gem] Element level style(only shadow)

Closed #197
---
 .../duoyun-ui/src/elements/action-text.ts     |  18 ++-
 packages/duoyun-ui/src/elements/alert.ts      |  17 +-
 packages/duoyun-ui/src/elements/area-chart.ts | 118 ++++++++------
 packages/duoyun-ui/src/elements/avatar.ts     |  17 +-
 .../duoyun-ui/src/elements/base/scroll.ts     |   1 -
 packages/duoyun-ui/src/elements/button.ts     |  63 ++++----
 packages/duoyun-ui/src/elements/carousel.ts   |  14 +-
 .../duoyun-ui/src/elements/chart-tooltip.ts   |  25 +--
 packages/duoyun-ui/src/elements/coach-mark.ts |  12 +-
 packages/duoyun-ui/src/elements/code-block.ts |  22 +--
 .../duoyun-ui/src/elements/color-panel.ts     |  23 +--
 .../duoyun-ui/src/elements/contextmenu.ts     |   3 -
 packages/duoyun-ui/src/elements/divider.ts    |  23 ++-
 packages/duoyun-ui/src/elements/flow.ts       |  23 ++-
 packages/duoyun-ui/src/elements/help-text.ts  |  18 +--
 .../duoyun-ui/src/elements/image-preview.ts   |  42 ++---
 .../duoyun-ui/src/elements/input-capture.ts   |  24 +--
 packages/duoyun-ui/src/elements/input.ts      |   6 +
 packages/duoyun-ui/src/elements/line-chart.ts | 148 +++++++++---------
 packages/duoyun-ui/src/elements/modal.ts      |   3 -
 .../duoyun-ui/src/elements/page-loadbar.ts    |  16 +-
 packages/duoyun-ui/src/elements/pagination.ts |  12 +-
 .../duoyun-ui/src/elements/placeholder.ts     |  17 +-
 packages/duoyun-ui/src/elements/rate.ts       |  19 ++-
 .../duoyun-ui/src/elements/scatter-chart.ts   |  94 +++++------
 packages/duoyun-ui/src/elements/slider.ts     |  34 ++--
 packages/duoyun-ui/src/elements/switch.ts     |  21 +--
 packages/duoyun-ui/src/elements/tabs.ts       |  11 +-
 packages/duoyun-ui/src/elements/tag.ts        |  23 ++-
 packages/duoyun-ui/src/elements/wait.ts       |  35 +++--
 packages/gem-book/src/element/elements/404.ts |   3 +-
 .../src/element/elements/edit-link.ts         |   2 +
 .../gem-book/src/element/elements/footer.ts   |   3 +-
 .../gem-book/src/element/elements/loadbar.ts  |  16 +-
 .../gem-book/src/element/elements/main.ts     |   2 +
 .../gem-book/src/element/elements/meta.ts     |   3 +-
 .../gem-book/src/element/elements/nav-logo.ts |  13 +-
 packages/gem-book/src/element/elements/nav.ts |   2 +
 .../gem-book/src/element/elements/rel-link.ts |  15 +-
 .../gem-book/src/element/elements/sidebar.ts  |   2 +
 packages/gem-book/src/element/elements/toc.ts |   2 +
 packages/gem-book/src/element/index.ts        |  17 +-
 packages/gem-book/src/element/store.ts        |   4 +-
 packages/gem-devtools/src/elements/section.ts |   4 +-
 packages/gem/src/helper/theme.ts              |  19 ++-
 packages/gem/src/lib/element.ts               |  45 ++++--
 46 files changed, 556 insertions(+), 498 deletions(-)

diff --git a/packages/duoyun-ui/src/elements/action-text.ts b/packages/duoyun-ui/src/elements/action-text.ts
index 172e9af7..89fa94b3 100644
--- a/packages/duoyun-ui/src/elements/action-text.ts
+++ b/packages/duoyun-ui/src/elements/action-text.ts
@@ -1,6 +1,7 @@
 import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element';
 import { adoptedStyle, customElement, attribute, state, slot, aria, shadow, mounted } from '@mantou/gem/lib/decorators';
 import { addListener, css } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { theme, getSemanticColor } from '../lib/theme';
 import { commonHandle } from '../lib/hotkeys';
@@ -8,17 +9,19 @@ import { focusStyle } from '../lib/styles';
 
 import './tooltip';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ color: '', activeColor: '' });
+
 const style = createCSSSheet(css`
   :host {
     overflow: hidden;
     text-overflow: ellipsis;
     cursor: default;
     line-height: 1.5;
-    color: var(--color, inherit);
+    color: ${elementTheme.color};
     border-radius: ${theme.normalRound};
   }
   :host(:where(:hover, :state(active))) {
-    color: var(--color, ${theme.primaryColor});
+    color: ${elementTheme.activeColor};
     text-decoration: underline;
   }
   :host(:where(:lang(zh), :lang(ja), :lang(kr))) {
@@ -46,13 +49,14 @@ export class DuoyunActionTextElement extends GemElement {
   @mounted()
   #init = () => addListener(this, 'keydown', commonHandle);
 
+  @updateTheme()
+  #theme = () => {
+    const color = getSemanticColor(this.color) || this.color;
+    return { color: color || 'inherit', activeColor: color || theme.primaryColor };
+  };
+
   render = () => {
     return html`
-      <style>
-        :host([color]) {
-          --color: ${getSemanticColor(this.color) || this.color};
-        }
-      </style>
       <dy-tooltip .content=${this.tooltip}>
         <slot></slot>
       </dy-tooltip>
diff --git a/packages/duoyun-ui/src/elements/alert.ts b/packages/duoyun-ui/src/elements/alert.ts
index 91fb3a6f..a4b04b93 100644
--- a/packages/duoyun-ui/src/elements/alert.ts
+++ b/packages/duoyun-ui/src/elements/alert.ts
@@ -2,6 +2,7 @@
 import { adoptedStyle, customElement, attribute, property, slot, aria, shadow } from '@mantou/gem/lib/decorators';
 import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element';
 import { css } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { theme, getSemanticColor } from '../lib/theme';
 import { icons } from '../lib/icons';
@@ -9,13 +10,15 @@ import { icons } from '../lib/icons';
 import './use';
 import './action-text';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ color: '' });
+
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
     display: flex;
     flex-direction: column;
     padding: 1.2em 1.5em;
     gap: 0.8em;
-    border: 2px solid var(--color);
+    border: 2px solid ${elementTheme.color};
     border-radius: ${theme.normalRound};
   }
   .header {
@@ -35,7 +38,7 @@ const style = createCSSSheet(css`
   }
   .icon {
     width: 1.5em;
-    color: var(--color);
+    color: ${elementTheme.color};
   }
   .footer {
     text-align: right;
@@ -72,18 +75,12 @@ export class DuoyunAlertElement extends GemElement {
     }
   }
 
-  get #color() {
-    return getSemanticColor(this.status) || theme.neutralColor;
-  }
+  @updateTheme()
+  #theme = () => ({ color: getSemanticColor(this.status) || theme.neutralColor });
 
   render = () => {
     const icon = this.#icon;
     return html`
-      <style>
-        :host {
-          --color: ${this.#color};
-        }
-      </style>
       <div class="header">
         <div class="title">${this.header}</div>
         ${icon ? html`<dy-use class="icon" .element=${icon}></dy-use>` : ''}
diff --git a/packages/duoyun-ui/src/elements/area-chart.ts b/packages/duoyun-ui/src/elements/area-chart.ts
index 57f1bd42..213fcb1c 100644
--- a/packages/duoyun-ui/src/elements/area-chart.ts
+++ b/packages/duoyun-ui/src/elements/area-chart.ts
@@ -1,6 +1,7 @@
-import { createState, html, svg } from '@mantou/gem/lib/element';
-import { customElement, emitter, Emitter, memo, mounted, property } from '@mantou/gem/lib/decorators';
-import { addListener, classMap } from '@mantou/gem/lib/utils';
+import { createCSSSheet, createState, html, svg } from '@mantou/gem/lib/element';
+import { adoptedStyle, customElement, emitter, Emitter, memo, mounted, property } from '@mantou/gem/lib/decorators';
+import { addListener, classMap, css } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { isNotNullish } from '../lib/types';
 import { theme } from '../lib/theme';
@@ -35,10 +36,65 @@ export function defaultSymbolRender({ point, color, isHover, chart }: SymbolRend
   `;
 }
 
+const [elementTheme, updateTheme] = useDecoratorTheme({
+  lineStrokeWidth: 0,
+  areaHighlightOpacity: 0,
+  areaPointer: '',
+  areaOpacity: 0,
+  zoomLeft: '',
+  zoomRight: '',
+  symbolStrokeWidth: 0,
+});
+
+const style = createCSSSheet(css`
+  .hit-line {
+    pointer-events: stroke;
+  }
+  .hit-line:hover + .line {
+    stroke-width: ${elementTheme.lineStrokeWidth};
+  }
+  .hit-line:hover + .line + .area {
+    opacity: ${elementTheme.areaHighlightOpacity};
+  }
+  .hit-line + .line,
+  .hover-line,
+  .disabled {
+    pointer-events: none;
+  }
+  .area {
+    pointer-events: ${elementTheme.areaPointer};
+  }
+  .area:hover {
+    filter: brightness(1.1);
+  }
+  .line.disabled {
+    stroke: ${theme.disabledColor};
+    opacity: 0.3;
+  }
+  .area {
+    opacity: ${elementTheme.areaOpacity};
+  }
+  .area.disabled {
+    fill: ${theme.disabledColor};
+    opacity: 0.1;
+  }
+  .symbol {
+    pointer-events: none;
+    fill: ${theme.backgroundColor};
+    stroke-width: ${elementTheme.symbolStrokeWidth};
+  }
+  dy-chart-zoom {
+    width: calc(100% - ${elementTheme.zoomLeft} - ${elementTheme.zoomRight});
+    margin-inline-start: ${elementTheme.zoomLeft};
+    align-self: flex-start;
+  }
+`);
+
 /**
  * @customElement dy-area-chart
  */
 @customElement('dy-area-chart')
+@adoptedStyle(style)
 export class DuoyunAreaChartElement extends DuoyunChartBaseElement {
   @property fill = true;
   @property stroke = true;
@@ -299,56 +355,23 @@ export class DuoyunAreaChartElement extends DuoyunChartBaseElement {
     return () => ChartTooltip.close();
   };
 
+  @updateTheme()
+  #theme = () => ({
+    lineStrokeWidth: this.getSVGPixel(2),
+    symbolStrokeWidth: this.getSVGPixel(1),
+    areaHighlightOpacity: this.#gradient ? 0.4 : 0.2,
+    areaOpacity: this.stack ? 1 : this.#gradient ? 0.3 : 0.15,
+    areaPointer: this.stack ? 'all' : 'none',
+    zoomLeft: `${-this.viewBox[0] * this.getStageScale()}px`,
+    zoomRight: `${(this.viewBox[2] + this.viewBox[0] - this.stageWidth) * this.getStageScale()}px`,
+  });
+
   render = () => {
     if (this.loading) return this.renderLoading();
     if (this.noData) return this.renderNotData();
     if (!this.contentRect.width || !this.#sequences?.length) return html``;
-    const areaOpacity = this.stack ? 1 : this.#gradient ? 0.3 : 0.15;
-    const areaHighlightOpacity = this.#gradient ? 0.4 : 0.2;
 
     return html`
-      <style>
-        .hit-line {
-          pointer-events: stroke;
-        }
-        .hit-line:hover + .line {
-          stroke-width: ${this.getSVGPixel(2)}px;
-        }
-        .hit-line:hover + .line + .area {
-          opacity: ${areaHighlightOpacity};
-        }
-        .hit-line + .line,
-        .hover-line,
-        .disabled {
-          pointer-events: none;
-        }
-        .area {
-          pointer-events: ${this.stack ? 'all' : 'none'};
-        }
-        .area:hover {
-          filter: brightness(1.1);
-        }
-        .line.disabled {
-          stroke: ${theme.disabledColor};
-          opacity: 0.3;
-        }
-        .area.disabled {
-          fill: ${theme.disabledColor};
-          opacity: 0.1;
-        }
-        .symbol {
-          pointer-events: none;
-          fill: ${theme.backgroundColor};
-          stroke-width: ${this.getSVGPixel(1)};
-        }
-        dy-chart-zoom {
-          --left: ${-this.viewBox[0] * this.getStageScale()}px;
-          --right: ${(this.viewBox[2] + this.viewBox[0] - this.stageWidth) * this.getStageScale()}px;
-          width: calc(100% - var(--left) - var(--right));
-          margin-inline-start: var(--left);
-          align-self: flex-start;
-        }
-      </style>
       ${svg`
         <svg aria-hidden="true" part=${
           DuoyunChartBaseElement.chart
@@ -409,7 +432,6 @@ export class DuoyunAreaChartElement extends DuoyunChartBaseElement {
                     ? svg`
                         <path
                           class=${classMap({ area: true, disabled })}
-                          opacity=${areaOpacity}
                           fill=${this.#gradient ? `url(#${this.genGradientId(revertIndex)})` : this.colors[revertIndex]}
                           d=${this.#areas[revertIndex]}
                           @pointerover=${() => this.stack && this.#state({ hoverSequence: value })}
diff --git a/packages/duoyun-ui/src/elements/avatar.ts b/packages/duoyun-ui/src/elements/avatar.ts
index 9bec86af..a726b581 100644
--- a/packages/duoyun-ui/src/elements/avatar.ts
+++ b/packages/duoyun-ui/src/elements/avatar.ts
@@ -11,12 +11,15 @@ import {
 } from '@mantou/gem/lib/decorators';
 import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element';
 import { css, exportPartsMap } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { theme } from '../lib/theme';
 
 import { Status, getStatusColor } from './status-light';
 import './tooltip';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ color: '' });
+
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
     cursor: default;
@@ -60,7 +63,6 @@ const style = createCSSSheet(css`
       #0000 var(--mask),
       #fff calc(var(--mask) + 0.5px)
     );
-    -webkit-mask-image: var(--m);
     mask-image: var(--m);
   }
   .status {
@@ -71,7 +73,7 @@ const style = createCSSSheet(css`
     border-radius: 10em;
     aspect-ratio: 1;
     transform: translate(50%, -50%);
-    background-color: var(--status);
+    background-color: ${elementTheme.color};
   }
 `);
 
@@ -99,14 +101,11 @@ export class DuoyunAvatarElement extends GemElement {
   @attribute crossorigin: 'anonymous' | 'use-credentials';
   @boolattribute square: boolean;
 
+  @updateTheme()
+  #theme = () => ({ color: getStatusColor(this.status) || 'inherit' });
+
   render = () => {
-    const status = getStatusColor(this.status);
     return html`
-      <style>
-        :host {
-          --status: ${status || 'inherit'};
-        }
-      </style>
       <dy-tooltip .content=${this.tooltip}>
         <img
           class="img"
@@ -134,9 +133,7 @@ const groupStyle = createCSSSheet(css`
     --m-left: radial-gradient(circle at calc(-50% + var(--gap)) center, var(--gradient));
     --m-right: radial-gradient(circle at calc(150% - var(--gap)) center, var(--gradient));
     --m: none;
-    -webkit-mask-image: var(--m);
     mask-image: var(--m);
-    -webkit-mask-composite: intersect;
     mask-composite: intersect;
   }
   .item:not(:last-child, :hover) {
diff --git a/packages/duoyun-ui/src/elements/base/scroll.ts b/packages/duoyun-ui/src/elements/base/scroll.ts
index ced4e1cb..65f00199 100644
--- a/packages/duoyun-ui/src/elements/base/scroll.ts
+++ b/packages/duoyun-ui/src/elements/base/scroll.ts
@@ -40,7 +40,6 @@ const style = createCSSSheet(css`
   }
   :host(:where(:state(top-overflow), :state(bottom-overflow), :state(left-overflow), :state(right-overflow))) {
     --m: linear-gradient(to var(--mask-dir), #fff0, #000 var(--mask-start), #000 var(--mask-end), #fff0 100%);
-    -webkit-mask-image: var(--m);
     mask-image: var(--m);
   }
 `);
diff --git a/packages/duoyun-ui/src/elements/button.ts b/packages/duoyun-ui/src/elements/button.ts
index 6584b26a..ea555505 100644
--- a/packages/duoyun-ui/src/elements/button.ts
+++ b/packages/duoyun-ui/src/elements/button.ts
@@ -13,7 +13,8 @@ import {
 } from '@mantou/gem/lib/decorators';
 import { createCSSSheet, GemElement, html, createRef } from '@mantou/gem/lib/element';
 import { history } from '@mantou/gem/lib/history';
-import { addListener, css, QueryString } from '@mantou/gem/lib/utils';
+import { addListener, classMap, css, QueryString } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { theme, getSemanticColor } from '../lib/theme';
 import { icons } from '../lib/icons';
@@ -27,9 +28,10 @@ import { ContextMenuItem, ContextMenu } from './contextmenu';
 
 import './use';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ bg: '', color: '' });
+
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
-    --color: ${theme.backgroundColor};
     display: inline-flex;
     align-items: stretch;
     line-height: 1.2;
@@ -48,9 +50,9 @@ const style = createCSSSheet(css`
   .content,
   .dropdown {
     position: relative;
-    color: var(--color);
-    background: var(--bg);
-    border: 1px solid var(--bg);
+    color: ${elementTheme.color};
+    background: ${elementTheme.bg};
+    border: 1px solid ${elementTheme.bg};
   }
   .content {
     flex-grow: 1;
@@ -62,6 +64,10 @@ const style = createCSSSheet(css`
     min-width: 3em;
     border-radius: inherit;
   }
+  .content.corner {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
   .dropdown {
     display: flex;
     border-radius: inherit;
@@ -90,26 +96,15 @@ const style = createCSSSheet(css`
     padding: 0.5em;
   }
   :host([type='reverse']) :where(.content, .dropdown) {
-    color: var(--bg);
-    border-color: var(--bg);
+    color: ${elementTheme.bg};
+    border-color: ${elementTheme.bg};
     background: transparent;
   }
   :host([borderless]) :where(.content, .dropdown) {
     border-color: transparent;
   }
-  :host([color='normal']) {
-    --bg: ${theme.primaryColor};
-  }
-  :host([color='danger']) {
-    --bg: ${theme.negativeColor};
-  }
-  :host([color='cancel']:not([disabled])) {
-    --bg: ${theme.hoverBackgroundColor};
-    --color: ${theme.textColor};
-  }
   :host([disabled]) {
     cursor: not-allowed;
-    --bg: ${theme.disabledColor};
   }
   :where(:host(:state(active)) .content, .content:where(:hover), .dropdown:where(:hover, :state(active)))::after {
     content: '';
@@ -200,19 +195,29 @@ export class DuoyunButtonElement extends GemElement {
   @mounted()
   #init = () => addListener(this, 'click', this.#onClick);
 
+  @updateTheme()
+  #theme = () => {
+    if (this.disabled) return { bg: theme.disabledColor, color: theme.backgroundColor };
+    switch (this.color) {
+      case 'normal':
+        return { bg: theme.primaryColor, color: theme.backgroundColor };
+      case 'danger':
+        return { bg: theme.negativeColor, color: theme.backgroundColor };
+      case 'cancel':
+        return { bg: theme.hoverBackgroundColor, color: theme.textColor };
+      default:
+        return { bg: getSemanticColor(this.color) || this.color || theme.primaryColor, color: theme.backgroundColor };
+    }
+  };
+
   render = () => {
     return html`
-      <style>
-        :host {
-          --bg: ${this.#color};
-        }
-      </style>
       <div
         role="button"
         tabindex=${-Number(this.disabled)}
         aria-disabled=${this.disabled}
         @keydown=${commonHandle}
-        class="content"
+        class=${classMap({ content: true, corner: !!this.dropdown })}
         part=${DuoyunButtonElement.button}
       >
         ${this.icon ? html`<dy-use class="icon" .element=${this.icon}></dy-use>` : ''}
@@ -220,16 +225,6 @@ export class DuoyunButtonElement extends GemElement {
       </div>
       ${this.dropdown
         ? html`
-            <style>
-              div.content {
-                border-start-end-radius: 0;
-                border-end-end-radius: 0;
-              }
-              span.dropdown {
-                border-start-start-radius: 0;
-                border-end-start-radius: 0;
-              }
-            </style>
             <dy-use
               ref=${this.#dropdownRef.ref}
               class="dropdown"
diff --git a/packages/duoyun-ui/src/elements/carousel.ts b/packages/duoyun-ui/src/elements/carousel.ts
index 6f034318..f158917f 100644
--- a/packages/duoyun-ui/src/elements/carousel.ts
+++ b/packages/duoyun-ui/src/elements/carousel.ts
@@ -14,6 +14,7 @@ import {
   effect,
 } from '@mantou/gem/lib/decorators';
 import { css, styleMap, classMap, addListener } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { theme } from '../lib/theme';
 import { icons } from '../lib/icons';
@@ -26,6 +27,8 @@ import './paragraph';
 import './button';
 import './more';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ bgImg: '' });
+
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
     display: block;
@@ -36,6 +39,7 @@ const style = createCSSSheet(css`
     /** use prevImg */
     background-size: cover;
     background-position: center;
+    background-image: ${elementTheme.bgImg};
   }
   .list,
   .item,
@@ -230,7 +234,7 @@ export class DuoyunCarouselElement extends GemElement {
   #prevImg?: string;
 
   @memo((i) => [i.#state.currentIndex])
-  #updateImg = () => (_: number[], oldDeps?: number[]) => {
+  #updateImg = (_: number[], oldDeps?: number[]) => {
     if (oldDeps) {
       this.#prevImg = this.#items?.[oldDeps[0]]?.img;
       this.#isFirstRender = false;
@@ -250,15 +254,13 @@ export class DuoyunCarouselElement extends GemElement {
   @effect((i) => [i.#state.currentIndex])
   #emitterEvent = () => this.change(this.#state.currentIndex);
 
+  @updateTheme()
+  #theme = () => ({ bgImg: this.#prevImg ? `url(${this.#prevImg})` : 'none' });
+
   render = () => {
     const { currentIndex } = this.#state;
 
     return html`
-      <style>
-        :host {
-          background-image: ${this.#prevImg ? `url(${this.#prevImg})` : 'none'};
-        }
-      </style>
       <ul class="list" role="region">
         ${this.#items?.map(
           ({ img, title, background, description, action, tag, onClick }, index) => html`
diff --git a/packages/duoyun-ui/src/elements/chart-tooltip.ts b/packages/duoyun-ui/src/elements/chart-tooltip.ts
index dbb06c76..169aec3e 100644
--- a/packages/duoyun-ui/src/elements/chart-tooltip.ts
+++ b/packages/duoyun-ui/src/elements/chart-tooltip.ts
@@ -2,9 +2,12 @@ import { connectStore, adoptedStyle, customElement, shadow, effect } from '@mant
 import { createCSSSheet, GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { css, styleMap, classMap } from '@mantou/gem/lib/utils';
 import { useStore } from '@mantou/gem/lib/store';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { theme } from '../lib/theme';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ top: '', left: '', width: '' });
+
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
     position: fixed;
@@ -14,6 +17,8 @@ const style = createCSSSheet(css`
     padding: 1em;
     line-height: 1.2;
     width: max-content;
+    top: ${elementTheme.top};
+    left: ${elementTheme.left};
   }
   .title {
     font-size: 1.125em;
@@ -21,6 +26,7 @@ const style = createCSSSheet(css`
   }
   .body {
     font-size: 0.875em;
+    width: ${elementTheme.width};
     padding: 0.75em;
     color: ${theme.textColor};
     background-color: ${theme.backgroundColor};
@@ -123,18 +129,19 @@ export class DuoyunChartTooltipElement extends GemElement {
     }
   };
 
+  @updateTheme()
+  #theme = () => {
+    const { values, render } = store.data;
+    return {
+      left: `${store.x}px`,
+      top: `${store.y}px`,
+      width: `${render ? 'auto' : values && values.length > 5 ? 20 : 15}em`,
+    };
+  };
+
   render = () => {
     const { title, values, render } = store.data;
     return html`
-      <style>
-        :host {
-          top: ${store.y}px;
-          left: ${store.x}px;
-        }
-        .body {
-          width: ${render ? 'auto' : values && values.length > 5 ? 20 : 15}em;
-        }
-      </style>
       <div class="body" role="tooltip">
         ${render
           ? render(store.data)
diff --git a/packages/duoyun-ui/src/elements/coach-mark.ts b/packages/duoyun-ui/src/elements/coach-mark.ts
index 33bc59a2..20bf64ce 100644
--- a/packages/duoyun-ui/src/elements/coach-mark.ts
+++ b/packages/duoyun-ui/src/elements/coach-mark.ts
@@ -13,6 +13,7 @@ import { html, createCSSSheet } from '@mantou/gem/lib/element';
 import { addListener, css } from '@mantou/gem/lib/utils';
 import { useStore } from '@mantou/gem/lib/store';
 import { splice } from '@mantou/gem/helper/i18n';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { theme, getSemanticColor } from '../lib/theme';
 import { locale } from '../lib/locale';
@@ -83,6 +84,8 @@ async function nextTour() {
   }
 }
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ color: '' });
+
 const style = createCSSSheet(css`
   :host {
     position: absolute;
@@ -92,6 +95,7 @@ const style = createCSSSheet(css`
     width: 3em;
     aspect-ratio: 1;
     border-radius: 10em;
+    color: ${elementTheme.color};
   }
   :host([size='small']) {
     transform: translate(-50%, -50%) scale(0.8);
@@ -216,14 +220,12 @@ export class DuoyunCoachMarkElement extends DuoyunVisibleBaseElement {
     this.#open();
   };
 
+  @updateTheme()
+  #theme = () => ({ color: getSemanticColor(this.color) || this.color || theme.informativeColor });
+
   render = () => {
     if (!this.#tour) return noneTemplate;
     return html`
-      <style>
-        :host {
-          color: ${getSemanticColor(this.color) || this.color || theme.informativeColor};
-        }
-      </style>
       <span class="ring"></span>
       <span class="ring"></span>
       <span class="ring"></span>
diff --git a/packages/duoyun-ui/src/elements/code-block.ts b/packages/duoyun-ui/src/elements/code-block.ts
index 8dd14241..a9a62b49 100644
--- a/packages/duoyun-ui/src/elements/code-block.ts
+++ b/packages/duoyun-ui/src/elements/code-block.ts
@@ -203,6 +203,9 @@ const langAliases: Record<string, string> = {
   yml: 'yaml',
 };
 
+const lineHeight = 1.5;
+const padding = 1;
+
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
     position: relative;
@@ -241,12 +244,8 @@ const style = createCSSSheet(css`
     border: none;
     background: transparent;
     scrollbar-width: thin;
-  }
-  .code::-webkit-scrollbar {
-    height: 0.5em;
-  }
-  .code::-webkit-scrollbar-thumb {
-    border-radius: inherit;
+    padding: ${padding}em;
+    line-height: ${lineHeight};
   }
   .token.comment,
   .token.prolog,
@@ -313,7 +312,7 @@ const style = createCSSSheet(css`
     cursor: help;
   }
   @media print {
-    code {
+    .code {
       border-left: 5px solid ${theme.borderColor};
       white-space: pre-wrap;
       word-break: break-word;
@@ -363,6 +362,7 @@ export class DuoyunCodeBlockElement extends DuoyunVisibleBaseElement {
   #init = () => {
     const ob = new MutationObserver(() => this.update());
     ob.observe(this, { childList: true, characterData: true, subtree: true });
+    this.addEventListener('show', this.#updateHtml, { once: true });
     return () => ob.disconnect();
   };
 
@@ -391,8 +391,6 @@ export class DuoyunCodeBlockElement extends DuoyunVisibleBaseElement {
   };
 
   render() {
-    const lineHeight = 1.5;
-    const padding = 1;
     return html`
       ${this.highlight
         ? this.#getRanges(this.highlight).map(
@@ -408,12 +406,6 @@ export class DuoyunCodeBlockElement extends DuoyunVisibleBaseElement {
           )
         : ''}
       <code ref=${this.#codeRef.ref} class="code">${this.#getParts(this.textContent || '')}</code>
-      <style>
-        code {
-          padding: ${padding}em;
-          line-height: ${lineHeight};
-        }
-      </style>
     `;
   }
 }
diff --git a/packages/duoyun-ui/src/elements/color-panel.ts b/packages/duoyun-ui/src/elements/color-panel.ts
index 9b811776..d4524859 100644
--- a/packages/duoyun-ui/src/elements/color-panel.ts
+++ b/packages/duoyun-ui/src/elements/color-panel.ts
@@ -12,6 +12,7 @@ import {
 } from '@mantou/gem/lib/decorators';
 import { createCSSSheet, createState, GemElement, html } from '@mantou/gem/lib/element';
 import { css, styleMap, classMap } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import {
   HexColor,
@@ -36,6 +37,8 @@ import './use';
 import './input';
 import './select';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ h: 0, s: 0, l: 0, a: 0 });
+
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
     display: flex;
@@ -43,8 +46,8 @@ const style = createCSSSheet(css`
     gap: 1em;
     width: 20em;
     font-size: 0.875em;
-    --hsl: hsl(var(--h), var(--s), var(--l));
-    --hue: hsl(var(--h), 100%, 50%);
+    --hsl: hsl(${elementTheme.h}, ${elementTheme.s}, ${elementTheme.l});
+    --hue: hsl(${elementTheme.h}, 100%, 50%);
     --alpha: linear-gradient(var(--hue), transparent),
       conic-gradient(transparent 0.25turn, #d3cfcf 0.25turn 0.5turn, transparent 0.5turn 0.75turn, #d3cfcf 0.75turn) top
         left / 1.2em 1.2em repeat;
@@ -315,17 +318,15 @@ export class DuoyunColorPanelElement extends GemElement {
     this.change(result.sRGBHex);
   };
 
+  @updateTheme()
+  #theme = () => {
+    const { h, s, l, a } = this.#state;
+    return { h: h * 360, s: s * 100, l: l * 100, a };
+  };
+
   render = () => {
-    const { mode, grabbingHue, grabbingSV, grabbingA, h, s, l, a, sa, v, str } = this.#state;
+    const { mode, grabbingHue, grabbingSV, grabbingA, h, a, sa, v, str } = this.#state;
     return html`
-      <style>
-        :host {
-          --h: ${h * 360};
-          --s: ${s * 100}%;
-          --l: ${l * 100}%;
-          --a: ${a};
-        }
-      </style>
       <div class="color">
         <dy-gesture class="area" @pan=${this.#onPanSV} @end=${this.#onPanEnd}>
           <div
diff --git a/packages/duoyun-ui/src/elements/contextmenu.ts b/packages/duoyun-ui/src/elements/contextmenu.ts
index 80bce510..7fdfece3 100644
--- a/packages/duoyun-ui/src/elements/contextmenu.ts
+++ b/packages/duoyun-ui/src/elements/contextmenu.ts
@@ -108,9 +108,6 @@ const style = createCSSSheet(css`
     box-shadow: 0 7px 14px rgba(0, 0, 0, calc(${theme.maskAlpha} - 0.1));
     scrollbar-width: none;
   }
-  .menu::-webkit-scrollbar {
-    width: 0;
-  }
 `);
 
 /**
diff --git a/packages/duoyun-ui/src/elements/divider.ts b/packages/duoyun-ui/src/elements/divider.ts
index 567be9ef..c0a6a0eb 100644
--- a/packages/duoyun-ui/src/elements/divider.ts
+++ b/packages/duoyun-ui/src/elements/divider.ts
@@ -1,16 +1,22 @@
 // https://spectrum.adobe.com/page/divider/
 import { adoptedStyle, customElement, attribute, aria, shadow, effect } from '@mantou/gem/lib/decorators';
-import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element';
+import { GemElement, createCSSSheet } from '@mantou/gem/lib/element';
 import { css } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { theme, getSemanticColor } from '../lib/theme';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ width: '', height: '', color: '' });
+
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
     display: block;
     border-radius: 10px;
     align-self: stretch;
     background: currentColor;
+    width: ${elementTheme.width};
+    height: ${elementTheme.height};
+    color: ${elementTheme.color};
   }
 `);
 
@@ -57,7 +63,7 @@ export class DuoyunDividerElement extends GemElement {
     return 'auto';
   }
 
-  get #bgColor() {
+  get #color() {
     if (this.color) return getSemanticColor(this.color) || this.color;
     switch (this.size) {
       case 'large':
@@ -72,15 +78,6 @@ export class DuoyunDividerElement extends GemElement {
     this.internals.ariaOrientation = this.#orientation;
   };
 
-  render = () => {
-    return html`
-      <style>
-        :host {
-          width: ${this.#width};
-          height: ${this.#height};
-          color: ${this.#bgColor};
-        }
-      </style>
-    `;
-  };
+  @updateTheme()
+  #theme = () => ({ width: this.#width, height: this.#height, color: this.#color });
 }
diff --git a/packages/duoyun-ui/src/elements/flow.ts b/packages/duoyun-ui/src/elements/flow.ts
index 6c2abc9d..ce2f681f 100644
--- a/packages/duoyun-ui/src/elements/flow.ts
+++ b/packages/duoyun-ui/src/elements/flow.ts
@@ -3,6 +3,7 @@
 import { adoptedStyle, customElement, property, part, state, shadow, memo, effect } from '@mantou/gem/lib/decorators';
 import { createCSSSheet, createRef, createState, html, svg, TemplateResult } from '@mantou/gem/lib/element';
 import { css, styleMap, exportPartsMap } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 import type { ElkNode, ElkExtendedEdge, ElkEdgeSection, LayoutOptions, ElkShape, ElkPoint } from 'elkjs';
 import ELK from 'elkjs/lib/elk.bundled.js';
 
@@ -187,11 +188,16 @@ export type Node = Modify<
   }
 >;
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ opacity: 0, width: '', height: '' });
+
 const canvasStyle = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
     display: block;
     position: relative;
     flex-shrink: 0;
+    opacity: ${elementTheme.opacity};
+    width: ${elementTheme.width};
+    height: ${elementTheme.height};
   }
   .node {
     height: 100%;
@@ -454,17 +460,20 @@ export class DuoyunFlowCanvasElement extends DuoyunResizeBaseElement {
     }
   };
 
+  @updateTheme()
+  #theme = () => {
+    const { width, height } = this.graph || {};
+    return {
+      opacity: this.#isReady ? 1 : 0,
+      width: width ? `${width}px` : '100%',
+      height: height ? `${height}px` : '100%',
+    };
+  };
+
   render = () => {
     if (!this.graph) return html``;
     const { children, edges, width, height } = this.graph;
     return html`
-      <style>
-        :host {
-          opacity: ${this.#isReady ? 1 : 0};
-          width: ${width ? `${width}px` : '100%'};
-          height: ${height ? `${height}px` : '100%'};
-        }
-      </style>
       <!-- edge -->
       ${width && height
         ? svg`
diff --git a/packages/duoyun-ui/src/elements/help-text.ts b/packages/duoyun-ui/src/elements/help-text.ts
index 18f16ebe..80dae1d4 100644
--- a/packages/duoyun-ui/src/elements/help-text.ts
+++ b/packages/duoyun-ui/src/elements/help-text.ts
@@ -1,14 +1,18 @@
 import { adoptedStyle, customElement, attribute, slot, shadow } from '@mantou/gem/lib/decorators';
-import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element';
+import { GemElement, createCSSSheet } from '@mantou/gem/lib/element';
 import { css } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { getStatusColor } from './status-light';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ color: '' });
+
 const style = createCSSSheet(css`
   :host {
     margin-block: 0.2em;
     font-size: 0.875em;
     line-height: 1.5;
+    color: ${elementTheme.color};
   }
 `);
 
@@ -28,14 +32,6 @@ export class DuoyunHelpTextElement extends GemElement {
     return this.status || 'neutral';
   }
 
-  render = () => {
-    return html`
-      <style>
-        :host {
-          color: ${getStatusColor(this.#status)};
-        }
-      </style>
-      <slot></slot>
-    `;
-  };
+  @updateTheme()
+  #theme = () => ({ color: getStatusColor(this.#status) });
 }
diff --git a/packages/duoyun-ui/src/elements/image-preview.ts b/packages/duoyun-ui/src/elements/image-preview.ts
index c6a20243..f803aabc 100644
--- a/packages/duoyun-ui/src/elements/image-preview.ts
+++ b/packages/duoyun-ui/src/elements/image-preview.ts
@@ -8,7 +8,8 @@ import {
   effect,
 } from '@mantou/gem/lib/decorators';
 import { createCSSSheet, createState, GemElement, html } from '@mantou/gem/lib/element';
-import { css, styleMap } from '@mantou/gem/lib/utils';
+import { css } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { theme, getSemanticColor } from '../lib/theme';
 import { compressionImage } from '../lib/image';
@@ -18,9 +19,10 @@ import { focusStyle } from '../lib/styles';
 
 import './use';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ color: '', progress: '' });
+
 const style = createCSSSheet(css`
   :host {
-    --color: initial;
     position: relative;
     aspect-ratio: 1;
     background: conic-gradient(
@@ -51,7 +53,7 @@ const style = createCSSSheet(css`
   .desc {
     position: relative;
     color: ${theme.backgroundColor};
-    background: var(--color);
+    background: ${elementTheme.color};
     border-radius: 10em;
     padding: 0 0.5em;
     line-height: 1.5;
@@ -59,6 +61,10 @@ const style = createCSSSheet(css`
   .mask {
     background-color: rgba(0, 0, 0, calc(${theme.maskAlpha} + 0.4));
   }
+  .progress {
+    opacity: 0.4;
+    background: linear-gradient(to top, ${elementTheme.color} ${elementTheme.progress}, transparent ${elementTheme.progress});,
+  }
   .icon {
     width: 1.5em;
     color: ${theme.backgroundColor};
@@ -67,7 +73,7 @@ const style = createCSSSheet(css`
     cursor: pointer;
   }
   .status .icon {
-    color: var(--color);
+    color: ${elementTheme.color};
   }
 `);
 
@@ -97,10 +103,6 @@ export class DuoyunImagePreviewElement extends GemElement {
     return this.status || 'default';
   }
 
-  get #color() {
-    return getSemanticColor(this.#status);
-  }
-
   get #icon() {
     switch (this.#status) {
       case 'negative':
@@ -127,30 +129,20 @@ export class DuoyunImagePreviewElement extends GemElement {
     }
   };
 
+  @updateTheme()
+  #theme = () => ({
+    progress: `${this.progress}%`,
+    color: this.progress ? theme.informativeColor : getSemanticColor(this.#status) || 'none',
+  });
+
   render = () => {
     if (!this.file) return html``;
     const { previewUrl } = this.#state;
-    const color = this.progress ? theme.informativeColor : this.#color;
     return html`
-      ${color
-        ? html`
-            <style>
-              :host {
-                --color: ${color} !important;
-              }
-            </style>
-          `
-        : ''}
       ${previewUrl ? html`<img class="preview" alt=${this.file.name} src=${previewUrl}></img>` : ''}
       ${this.progress
         ? html`
-            <div
-              class="mask status"
-              style=${styleMap({
-                opacity: '0.4',
-                background: `linear-gradient(to top, ${color} ${this.progress}%, transparent ${this.progress}%);`,
-              })}
-            ></div>
+            <div class="mask status progress"></div>
             <div class="desc" role="progressbar">${Math.floor(this.progress)}%</div>
           `
         : this.#status !== 'default'
diff --git a/packages/duoyun-ui/src/elements/input-capture.ts b/packages/duoyun-ui/src/elements/input-capture.ts
index 854acb55..c2b5da92 100644
--- a/packages/duoyun-ui/src/elements/input-capture.ts
+++ b/packages/duoyun-ui/src/elements/input-capture.ts
@@ -1,6 +1,7 @@
 import { adoptedStyle, customElement, mounted, part, shadow } from '@mantou/gem/lib/decorators';
 import { createCSSSheet, createState, GemElement, html } from '@mantou/gem/lib/element';
 import { addListener, css } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { theme } from '../lib/theme';
 import { getDisplayKey } from '../lib/hotkeys';
@@ -9,6 +10,8 @@ import { contentsContainer } from '../lib/styles';
 
 import './paragraph';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ left: '', top: '' });
+
 const style = createCSSSheet(css`
   .container,
   .circle {
@@ -36,6 +39,8 @@ const style = createCSSSheet(css`
     width: 2.5em;
     aspect-ratio: 1;
     transform: translate(-50%, -50%);
+    left: ${elementTheme.left};
+    top: ${elementTheme.top};
   }
 `);
 
@@ -89,6 +94,12 @@ export class DuoyunInputCaptureElement extends GemElement {
     };
   };
 
+  @updateTheme()
+  #theme = () => {
+    const { mousePosition } = this.#state;
+    return { left: `${mousePosition?.at(0)}px`, top: `${mousePosition?.at(1)}px` };
+  };
+
   render = () => {
     const { keys, mousePosition } = this.#state;
     return html`
@@ -99,18 +110,7 @@ export class DuoyunInputCaptureElement extends GemElement {
             </dy-paragraph>
           `
         : ''}
-      ${mousePosition
-        ? html`
-            <div class="circle">
-              <style>
-                .circle {
-                  left: ${mousePosition[0]}px;
-                  top: ${mousePosition[1]}px;
-                }
-              </style>
-            </div>
-          `
-        : ''}
+      ${mousePosition ? html`<div class="circle"></div>` : ''}
     `;
   };
 }
diff --git a/packages/duoyun-ui/src/elements/input.ts b/packages/duoyun-ui/src/elements/input.ts
index 72bc1bea..84a1b047 100644
--- a/packages/duoyun-ui/src/elements/input.ts
+++ b/packages/duoyun-ui/src/elements/input.ts
@@ -111,12 +111,18 @@ const style = createCSSSheet(css`
   textarea {
     min-height: 5em;
   }
+  .input::-webkit-contacts-auto-fill-button,
   .input::-webkit-calendar-picker-indicator,
   .input::-webkit-search-decoration,
   .input::-webkit-search-cancel-button,
   .input::-webkit-search-results-button,
   .input::-webkit-search-results-decoration {
     display: none !important;
+    visibility: hidden;
+    pointer-events: none;
+    height: 0;
+    width: 0;
+    margin: 0;
   }
   .icon,
   .clear {
diff --git a/packages/duoyun-ui/src/elements/line-chart.ts b/packages/duoyun-ui/src/elements/line-chart.ts
index 7f256051..ab2c591c 100644
--- a/packages/duoyun-ui/src/elements/line-chart.ts
+++ b/packages/duoyun-ui/src/elements/line-chart.ts
@@ -1,13 +1,33 @@
 import { adoptedStyle, customElement } from '@mantou/gem/lib/decorators';
 import { html, svg, createCSSSheet } from '@mantou/gem/lib/element';
 import { css } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { isNullish } from '../lib/types';
 import { theme } from '../lib/theme';
 
 import { DuoyunBarChartElement } from './bar-chart';
 
-const style = createCSSSheet(css``);
+const [elementTheme, updateTheme] = useDecoratorTheme({ strokeWidth: 0, strokeDasharray: '' });
+
+const style = createCSSSheet(css`
+  .line {
+    pointer-events: none;
+  }
+  .symbol {
+    stroke-width: ${elementTheme.strokeWidth};
+    fill: ${theme.backgroundColor};
+  }
+  .col:hover .line {
+    stroke: ${theme.borderColor};
+    stroke-dasharray: ${elementTheme.strokeDasharray};
+  }
+  .col:hover .symbol {
+    transform-box: fill-box;
+    transform-origin: center;
+    transform: scale(1.5);
+  }
+`);
 
 /**
  * @customElement dy-line-chart
@@ -27,84 +47,70 @@ export class DuoyunLineChartElement extends DuoyunBarChartElement {
       .join(``);
   };
 
+  @updateTheme()
+  #theme = () => ({
+    strokeWidth: this.getSVGPixel(1),
+    strokeDasharray: `${this.getSVGPixel(4)} ${this.getSVGPixel(1.5)}`,
+  });
+
   render = () => {
     if (this.loading) return this.renderLoading();
     if (this.noData) return this.renderNotData();
     if (!this.contentRect.width || !this.sequences || !this.series) return html``;
-    return html`
-      <style>
-        .line {
-          pointer-events: none;
-        }
-        .symbol {
-          stroke-width: ${this.getSVGPixel(1)};
-          fill: ${theme.backgroundColor};
-        }
-        .col:hover .line {
-          stroke: ${theme.borderColor};
-          stroke-dasharray: ${`${this.getSVGPixel(4)} ${this.getSVGPixel(1.5)}`};
-        }
-        .col:hover .symbol {
-          transform-box: fill-box;
-          transform-origin: center;
-          transform: scale(1.5);
-        }
-      </style>
-      ${svg`
-        <svg aria-hidden="true" part=${
-          DuoyunBarChartElement.chart
-        } xmlns="http://www.w3.org/2000/svg" viewBox=${this.viewBox.join(' ')}>
-          ${this.renderXAxi({ centerLabel: true })}
-          ${this.renderYAxi()}
-          ${this.sequences.map(
-            ({ values }, index) => svg`
+    return svg`
+      <svg aria-hidden="true" part=${
+        DuoyunBarChartElement.chart
+      } xmlns="http://www.w3.org/2000/svg" viewBox=${this.viewBox.join(' ')}>
+        ${this.renderXAxi({ centerLabel: true })}
+        ${this.renderYAxi()}
+        ${this.sequences.map(
+          ({ values }, index) => svg`
+            <path
+              stroke=${this.colors[index]}
+              fill="none"
+              stroke-width=${this.getSVGPixel(1)}
+              d=${this.#genPath(values)}
+            ></path>
+          `,
+        )}
+        ${this.series.map(
+          (_value, index, _, x = (index + 0.5) / this.xAxiUnit) => svg`
+            <g class="col" @click=${() => this.indexclick(index)}>
+              <rect
+                @mousemove=${(evt: MouseEvent) => this.onMouseMove(index, evt, true)}
+                @mouseout=${this.onMouseOut}
+                class="hover"
+                fill="transparent"
+                x=${index / this.xAxiUnit}
+                y=${0}
+                width=${1 / this.xAxiUnit}
+                height=${this.stageHeight}
+              />
+              ${this.sequences!.map(({ values }, i, __, value = values[index]) =>
+                isNullish(value)
+                  ? ''
+                  : svg`
+                  <circle
+                    @mousemove=${(evt: MouseEvent) => this.onMouseMove(index, evt, true, i)}
+                    class="symbol"
+                    stroke=${this.colors[i]}
+                    r=${this.getSVGPixel(2)}
+                    cx=${x}
+                    cy=${this.stageHeight - (value + this.yAxiMin) / this.yAxiUnit}
+                  />
+                `,
+              )}
               <path
-                stroke=${this.colors[index]}
+                class="line"
                 fill="none"
                 stroke-width=${this.getSVGPixel(1)}
-                d=${this.#genPath(values)}
+                d=${`M${x} 0L${x} ${this.stageHeight}`}
               ></path>
-            `,
-          )}
-          ${this.series.map(
-            (_value, index, _, x = (index + 0.5) / this.xAxiUnit) => svg`
-              <g class="col" @click=${() => this.indexclick(index)}>
-                <rect
-                  @mousemove=${(evt: MouseEvent) => this.onMouseMove(index, evt, true)}
-                  @mouseout=${this.onMouseOut}
-                  class="hover"
-                  fill="transparent"
-                  x=${index / this.xAxiUnit}
-                  y=${0}
-                  width=${1 / this.xAxiUnit}
-                  height=${this.stageHeight}
-                />
-                ${this.sequences!.map(({ values }, i, __, value = values[index]) =>
-                  isNullish(value)
-                    ? ''
-                    : svg`
-                    <circle
-                      @mousemove=${(evt: MouseEvent) => this.onMouseMove(index, evt, true, i)}
-                      class="symbol"
-                      stroke=${this.colors[i]}
-                      r=${this.getSVGPixel(2)}
-                      cx=${x}
-                      cy=${this.stageHeight - (value + this.yAxiMin) / this.yAxiUnit}
-                    />
-                  `,
-                )}
-                <path
-                  class="line"
-                  fill="none"
-                  stroke-width=${this.getSVGPixel(1)}
-                  d=${`M${x} 0L${x} ${this.stageHeight}`}
-                ></path>
-              </g>
-            `,
-          )}
-          ${this.renderMarkLines()}
-        </svg>
-      `}
+            </g>
+          `,
+        )}
+        ${this.renderMarkLines()}
+      </svg>
     `;
   };
 }
diff --git a/packages/duoyun-ui/src/elements/modal.ts b/packages/duoyun-ui/src/elements/modal.ts
index 940a06fd..6554ba41 100644
--- a/packages/duoyun-ui/src/elements/modal.ts
+++ b/packages/duoyun-ui/src/elements/modal.ts
@@ -89,9 +89,6 @@ const style = createCSSSheet(css`
     overscroll-behavior: contain;
     min-height: 2em;
   }
-  .body::-webkit-scrollbar {
-    width: 0;
-  }
   .footer {
     margin-top: 1.5em;
   }
diff --git a/packages/duoyun-ui/src/elements/page-loadbar.ts b/packages/duoyun-ui/src/elements/page-loadbar.ts
index 60e3dfb1..b8e4baec 100644
--- a/packages/duoyun-ui/src/elements/page-loadbar.ts
+++ b/packages/duoyun-ui/src/elements/page-loadbar.ts
@@ -1,10 +1,13 @@
 import { adoptedStyle, aria, customElement, mounted, shadow } from '@mantou/gem/lib/decorators';
 import { GemElement, html, createCSSSheet, createState } from '@mantou/gem/lib/element';
 import { css } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { theme } from '../lib/theme';
 import { sleep } from '../lib/timer';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ progress: '' });
+
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
     view-transition-name: dy-page-loadbar;
@@ -18,6 +21,7 @@ const style = createCSSSheet(css`
     height: 2px;
     transition: width 0.3s;
     background-color: ${theme.primaryColor};
+    width: ${elementTheme.progress};
   }
   .head {
     width: 300px;
@@ -74,15 +78,11 @@ export class DuoyunPageLoadbarElement extends GemElement {
     return () => (Loadbar.instance = undefined);
   };
 
+  @updateTheme()
+  #theme = () => ({ progress: `${this.#state.progress}%` });
+
   render = () => {
-    return html`
-      <style>
-        :host {
-          width: ${this.#state.progress}%;
-        }
-      </style>
-      <div class="head"></div>
-    `;
+    return html`<div class="head"></div>`;
   };
 }
 
diff --git a/packages/duoyun-ui/src/elements/pagination.ts b/packages/duoyun-ui/src/elements/pagination.ts
index 1389792e..cb7d4f2f 100644
--- a/packages/duoyun-ui/src/elements/pagination.ts
+++ b/packages/duoyun-ui/src/elements/pagination.ts
@@ -13,6 +13,7 @@ import {
 import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element';
 import { css, classMap } from '@mantou/gem/lib/utils';
 import { splice } from '@mantou/gem/helper/i18n';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { locale } from '../lib/locale';
 import { theme } from '../lib/theme';
@@ -28,6 +29,8 @@ import './input';
 import './button';
 import './picker';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ align: '' });
+
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
     display: flex;
@@ -35,6 +38,7 @@ const style = createCSSSheet(css`
     font-size: 0.875em;
     gap: 0.4em;
     font-variant-numeric: tabular-nums;
+    justify-content: ${elementTheme.align};
   }
   .item {
     display: flex;
@@ -171,17 +175,15 @@ export class DuoyunPaginationElement extends GemElement {
     `;
   }
 
+  @updateTheme()
+  #theme = () => ({ align: this.#align });
+
   render = () => {
     if (this.total <= 1) return html``;
 
     const prevAble = this.page > 1;
     const nextAble = this.page < this.total;
     return html`
-      <style>
-        :host {
-          justify-content: ${this.#align};
-        }
-      </style>
       ${this.sizes
         ? html`
             <dy-picker
diff --git a/packages/duoyun-ui/src/elements/placeholder.ts b/packages/duoyun-ui/src/elements/placeholder.ts
index d8e23a0b..66bd2d03 100644
--- a/packages/duoyun-ui/src/elements/placeholder.ts
+++ b/packages/duoyun-ui/src/elements/placeholder.ts
@@ -10,11 +10,14 @@ import {
 } from '@mantou/gem/lib/decorators';
 import { createCSSSheet, html } from '@mantou/gem/lib/element';
 import { css, styleMap } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { theme } from '../lib/theme';
 
 import { DuoyunVisibleBaseElement } from './base/visible';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ color: '' });
+
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
     display: block;
@@ -28,7 +31,7 @@ const style = createCSSSheet(css`
     justify-content: center;
   }
   .content {
-    background-image: linear-gradient(var(--color), var(--color));
+    background-image: linear-gradient(${elementTheme.color}, ${elementTheme.color});
     background-position-y: center;
     background-size: 100% 1em;
     background-repeat: no-repeat;
@@ -60,10 +63,6 @@ export class DuoyunPlaceholderElement extends DuoyunVisibleBaseElement {
   @numattribute maxLine: number;
   @numattribute minLine: number;
 
-  get #color() {
-    return this.color || theme.lightBackgroundColor;
-  }
-
   get #type() {
     return this.type || this.mode || 'single';
   }
@@ -76,15 +75,13 @@ export class DuoyunPlaceholderElement extends DuoyunVisibleBaseElement {
     return this.minLine || 1;
   }
 
+  @updateTheme()
+  #theme = () => ({ color: this.color || theme.lightBackgroundColor });
+
   render = () => {
     const lineCount =
       this.#type === 'single' ? 1 : Math.round(this.#minLine + Math.random() * (this.#maxLine - this.#minLine));
     return html`
-      <style>
-        :host {
-          --color: ${this.#color};
-        }
-      </style>
       ${Array(lineCount)
         .fill(null)
         .map(
diff --git a/packages/duoyun-ui/src/elements/rate.ts b/packages/duoyun-ui/src/elements/rate.ts
index 898ddb6e..1c8a9250 100644
--- a/packages/duoyun-ui/src/elements/rate.ts
+++ b/packages/duoyun-ui/src/elements/rate.ts
@@ -13,6 +13,7 @@ import {
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element';
 import { css, classMap } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { createDataURLFromSVG } from '../lib/image';
 import { icons } from '../lib/icons';
@@ -24,6 +25,8 @@ import './use';
 
 const starUrl = createDataURLFromSVG(icons.star);
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ color: '' });
+
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
     display: inline-flex;
@@ -48,7 +51,6 @@ const style = createCSSSheet(css`
     fill: none;
     stroke: currentColor;
     stroke-width: 2px;
-    -webkit-mask: url(${starUrl}) center / 100%;
     mask: url(${starUrl}) center / 100%;
     transition: transform 0.1s ${theme.timingFunction};
   }
@@ -60,6 +62,9 @@ const style = createCSSSheet(css`
   :host(:not([readonly])) .icon:hover ~ .icon::part(icon) {
     fill: currentColor;
   }
+  :host(:where(:not(:hover), [readonly])) .mask::part(icon) {
+    background-image: linear-gradient(to right, currentColor ${elementTheme.color}, transparent ${elementTheme.color});
+  }
 `);
 
 /**
@@ -102,17 +107,11 @@ export class DuoyunRateElement extends GemElement {
     this.internals.ariaValueNow = String(this.value);
   };
 
+  @updateTheme()
+  #theme = () => ({ color: `${this.#ratio * 100}%` });
+
   render = () => {
     return html`
-      <style>
-        :host(:where(:not(:hover), [readonly])) .mask::part(icon) {
-          background-image: linear-gradient(
-            to right,
-            currentColor ${this.#ratio * 100}%,
-            transparent ${this.#ratio * 100}%
-          );
-        }
-      </style>
       ${Array.from(
         { length: this.#total },
         (_, index) => html`
diff --git a/packages/duoyun-ui/src/elements/scatter-chart.ts b/packages/duoyun-ui/src/elements/scatter-chart.ts
index 1b4e6f1f..bee864ad 100644
--- a/packages/duoyun-ui/src/elements/scatter-chart.ts
+++ b/packages/duoyun-ui/src/elements/scatter-chart.ts
@@ -1,7 +1,7 @@
 // https://spectrum.adobe.com/page/scatter-plot/
-import { customElement, memo, property, unmounted } from '@mantou/gem/lib/decorators';
-import { html, svg } from '@mantou/gem/lib/element';
-import { classMap } from '@mantou/gem/lib/utils';
+import { adoptedStyle, customElement, memo, property, unmounted } from '@mantou/gem/lib/decorators';
+import { createCSSSheet, html, svg } from '@mantou/gem/lib/element';
+import { classMap, css } from '@mantou/gem/lib/utils';
 
 import { isNullish } from '../lib/types';
 
@@ -9,10 +9,26 @@ import { DuoyunChartBaseElement } from './base/chart';
 import { Sequence } from './area-chart';
 import { ChartTooltip, Data } from './chart-tooltip';
 
+const style = createCSSSheet(css`
+  .symbol {
+    opacity: 0.8;
+  }
+  .symbol:hover {
+    opacity: 1;
+    transform-box: fill-box;
+    transform-origin: center;
+    transform: scale(1.2);
+  }
+  .disabled {
+    pointer-events: none;
+  }
+`);
+
 /**
  * @customElement dy-scatter-chart
  */
 @customElement('dy-scatter-chart')
+@adoptedStyle(style)
 export class DuoyunScatterChartElement extends DuoyunChartBaseElement {
   @property sequences?: Sequence[];
 
@@ -78,49 +94,35 @@ export class DuoyunScatterChartElement extends DuoyunChartBaseElement {
     if (this.loading) return this.renderLoading();
     if (this.noData) return this.renderNotData();
     if (!this.contentRect.width || !this.sequences) return html``;
-    return html`
-      <style>
-        .symbol {
-          opacity: 0.8;
-        }
-        .symbol:hover {
-          opacity: 1;
-          transform-box: fill-box;
-          transform-origin: center;
-          transform: scale(1.2);
-        }
-        .disabled {
-          pointer-events: none;
-        }
-      </style>
-      ${svg`
-        <svg aria-hidden="true" part=${
-          DuoyunChartBaseElement.chart
-        } xmlns="http://www.w3.org/2000/svg" viewBox=${this.viewBox.join(' ')}>
-          ${this.renderXAxi({ grid: true })}
-          ${this.renderYAxi()}
-          ${this.sequences.map(({ label, value, values }, index) =>
-            this.#symbolSequences[index].map((point, pos) =>
-              point
-                ? svg`
-                    <circle
-                      @mousemove=${(evt: MouseEvent) => this.#onMouseMove(evt, index, values[pos] as number[])}
-                      @mouseout=${this.#onMouseOut}
-                      class=${classMap({
-                        symbol: true,
-                        disabled: !!this.filtersSet.size && !this.filtersSet.has(value ?? label),
-                      })}
-                      fill=${this.colors[index]}
-                      r=${this.getSVGPixel(5)}
-                      cx=${point[0]}
-                      cy=${point[1]}
-                    />
-                  `
-                : '',
-            ),
-          )}
-        </svg>
-      `}
+    return svg`
+      <svg
+        aria-hidden="true"
+        part=${DuoyunChartBaseElement.chart}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox=${this.viewBox.join(' ')}
+      >
+        ${this.renderXAxi({ grid: true })} ${this.renderYAxi()}
+        ${this.sequences.map(({ label, value, values }, index) =>
+          this.#symbolSequences[index].map((point, pos) =>
+            point
+              ? svg`
+                  <circle
+                    @mousemove=${(evt: MouseEvent) => this.#onMouseMove(evt, index, values[pos] as number[])}
+                    @mouseout=${this.#onMouseOut}
+                    class=${classMap({
+                      symbol: true,
+                      disabled: !!this.filtersSet.size && !this.filtersSet.has(value ?? label),
+                    })}
+                    fill=${this.colors[index]}
+                    r=${this.getSVGPixel(5)}
+                    cx=${point[0]}
+                    cy=${point[1]}
+                  />
+                `
+              : '',
+          ),
+        )}
+      </svg>
     `;
   };
 }
diff --git a/packages/duoyun-ui/src/elements/slider.ts b/packages/duoyun-ui/src/elements/slider.ts
index 81bd993c..d02d93e4 100644
--- a/packages/duoyun-ui/src/elements/slider.ts
+++ b/packages/duoyun-ui/src/elements/slider.ts
@@ -15,6 +15,7 @@ import {
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html, createCSSSheet, createState, createRef } from '@mantou/gem/lib/element';
 import { css, classMap, addListener } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { theme } from '../lib/theme';
 import { clamp } from '../lib/number';
@@ -26,6 +27,8 @@ import type { PanEventDetail } from './gesture';
 import './gesture';
 import './input';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ position: '', positionPoint: '' });
+
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
     font-size: 0.875em;
@@ -49,9 +52,16 @@ const style = createCSSSheet(css`
     position: relative;
     block-size: 2px;
     border-radius: 1px;
+    background: radial-gradient(
+      circle at ${elementTheme.positionPoint},
+      transparent,
+      transparent var(--c),
+      ${theme.borderColor} var(--c)
+    );
   }
   .mark {
     position: absolute;
+    inset-inline-start: ${elementTheme.position};
     inset-block-start: 50%;
     transform: translate(-50%, -50%);
     border-radius: 10em;
@@ -201,26 +211,18 @@ export class DuoyunSliderElement extends GemElement {
     this.#state({ position, displayPosition: position });
   };
 
-  render = () => {
-    const { displayPosition, start } = this.#state;
+  @updateTheme()
+  #theme = () => {
+    const { displayPosition } = this.#state;
     const position = `calc(var(--size) / 2 + calc(100% - var(--size)) * ${displayPosition})`;
+    return { position, positionPoint: `${this.#isVertical ? '0 ' : ''}${position}` };
+  };
+
+  render = () => {
     return html`
-      <style>
-        .slider {
-          background: radial-gradient(
-            circle at ${this.#isVertical ? '0 ' : ''}${position},
-            transparent,
-            transparent var(--c),
-            ${theme.borderColor} var(--c)
-          );
-        }
-        .mark {
-          inset-inline-start: ${position};
-        }
-      </style>
       <div class="slider" ref=${this.#sliderRef.ref}>
         <dy-gesture
-          class=${classMap({ mark: true, start })}
+          class=${classMap({ mark: true, start: this.#state.start })}
           @pan=${this.#onPan}
           @pointerdown=${() => !this.disabled && this.#state({ start: true })}
           @end=${this.#onEnd}
diff --git a/packages/duoyun-ui/src/elements/switch.ts b/packages/duoyun-ui/src/elements/switch.ts
index 206694e8..b938f068 100644
--- a/packages/duoyun-ui/src/elements/switch.ts
+++ b/packages/duoyun-ui/src/elements/switch.ts
@@ -11,21 +11,22 @@ import {
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element';
 import { addListener, css } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { theme, getSemanticColor } from '../lib/theme';
 import { commonHandle } from '../lib/hotkeys';
 import { focusStyle } from '../lib/styles';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ color: '' });
+
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
-    --color: ${theme.borderColor};
     cursor: default;
     display: inline-flex;
     align-items: center;
     gap: 0.5em;
   }
   :host([disabled]) {
-    --color: ${theme.neutralColor};
     cursor: not-allowed;
     opacity: 0.3;
   }
@@ -34,7 +35,7 @@ const style = createCSSSheet(css`
     aspect-ratio: 9 / 5;
     border-radius: 10em;
     opacity: 0.8;
-    background: var(--color);
+    background: ${elementTheme.color};
     transition: all 0.3s ${theme.timingFunction};
     transition-property: background, opacity, margin-inline-start;
   }
@@ -42,7 +43,7 @@ const style = createCSSSheet(css`
     opacity: 1;
   }
   :host([checked]) .switch {
-    background: var(--color);
+    background: ${elementTheme.color};
   }
   :host(:not([disabled])) .switch {
     box-shadow: ${theme.controlShadow};
@@ -100,13 +101,15 @@ export class DuoyunSwitchElement extends GemElement {
   @mounted()
   #init = () => addListener(this, 'click', this.#onClick);
 
+  @updateTheme()
+  #theme = () => {
+    if (this.disabled) return { color: theme.neutralColor };
+    if (this.checked) return { color: this.#checkedColor };
+    return { color: theme.borderColor };
+  };
+
   render = () => {
     return html`
-      <style>
-        :host([checked]) {
-          --color: ${this.#checkedColor};
-        }
-      </style>
       <div
         class="switch"
         @keydown=${commonHandle}
diff --git a/packages/duoyun-ui/src/elements/tabs.ts b/packages/duoyun-ui/src/elements/tabs.ts
index 3e07850c..e3aae11b 100644
--- a/packages/duoyun-ui/src/elements/tabs.ts
+++ b/packages/duoyun-ui/src/elements/tabs.ts
@@ -191,16 +191,7 @@ export class DuoyunTabsElement extends GemElement {
         size="medium"
         orientation=${this.#orientation}
       ></dy-divider>
-      <dy-compartment
-        .content=${html`
-          <style>
-            dy-tab-panel::-webkit-scrollbar {
-              width: 0;
-            }
-          </style>
-          ${currentContent}
-        `}
-      ></dy-compartment>
+      <dy-compartment .content=${currentContent}></dy-compartment>
     `;
   };
 }
diff --git a/packages/duoyun-ui/src/elements/tag.ts b/packages/duoyun-ui/src/elements/tag.ts
index 693affed..30446c27 100644
--- a/packages/duoyun-ui/src/elements/tag.ts
+++ b/packages/duoyun-ui/src/elements/tag.ts
@@ -12,6 +12,7 @@ import {
 } from '@mantou/gem/lib/decorators';
 import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element';
 import { css } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { icons } from '../lib/icons';
 import { theme, getSemanticColor } from '../lib/theme';
@@ -21,6 +22,8 @@ import { focusStyle } from '../lib/styles';
 
 import './use';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ color: '', borderColor: '', bg: '' });
+
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
     cursor: default;
@@ -34,6 +37,9 @@ const style = createCSSSheet(css`
     border-radius: ${theme.normalRound};
     border-width: 1px;
     border-style: solid;
+    border-color: ${elementTheme.borderColor};
+    color: ${elementTheme.color};
+    background-color: ${elementTheme.bg};
   }
   :host([small]) {
     font-size: 0.75em;
@@ -95,18 +101,19 @@ export class DuoyunTagElement extends GemElement {
     this.close(null);
   };
 
-  render = () => {
+  @updateTheme()
+  #theme = () => {
     const isSolid = this.#type === 'solid';
     const isDefault = this.color === 'default' || this.color === '';
+    return {
+      color: isDefault ? theme.textColor : isSolid ? theme.backgroundColor : this.#color,
+      bg: isSolid ? this.#color : 'transparent',
+      borderColor: this.#color,
+    };
+  };
 
+  render = () => {
     return html`
-      <style>
-        :host {
-          color: ${isDefault ? theme.textColor : isSolid ? theme.backgroundColor : this.#color};
-          background-color: ${isSolid ? this.#color : 'transparent'};
-          border-color: ${this.#color};
-        }
-      </style>
       <slot></slot>
       ${this.closable
         ? html`
diff --git a/packages/duoyun-ui/src/elements/wait.ts b/packages/duoyun-ui/src/elements/wait.ts
index 66a4f26f..27a5df5d 100644
--- a/packages/duoyun-ui/src/elements/wait.ts
+++ b/packages/duoyun-ui/src/elements/wait.ts
@@ -1,6 +1,7 @@
 import { adoptedStyle, aria, customElement, effect, mounted, shadow, state } from '@mantou/gem/lib/decorators';
 import { GemElement, html, createCSSSheet, createState } from '@mantou/gem/lib/element';
 import { addListener, css } from '@mantou/gem/lib/utils';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { sleep } from '../lib/timer';
 import { setBodyInert } from '../lib/element';
@@ -9,6 +10,8 @@ import { commonAnimationOptions, fadeIn, fadeOut } from '../lib/animations';
 
 import './loading';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ color: '', align: '', justify: '', paddingBottom: '' });
+
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
     view-transition-name: dy-wait;
@@ -22,6 +25,10 @@ const style = createCSSSheet(css`
     height: calc(100% - var(--top));
     box-sizing: border-box;
     pointer-events: none;
+    color: ${elementTheme.color};
+    align-items: ${elementTheme.align};
+    justify-content: ${elementTheme.justify};
+    padding-bottom: ${elementTheme.paddingBottom};
   }
   dy-loading {
     padding: 1em;
@@ -130,24 +137,24 @@ export class DuoyunWaitElement extends GemElement {
     }
   };
 
+  @updateTheme()
+  #theme = () => {
+    const { position, color } = this.state;
+    const [align, justify] = position?.split(' ') || [];
+    return {
+      color: color || 'white',
+      align: align || 'flex-start',
+      justify: justify || 'center',
+      paddingBottom: align === 'center' ? '10vh' : '0',
+    };
+  };
+
   render = () => {
-    const { text, transparent, position, color } = this.state;
+    const { text, transparent } = this.state;
     this.internals.ariaLabel = text || '';
     this.modal = !transparent;
 
-    const [align, justify] = position?.split(' ') || [];
-
-    return html`
-      <style>
-        :host {
-          color: ${color || 'white'};
-          align-items: ${align || 'flex-start'};
-          justify-content: ${justify || 'center'};
-          padding-bottom: ${align === 'center' ? '10vh' : 0};
-        }
-      </style>
-      <dy-loading>${text}</dy-loading>
-    `;
+    return html`<dy-loading>${text}</dy-loading>`;
   };
 
   state: ReturnType<typeof createState<State>>;
diff --git a/packages/gem-book/src/element/elements/404.ts b/packages/gem-book/src/element/elements/404.ts
index a2cdf730..34bf14ae 100644
--- a/packages/gem-book/src/element/elements/404.ts
+++ b/packages/gem-book/src/element/elements/404.ts
@@ -1,4 +1,4 @@
-import { adoptedStyle, createCSSSheet, css, customElement, GemElement, html } from '@mantou/gem';
+import { adoptedStyle, aria, createCSSSheet, css, customElement, GemElement, html } from '@mantou/gem';
 
 import { getGithubPath, isGitLab } from '../lib/utils';
 import { bookStore, locationStore } from '../store';
@@ -37,6 +37,7 @@ const styles = createCSSSheet(css`
 `);
 @customElement('gem-book-404')
 @adoptedStyle(styles)
+@aria({ role: 'region', ariaLabel: 'not found' })
 export class Meta extends GemElement {
   #getMdFullPath = () => {
     const { links = [] } = bookStore;
diff --git a/packages/gem-book/src/element/elements/edit-link.ts b/packages/gem-book/src/element/elements/edit-link.ts
index f519e891..2bf84e27 100644
--- a/packages/gem-book/src/element/elements/edit-link.ts
+++ b/packages/gem-book/src/element/elements/edit-link.ts
@@ -9,6 +9,7 @@ import {
   createState,
   memo,
   effect,
+  aria,
 } from '@mantou/gem';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
@@ -67,6 +68,7 @@ const fetchData = async (api: string) => {
 @customElement('gem-book-edit-link')
 @connectStore(locationStore)
 @adoptedStyle(styles)
+@aria({ role: 'complementary' })
 export class EditLink extends GemElement {
   #state = createState({
     lastUpdated: '',
diff --git a/packages/gem-book/src/element/elements/footer.ts b/packages/gem-book/src/element/elements/footer.ts
index 4dc801e2..80c4a9a4 100644
--- a/packages/gem-book/src/element/elements/footer.ts
+++ b/packages/gem-book/src/element/elements/footer.ts
@@ -1,4 +1,4 @@
-import { html, GemElement, customElement, connectStore, css, createCSSSheet, adoptedStyle } from '@mantou/gem';
+import { html, GemElement, customElement, connectStore, css, createCSSSheet, adoptedStyle, aria } from '@mantou/gem';
 
 import { selfI18n } from '../helper/i18n';
 import { theme } from '../helper/theme';
@@ -29,6 +29,7 @@ const styles = createCSSSheet(css`
 @customElement('gem-book-footer')
 @connectStore(bookStore)
 @adoptedStyle(styles)
+@aria({ role: 'contentinfo' })
 export class Footer extends GemElement {
   render() {
     const { config } = bookStore;
diff --git a/packages/gem-book/src/element/elements/loadbar.ts b/packages/gem-book/src/element/elements/loadbar.ts
index 1fabe01a..6ff300e8 100644
--- a/packages/gem-book/src/element/elements/loadbar.ts
+++ b/packages/gem-book/src/element/elements/loadbar.ts
@@ -10,9 +10,12 @@ import {
   createState,
   mounted,
 } from '@mantou/gem';
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { theme } from '../helper/theme';
 
+const [elementTheme, updateTheme] = useDecoratorTheme({ progress: '' });
+
 const styles = createCSSSheet(css`
   :host {
     z-index: 22222222;
@@ -25,6 +28,7 @@ const styles = createCSSSheet(css`
     height: 2px;
     transition: width 0.3s;
     background-color: ${theme.primaryColor};
+    width: ${elementTheme.progress};
   }
   .head {
     width: 300px;
@@ -79,15 +83,11 @@ export class GemBookLoadbarElement extends GemElement {
     return () => (Loadbar.instance = undefined);
   };
 
+  @updateTheme()
+  #theme = () => ({ progress: `${this.#state.progress}%` });
+
   render = () => {
-    return html`
-      <style>
-        :host {
-          width: ${this.#state.progress}%;
-        }
-      </style>
-      <div class="head"></div>
-    `;
+    return html`<div class="head"></div>`;
   };
 }
 
diff --git a/packages/gem-book/src/element/elements/main.ts b/packages/gem-book/src/element/elements/main.ts
index 466987d6..2252efd6 100644
--- a/packages/gem-book/src/element/elements/main.ts
+++ b/packages/gem-book/src/element/elements/main.ts
@@ -9,6 +9,7 @@ import {
   connectStore,
   memo,
   effect,
+  aria,
 } from '@mantou/gem';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
@@ -209,6 +210,7 @@ const style = createCSSSheet(css`
 @customElement('gem-book-main')
 @adoptedStyle(style)
 @connectStore(locationStore)
+@aria({ role: 'article' })
 export class Main extends GemElement {
   @property content?: string;
 
diff --git a/packages/gem-book/src/element/elements/meta.ts b/packages/gem-book/src/element/elements/meta.ts
index 963c72f0..1ec8afc9 100644
--- a/packages/gem-book/src/element/elements/meta.ts
+++ b/packages/gem-book/src/element/elements/meta.ts
@@ -1,4 +1,4 @@
-import { connectStore, customElement, GemElement, html } from '@mantou/gem';
+import { aria, connectStore, customElement, GemElement, html } from '@mantou/gem';
 
 import { joinPath } from '../lib/utils';
 import { themeStore } from '../helper/theme';
@@ -16,6 +16,7 @@ function getAlternateUrl(lang: string, pathname?: string) {
 
 @customElement('gem-book-meta')
 @connectStore(bookStore)
+@aria({ ariaHidden: 'true' })
 export class Meta extends GemElement {
   render() {
     const { langList, lang = '', routes, homePage, getCurrentLink } = bookStore;
diff --git a/packages/gem-book/src/element/elements/nav-logo.ts b/packages/gem-book/src/element/elements/nav-logo.ts
index 60a90c36..71da8e0d 100644
--- a/packages/gem-book/src/element/elements/nav-logo.ts
+++ b/packages/gem-book/src/element/elements/nav-logo.ts
@@ -47,18 +47,7 @@ export class GemBookNavLogoElement extends GemElement {
   render = () => {
     const { config } = bookStore;
     const { icon = '', title = '' } = config || {};
-    if (!icon && !title)
-      return html`
-        <style>
-          ${css`
-            @scope {
-              :scope {
-                display: none;
-              }
-            }
-          `}
-        </style>
-      `;
+    this.hidden = !icon && !title;
     return html`
       <gem-link path="/">
         ${icon ? html`<img alt=${title} src=${icon} aria-hidden="true" />` : null}
diff --git a/packages/gem-book/src/element/elements/nav.ts b/packages/gem-book/src/element/elements/nav.ts
index 5153c9b6..5ee8c44f 100644
--- a/packages/gem-book/src/element/elements/nav.ts
+++ b/packages/gem-book/src/element/elements/nav.ts
@@ -13,6 +13,7 @@ import {
   css,
   adoptedStyle,
   effect,
+  aria,
 } from '@mantou/gem';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
@@ -138,6 +139,7 @@ const styles = createCSSSheet(css`
 @connectStore(bookStore)
 @connectStore(sidebarStore)
 @adoptedStyle(styles)
+@aria({ role: 'navigation' })
 export class Nav extends GemElement {
   @boolattribute logo: boolean;
 
diff --git a/packages/gem-book/src/element/elements/rel-link.ts b/packages/gem-book/src/element/elements/rel-link.ts
index e5ea027c..6a473ab1 100644
--- a/packages/gem-book/src/element/elements/rel-link.ts
+++ b/packages/gem-book/src/element/elements/rel-link.ts
@@ -7,6 +7,7 @@ import {
   adoptedStyle,
   createCSSSheet,
   css,
+  aria,
 } from '@mantou/gem';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
@@ -58,6 +59,7 @@ const styles = createCSSSheet(css`
 @customElement('gem-book-rel-link')
 @connectStore(bookStore)
 @adoptedStyle(styles)
+@aria({ role: 'navigation' })
 export class RelLink extends GemElement {
   @property links: NavItem[];
 
@@ -68,18 +70,7 @@ export class RelLink extends GemElement {
     const index = currentLinks.findIndex((item) => currentLink.originLink === item.originLink);
     const prev = currentLinks[index - 1];
     const next = currentLinks[index + 1];
-    if (!prev && !next)
-      return html`
-        <style>
-          ${css`
-            @scope {
-              :scope {
-                display: none;
-              }
-            }
-          `}
-        </style>
-      `;
+    this.hidden = !prev && !next;
     return html`
       ${prev ? html`<gem-link path=${prev.link}>←<span>${capitalize(prev.title)}</span></gem-link>` : null}
       <div></div>
diff --git a/packages/gem-book/src/element/elements/sidebar.ts b/packages/gem-book/src/element/elements/sidebar.ts
index 477f09e6..7714ad46 100644
--- a/packages/gem-book/src/element/elements/sidebar.ts
+++ b/packages/gem-book/src/element/elements/sidebar.ts
@@ -14,6 +14,7 @@ import {
   effect,
   addListener,
   mounted,
+  aria,
 } from '@mantou/gem';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
@@ -194,6 +195,7 @@ const styles = createCSSSheet(css`
 @connectStore(sidebarStore)
 @connectStore(tocStore)
 @adoptedStyle(styles)
+@aria({ role: 'navigation' })
 export class SideBar extends GemElement {
   @state open: boolean;
 
diff --git a/packages/gem-book/src/element/elements/toc.ts b/packages/gem-book/src/element/elements/toc.ts
index 3e15d4c1..8343ee60 100644
--- a/packages/gem-book/src/element/elements/toc.ts
+++ b/packages/gem-book/src/element/elements/toc.ts
@@ -11,6 +11,7 @@ import {
   createState,
   unmounted,
   effect,
+  aria,
 } from '@mantou/gem';
 
 import { theme, themeStore } from '../helper/theme';
@@ -67,6 +68,7 @@ type State = {
 @customElement('gem-book-toc')
 @connectStore(tocStore)
 @adoptedStyle(styles)
+@aria({ role: 'navigation' })
 export class GemBookTocElement extends GemElement {
   #state = createState<State>({});
 
diff --git a/packages/gem-book/src/element/index.ts b/packages/gem-book/src/element/index.ts
index 45072d14..c04308b2 100644
--- a/packages/gem-book/src/element/index.ts
+++ b/packages/gem-book/src/element/index.ts
@@ -276,19 +276,14 @@ export class GemBookElement extends GemElement {
     this.isHomePage = !!renderHomePage;
 
     return html`
-      <gem-book-meta aria-hidden="true"></gem-book-meta>
-
+      <gem-book-meta></gem-book-meta>
       ${hasNavbar
         ? html`
-            <gem-book-nav
-              role="navigation"
-              part=${GemBookElement.nav}
-              .logo=${mediaQuery.isPhone || this.renderFullWidth}
-            ></gem-book-nav>
+            <gem-book-nav part=${GemBookElement.nav} .logo=${mediaQuery.isPhone || this.renderFullWidth}></gem-book-nav>
           `
         : null}
       ${mediaQuery.isPhone || !this.renderFullWidth
-        ? html`<gem-book-sidebar role="navigation" part=${GemBookElement.sidebar}></gem-book-sidebar>`
+        ? html`<gem-book-sidebar part=${GemBookElement.sidebar}></gem-book-sidebar>`
         : null}
       ${renderHomePage ? html`<gem-book-homepage></gem-book-homepage>` : ''}
       <main>
@@ -304,10 +299,10 @@ export class GemBookElement extends GemElement {
           @loading=${this.#onLoading}
           @routechange=${this.#onRouteChange}
         ></gem-light-route>
-        <gem-book-edit-link role="complementary" part=${GemBookElement.editLink}></gem-book-edit-link>
-        <gem-book-rel-link role="navigation" part=${GemBookElement.relLink}></gem-book-rel-link>
+        <gem-book-edit-link part=${GemBookElement.editLink}></gem-book-edit-link>
+        <gem-book-rel-link part=${GemBookElement.relLink}></gem-book-rel-link>
         ${renderHomePage ? '' : html`<slot name=${GemBookElement.mainAfter}>${bookStore.slots?.mainAfter}</slot>`}
-        <gem-book-footer role="contentinfo" part=${GemBookElement.footer}></gem-book-footer>
+        <gem-book-footer part=${GemBookElement.footer}></gem-book-footer>
       </main>
       <gem-book-toc></gem-book-toc>
     `;
diff --git a/packages/gem-book/src/element/store.ts b/packages/gem-book/src/element/store.ts
index e04f117a..1acb35d7 100644
--- a/packages/gem-book/src/element/store.ts
+++ b/packages/gem-book/src/element/store.ts
@@ -167,7 +167,7 @@ function getLinkRouters(links: NavItemWithLink[], title = '', lang: string, disp
           useLang = originDocLang;
         }
         if (bookStore.isDevMode?.()) await new Promise((res) => setTimeout(res, 500));
-        return html`<gem-book-main lang=${useLang} role="article" .content=${content}></gem-book-main>`;
+        return html`<gem-book-main lang=${useLang} .content=${content}></gem-book-main>`;
       },
       data: item,
     });
@@ -206,7 +206,7 @@ function getLinkRouters(links: NavItemWithLink[], title = '', lang: string, disp
     pattern: '*',
     async getContent() {
       await import('./elements/404');
-      return html`<gem-book-404 role="region" aria-label="not found"></gem-book-404>`;
+      return html`<gem-book-404></gem-book-404>`;
     },
   });
 
diff --git a/packages/gem-devtools/src/elements/section.ts b/packages/gem-devtools/src/elements/section.ts
index d83cd60e..6bc7da7f 100644
--- a/packages/gem-devtools/src/elements/section.ts
+++ b/packages/gem-devtools/src/elements/section.ts
@@ -235,7 +235,7 @@ export class Section extends GemElement {
             title="Click to edit"
             placeholder="<empty string>"
             @input=${onInput}
-            value=${item.value}
+            .value=${item.value}
           />
         `;
       case 'number':
@@ -245,7 +245,7 @@ export class Section extends GemElement {
             title="Click to edit"
             type="number"
             @input=${onInputNumber}
-            value=${item.value}
+            .value=${item.value}
           />
         `;
       case 'boolean':
diff --git a/packages/gem/src/helper/theme.ts b/packages/gem/src/helper/theme.ts
index 5aa9f8de..0ec4c721 100644
--- a/packages/gem/src/helper/theme.ts
+++ b/packages/gem/src/helper/theme.ts
@@ -1,6 +1,6 @@
 import { connect, Store, useStore } from '../lib/store';
 import { camelToKebabCase, randomStr } from '../lib/utils';
-import { SheetToken, createCSSSheet } from '../lib/element';
+import { GemElement, SheetToken, createCSSSheet } from '../lib/element';
 
 export type Theme<T> = ReturnType<typeof createCSSSheet> & {
   [K in keyof T as K extends `${string}Color`
@@ -77,3 +77,20 @@ export function useTheme<T extends Record<string, unknown>>(themeObj: T) {
 export function useOverrideTheme<T extends Record<string, unknown>>(theme: Theme<T>, themeObj: Partial<T>) {
   return useThemeFromProps(themeObj, getThemeProps(theme));
 }
+
+export function useDecoratorTheme<T extends Record<string, unknown>>(themeObj: T) {
+  const [themeAsKeys] = useThemeFromProps(themeObj);
+  const props = getThemeProps(themeAsKeys);
+  const updateDecorator =
+    <E extends GemElement, V extends () => T, K = any[] | undefined>(
+      getDep?: K extends readonly any[] ? (instance: E) => K : undefined,
+    ) =>
+    (_: any, { addInitializer, access }: ClassFieldDecoratorContext<E, V> | ClassMethodDecoratorContext<E, V>) => {
+      addInitializer(function (this: E) {
+        const [theme, update] = useThemeFromProps({ ...themeObj }, props);
+        this.internals.sheets.push(theme[SheetToken].getStyle(this));
+        this.memo(() => update(access.get(this).apply(this)), getDep && (() => getDep(this) as any));
+      });
+    };
+  return [themeAsKeys, updateDecorator] as const;
+}
diff --git a/packages/gem/src/lib/element.ts b/packages/gem/src/lib/element.ts
index 0581c359..de1289c5 100644
--- a/packages/gem/src/lib/element.ts
+++ b/packages/gem/src/lib/element.ts
@@ -18,6 +18,7 @@ declare global {
   }
   interface DOMStringMap {
     gemReflect?: '';
+    gemStyle?: '';
     [name: string]: string | undefined;
   }
   // https://github.com/tc39/proposal-decorator-metadata
@@ -78,6 +79,25 @@ class RefObject<T = HTMLElement> {
 /**必须使用在字段中，否则会读取到错误的实例 */
 export let createRef: <T>() => RefObject<T>;
 
+class GemCSSStyleSheet extends CSSStyleSheet {
+  #ele?: HTMLStyleElement;
+
+  cssText = '';
+  get element() {
+    if (!this.#ele) {
+      this.#ele = document.createElement('style');
+      this.#ele.textContent = this.cssText;
+      this.#ele.dataset.gemStyle = '';
+    }
+    return this.#ele;
+  }
+  replaceSync(text: string) {
+    this.cssText = text;
+    if (this.#ele) this.#ele.textContent = text;
+    super.replaceSync(text);
+  }
+}
+
 class GemCSSSheet {
   #content = '';
   #media = '';
@@ -89,16 +109,15 @@ class GemCSSSheet {
   }
 
   // 不需要 GC
-  #record = new Map<any, CSSStyleSheet>();
-  #used = new Map<CSSStyleSheet, string>();
+  #record = new Map<any, GemCSSStyleSheet>();
+  #used = new Map<GemCSSStyleSheet, string>();
   getStyle(host?: HTMLElement) {
-    const metadata = host && (((host as any).constructor[Symbol.metadata] || {}) as Metadata);
-    const isLight = metadata && !metadata.mode;
+    const isLight = host && !(host as GemElement).internals.shadowRoot;
 
     // 对同一类 dom 只使用同一个样式表
     const key = isLight ? host.constructor : this;
     if (!this.#record.has(key)) {
-      const sheet = new CSSStyleSheet({ media: this.#media });
+      const sheet = new GemCSSStyleSheet({ media: this.#media });
       this.#record.set(key, sheet);
     }
 
@@ -276,7 +295,11 @@ export abstract class GemElement extends HTMLElement {
   static #final = Symbol();
 
   #renderRoot: HTMLElement | ShadowRoot;
-  #internals: ElementInternals & { stateList: ReturnType<typeof createState>[] };
+  #internals: ElementInternals & {
+    // 有别于 adoptedStyleSheets，用来定义单个实例样式
+    sheets: GemCSSStyleSheet[];
+    stateList: ReturnType<typeof createState>[];
+  };
   #effectList: EffectItem<any>[] = [];
   #memoList: EffectItem<any>[] = [];
   #isAppendReason?: boolean;
@@ -324,6 +347,7 @@ export abstract class GemElement extends HTMLElement {
     this.#renderRoot = !mode ? this : this.attachShadow({ mode, serializable, delegatesFocus, slotAssignment });
     this.#internals = this.attachInternals() as GemElement['internals'];
     this.#internals.stateList = [];
+    this.#internals.sheets = [];
 
     assign(this.#internals, internalsAria);
 
@@ -440,13 +464,14 @@ export abstract class GemElement extends HTMLElement {
 
   #prepareStyle = () => {
     const { adoptedStyleSheets = [] } = this.#metadata;
-    const { shadowRoot } = this.#internals;
+    const { shadowRoot, sheets } = this.#internals;
 
-    const sheets = adoptedStyleSheets.map((item) => item[SheetToken].getStyle(this));
+    const clsSheets = adoptedStyleSheets.map((item) => item[SheetToken].getStyle(this));
     if (shadowRoot) {
-      shadowRoot.adoptedStyleSheets = sheets;
+      shadowRoot.adoptedStyleSheets = clsSheets.concat(sheets);
     } else {
-      return appleCSSStyleSheet(this, sheets);
+      this.append(...sheets.map((e) => e.element));
+      return appleCSSStyleSheet(this, clsSheets);
     }
   };