从一枚色样，到完整的外观入口
每个入口都包含主题、原语和明暗。紧凑时隐藏名称，展开后保留完整选择。
图标
明暗
主题
原语
双色圆
明暗
主题
原语
双色圆＋名称
明暗
主题
原语
名称
明暗
主题
原语
色卡
明暗
主题
原语
色卡＋名称
明暗
主题
原语
四档尺寸，一样的操作
XS 用在密集工具条，SM 用在顶栏，MD 用在常规界面，LG 用在设置入口。触屏自动保留 44px 点击区域。
XS
明暗
主题
原语
SM
明暗
主题
原语
MD
明暗
主题
原语
LG
明暗
主题
原语
按位置，自由组合
只放一个明暗按钮，或把三种控制并排使用。独立入口与合并入口共享状态。
主题
原语
无需展开的外观设置
色样随明暗更新，选择状态始终与全站一致。主题决定颜色，原语决定形状、字体与材质。
明暗
主题
原语
<section aria-label="展示形态"> <h3>从一枚色样，到完整的外观入口</h3> <p class="doc-note">每个入口都包含主题、原语和明暗。紧凑时隐藏名称，展开后保留完整选择。</p> <div class="demo-row"><div class="switcher-demo-example"><span class="doc-note">图标</span><div class="icen-theme-switcher icen-theme-switcher--md" data-icen-theme-switcher="" data-icen-kind="all" data-icen-display="icon" data-icen-size="md" data-icen-layout="menu"><button class="icen-theme-switcher-trigger" type="button" aria-label="外观" aria-haspopup="dialog" aria-expanded="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-name">本真</span></button><div class="icen-theme-switcher-panel" data-icen-material="floating" hidden="" role="dialog" aria-label="外观"><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">明暗</p><div class="icen-theme-switcher-options icen-theme-switcher-options--mode" role="group" aria-label="明暗"><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="light" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M13.5 10a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0M10 1.75v1.5M10 16.75v1.5M1.75 10h1.5M16.75 10h1.5M4.17 4.17l1.06 1.06M14.77 14.77l1.06 1.06M4.17 15.83l1.06-1.06M14.77 5.23l1.06-1.06"></path></svg><span class="icen-theme-switcher-option-name">浅色</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="dark" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M17.25 11.15A7.5 7.5 0 0 1 8.85 2.75a7.5 7.5 0 1 0 8.4 8.4Z"></path></svg><span class="icen-theme-switcher-option-name">深色</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">主题</p><div class="icen-theme-switcher-options icen-theme-switcher-options--theme" role="group" aria-label="主题"><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="benzhen" aria-pressed="true"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="clay" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#faf7f2"></i><i style="background:#c9704e"></i><i style="background:#667e82"></i></span><span class="icen-theme-switcher-option-name">陶土</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="piano" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f3ed"></i><i style="background:#94713f"></i><i style="background:#657386"></i></span><span class="icen-theme-switcher-option-name">钢琴</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="art" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f8f7"></i><i style="background:#df4b32"></i><i style="background:#426c86"></i></span><span class="icen-theme-switcher-option-name">艺术</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="vangogh" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f3e4"></i><i style="background:#275ea0"></i><i style="background:#a0711e"></i></span><span class="icen-theme-switcher-option-name">梵高</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="ink" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f4f7f4"></i><i style="background:#2b675c"></i><i style="background:#667c8a"></i></span><span class="icen-theme-switcher-option-name">墨</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">原语</p><div class="icen-theme-switcher-options icen-theme-switcher-options--primitive" role="group" aria-label="原语"><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="benzhen" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M6.5 3h7A3.5 3.5 0 0 1 17 6.5v7a3.5 3.5 0 0 1-3.5 3.5h-7A3.5 3.5 0 0 1 3 13.5v-7A3.5 3.5 0 0 1 6.5 3ZM7 10l3-3 3 3-3 3Z"></path></svg><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="pixel" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M3 3h5v5H3ZM12 3h5v5h-5ZM3 12h5v5H3ZM12 12h5v5h-5Z"></path></svg><span class="icen-theme-switcher-option-name">像素</span></button></div></section></div></div></div><div class="switcher-demo-example"><span class="doc-note">双色圆</span><div class="icen-theme-switcher icen-theme-switcher--md" data-icen-theme-switcher="" data-icen-kind="all" data-icen-display="color" data-icen-size="md" data-icen-layout="menu"><button class="icen-theme-switcher-trigger" type="button" aria-label="外观" aria-haspopup="dialog" aria-expanded="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-name">本真</span></button><div class="icen-theme-switcher-panel" data-icen-material="floating" hidden="" role="dialog" aria-label="外观"><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">明暗</p><div class="icen-theme-switcher-options icen-theme-switcher-options--mode" role="group" aria-label="明暗"><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="light" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M13.5 10a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0M10 1.75v1.5M10 16.75v1.5M1.75 10h1.5M16.75 10h1.5M4.17 4.17l1.06 1.06M14.77 14.77l1.06 1.06M4.17 15.83l1.06-1.06M14.77 5.23l1.06-1.06"></path></svg><span class="icen-theme-switcher-option-name">浅色</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="dark" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M17.25 11.15A7.5 7.5 0 0 1 8.85 2.75a7.5 7.5 0 1 0 8.4 8.4Z"></path></svg><span class="icen-theme-switcher-option-name">深色</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">主题</p><div class="icen-theme-switcher-options icen-theme-switcher-options--theme" role="group" aria-label="主题"><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="benzhen" aria-pressed="true"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="clay" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#faf7f2"></i><i style="background:#c9704e"></i><i style="background:#667e82"></i></span><span class="icen-theme-switcher-option-name">陶土</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="piano" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f3ed"></i><i style="background:#94713f"></i><i style="background:#657386"></i></span><span class="icen-theme-switcher-option-name">钢琴</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="art" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f8f7"></i><i style="background:#df4b32"></i><i style="background:#426c86"></i></span><span class="icen-theme-switcher-option-name">艺术</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="vangogh" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f3e4"></i><i style="background:#275ea0"></i><i style="background:#a0711e"></i></span><span class="icen-theme-switcher-option-name">梵高</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="ink" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f4f7f4"></i><i style="background:#2b675c"></i><i style="background:#667c8a"></i></span><span class="icen-theme-switcher-option-name">墨</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">原语</p><div class="icen-theme-switcher-options icen-theme-switcher-options--primitive" role="group" aria-label="原语"><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="benzhen" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M6.5 3h7A3.5 3.5 0 0 1 17 6.5v7a3.5 3.5 0 0 1-3.5 3.5h-7A3.5 3.5 0 0 1 3 13.5v-7A3.5 3.5 0 0 1 6.5 3ZM7 10l3-3 3 3-3 3Z"></path></svg><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="pixel" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M3 3h5v5H3ZM12 3h5v5h-5ZM3 12h5v5H3ZM12 12h5v5h-5Z"></path></svg><span class="icen-theme-switcher-option-name">像素</span></button></div></section></div></div></div><div class="switcher-demo-example"><span class="doc-note">双色圆＋名称</span><div class="icen-theme-switcher icen-theme-switcher--md" data-icen-theme-switcher="" data-icen-kind="all" data-icen-display="color-name" data-icen-size="md" data-icen-layout="menu"><button class="icen-theme-switcher-trigger" type="button" aria-label="外观" aria-haspopup="dialog" aria-expanded="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-name">本真</span></button><div class="icen-theme-switcher-panel" data-icen-material="floating" hidden="" role="dialog" aria-label="外观"><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">明暗</p><div class="icen-theme-switcher-options icen-theme-switcher-options--mode" role="group" aria-label="明暗"><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="light" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M13.5 10a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0M10 1.75v1.5M10 16.75v1.5M1.75 10h1.5M16.75 10h1.5M4.17 4.17l1.06 1.06M14.77 14.77l1.06 1.06M4.17 15.83l1.06-1.06M14.77 5.23l1.06-1.06"></path></svg><span class="icen-theme-switcher-option-name">浅色</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="dark" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M17.25 11.15A7.5 7.5 0 0 1 8.85 2.75a7.5 7.5 0 1 0 8.4 8.4Z"></path></svg><span class="icen-theme-switcher-option-name">深色</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">主题</p><div class="icen-theme-switcher-options icen-theme-switcher-options--theme" role="group" aria-label="主题"><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="benzhen" aria-pressed="true"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="clay" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#faf7f2"></i><i style="background:#c9704e"></i><i style="background:#667e82"></i></span><span class="icen-theme-switcher-option-name">陶土</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="piano" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f3ed"></i><i style="background:#94713f"></i><i style="background:#657386"></i></span><span class="icen-theme-switcher-option-name">钢琴</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="art" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f8f7"></i><i style="background:#df4b32"></i><i style="background:#426c86"></i></span><span class="icen-theme-switcher-option-name">艺术</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="vangogh" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f3e4"></i><i style="background:#275ea0"></i><i style="background:#a0711e"></i></span><span class="icen-theme-switcher-option-name">梵高</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="ink" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f4f7f4"></i><i style="background:#2b675c"></i><i style="background:#667c8a"></i></span><span class="icen-theme-switcher-option-name">墨</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">原语</p><div class="icen-theme-switcher-options icen-theme-switcher-options--primitive" role="group" aria-label="原语"><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="benzhen" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M6.5 3h7A3.5 3.5 0 0 1 17 6.5v7a3.5 3.5 0 0 1-3.5 3.5h-7A3.5 3.5 0 0 1 3 13.5v-7A3.5 3.5 0 0 1 6.5 3ZM7 10l3-3 3 3-3 3Z"></path></svg><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="pixel" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M3 3h5v5H3ZM12 3h5v5h-5ZM3 12h5v5H3ZM12 12h5v5h-5Z"></path></svg><span class="icen-theme-switcher-option-name">像素</span></button></div></section></div></div></div><div class="switcher-demo-example"><span class="doc-note">名称</span><div class="icen-theme-switcher icen-theme-switcher--md" data-icen-theme-switcher="" data-icen-kind="all" data-icen-display="name" data-icen-size="md" data-icen-layout="menu"><button class="icen-theme-switcher-trigger" type="button" aria-label="外观" aria-haspopup="dialog" aria-expanded="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-name">本真</span></button><div class="icen-theme-switcher-panel" data-icen-material="floating" hidden="" role="dialog" aria-label="外观"><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">明暗</p><div class="icen-theme-switcher-options icen-theme-switcher-options--mode" role="group" aria-label="明暗"><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="light" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M13.5 10a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0M10 1.75v1.5M10 16.75v1.5M1.75 10h1.5M16.75 10h1.5M4.17 4.17l1.06 1.06M14.77 14.77l1.06 1.06M4.17 15.83l1.06-1.06M14.77 5.23l1.06-1.06"></path></svg><span class="icen-theme-switcher-option-name">浅色</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="dark" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M17.25 11.15A7.5 7.5 0 0 1 8.85 2.75a7.5 7.5 0 1 0 8.4 8.4Z"></path></svg><span class="icen-theme-switcher-option-name">深色</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">主题</p><div class="icen-theme-switcher-options icen-theme-switcher-options--theme" role="group" aria-label="主题"><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="benzhen" aria-pressed="true"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="clay" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#faf7f2"></i><i style="background:#c9704e"></i><i style="background:#667e82"></i></span><span class="icen-theme-switcher-option-name">陶土</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="piano" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f3ed"></i><i style="background:#94713f"></i><i style="background:#657386"></i></span><span class="icen-theme-switcher-option-name">钢琴</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="art" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f8f7"></i><i style="background:#df4b32"></i><i style="background:#426c86"></i></span><span class="icen-theme-switcher-option-name">艺术</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="vangogh" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f3e4"></i><i style="background:#275ea0"></i><i style="background:#a0711e"></i></span><span class="icen-theme-switcher-option-name">梵高</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="ink" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f4f7f4"></i><i style="background:#2b675c"></i><i style="background:#667c8a"></i></span><span class="icen-theme-switcher-option-name">墨</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">原语</p><div class="icen-theme-switcher-options icen-theme-switcher-options--primitive" role="group" aria-label="原语"><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="benzhen" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M6.5 3h7A3.5 3.5 0 0 1 17 6.5v7a3.5 3.5 0 0 1-3.5 3.5h-7A3.5 3.5 0 0 1 3 13.5v-7A3.5 3.5 0 0 1 6.5 3ZM7 10l3-3 3 3-3 3Z"></path></svg><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="pixel" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M3 3h5v5H3ZM12 3h5v5h-5ZM3 12h5v5H3ZM12 12h5v5h-5Z"></path></svg><span class="icen-theme-switcher-option-name">像素</span></button></div></section></div></div></div><div class="switcher-demo-example"><span class="doc-note">色卡</span><div class="icen-theme-switcher icen-theme-switcher--md" data-icen-theme-switcher="" data-icen-kind="all" data-icen-display="swatch" data-icen-size="md" data-icen-layout="menu"><button class="icen-theme-switcher-trigger" type="button" aria-label="外观" aria-haspopup="dialog" aria-expanded="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-name">本真</span></button><div class="icen-theme-switcher-panel" data-icen-material="floating" hidden="" role="dialog" aria-label="外观"><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">明暗</p><div class="icen-theme-switcher-options icen-theme-switcher-options--mode" role="group" aria-label="明暗"><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="light" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M13.5 10a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0M10 1.75v1.5M10 16.75v1.5M1.75 10h1.5M16.75 10h1.5M4.17 4.17l1.06 1.06M14.77 14.77l1.06 1.06M4.17 15.83l1.06-1.06M14.77 5.23l1.06-1.06"></path></svg><span class="icen-theme-switcher-option-name">浅色</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="dark" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M17.25 11.15A7.5 7.5 0 0 1 8.85 2.75a7.5 7.5 0 1 0 8.4 8.4Z"></path></svg><span class="icen-theme-switcher-option-name">深色</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">主题</p><div class="icen-theme-switcher-options icen-theme-switcher-options--theme" role="group" aria-label="主题"><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="benzhen" aria-pressed="true"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="clay" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#faf7f2"></i><i style="background:#c9704e"></i><i style="background:#667e82"></i></span><span class="icen-theme-switcher-option-name">陶土</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="piano" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f3ed"></i><i style="background:#94713f"></i><i style="background:#657386"></i></span><span class="icen-theme-switcher-option-name">钢琴</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="art" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f8f7"></i><i style="background:#df4b32"></i><i style="background:#426c86"></i></span><span class="icen-theme-switcher-option-name">艺术</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="vangogh" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f3e4"></i><i style="background:#275ea0"></i><i style="background:#a0711e"></i></span><span class="icen-theme-switcher-option-name">梵高</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="ink" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f4f7f4"></i><i style="background:#2b675c"></i><i style="background:#667c8a"></i></span><span class="icen-theme-switcher-option-name">墨</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">原语</p><div class="icen-theme-switcher-options icen-theme-switcher-options--primitive" role="group" aria-label="原语"><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="benzhen" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M6.5 3h7A3.5 3.5 0 0 1 17 6.5v7a3.5 3.5 0 0 1-3.5 3.5h-7A3.5 3.5 0 0 1 3 13.5v-7A3.5 3.5 0 0 1 6.5 3ZM7 10l3-3 3 3-3 3Z"></path></svg><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="pixel" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M3 3h5v5H3ZM12 3h5v5h-5ZM3 12h5v5H3ZM12 12h5v5h-5Z"></path></svg><span class="icen-theme-switcher-option-name">像素</span></button></div></section></div></div></div><div class="switcher-demo-example"><span class="doc-note">色卡＋名称</span><div class="icen-theme-switcher icen-theme-switcher--md" data-icen-theme-switcher="" data-icen-kind="all" data-icen-display="swatch-name" data-icen-size="md" data-icen-layout="menu"><button class="icen-theme-switcher-trigger" type="button" aria-label="外观" aria-haspopup="dialog" aria-expanded="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-name">本真</span></button><div class="icen-theme-switcher-panel" data-icen-material="floating" hidden="" role="dialog" aria-label="外观"><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">明暗</p><div class="icen-theme-switcher-options icen-theme-switcher-options--mode" role="group" aria-label="明暗"><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="light" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M13.5 10a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0M10 1.75v1.5M10 16.75v1.5M1.75 10h1.5M16.75 10h1.5M4.17 4.17l1.06 1.06M14.77 14.77l1.06 1.06M4.17 15.83l1.06-1.06M14.77 5.23l1.06-1.06"></path></svg><span class="icen-theme-switcher-option-name">浅色</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="dark" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M17.25 11.15A7.5 7.5 0 0 1 8.85 2.75a7.5 7.5 0 1 0 8.4 8.4Z"></path></svg><span class="icen-theme-switcher-option-name">深色</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">主题</p><div class="icen-theme-switcher-options icen-theme-switcher-options--theme" role="group" aria-label="主题"><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="benzhen" aria-pressed="true"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="clay" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#faf7f2"></i><i style="background:#c9704e"></i><i style="background:#667e82"></i></span><span class="icen-theme-switcher-option-name">陶土</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="piano" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f3ed"></i><i style="background:#94713f"></i><i style="background:#657386"></i></span><span class="icen-theme-switcher-option-name">钢琴</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="art" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f8f7"></i><i style="background:#df4b32"></i><i style="background:#426c86"></i></span><span class="icen-theme-switcher-option-name">艺术</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="vangogh" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f3e4"></i><i style="background:#275ea0"></i><i style="background:#a0711e"></i></span><span class="icen-theme-switcher-option-name">梵高</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="ink" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f4f7f4"></i><i style="background:#2b675c"></i><i style="background:#667c8a"></i></span><span class="icen-theme-switcher-option-name">墨</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">原语</p><div class="icen-theme-switcher-options icen-theme-switcher-options--primitive" role="group" aria-label="原语"><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="benzhen" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M6.5 3h7A3.5 3.5 0 0 1 17 6.5v7a3.5 3.5 0 0 1-3.5 3.5h-7A3.5 3.5 0 0 1 3 13.5v-7A3.5 3.5 0 0 1 6.5 3ZM7 10l3-3 3 3-3 3Z"></path></svg><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="pixel" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M3 3h5v5H3ZM12 3h5v5h-5ZM3 12h5v5H3ZM12 12h5v5h-5Z"></path></svg><span class="icen-theme-switcher-option-name">像素</span></button></div></section></div></div></div></div> </section> <section aria-label="尺寸" class="switcher-demo-section"> <h3>四档尺寸，一样的操作</h3> <p class="doc-note">XS 用在密集工具条，SM 用在顶栏，MD 用在常规界面，LG 用在设置入口。触屏自动保留 44px 点击区域。</p> <div class="demo-row"><div class="switcher-demo-example"><span class="doc-note">XS</span><div class="icen-theme-switcher icen-theme-switcher--xs" data-icen-theme-switcher="" data-icen-kind="all" data-icen-display="swatch-name" data-icen-size="xs" data-icen-layout="menu"><button class="icen-theme-switcher-trigger" type="button" aria-label="外观" aria-haspopup="dialog" aria-expanded="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-name">本真</span></button><div class="icen-theme-switcher-panel" data-icen-material="floating" hidden="" role="dialog" aria-label="外观"><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">明暗</p><div class="icen-theme-switcher-options icen-theme-switcher-options--mode" role="group" aria-label="明暗"><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="light" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M13.5 10a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0M10 1.75v1.5M10 16.75v1.5M1.75 10h1.5M16.75 10h1.5M4.17 4.17l1.06 1.06M14.77 14.77l1.06 1.06M4.17 15.83l1.06-1.06M14.77 5.23l1.06-1.06"></path></svg><span class="icen-theme-switcher-option-name">浅色</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="dark" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M17.25 11.15A7.5 7.5 0 0 1 8.85 2.75a7.5 7.5 0 1 0 8.4 8.4Z"></path></svg><span class="icen-theme-switcher-option-name">深色</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">主题</p><div class="icen-theme-switcher-options icen-theme-switcher-options--theme" role="group" aria-label="主题"><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="benzhen" aria-pressed="true"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="clay" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#faf7f2"></i><i style="background:#c9704e"></i><i style="background:#667e82"></i></span><span class="icen-theme-switcher-option-name">陶土</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="piano" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f3ed"></i><i style="background:#94713f"></i><i style="background:#657386"></i></span><span class="icen-theme-switcher-option-name">钢琴</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="art" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f8f7"></i><i style="background:#df4b32"></i><i style="background:#426c86"></i></span><span class="icen-theme-switcher-option-name">艺术</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="vangogh" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f3e4"></i><i style="background:#275ea0"></i><i style="background:#a0711e"></i></span><span class="icen-theme-switcher-option-name">梵高</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="ink" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f4f7f4"></i><i style="background:#2b675c"></i><i style="background:#667c8a"></i></span><span class="icen-theme-switcher-option-name">墨</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">原语</p><div class="icen-theme-switcher-options icen-theme-switcher-options--primitive" role="group" aria-label="原语"><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="benzhen" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M6.5 3h7A3.5 3.5 0 0 1 17 6.5v7a3.5 3.5 0 0 1-3.5 3.5h-7A3.5 3.5 0 0 1 3 13.5v-7A3.5 3.5 0 0 1 6.5 3ZM7 10l3-3 3 3-3 3Z"></path></svg><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="pixel" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M3 3h5v5H3ZM12 3h5v5h-5ZM3 12h5v5H3ZM12 12h5v5h-5Z"></path></svg><span class="icen-theme-switcher-option-name">像素</span></button></div></section></div></div></div><div class="switcher-demo-example"><span class="doc-note">SM</span><div class="icen-theme-switcher icen-theme-switcher--sm" data-icen-theme-switcher="" data-icen-kind="all" data-icen-display="swatch-name" data-icen-size="sm" data-icen-layout="menu"><button class="icen-theme-switcher-trigger" type="button" aria-label="外观" aria-haspopup="dialog" aria-expanded="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-name">本真</span></button><div class="icen-theme-switcher-panel" data-icen-material="floating" hidden="" role="dialog" aria-label="外观"><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">明暗</p><div class="icen-theme-switcher-options icen-theme-switcher-options--mode" role="group" aria-label="明暗"><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="light" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M13.5 10a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0M10 1.75v1.5M10 16.75v1.5M1.75 10h1.5M16.75 10h1.5M4.17 4.17l1.06 1.06M14.77 14.77l1.06 1.06M4.17 15.83l1.06-1.06M14.77 5.23l1.06-1.06"></path></svg><span class="icen-theme-switcher-option-name">浅色</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="dark" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M17.25 11.15A7.5 7.5 0 0 1 8.85 2.75a7.5 7.5 0 1 0 8.4 8.4Z"></path></svg><span class="icen-theme-switcher-option-name">深色</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">主题</p><div class="icen-theme-switcher-options icen-theme-switcher-options--theme" role="group" aria-label="主题"><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="benzhen" aria-pressed="true"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="clay" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#faf7f2"></i><i style="background:#c9704e"></i><i style="background:#667e82"></i></span><span class="icen-theme-switcher-option-name">陶土</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="piano" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f3ed"></i><i style="background:#94713f"></i><i style="background:#657386"></i></span><span class="icen-theme-switcher-option-name">钢琴</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="art" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f8f7"></i><i style="background:#df4b32"></i><i style="background:#426c86"></i></span><span class="icen-theme-switcher-option-name">艺术</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="vangogh" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f3e4"></i><i style="background:#275ea0"></i><i style="background:#a0711e"></i></span><span class="icen-theme-switcher-option-name">梵高</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="ink" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f4f7f4"></i><i style="background:#2b675c"></i><i style="background:#667c8a"></i></span><span class="icen-theme-switcher-option-name">墨</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">原语</p><div class="icen-theme-switcher-options icen-theme-switcher-options--primitive" role="group" aria-label="原语"><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="benzhen" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M6.5 3h7A3.5 3.5 0 0 1 17 6.5v7a3.5 3.5 0 0 1-3.5 3.5h-7A3.5 3.5 0 0 1 3 13.5v-7A3.5 3.5 0 0 1 6.5 3ZM7 10l3-3 3 3-3 3Z"></path></svg><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="pixel" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M3 3h5v5H3ZM12 3h5v5h-5ZM3 12h5v5H3ZM12 12h5v5h-5Z"></path></svg><span class="icen-theme-switcher-option-name">像素</span></button></div></section></div></div></div><div class="switcher-demo-example"><span class="doc-note">MD</span><div class="icen-theme-switcher icen-theme-switcher--md" data-icen-theme-switcher="" data-icen-kind="all" data-icen-display="swatch-name" data-icen-size="md" data-icen-layout="menu"><button class="icen-theme-switcher-trigger" type="button" aria-label="外观" aria-haspopup="dialog" aria-expanded="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-name">本真</span></button><div class="icen-theme-switcher-panel" data-icen-material="floating" hidden="" role="dialog" aria-label="外观"><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">明暗</p><div class="icen-theme-switcher-options icen-theme-switcher-options--mode" role="group" aria-label="明暗"><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="light" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M13.5 10a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0M10 1.75v1.5M10 16.75v1.5M1.75 10h1.5M16.75 10h1.5M4.17 4.17l1.06 1.06M14.77 14.77l1.06 1.06M4.17 15.83l1.06-1.06M14.77 5.23l1.06-1.06"></path></svg><span class="icen-theme-switcher-option-name">浅色</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="dark" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M17.25 11.15A7.5 7.5 0 0 1 8.85 2.75a7.5 7.5 0 1 0 8.4 8.4Z"></path></svg><span class="icen-theme-switcher-option-name">深色</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">主题</p><div class="icen-theme-switcher-options icen-theme-switcher-options--theme" role="group" aria-label="主题"><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="benzhen" aria-pressed="true"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="clay" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#faf7f2"></i><i style="background:#c9704e"></i><i style="background:#667e82"></i></span><span class="icen-theme-switcher-option-name">陶土</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="piano" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f3ed"></i><i style="background:#94713f"></i><i style="background:#657386"></i></span><span class="icen-theme-switcher-option-name">钢琴</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="art" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f8f7"></i><i style="background:#df4b32"></i><i style="background:#426c86"></i></span><span class="icen-theme-switcher-option-name">艺术</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="vangogh" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f3e4"></i><i style="background:#275ea0"></i><i style="background:#a0711e"></i></span><span class="icen-theme-switcher-option-name">梵高</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="ink" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f4f7f4"></i><i style="background:#2b675c"></i><i style="background:#667c8a"></i></span><span class="icen-theme-switcher-option-name">墨</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">原语</p><div class="icen-theme-switcher-options icen-theme-switcher-options--primitive" role="group" aria-label="原语"><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="benzhen" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M6.5 3h7A3.5 3.5 0 0 1 17 6.5v7a3.5 3.5 0 0 1-3.5 3.5h-7A3.5 3.5 0 0 1 3 13.5v-7A3.5 3.5 0 0 1 6.5 3ZM7 10l3-3 3 3-3 3Z"></path></svg><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="pixel" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M3 3h5v5H3ZM12 3h5v5h-5ZM3 12h5v5H3ZM12 12h5v5h-5Z"></path></svg><span class="icen-theme-switcher-option-name">像素</span></button></div></section></div></div></div><div class="switcher-demo-example"><span class="doc-note">LG</span><div class="icen-theme-switcher icen-theme-switcher--lg" data-icen-theme-switcher="" data-icen-kind="all" data-icen-display="swatch-name" data-icen-size="lg" data-icen-layout="menu"><button class="icen-theme-switcher-trigger" type="button" aria-label="外观" aria-haspopup="dialog" aria-expanded="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-name">本真</span></button><div class="icen-theme-switcher-panel" data-icen-material="floating" hidden="" role="dialog" aria-label="外观"><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">明暗</p><div class="icen-theme-switcher-options icen-theme-switcher-options--mode" role="group" aria-label="明暗"><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="light" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M13.5 10a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0M10 1.75v1.5M10 16.75v1.5M1.75 10h1.5M16.75 10h1.5M4.17 4.17l1.06 1.06M14.77 14.77l1.06 1.06M4.17 15.83l1.06-1.06M14.77 5.23l1.06-1.06"></path></svg><span class="icen-theme-switcher-option-name">浅色</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="dark" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M17.25 11.15A7.5 7.5 0 0 1 8.85 2.75a7.5 7.5 0 1 0 8.4 8.4Z"></path></svg><span class="icen-theme-switcher-option-name">深色</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">主题</p><div class="icen-theme-switcher-options icen-theme-switcher-options--theme" role="group" aria-label="主题"><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="benzhen" aria-pressed="true"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="clay" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#faf7f2"></i><i style="background:#c9704e"></i><i style="background:#667e82"></i></span><span class="icen-theme-switcher-option-name">陶土</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="piano" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f3ed"></i><i style="background:#94713f"></i><i style="background:#657386"></i></span><span class="icen-theme-switcher-option-name">钢琴</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="art" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f8f7"></i><i style="background:#df4b32"></i><i style="background:#426c86"></i></span><span class="icen-theme-switcher-option-name">艺术</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="vangogh" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f3e4"></i><i style="background:#275ea0"></i><i style="background:#a0711e"></i></span><span class="icen-theme-switcher-option-name">梵高</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="ink" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f4f7f4"></i><i style="background:#2b675c"></i><i style="background:#667c8a"></i></span><span class="icen-theme-switcher-option-name">墨</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">原语</p><div class="icen-theme-switcher-options icen-theme-switcher-options--primitive" role="group" aria-label="原语"><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="benzhen" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M6.5 3h7A3.5 3.5 0 0 1 17 6.5v7a3.5 3.5 0 0 1-3.5 3.5h-7A3.5 3.5 0 0 1 3 13.5v-7A3.5 3.5 0 0 1 6.5 3ZM7 10l3-3 3 3-3 3Z"></path></svg><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="pixel" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M3 3h5v5H3ZM12 3h5v5h-5ZM3 12h5v5H3ZM12 12h5v5h-5Z"></path></svg><span class="icen-theme-switcher-option-name">像素</span></button></div></section></div></div></div></div> </section> <section aria-label="独立组合" class="switcher-demo-section"> <h3>按位置，自由组合</h3> <p class="doc-note">只放一个明暗按钮，或把三种控制并排使用。独立入口与合并入口共享状态。</p> <div class="demo-row"><div class="icen-theme-switcher icen-theme-switcher--sm" data-icen-theme-switcher="" data-icen-kind="theme" data-icen-display="color-name" data-icen-size="sm" data-icen-layout="menu"><button class="icen-theme-switcher-trigger" type="button" aria-label="主题" aria-haspopup="dialog" aria-expanded="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-name">本真</span></button><div class="icen-theme-switcher-panel" data-icen-material="floating" hidden="" role="dialog" aria-label="主题"><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">主题</p><div class="icen-theme-switcher-options icen-theme-switcher-options--theme" role="group" aria-label="主题"><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="benzhen" aria-pressed="true"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="clay" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#faf7f2"></i><i style="background:#c9704e"></i><i style="background:#667e82"></i></span><span class="icen-theme-switcher-option-name">陶土</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="piano" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f3ed"></i><i style="background:#94713f"></i><i style="background:#657386"></i></span><span class="icen-theme-switcher-option-name">钢琴</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="art" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f8f7"></i><i style="background:#df4b32"></i><i style="background:#426c86"></i></span><span class="icen-theme-switcher-option-name">艺术</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="vangogh" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f3e4"></i><i style="background:#275ea0"></i><i style="background:#a0711e"></i></span><span class="icen-theme-switcher-option-name">梵高</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="ink" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f4f7f4"></i><i style="background:#2b675c"></i><i style="background:#667c8a"></i></span><span class="icen-theme-switcher-option-name">墨</span></button></div></section></div></div><div class="icen-theme-switcher icen-theme-switcher--sm" data-icen-theme-switcher="" data-icen-kind="primitive" data-icen-display="name" data-icen-size="sm" data-icen-layout="menu"><button class="icen-theme-switcher-trigger" type="button" aria-label="原语" aria-haspopup="dialog" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M6.5 3h7A3.5 3.5 0 0 1 17 6.5v7a3.5 3.5 0 0 1-3.5 3.5h-7A3.5 3.5 0 0 1 3 13.5v-7A3.5 3.5 0 0 1 6.5 3ZM7 10l3-3 3 3-3 3Z"></path></svg><span class="icen-theme-switcher-name">本真</span></button><div class="icen-theme-switcher-panel" data-icen-material="floating" hidden="" role="dialog" aria-label="原语"><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">原语</p><div class="icen-theme-switcher-options icen-theme-switcher-options--primitive" role="group" aria-label="原语"><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="benzhen" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M6.5 3h7A3.5 3.5 0 0 1 17 6.5v7a3.5 3.5 0 0 1-3.5 3.5h-7A3.5 3.5 0 0 1 3 13.5v-7A3.5 3.5 0 0 1 6.5 3ZM7 10l3-3 3 3-3 3Z"></path></svg><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="pixel" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M3 3h5v5H3ZM12 3h5v5h-5ZM3 12h5v5H3ZM12 12h5v5h-5Z"></path></svg><span class="icen-theme-switcher-option-name">像素</span></button></div></section></div></div><div class="icen-theme-switcher icen-theme-switcher--sm" data-icen-theme-switcher="" data-icen-kind="mode" data-icen-display="icon" data-icen-size="sm" data-icen-layout="menu"><button class="icen-theme-switcher-trigger" type="button" aria-label="明暗" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M13.5 10a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0M10 1.75v1.5M10 16.75v1.5M1.75 10h1.5M16.75 10h1.5M4.17 4.17l1.06 1.06M14.77 14.77l1.06 1.06M4.17 15.83l1.06-1.06M14.77 5.23l1.06-1.06"></path></svg><span class="icen-theme-switcher-name">浅色</span></button></div><div class="icen-theme-switcher icen-theme-switcher--lg" data-icen-theme-switcher="" data-icen-kind="mode" data-icen-display="name" data-icen-size="lg" data-icen-layout="menu"><button class="icen-theme-switcher-trigger" type="button" aria-label="明暗" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M13.5 10a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0M10 1.75v1.5M10 16.75v1.5M1.75 10h1.5M16.75 10h1.5M4.17 4.17l1.06 1.06M14.77 14.77l1.06 1.06M4.17 15.83l1.06-1.06M14.77 5.23l1.06-1.06"></path></svg><span class="icen-theme-switcher-name">浅色</span></button></div></div> </section> <section aria-label="设置面板" class="switcher-demo-section"> <h3>无需展开的外观设置</h3> <p class="doc-note">色样随明暗更新，选择状态始终与全站一致。主题决定颜色，原语决定形状、字体与材质。</p> <div class="icen-theme-switcher icen-theme-switcher--lg" data-icen-theme-switcher="" data-icen-kind="all" data-icen-display="swatch-name" data-icen-size="lg" data-icen-layout="inline"><div class="icen-theme-switcher-panel" data-icen-material="floating"><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">明暗</p><div class="icen-theme-switcher-options icen-theme-switcher-options--mode" role="group" aria-label="明暗"><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="light" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M13.5 10a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0M10 1.75v1.5M10 16.75v1.5M1.75 10h1.5M16.75 10h1.5M4.17 4.17l1.06 1.06M14.77 14.77l1.06 1.06M4.17 15.83l1.06-1.06M14.77 5.23l1.06-1.06"></path></svg><span class="icen-theme-switcher-option-name">浅色</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="mode" data-icen-value="dark" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M17.25 11.15A7.5 7.5 0 0 1 8.85 2.75a7.5 7.5 0 1 0 8.4 8.4Z"></path></svg><span class="icen-theme-switcher-option-name">深色</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">主题</p><div class="icen-theme-switcher-options icen-theme-switcher-options--theme" role="group" aria-label="主题"><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="benzhen" aria-pressed="true"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f6f8"></i><i style="background:#087bf5"></i><i style="background:#58758f"></i></span><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="clay" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#faf7f2"></i><i style="background:#c9704e"></i><i style="background:#667e82"></i></span><span class="icen-theme-switcher-option-name">陶土</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="piano" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f5f3ed"></i><i style="background:#94713f"></i><i style="background:#657386"></i></span><span class="icen-theme-switcher-option-name">钢琴</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="art" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f8f7"></i><i style="background:#df4b32"></i><i style="background:#426c86"></i></span><span class="icen-theme-switcher-option-name">艺术</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="vangogh" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f8f3e4"></i><i style="background:#275ea0"></i><i style="background:#a0711e"></i></span><span class="icen-theme-switcher-option-name">梵高</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="theme" data-icen-value="ink" aria-pressed="false"><span class="icen-theme-switcher-sample" aria-hidden="true"><i style="background:#f4f7f4"></i><i style="background:#2b675c"></i><i style="background:#667c8a"></i></span><span class="icen-theme-switcher-option-name">墨</span></button></div></section><section class="icen-theme-switcher-section"><p class="icen-theme-switcher-heading">原语</p><div class="icen-theme-switcher-options icen-theme-switcher-options--primitive" role="group" aria-label="原语"><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="benzhen" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M6.5 3h7A3.5 3.5 0 0 1 17 6.5v7a3.5 3.5 0 0 1-3.5 3.5h-7A3.5 3.5 0 0 1 3 13.5v-7A3.5 3.5 0 0 1 6.5 3ZM7 10l3-3 3 3-3 3Z"></path></svg><span class="icen-theme-switcher-option-name">本真</span></button><button type="button" class="icen-theme-switcher-option" data-icen-axis="primitive" data-icen-value="pixel" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol icen-theme-switcher-symbol" aria-hidden="true"><path d="M3 3h5v5H3ZM12 3h5v5h-5ZM3 12h5v5H3ZM12 12h5v5h-5Z"></path></svg><span class="icen-theme-switcher-option-name">像素</span></button></div></section></div></div> </section>安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import { initThemeSwitcher } from '@icen.ai/ui/kit/theme-switcher';initThemeSwitcher();也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add theme-switcher
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/theme-switcher.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
import { createThemeSwitcher } from '@icen.ai/ui/kit/theme-switcher';// 一个挂载点，不需要手写菜单或同步代码。const appearance = createThemeSwitcher(el, { kind: 'all', // all | theme | primitive | mode display: 'swatch-name', // icon | color | color-name | name | swatch | swatch-name size: 'md', // xs | sm | md | lg layout: 'menu', // menu | inline sizing: { maxWidth: 320 },});// 卸载（React effect / Vue onUnmounted）appearance.destroy();// 服务端渲染：由同一棵组件树生成 HTML，客户端幂等接管。import { themeSwitcherHTML, initThemeSwitcher } from '@icen.ai/ui/kit/theme-switcher';const html = themeSwitcherHTML({ kind: 'theme', display: 'color-name', size: 'sm' });initThemeSwitcher();// 纯声明式：放一个空挂载点，初始化自动生成完整控件。// <div data-icen-theme-switcher data-icen-kind="all"// data-icen-display="icon" data-icen-size="sm"></div>// initThemeSwitcher();// 所有入口共享 theme.ts。代码修改也立即反映到每个控件。import { setTheme, getCurrentTheme, registerThemePreset } from '@icen.ai/ui/behaviors/theme';setTheme({ preset: 'ink', style: 'pixel', dark: true });getCurrentTheme(); // 当前实际生效状态（包括存储不可写时）// 自定义主题：先提供该主题的 token CSS，再登记。registerThemePreset('ocean');createThemeSwitcher(el, { labels: { ocean: '海洋' } });// 内置主题色样自动读取目录；自定义主题没有色样数据时使用当前语义色。// Astro：布局 frontmatter 中另引 CSS（避免 client bundle 摇掉 CSS）。// import '@icen.ai/ui/components/theme-switcher.css';