Astro文档工具站

starlight-material-design-theme — Astro 文档模板

作者 Axiaobo7788

基于 Astro Starlight 的 Material Design 3 主题，通过 CSS 变量与 Starlight 插件实现 Material You 配色、形状与状态层，不依赖 Tailwind 或 @material/web 运行时。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图

整体预览

查看源码在新标签页打开

作者提供的预览

查看现有预览图，更多页面尚未采集。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-14查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

以 seed 颜色生成明暗两套 Material 颜色角色，改一个值即可整体换色

保留 Starlight 的导航、搜索、目录与内容集合，仅通过 CSS 变量与插件叠加 MD3 样式

不依赖 Tailwind 配置，也不在运行时依赖 @material/web

提供 preset、variant、density、shape、contrast、tonalSurface、motion 等可配置项

可选的运行时取色器支持作者预览与访客自定义，并可用 persist 在首次绘制前恢复

内置 Playwright 截图测试与 GitHub Actions CI，覆盖首页、Theme Lab、搜索对话框、移动抽屉等状态

模板详细介绍

starlight-theme-md3 是一个面向 Astro Starlight 的 Material Design 3 / Material You 风格主题。它保留 Starlight 默认的导航、搜索、目录和内容集合行为，通过 CSS 变量与 Starlight 插件叠加 Material 的颜色、形状、表面、状态与排版令牌。主题不要求 Tailwind 配置，也不在运行时依赖 @material/web，安装后以 plugins: [md3Theme()] 的形式接入。

配色以 seed 为主路径，借助 @material/material-color-utilities 生成明暗两套 Material 颜色角色；未提供 seed 时回退到 teal、purple、blue 等命名 accent 调色板。可配置项包括 preset、variant、density、shape、contrast、tonalSurface、motion 以及可选的运行时取色器。主题提供明、暗、自动三种外观模式，并遵循 prefers-reduced-motion。

当前 0.2.x 面向 Astro 7 与 Starlight 0.41 或更新版本，要求 Node.js 22.12 以上；Astro 6 / Starlight 0.40 项目应使用 0.1.x。仓库包含演示站、Theme Lab、组件示例与令牌参考文档，并配有 Playwright 截图测试与 GitHub Actions CI。

Astro文档工具站

适合你的项目吗？

适用场景

为 Astro Starlight 文档站套用 Material Design 3 视觉风格
需要以单一 seed 颜色快速生成明暗主题配色的文档项目
希望保留 Starlight 默认无障碍导航与搜索、只调整外观的站点
需要为访客提供运行时主题色选择并持久化的文档站
在 Astro 7 / Starlight 0.41+ 与 Node.js 22.12+ 环境下新建文档项目

适合人群

使用 Astro 与 Starlight 构建文档站的开发者
偏好 Material You 配色与圆角表面风格的团队
不想引入 Tailwind 或 @material/web 运行时的项目
需要明暗模式与可选访客取色器的文档站点

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
0.2.x 需要 Astro 7、Starlight 0.41 或更新版本以及 Node.js 22.12 以上；Astro 6 / Starlight 0.40 请使用 0.1.x
2
安装方式为 npm install starlight-theme-md3 或 pnpm add starlight-theme-md3
3
在 astro.config 的 starlight 集成中通过 plugins: [md3Theme({...})] 启用
4
可用 npm create starlight-theme-md3@latest 或 pnpm create starlight-theme-md3 创建预配置项目，支持 --install、--git、--yes、--dry-run 等参数
5
expressive variant 目前使用基于 HCT 的近似实现，因为该包较新的 DynamicScheme 入口在目标 Node ESM 解析器下仍会失败

查看仓库使用说明