r04/theme.html · 约 2787 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
6<title>主题定制</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="app">
11 <header class="top">
12 <div class="top-title">主题定制</div>
13 <div class="sub">🎨 UI Kit</div>
14 </header>
15 <main class="main">
16
17<div class="card">
18 <h3><span class="dot"></span>主题预设</h3>
19 <p class="muted">点击切换，全站组件实时换肤（基于 CSS 变量）。</p>
20 <div class="presets" id="presets">
21 <div class="preset on" style="background:linear-gradient(135deg,#06b6d4,#3b82f6)" data-p1="#06b6d4" data-p2="#3b82f6"></div>
22 <div class="preset" style="background:linear-gradient(135deg,#f43f5e,#ec4899)" data-p1="#f43f5e" data-p2="#ec4899"></div>
23 <div class="preset" style="background:linear-gradient(135deg,#10b981,#059669)" data-p1="#10b981" data-p2="#059669"></div>
24 <div class="preset" style="background:linear-gradient(135deg,#8b5cf6,#6366f1)" data-p1="#8b5cf6" data-p2="#6366f1"></div>
25 <div class="preset" style="background:linear-gradient(135deg,#f59e0b,#d97706)" data-p1="#f59e0b" data-p2="#d97706"></div>
26 </div>
27</div>
28<div class="card">
29 <h3><span class="dot"></span>实时预览</h3>
30 <button class="btn btn-primary">主要按钮</button>
31 <div class="cell" style="margin-top:12px;"><div class="ic">⭐</div><div class="tt">收藏功能</div><div class="sw on"></div></div>
32 <div class="prog" style="margin-top:12px;"><i style="width:65%"></i></div>
33 <div class="tag g" style="margin-top:10px;">主题已应用</div>
34</div>
35<div class="card">
36 <h3><span class="dot"></span>主题变量</h3>
37 <div class="code">:root{
38 --primary: #06b6d4;
39 --primary-2: #3b82f6;
40 --radius: 16px;
41}
42/* 改一处即可整体换肤 */</div>
43</div>
44
45 </main>
46 <nav class="nav">
47 <a href="index.html" class="">🏠<span>总览</span></a>
48 <a href="basic.html" class="">🧩<span>组件</span></a>
49 <a href="form.html" class="">📝<span>表单</span></a>
50 <a href="feedback.html" class="">💬<span>反馈</span></a>
51 <a href="about.html" class="">ℹ️<span>说明</span></a>
52 </nav>
53</div>
54<script>
55document.querySelectorAll('#presets .preset').forEach(function(p){p.addEventListener('click',function(){
56 document.querySelectorAll('#presets .preset').forEach(function(x){x.classList.remove('on');});p.classList.add('on');
57 var r=document.documentElement.style;
58 r.setProperty('--primary',p.dataset.p1);
59 r.setProperty('--primary-2',p.dataset.p2);
60 r.setProperty('--primary-grad','linear-gradient(135deg,'+p.dataset.p1+','+p.dataset.p2+')');
61});});
62</script>
63</body>
64</html>