March7th Theme Preview

三月七 UI 风格设计预览

这份预览展示了主题色、基础排版、常规 HTML 元素、表单、布局、全部 27 个组件与响应式效果。其它站点引入 CSS/JS 后即可复用这套轻量底层 UI 风格。

核心色板

primary

accent pink

accent purple

accent ice

card bg

page bg

基础排版

强文本、常规正文、辅助文字和默认链接都已提供底层样式。

这是 blockquote 引用块，使用主题主色作为左侧强调边。

无序列表项目
自动使用正文颜色

有序列表项目
保持统一间距

媒体与说明

图片、视频和说明文字的常规样式预览

水平分割线、图片圆角、说明文字颜色都已纳入底层样式。

表单控件

按钮、徽章与链接

这是一段包含主题链接的示例文本。

BadgeOKLCH

表格

变量	用途
`--m7-primary`	主品牌色
`--m7-card-bg`	卡片背景
`--m7-widget-gap`	响应式组件间距

Surface 表面

半透明表面适合放在壁纸或渐变背景上，包含边框、阴影和毛玻璃。

GlassResponsive

主题控制组件

主题切换器

色相选择器

自定义 HTML 标签组件

通过 march7th-components.js 注册 Web Components，不依赖框架，直接使用主题变量和 UI 类；也可以按需加载 /theme/components/*.js。

打字机文字效果，支持自定义速度和停顿时间。

March7th Theme Kit

Memory of Everything

可以直接在轮播内部写 HTML，放入标题、描述、按钮或图片。

Web Components

Lovely March7th

复杂内容不再需要塞进 items 字符串。

Flexible Slides

Wake Up, the Tomorrow is Yours

查看组件

这是 <m7-notice>，适合用于提示、公告和说明。

这些组件只依赖浏览器原生 Custom Elements，可以在任意站点中使用。

这是 <m7-tabs>，子节点的 label 会成为选项卡标题。

适合做文档、设置面板、作品介绍等内容切换。

切换时会派发 m7-select 事件。

每个组件都可以独立加载，也可以通过聚合入口一次加载。

组件复用 --m7-* 变量和 .m7-* 基础 UI 类。

可以，原生自定义标签可以在普通 HTML、Astro、Vue、React、Svelte 中使用。

自定义选择器

Tooltip

抽屉 & 模态框

侧边滑出面板和居中弹窗。

这是一个侧边抽屉面板。

点击遮罩或关闭按钮可关闭。

Affix / Top / Spin

Sticky Affix

右下角的回到顶部按钮会在滚动后显示。

Toast 组件会注册 window.March7thToast。

截图组件娱乐向

点击按钮截图并下载，或调用 March7thCamera API。

API：March7thCamera.captureViewport() · March7thCamera.capturePage() · March7thCamera.captureSelector("#id") · March7thCamera.download("page")

⚠️ 本组件仅供娱乐，用于表明 March7th 主题身份。受浏览器截图 API 限制，效果不完美，请谨慎用于正式场景。

<script src="/theme/march7th-components.js" defer></script>

<m7-theme-switch></m7-theme-switch>
<m7-hue-picker label="动态 Hue"></m7-hue-picker>
<m7-marquee text="March7th Theme · Lovely March7th"></m7-marquee>
<m7-typewriter-text texts="你好|Hello"></m7-typewriter-text>
<m7-carousel items="Memory|Lovely|Tomorrow"></m7-carousel>
<m7-tabs><section label="概览">内容</section></m7-tabs>
<m7-select options="苹果:apple|香蕉:banana"></m7-select>
<m7-accordion><section label="问题">答案</section></m7-accordion>
<m7-tooltip text="提示"><button>悬停</button></m7-tooltip>
<m7-drawer title="菜单">抽屉内容</m7-drawer>
<m7-modal title="提示">模态框内容</m7-modal>
<m7-affix>吸顶内容</m7-affix>
<m7-top>↑</m7-top>
<m7-spin text="加载中..."></m7-spin>
<m7-toast></m7-toast>
<m7-camera type="viewport" label="截取可视区域"></m7-camera>
<m7-camera type="page" label="长截图"></m7-camera>
<m7-camera type="#my-section"></m7-camera>

表单控件组件

统一风格的表单交互组件，支持禁用、只读、必填、错误提示等状态。

输入框 m7-input

多行文本 m7-textarea

开关 / 复选框 / 单选框

徽章 m7-badge

Default

Primary

Active

Pending

Danger

Info

Primary

Success

Danger

小尺寸

中尺寸

大尺寸

空状态 m7-empty

表单项 m7-form-item

数据展示组件

表格和分页，适合后台管理、数据列表等场景。

表格 m7-table

分页 m7-pagination

提示：支持切换每页条数、页码跳转，会派发 m7-pagination-change 和 m7-pagination-size-change 事件

表格 + 分页联动示例

反馈与导航组件

骨架屏、进度条、确认气泡、步骤条、面包屑导航。

骨架屏 m7-skeleton

面包屑 m7-breadcrumb

首页

文档

组件

面包屑

Home

Settings

Profile

进度条 m7-progress

默认

成功

警告

危险

环形

仪表盘

确认气泡 m7-popconfirm

提示：点击按钮会弹出确认框，支持 m7-popconfirm-confirm 和 m7-popconfirm-cancel 事件

步骤条 m7-steps（横向）

步骤条（错误状态）

步骤条（垂直）

博客 / 文档 / 作品集组件

以下组件同时支持自定义标签和纯 CSS 类。自定义标签适合快速生成结构，CSS 类适合框架内手写模板。

目录与代码增强

const kit = "March7th Theme Kit"; console.log(kit);

图片灯箱

单图点击放大，多图支持 ← → 切换和 Esc 关闭。

视频播放器

支持 B 站、YouTube 及本地视频。

纯 CSS 类写法示例

不用自定义标签也能复用样式

你可以在 Astro、Vue、React 模板里直接使用 .m7-post-card 等类。

<m7-post-card title="文章标题" date="2026-05-11" tags="CSS|OKLCH"></m7-post-card>
<m7-project-card title="项目" href="#" repo="#" tech="Web Components|CSS"></m7-project-card>
<m7-profile-card name="March7th" links="GitHub:https://github.com"></m7-profile-card>
<m7-timeline items="2026:发布|2025:重构"></m7-timeline>
<m7-toc target="article"></m7-toc>
<m7-post-meta date="2026-05-11" reading-time="8 min" category="Blog"></m7-post-meta>
<m7-code-copy>console.log("copy");</m7-code-copy>
<m7-lightbox><img src="assets/d1.webp" alt="预览图 1"><img src="assets/m1.webp" alt="预览图 2"></m7-lightbox>
<m7-lightbox><!-- 多图画廊 --><img src="1.webp"><img src="2.webp"></m7-lightbox>
<m7-video src="https://www.bilibili.com/video/BV14oPtzXEE6" cover="assets/d1.webp" title="演示"></m7-video>
<m7-video src="https://youtu.be/VIDEO_ID" title="YouTube 视频"></m7-video>
<m7-stat-card value="128" label="文章"></m7-stat-card>
<m7-friend-link name="Blog" href="#" description="友情链接"></m7-friend-link>

语义提示色

Tip青色提示

Note蓝色备注

Important紫色重点

Warning黄色警告

Caution红色谨慎

代码块

const theme = {
  hue: March7thTheme.getHue(),
  mode: March7thTheme.getMode(),
  resolvedMode: March7thTheme.getResolvedMode(),
};

March7thTheme.setMode("system");
March7thTheme.setHue(215);

透明卡片

.m7-card-transparent 适合放在壁纸、渐变和 Banner 上。

预览文件：/src/march7th-theme-preview.html · 组件共 27 个