Guide
Getting started
Odyssey UI 无需构建步骤或包管理器。引入两个文件即可获得完整的组件样式与交互 —— 全部自包含、零外链。
安装
在页面 <head> 内引入样式表。odyssey.css 为核心（不内嵌字体，保持轻量）；odyssey-font.css 为可选的 Inter 字体（data-URI 内嵌，零外部请求）。
<head>
<!-- 核心样式，必需 -->
<link rel="stylesheet" href="https://odyssey.w33d.xyz/1.0/odyssey.css">
<!-- Inter 字体，可选 -->
<link rel="stylesheet" href="https://odyssey.w33d.xyz/1.0/odyssey-font.css">
</head>在 </body> 前引入交互脚本。它零依赖、以 data-* 属性渐进增强，并在 DOMContentLoaded 自动初始化。若你只用静态组件，脚本可以省略。
<script src="https://odyssey.w33d.xyz/1.0/odyssey.js"></script>
</body>基本用法
组件类均以 .ody- 前缀命名，遵循 BEM（block .ody-x / element .ody-x__y / modifier .ody-x--z / 状态 .is-*）。直接写 class 即可，不会污染宿主页面的裸元素。
Ready
<button class="ody-btn ody-btn--primary">Primary</button>
<button class="ody-btn ody-btn--secondary">Secondary</button>
<span class="ody-tag ody-tag--ok">
<span class="ody-dot ody-dot--ok"></span> Ready
</span>文档级排版（可选）
给任意容器加上 .ody-scope，即可让其内部的裸元素继承 Odyssey 的字体、颜色与盒模型基线 —— 适合整页文档。不加则库只作用于 .ody- 元素，绝不劫持宿主的 body／button／input。
交互（data-API）
脚本通过事件委托驱动，动态插入的标记无需重新初始化。常用属性：
data-ody-theme-toggle— 切换亮/暗主题并记忆到localStorage。data-ody-open="#id"— 打开.ody-modal/.ody-drawer；data-ody-dismiss关闭。data-ody-tabs+data-ody-panel="#id"— 标签页。data-ody-accordion+data-ody-collapse="#id"— 手风琴。data-ody-copy="#sel"/data-ody-copy-text="字面"— 复制到剪贴板。data-ody-tooltip="文本"、data-ody-popover="#id"— 提示与气泡卡片。
如需为后插入的子树手动接线，调用 Odyssey.init(rootEl)；命令式 Toast 用 Odyssey.toast({title, message, tone})。
主题切换
默认亮色。暗色同时由两条途径触发，显式覆盖优先：
- 系统偏好 —
@media (prefers-color-scheme: dark)自动生效。 - 显式属性 — 在
<html>（或任意祖先）设data-theme="dark"/"light"。
给任意按钮加 data-ody-theme-toggle，脚本便会在 <html> 上切换 data-theme 并写入 localStorage('ody-theme')，下次自动读回。右上角的图标按钮正是这样接线的 —— 点它试试。
<!-- 声明式：任意元素加属性即可 -->
<button class="ody-btn ody-btn--secondary" data-ody-theme-toggle>切换主题</button>
<!-- 命令式 -->
<script>
Odyssey.setTheme('dark'); // 或 'light'
Odyssey.toggleTheme();
</script>CDN 与自托管
两种方式二选一，产物文件完全相同且自包含：
- CDN — 直接指向发行地址
https://odyssey.w33d.xyz/1.0/…，最省事。 - 自托管 — 把
dist/下的odyssey.css、odyssey-font.css、odyssey.js拷进你的静态资源目录，改成本地路径。因为无任何外链，离线／内网／气隙环境同样可用。
1引入 CSS
2引入 JS
3写 .ody- class