基于 Android 16 Material You 设计的完整UI组件库，无需构建步骤，直接引入即可使用。
M3-You UI 提供了完整的 Material Design 3 实现，具有以下核心特性：
基于 Android 16 设计规范实现，提供完整的 Material Design 3 组件和设计令牌。
支持 HCT 色彩空间和动态主题生成，提供丰富的色彩体验。
采用优化的亮色主题设计，提供清晰舒适的视觉体验。
完整的 ARIA 支持和对比度检查，确保所有用户都能无障碍使用。
适配所有设备尺寸，从手机到桌面设备都能提供优秀的用户体验。
纯原生 JavaScript 实现，无任何依赖，可按需加载组件，性能优异。
体验 M3-You UI 的组件功能和交互效果：
<!-- 按钮组件示例 -->
<m3-button variant="filled">填充按钮</m3-button>
<m3-button variant="outlined">描边按钮</m3-button>
<m3-button variant="text">文本按钮</m3-button>
<m3-button variant="filled" disabled>禁用按钮</m3-button>
<m3-button variant="filled" size="large">大型按钮</m3-button>
这是一个卡片组件示例，可以包含文本、图片和其他内容。
<m3-card>
<div style="padding: 1.5rem;">
<h3 style="margin-bottom: 0.75rem;">卡片标题</h3>
<p style="margin-bottom: 1.5rem;">
这是一个卡片组件示例，可以包含文本、图片和其他内容。
</p>
<div style="display: flex; gap: 0.75rem;">
<m3-button variant="text">取消</m3-button>
<m3-button variant="filled">确定</m3-button>
</div>
</div>
</m3-card>
<!-- 开关组件示例 -->
<m3-switch id="demoSwitch1">开关示例 1</m3-switch>
<m3-switch id="demoSwitch2" checked>开关示例 2</m3-switch>
<m3-switch id="demoSwitch3" disabled>禁用开关</m3-switch>
只需几个简单步骤，即可将 M3-You UI 集成到你的项目中：
<!DOCTYPE html>
<html>
<head>
<!-- 核心CSS -->
<link rel="stylesheet" href="css/m3-tokens.css">
<link rel="stylesheet" href="css/m3-core.css">
<link rel="stylesheet" href="css/m3-theme.css">
<!-- 核心JS -->
<script src="js/m3-hct-color.js"></script>
<script src="js/m3-theme-engine.js"></script>
<script src="js/m3-core.js"></script>
<script src="js/m3-utils.js"></script>
<!-- 组件（按需引入） -->
<script src="js/m3-components/button.js"></script>
<script src="js/m3-components/card.js"></script>
<script src="js/m3-components/switch.js"></script>
</head>
<body>
<!-- 使用组件 -->
<m3-button>按钮</m3-button>
<m3-card>卡片内容</m3-card>
<m3-switch>开关</m3-switch>
</body>
</html>
// 设置主题
window.M3Theme.generateSchemeFromSeed('#FF6B6B', false);
// 从图片提取主题
window.M3Theme.applyImageTheme('path/to/image.jpg');
// 获取当前主题
const theme = window.M3Theme.getThemeInfo();
console.log(theme);
清晰的文件结构，便于理解和按需使用：