🎨 20+款CSS主流主题推荐 · 所见即所得 - 远程调用支持

左侧竖排按钮 · 每个主题同步自定义滚动条。点击按钮实时切换背景与滚动条，当前主题：薰衣草梦境

✨ 当前主题详情

柔和浪漫的紫粉色渐变

linear-gradient(145deg, #c471f5, #fa71cd)

🎯 滚动查看自定义滚动条 —— 滑块颜色与主题主色一致。

📖 20套独立主题：每套主题拥有独特的渐变色背景、滚动条滑块颜色和轨道颜色，视觉丰富。

📖 远程CSS调用：通过?css=1可输出所有主题的完整样式，方便集成到任何项目中。

📦 获取完整CSS

🧩 UI组件样式展示 (带代码引用)

以下组件样式均适配当前主题，可直接复制HTML代码使用。

🔘 按钮 Buttons

基础按钮

<button class="btn-demo">默认</button>
<button class="btn-demo primary">主要</button>
<button class="btn-demo success">成功</button>
<button class="btn-demo danger">危险</button>

不同尺寸

<button class="btn-demo small">小</button>
<button class="btn-demo">中</button>
<button class="btn-demo large">大</button>

📋 表单 Form

下拉框

<select class="demo-select">
    <option>选项 1</option>
    <option>选项 2</option>
    <option>选项 3</option>
</select>

输入框

<input class="demo-input" placeholder="请输入内容">

💬 提示框 & 引用

提示框

默认提示

信息提示

成功提示

错误提示

<div class="alert">默认提示</div>
<div class="alert info">信息提示</div>
<div class="alert success">成功提示</div>
<div class="alert error">错误提示</div>

引用

这是一段引用文字，可以用来强调重要内容或者来自其他来源的引用。

<blockquote>这是一段引用文字...</blockquote>

📝 代码 & 列表

代码块

行内代码 <div>Hello</div>

// 代码块示例
function hello() {
    console.log("Hello, world!");
}

<code>行内代码</code>
<pre>代码块...</pre>

列表

无序列表项 1
无序列表项 2
无序列表项 3

有序列表项 1
有序列表项 2
有序列表项 3

<ul><li>...</li></ul>
<ol><li>...</li></ol>

📊 表格

姓名	年龄	城市
张三	25	北京
李四	30	上海
王五	28	广州

<table>
    <thead><tr><th>姓名</th>...</tr></thead>
    <tbody>...</tbody>
</table>

🌈 所有主题列表

类名	主题名称	渐变值
`theme-lavender`	薰衣草梦境	`linear-gradient(145deg, #c471f5, #fa71cd)`
`theme-sunset`	落日余晖	`linear-gradient(145deg, #ff9a9e, #fad0c4)`
`theme-ocean`	深海蓝调	`linear-gradient(145deg, #2193b0, #6dd5ed)`
`theme-forest`	森林晨曦	`linear-gradient(145deg, #134e5e, #71b280)`
`theme-rose`	粉红玫瑰	`linear-gradient(145deg, #f857a6, #ff5858)`
`theme-aurora`	极光绿	`linear-gradient(145deg, #56ab2f, #a8e063)`
`theme-flame`	烈焰红	`linear-gradient(145deg, #ff4b1f, #ff9068)`
`theme-violet`	紫罗兰	`linear-gradient(145deg, #b92b27, #1565c0)`
`theme-peach`	蜜桃乌龙	`linear-gradient(145deg, #ff9a9e, #fecfef)`
`theme-oceanheart`	海洋之心	`linear-gradient(145deg, #4ca1af, #2c3e50)`
`theme-lemon`	柠檬汽水	`linear-gradient(145deg, #f6d365, #fda085)`
`theme-midnight`	午夜银河	`linear-gradient(145deg, #2c3e50, #3498db)`
`theme-sakura`	樱花粉	`linear-gradient(145deg, #ffb6c1, #ff69b4)`
`theme-emerald`	翡翠绿	`linear-gradient(145deg, #1d976c, #93f9b9)`
`theme-sunsetorange`	日落橙	`linear-gradient(145deg, #fc4a1a, #f7b733)`
`theme-tranquil`	静谧蓝	`linear-gradient(145deg, #7F7FD5, #86A8E7, #91EAE4)`
`theme-purplebutterfly`	紫蝶兰	`linear-gradient(145deg, #8e2de2, #4a00e0)`
`theme-beach`	热情海滩	`linear-gradient(145deg, #ff7e5f, #feb47b)`
`theme-mint`	薄荷冰	`linear-gradient(145deg, #00B4DB, #0083B0)`
`theme-dreamy`	梦幻紫	`linear-gradient(145deg, #9D50BB, #6E48AA)`

📘 详细使用说明文档

🎯 基本用法
点击左侧任意彩色按钮，即可实时切换页面背景和滚动条颜色。当前主题名称、描述和渐变值会同步更新。切换后刷新页面，主题将保持不变（通过session记录）。

🔧 集成到您自己的网站
有两种方式使用本主题系统：

远程CSS调用：在您的HTML <head> 中添加以下代码：
<link rel="stylesheet" href="http://hy.168hot.cn/zhuticss/index.php?css=1">
然后为 <body> 添加对应的类名（如 class="theme-ocean"），背景和滚动条样式即可生效。
复制CSS源码：点击上方“获取完整CSS”按钮，即可复制所有主题的CSS代码，直接粘贴到您自己的样式文件中。

🧩 左侧按钮列的使用
如果您希望在自己的页面中也使用类似的按钮切换效果，可以复制左侧按钮列的HTML结构：

<div class="theme-sidebar">
    <div class="theme-btn theme-lavender" data-key="theme-lavender" data-name="薰衣草梦境"></div>
    <!-- 其他主题按钮 -->
</div>

然后结合简单的JavaScript（如本页所示）即可实现点击切换。

📋 主题列表
本系统包含20套精心调制的渐变色，每个主题都有对应的类名、名称和渐变值。您可以在主题列表中查看所有选项。

🔒 兼容性与注意事项
- 滚动条样式仅支持WebKit内核浏览器（Chrome、Safari、Edge）和Firefox（通过 scrollbar-width）。
- 本页面使用session记录主题选择，确保刷新后一致。如果用于生产环境，建议将主题选择存储在cookie或localStorage中。
- 所有样式均使用CSS变量和类名控制，易于扩展和修改。