# Skeleton 设计系统 ## Skeleton 设计系统界面预览 更改主题和外观，同时保留已保存的阅读状态；查看解析后的值。 ## Skeleton 设计系统设计参考 固定使用 Skeleton 5.0.1 主题文件、经编译的 CSS 实用类行为，以及明确标注的原创组合方式。 ### Cerberus 主题值 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --spacing | 0.25rem | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --radius-base | 0.5rem | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --typo-base--font-family | system-ui | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --typo-heading--font-weight | bold | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --color-primary-100 | oklch(0.84 0.08 254.62) | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --color-primary-300 | oklch(0.7 0.15 254.36) | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --color-primary-500 | oklch(0.57 0.21 258.29) | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --color-primary-700 | oklch(0.46 0.17 257.78) | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --color-primary-900 | oklch(0.34 0.11 257.14) | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --color-surface-50 | oklch(0.99 0 0) | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --color-surface-950 | oklch(0.18 0 0) | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | ### Mint 主题值 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --spacing | 0.25rem | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --radius-base | 0.375rem | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --typo-base--font-family | system-ui, sans-serif | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --typo-heading--font-weight | normal | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --color-primary-100 | oklch(89.8% 0.08 156.34deg) | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --color-primary-300 | oklch(86.28% 0.13 151.76deg) | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --color-primary-500 | oklch(83.57% 0.18 148.98deg) | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --color-primary-700 | oklch(71.28% 0.15 148.61deg) | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --color-primary-900 | oklch(58.17% 0.13 148.16deg) | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --color-surface-50 | oklch(89.13% 0.03 155.27deg) | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --color-surface-950 | oklch(21.88% 0.02 186.33deg) | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | ### Rose 主题值 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --spacing | 0.25rem | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --radius-base | 0.375rem | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --typo-base--font-family | Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --typo-heading--font-weight | normal | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --color-primary-100 | oklch(92.93% 0.03 340.64deg) | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --color-primary-300 | oklch(81.16% 0.08 345.32deg) | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --color-primary-500 | oklch(69.89% 0.13 348.12deg) | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --color-primary-700 | oklch(57.25% 0.1 346.44deg) | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --color-primary-900 | oklch(43.55% 0.07 343deg) | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --color-surface-50 | oklch(96.76% 0.01 318.08deg) | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | | --color-surface-950 | oklch(25.82% 0.01 304.87deg) | 实际主题声明。data-theme 选择此导入主题时，这些值会一并更改；原有阅读状态保持不变。 | ### CSS 集成与语义配色组合 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | Foundation import | @import "@skeletonlabs/skeleton" | 在 Tailwind 之后加载，以便编译实用类定义。 | | Theme selection | data-theme="cerberus" / "mint" / "rose" | 只有导入的主题才能提供其变量。 | | Class-based appearance | @custom-variant dark (&:where(.dark, .dark *)) | 让原有外观按钮能够影响实际编译的深色变体。 | | Surface pairings | light-dark(light value, dark value) | Skeleton 的全局样式设置了 color-scheme；只更改类而没有匹配的变体是不够的。 | | Filled action | btn preset-filled-primary-500 | 将原生按钮的几何样式与适配主题的预设相结合。 | | Supporting action | btn preset-tonal-primary | 使用适合当前外观的色调组合。 | | Disclosure | details.disclosure > summary | 使用 Skeleton CSS 控制浏览器原生的打开状态；无需初始化 Svelte 组件。 | ## Skeleton 设计系统完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。 完整指导、实现起点和源代码链接。 ## Skeleton 设计系统：CSS 基础与框架层 ### 选择实际运行的层 > 阅读桌面使用 @skeletonlabs/skeleton 5.0.1、其 Tailwind CSS 实用类和附带的三种主题。它不加载 skeleton-svelte 或 skeleton-react。按钮、徽章、标签、卡片和折叠面板的呈现使用的是真正的 CSS 实用类；主题选择器和已保存状态逻辑则为原创 JavaScript。这样的职责划分使完整示例可以作为一个小型 Vite 页面运行，同时不会让人误以为它使用了框架组件运行时。 ### 编译实用类，而非在浏览器中导入原始 CSS Skeleton 的源文件包含 @utility 和 @variant 等 Tailwind 指令。提供的 Vite 配置包含 @tailwindcss/vite，样式表会先导入 Tailwind，再导入 Skeleton 和所选主题。直接链接到源代码包无法还原编译后的样式。这里包含完整的构建源代码，因此预览不依赖隐藏的生成文件 CSS。 1. 导入 Tailwind CSS。 2. 导入 Skeleton 工具类。 3. 显式导入要选择的每个主题。 4. 使用 Tailwind Vite 插件编译样式表。 ## Skeleton 设计系统主题选择与实际值 ### 显式导入每个可用主题 Cerberus、Mint 和 Rose 均从软件包的 themes 路径导入。选择主题名称会更改根元素上的 data-theme，从而选用相应的变量声明。参考内容列出了每个主题的实际主色调样本、表面颜色的明暗极值、间距、圆角和字体声明。这些值读取自固定版本的文件，而非通过替换单一强调色生成。 - 初始呈现使用 Cerberus。 - Mint 和 Rose 是分别实际导入的主题。 - 主题选择会更改 data-theme，而不会复制内容树。 ### 比较时保持完整内容不变 切换主题时，阅读卡片、清单和保存状态都会保持不变。每次选择主题后，侧面板都会读取根元素上计算后的变量，显示浏览器实际解析出的值。这样比较才有意义：读者可以在内容和状态相同的情况下，评估字体排印、形状和配色的变化。 ## Skeleton 设计系统深色外观与 color-scheme ### 将深色变体连接到实际控件 样式表定义了基于类的深色变体，可匹配根元素本身或其后代上的 .dark。Skeleton 的全局规则使用该变体设置 color-scheme。因此，外观按钮会改变 light-dark() 表面配对所依据的条件。如果切换按钮只更改类名，却不调整 Tailwind 默认的基于媒体查询的变体，那么界面可能显示“深色”，实际表面却仍是浅色。 ### 使用保持易读性的预设 外观操作使用 preset-tonal-primary，阅读操作使用 preset-filled-primary-500。预设控制表面与前景色之间的关系；单独的颜色令牌并不能确保对比度足以保证可读性。切换到 Rose 后，我们检查了实际渲染的深色状态，包括控件文本和说明内容，而不是假定成功更改类名就代表视觉效果正确。 ## Skeleton 设计系统字体排印、形状与布局 ### 区分主题声明与原有层级 Cerberus 声明了系统字体，Rose 则包含不同的备用字体栈。本示例不会加载远程字体；浏览器会使用所选字体栈中本机可用的字体。原始布局明确将页面标题设为 36px，阅读标题设为 28px。这些布局选择与主题自身的字体系列和字重声明彼此独立。 ### 圆角和间距由主题决定 配色样本使用 --radius-base，因此圆角形状会随所选主题改变。完整参考还展示了 --spacing。外层双栏布局使用 24px 间距，并会在宽度低于 720px 时变为单栏；这些属于原有的布局设计决策。主题不会决定信息架构，也不会强制每个页面使用相同的网格。 ## Skeleton 设计系统阅读状态与外观重置 ### 让保存操作保持本地且可撤销 阅读操作会切换 aria-pressed、更新标签，并显示易读的状态消息。它仅为当前页面保存一个内存中的布尔值，不涉及账户、持久化存储或网络请求。切换主题后，该状态仍会显示，方便读者比较不同配色下的激活状态。 ### 重置外观，但不删除阅读状态 重置外观会恢复 Cerberus 主题和浅色外观，但有意保留已保存的布尔值。它的标签明确说明了操作范围。另一个独立操作可以从本地桌面移除阅读卡片。混淆这两个操作，会导致一个无害的视觉重置意外丢弃用户当前的选择。 ## Skeleton 设计系统原生折叠内容与真实内容 ### 使用浏览器的 details 元素 辅助说明采用真正的 details/summary 结构和 disclosure 实用类。键盘和指针交互由浏览器提供，Skeleton则负责其呈现。这不是 Skeleton Svelte Accordion 组件，也没有虚构任何组件 API 或事件。段落具体说明了哪些内容会变化、哪些内容保持不变。 ### 过渡结束后检查展开状态 样式表可以为折叠内容的尺寸添加动画。视觉检查会等待过渡结束后再捕获展开状态；如果立即截图，内容可能还处于展开过程中。布局验证会纳入展开后的段落和较长的计算字体栈，确保侧边面板不会仅在大量内容隐藏时才通过检查。 ## Skeleton 设计系统响应式主题检查 ### 让窄屏上的值清晰易读 工作台会在视口宽度低于 720px 时改为纵向堆叠，外边距缩小至 16px。每个计算令牌名称及其值各占一行，因此较长的字体栈和 OKLCH 字符串可以换行显示，无需横向滚动。五个颜色样本仍以紧凑网格呈现，主题控件也会换行排列。 ### 测试主题与状态组合 浏览器测试会先保存阅读卡片，再依次切换到 Mint 和 Rose、启用深色外观、展开折叠内容，最后重置呈现效果。整个过程中，已保存状态都必须保留。测试已在窄至 280px 的视口下完成，因此覆盖了实际的长文本值和展开内容，而不只是初始主题的单张截图。 ## Skeleton 设计系统完整 Vite 源码 ### 保存全部四个源文件 示例包含 index.html、style.css、main.js 和 vite.config.mjs。安装固定版本的 Skeleton、Tailwind 和 Vite 依赖，然后在该目录中运行 Vite。显式的 @source 指向包含实用类的 HTML，确保编译后的输出包含阅读工作台使用的类。无需补充缺失的框架脚手架。 ### 需要时分别选择框架组件 需要使用 Skeleton Svelte 或 React 组件的产品，应采用相应的框架包并按照其文档完成设置。这个基于 CSS 的示例有助于理解共享主题和实用类层，但并不声称具备与这些组件相同的 API。为 AI Agent 改编所提供的指南时，请保留这一区别。 ## Skeleton 设计系统组件示例 ### index.html 完整阅读内容、原生 CSS 组件和自定义控件。 ``` Theme reading desk

SKELETON / THEME READING DESK

The same content, three themes.

Inspect actual Skeleton 5.0.1 palettes, surface pairings and native CSS components while keeping a complete reading card in view.

Original OpenDesign study
Reading / 4 minutes

Make the next step easier to see

A useful interface explains the next action without making every detail compete for attention. Start with a complete piece of content, then inspect how its hierarchy survives a change of theme.

  • Keep the heading clear in both appearances.
  • Use a supporting surface to group related information.
  • Repeat an important state in text, not color alone.

This reading card is not saved.

Uses Skeleton’s actual Tailwind CSS utilities and three shipped themes. The page logic is original plain JavaScript; no Skeleton Svelte or React component runtime is loaded. Saving changes this page only and sends nothing.

``` 代码参考 - 将全部四个源文件保存在同一个项目目录中。 ### style.css 主题导入、基于类的深色变体和响应式组合。 ``` @import 'tailwindcss'; @import '@skeletonlabs/skeleton'; @import '@skeletonlabs/skeleton/themes/cerberus'; @import '@skeletonlabs/skeleton/themes/mint'; @import '@skeletonlabs/skeleton/themes/rose'; @source './index.html'; @custom-variant dark (&:where(.dark, .dark *)); body{margin:0}*{box-sizing:border-box}main{max-width:1080px;margin:auto;padding:32px}header{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}h1{font-size:36px;line-height:1.15;font-weight:700;margin:16px 0}.intro{max-width:66ch;line-height:1.6}.controls{display:flex;gap:16px;align-items:end;flex-wrap:wrap;margin:32px 0}.controls label{display:grid;gap:8px}.workbench{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}.reading{padding:32px}.reading h2{font-size:28px;line-height:1.25;font-weight:700}.reading p{line-height:1.7;margin:24px 0}.reading ul{list-style:disc;padding-left:24px}.reading li{margin:12px 0}.palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:24px 0}.swatch{height:72px;border-radius:var(--radius-base)}.tokens{display:grid;gap:12px;font-size:13px}.tokens div{display:grid;gap:8px;padding-bottom:12px;border-bottom:1px solid currentColor}.tokens dd{overflow-wrap:anywhere}.side{padding:24px}.disclosure p{padding:16px;line-height:1.6}.scope{font-size:13px;line-height:1.6;margin-top:32px}.bookmark{margin-top:24px}#message{font-size:14px;margin-top:16px}:focus-visible{outline:3px solid var(--color-primary-500);outline-offset:3px}@media(max-width:720px){main{padding:16px}.workbench{grid-template-columns:1fr}.reading{padding:24px}.palette{gap:4px}.swatch{height:56px}} .workbench>*{min-width:0}.bookmark{max-width:100%;white-space:normal;height:auto;min-height:2rem;text-align:center}.disclosure summary{white-space:normal} ``` 代码参考 - 将全部四个源文件保存在同一个项目目录中。 ### main.js 计算令牌检查，以及相互独立的阅读状态和呈现状态。 ``` import './style.css'; const root=document.documentElement;let saved=false;function inspect(){const style=getComputedStyle(root);const keys=['--color-primary-500','--radius-base','--spacing','--typo-base--font-family'];document.querySelector('#tokens').replaceChildren(...keys.map(key=>{const row=document.createElement('div'),dt=document.createElement('dt'),dd=document.createElement('dd');dt.textContent=key;dd.textContent=style.getPropertyValue(key).trim();row.append(dt,dd);return row}));}document.querySelector('#theme').addEventListener('change',e=>{root.dataset.theme=e.target.value;inspect()});document.querySelector('#mode').addEventListener('click',e=>{let dark=root.classList.toggle('dark');e.currentTarget.textContent=dark?'Use light appearance':'Use dark appearance';inspect()});document.querySelector('#bookmark').addEventListener('click',e=>{saved=!saved;e.currentTarget.setAttribute('aria-pressed',String(saved));e.currentTarget.textContent=saved?'Remove from this reading desk':'Save to this reading desk';document.querySelector('#message').textContent=saved?'Saved in this preview only.':'This reading card is not saved.'});document.querySelector('#reset').addEventListener('click',()=>{root.dataset.theme='cerberus';root.classList.remove('dark');document.querySelector('#theme').value='cerberus';document.querySelector('#mode').textContent='Use dark appearance';inspect()});inspect(); ``` 代码参考 - 将全部四个源文件保存在同一个项目目录中。 ### vite.config.mjs 接入实际的 Tailwind 编译器。 ``` import{defineConfig}from'vite';import tailwindcss from'@tailwindcss/vite';export default defineConfig({plugins:[tailwindcss()],base:'./',build:{cssCodeSplit:false}}); ``` 代码参考 - 将全部四个源文件保存在同一个项目目录中。 ## Skeleton 设计系统 Agent 设置 ### 实现起点 先保存所提供的四个文件。这是 CSS 实用类层，无需 Svelte 或 React 运行时。 ``` npm init -y npm install @skeletonlabs/skeleton@5.0.1 npm install --save-dev tailwindcss@4.3.3 @tailwindcss/vite@4.3.3 vite@8.3.2 npx vite --host 127.0.0.1 ``` ### 适用于你项目的提示词 ``` 使用实际的 CSS 实用类和 Cerberus/Mint/Rose 主题导入，完整实现 Skeleton 5.0.1 阅读工作台。保留基于类的深色配色方案、易读的计算令牌行、完整内容、本地保存状态，以及不会删除该状态的呈现重置功能。请将 CSS 层与框架组件 API 区分开来。 ``` ## Skeleton 设计系统来源与范围 采用实际的 Skeleton Tailwind CSS 实用类和内置主题，并保留原生纯 JavaScript 页面行为。不加载 Skeleton Svelte 或 React 运行时。 - 安装 CSS 与框架集成选项。 - 主题 主题组合与选择。 - 颜色 调色板与对比度搭配。 - 深色外观 配色方案与变体行为。 - 折叠内容 原生 details/summary CSS 层。 ## Skeleton 设计系统相关资源 ### Tabler 原生 Tabler 项目日志，采用实际的 1.6 主题变量、时间线卡片、数据网格上下文、模态框验证，以及可接收本地检查点的明暗主题组合。 ### Tamagui 通过完整的原生组件习惯追踪板（含验证、进度和空状态恢复），了解 Tamagui 实际的 v5 令牌类别以及浅色／深色蓝色主题。 ### UIkit UIkit 结合了 CSS 框架、Less 自定义配置和由属性驱动的 JavaScript 组件。下方的工作坊规划器展示了 Switcher、Accordion 和响应式网格如何协同工作，并说明原生组件行为与应用选择状态的边界。 - [实现参考](https://www.skeleton.dev/docs/svelte/design/themes) - [来源](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/cerberus.css) - [来源](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/mint.css) - [来源](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/rose.css) - [来源](https://www.skeleton.dev/docs/svelte/get-started/fundamentals) - [代码参考](https://www.skeleton.dev/docs/svelte/get-started/installation) - [安装 CSS 与框架集成选项。](https://www.skeleton.dev/docs/svelte/get-started/installation) - [主题 主题组合与选择。](https://www.skeleton.dev/docs/svelte/design/themes) - [颜色 调色板与对比度搭配。](https://www.skeleton.dev/docs/svelte/design/colors) - [深色外观 配色方案与变体行为。](https://www.skeleton.dev/docs/svelte/guides/mode) - [折叠内容 原生 details/summary CSS 层。](https://www.skeleton.dev/docs/svelte/tailwind-components/disclosures)