你好，世界

欢迎来到我的新博客！这是我使用 MDUI v2 和 Astro 构建的纯静态博客。

为什么写博客？

记录学习和生活，一起慢慢进步。

技术栈

• Astro - 静态站点生成器
• MDUI v2 - Material Design 3 组件库
• Waline - 评论系统

代码示例

// hello.js
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));

视频示例

▶ 观看视频

希望你喜欢这个博客！

MDUI v2 主题系统详解

MDUI v2 提供了完善的主题系统，支持 Material Design 3 的动态配色。

三种主题模式

• 亮色模式 (mdui-theme-light)
• 暗色模式 (mdui-theme-dark)
• 跟随系统 (mdui-theme-auto)

动态配色

使用 setColorScheme 函数可以从任意颜色生成完整的配色方案：

import { setColorScheme } from 'mdui/functions/setColorScheme.js';

setColorScheme('#0061a4');

设计令牌

MDUI 使用 CSS 自定义属性实现设计令牌，可以全局修改样式：

:root {
  --mdui-shape-corner-large: 1.5rem;
}