使用方法
- 输入想要变色的文字。
- 在“渐变颜色点”区域添加/修改颜色（至少两个）。
- （可选）点击多色预设快速套用配色。
- 选择需要的格式（粗体/斜体等）。
- 预览效果满意后，点击“复制代码”。
- 在 Minecraft 聊天框或告示牌中粘贴，发送即可看到炫彩文字！
注意事项
- 生成的代码适用于 Minecraft Java版（基岩版部分支持，建议自行测试）。
- 颜色代码使用 &#RRGGBB 格式（1.16+版本支持），若您使用旧版本可能需要转换为 §x§R§R§G§G§B§B 格式，请留意。
- 随机字符效果 (&k) 在预览中用斜纹背景模拟，实际游戏中为随机闪烁字符。
HTML：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<title>多色渐变 · 文字生成器 (Minecraft)</title>
<!-- 字体：Inter 干净现代，保留 Patrick Hand 作为手写点缀 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&family=Patrick+Hand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
/* 全新配色方案：干净、现代、适合社区发布 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* 明亮模式 */
--bg-gradient-start: #f0f4fa;
--bg-gradient-end: #e6ecf5;
--card-bg: rgba(255, 255, 255, 0.85);
--card-border: rgba(255, 255, 255, 0.4);
--text-primary: #1a2639;
--text-secondary: #2c3e50;
--accent-primary: #4f46e5; /* 靛蓝 */
--accent-secondary: #7c3aed; /* 紫罗兰 */
--accent-soft: #a78bfa;
--border-light: #d1d9e6;
--shadow-color: rgba(0, 0, 0, 0.04);
--button-text: white;
--preset-bg: white;
--preset-border: #e2e8f0;
--option-bg: rgba(255,255,255,0.6);
--preview-bg: #ffffffb0;
--result-bg: #ffffffd0;
--result-border: var(--accent-primary);
--heading-color: #0f172a;
--icon-color: var(--accent-primary);
}
body.dark-mode {
/* 暗色模式 */
--bg-gradient-start: #0b1120;
--bg-gradient-end: #1a1f2f;
--card-bg: rgba(20, 28, 40, 0.9);
--card-border: rgba(75, 85, 99, 0.5);
--text-primary: #e2e8f0;
--text-secondary: #cbd5e1;
--accent-primary: #818cf8;
--accent-secondary: #c084fc;
--accent-soft: #4f46e5;
--border-light: #334155;
--shadow-color: rgba(0, 0, 0, 0.5);
--button-text: #0f172a;
--preset-bg: #1e293b;
--preset-border: #475569;
--option-bg: rgba(30, 41, 59, 0.7);
--preview-bg: #1e293bcc;
--result-bg: #1e293be0;
--result-border: var(--accent-secondary);
--heading-color: #f1f5f9;
--icon-color: var(--accent-secondary);
}
body {
background: linear-gradient(145deg, var(--bg-gradient-start), var(--bg-gradient-end));
color: var(--text-primary);
font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
transition: background 0.3s, color 0.2s;
}
.generator-container {
max-width: 1100px;
width: 100%;
background: var(--card-bg);
backdrop-filter: blur(12px);
border-radius: 36px;
padding: 2.5rem;
border: 1px solid var(--card-border);
box-shadow: 0 20px 40px -12px var(--shadow-color);
position: relative;
}
/* 夜间切换按钮 - 重新设计为悬浮胶囊 */
.dark-mode-toggle {
position: absolute;
top: 1.5rem;
right: 2rem;
background: var(--preset-bg);
border: 1.5px solid var(--border-light);
color: var(--text-primary);
width: 48px;
height: 48px;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.4rem;
transition: 0.2s;
box-shadow: 0 4px 10px var(--shadow-color);
z-index: 10;
}
.dark-mode-toggle:hover {
border-color: var(--accent-primary);
transform: scale(1.06);
}
h1 {
font-size: 2.6rem;
font-weight: 700;
color: var(--heading-color);
margin: 0 0 0.5rem 0;
letter-spacing: -0.02em;
display: flex;
align-items: center;
gap: 0.75rem;
}
h1 i {
color: var(--accent-primary);
font-size: 2.4rem;
}
.subtitle {
margin-bottom: 2rem;
color: var(--text-secondary);
font-weight: 500;
font-size: 1.1rem;
background: var(--option-bg);
padding: 0.9rem 1.5rem;
border-radius: 60px;
border: 1px solid var(--border-light);
backdrop-filter: blur(4px);
display: inline-block;
}
/* 输入区域 */
.input-area {
margin-bottom: 2rem;
}
.input-label {
font-weight: 600;
margin-bottom: 0.6rem;
color: var(--heading-color);
font-size: 1.1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.input-label i {
color: var(--icon-color);
}
.text-input {
width: 100%;
padding: 1rem 1.6rem;
font-size: 1.2rem;
background: var(--preset-bg);
border: 2px solid var(--border-light);
border-radius: 48px;
outline: none;
transition: 0.2s;
color: var(--text-primary);
font-weight: 500;
}
.text-input:focus {
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px var(--accent-soft);
}
/* 多色渐变控制区 */
.multi-color-section {
margin: 2rem 0;
background: var(--option-bg);
border-radius: 30px;
padding: 1.6rem;
border: 1px solid var(--border-light);
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.2rem;
}
.section-title {
font-weight: 700;
color: var(--heading-color);
font-size: 1.3rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.color-actions {
display: flex;
gap: 0.8rem;
}
.color-action-btn {
background: var(--preset-bg);
border: 1.5px solid var(--border-light);
color: var(--text-primary);
padding: 0.5rem 1.2rem;
border-radius: 40px;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: 0.15s;
display: flex;
align-items: center;
gap: 0.4rem;
}
.color-action-btn:hover {
border-color: var(--accent-primary);
background: var(--accent-primary);
color: white;
}
.color-action-btn i {
font-size: 1rem;
}
/* 颜色选择器列表 - 横向滚动适应 */
.color-list {
display: flex;
flex-wrap: wrap;
gap: 1rem 1.8rem;
align-items: center;
margin-top: 0.5rem;
}
.color-picker-item {
display: flex;
align-items: center;
gap: 0.4rem;
background: var(--preset-bg);
padding: 0.4rem 0.6rem 0.4rem 0.4rem;
border-radius: 40px;
border: 1px solid var(--border-light);
box-shadow: 0 2px 6px var(--shadow-color);
}
.color-picker-item input[type="color"] {
width: 50px;
height: 40px;
border: 2px solid var(--accent-primary);
border-radius: 30px;
cursor: pointer;
background: transparent;
padding: 2px;
}
.color-picker-item input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
.color-picker-item input[type="color"]::-webkit-color-swatch {
border: none;
border-radius: 30px;
}
.remove-color-btn {
background: transparent;
border: none;
color: var(--text-secondary);
font-size: 1.2rem;
cursor: pointer;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: 0.1s;
}
.remove-color-btn:hover {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
}
/* 预设渐变 (仍然保留, 但调整样式) */
.preset-section {
margin: 2rem 0;
}
.preset-grid {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
margin-top: 0.8rem;
}
.preset-item {
flex: 0 0 auto;
padding: 0.5rem 1.4rem;
background: var(--preset-bg);
border: 1.5px solid var(--preset-border);
border-radius: 40px;
font-weight: 600;
color: var(--text-primary);
cursor: pointer;
transition: 0.15s;
backdrop-filter: blur(4px);
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.95rem;
}
.preset-item:hover {
border-color: var(--accent-primary);
transform: translateY(-2px);
box-shadow: 0 6px 14px var(--shadow-color);
}
.preset-color {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid white;
background: linear-gradient(to right, var(--start), var(--end));
}
/* 格式选项 - 胶囊多选 */
.format-section {
margin: 2rem 0;
}
.format-grid {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
margin-top: 0.8rem;
}
.format-btn {
padding: 0.6rem 1.4rem;
background: var(--preset-bg);
border: 1.5px solid var(--preset-border);
border-radius: 40px;
font-weight: 600;
color: var(--text-primary);
cursor: pointer;
transition: 0.15s;
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.95rem;
}
.format-btn.active {
background: var(--accent-primary);
border-color: var(--accent-primary);
color: white;
}
.format-btn.active i {
color: white;
}
.format-btn i {
color: var(--icon-color);
}
/* 预览区域 */
.preview-area {
background: var(--option-bg);
border-radius: 28px;
padding: 1.8rem;
margin: 2rem 0;
border: 2px dashed var(--border-light);
text-align: center;
}
.preview-title {
font-weight: 600;
margin-bottom: 1rem;
color: var(--text-secondary);
font-size: 1.1rem;
letter-spacing: 0.3px;
}
.preview-box {
font-size: 2.2rem;
word-break: break-word;
min-height: 5rem;
display: flex;
align-items: center;
justify-content: center;
padding: 1.2rem;
background: var(--preview-bg);
border-radius: 24px;
border: 1px solid var(--border-light);
color: var(--heading-color);
font-weight: 600;
line-height: 1.4;
box-shadow: inset 0 2px 8px var(--shadow-color);
}
/* 结果输出 */
.result-area {
background: var(--result-bg);
border-radius: 28px;
padding: 1.6rem;
border: 2px solid var(--result-border);
margin: 2rem 0;
}
.result-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
}
.result-header span {
font-weight: 700;
color: var(--heading-color);
font-size: 1.2rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.copy-btn {
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
color: var(--button-text);
border: none;
padding: 0.7rem 2rem;
border-radius: 40px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: 0.2s;
box-shadow: 0 6px 14px var(--shadow-color);
display: flex;
align-items: center;
gap: 0.5rem;
border: 1px solid rgba(255,255,255,0.2);
}
.copy-btn:hover {
transform: scale(1.02);
filter: brightness(1.1);
box-shadow: 0 10px 20px var(--shadow-color);
}
.result-code {
background: var(--preset-bg);
padding: 1.2rem;
border-radius: 24px;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 1rem;
word-break: break-all;
border: 1px solid var(--border-light);
color: var(--text-primary);
max-height: 150px;
overflow-y: auto;
}
/* 页脚 - 通用信息 */
.footer-note {
margin-top: 2rem;
text-align: center;
color: var(--text-secondary);
font-size: 0.95rem;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.footer-note i {
color: var(--accent-primary);
}
/* 移动端优化 */
@media (max-width: 600px) {
.generator-container { padding: 1.5rem; border-radius: 28px; }
h1 { font-size: 2rem; }
.subtitle { font-size: 0.95rem; padding: 0.7rem 1.2rem; }
.dark-mode-toggle { top: 1rem; right: 1.2rem; width: 42px; height: 42px; }
.color-list { gap: 0.8rem; }
.color-picker-item { padding: 0.2rem 0.2rem 0.2rem 0.2rem; }
.preset-item { padding: 0.4rem 1rem; font-size: 0.85rem; }
.format-btn { padding: 0.4rem 1rem; font-size: 0.85rem; }
.preview-box { font-size: 1.6rem; padding: 1rem; }
}
</style>
</head>
<body>
<div class="generator-container">
<!-- 夜间模式切换 -->
<div class="dark-mode-toggle" id="darkModeToggle">🌙</div>
<h1>
<i class="fas fa-paint-roller"></i>
多色渐变文字生成器
</h1>
<div class="subtitle">
<i class="fas fa-cubes" style="margin-right: 0.5rem;"></i>
支持任意多个颜色点，每个字符自动插值，生成Minecraft代码
</div>
<!-- 输入框 -->
<div class="input-area">
<div class="input-label"><i class="fas fa-pencil"></i> 输入文字</div>
<input type="text" id="inputText" class="text-input" placeholder="例如：我的世界" value="我的世界">
</div>
<!-- 多色渐变核心区域 -->
<div class="multi-color-section">
<div class="section-header">
<div class="section-title"><i class="fas fa-palette"></i> 渐变颜色点 (按顺序)</div>
<div class="color-actions">
<div class="color-action-btn" id="addColorBtn"><i class="fas fa-plus"></i> 添加颜色</div>
<div class="color-action-btn" id="removeLastColorBtn"><i class="fas fa-minus"></i> 移除最后</div>
</div>
</div>
<div id="colorList" class="color-list">
<!-- 动态生成颜色选择器 -->
</div>
<p style="font-size:0.85rem; margin-top:0.8rem; color: var(--text-secondary);"><i class="fas fa-info-circle"></i> 颜色按从左到右的顺序应用于文字，超出2个时自动平滑过渡</p>
</div>
<!-- 快速预设 (多色预设改为三色示例，风格一致) -->
<div class="preset-section">
<div class="section-title"><i class="fas fa-magic"></i> 多色预设</div>
<div class="preset-grid" id="presetContainer">
<!-- 用js生成几个多色预设，比如彩虹、晚霞等 -->
</div>
</div>
<!-- 格式选项 (保持不变，但样式已更新) -->
<div class="format-section">
<div class="section-title"><i class="fas fa-bold"></i> 文字格式 (可多选)</div>
<div class="format-grid" id="formatContainer">
<div class="format-btn" data-format="l"><i class="fas fa-bold"></i> 粗体 (&l)</div>
<div class="format-btn" data-format="o"><i class="fas fa-italic"></i> 斜体 (&o)</div>
<div class="format-btn" data-format="n"><i class="fas fa-underline"></i> 下划线 (&n)</div>
<div class="format-btn" data-format="m"><i class="fas fa-strikethrough"></i> 删除线 (&m)</div>
<div class="format-btn" data-format="k"><i class="fas fa-dice"></i> 随机 (&k)</div>
</div>
</div>
<!-- 预览区域 -->
<div class="preview-area">
<div class="preview-title"><i class="fas fa-eye"></i> 实时预览 (效果模拟)</div>
<div class="preview-box" id="previewBox">我的世界</div>
</div>
<!-- 结果输出 -->
<div class="result-area">
<div class="result-header">
<span><i class="fas fa-code"></i> Minecraft格式代码 (每字后自动加&r)</span>
<button class="copy-btn" id="copyBtn"><i class="far fa-copy"></i> 复制代码</button>
</div>
<div class="result-code" id="resultCode"></div>
</div>
<!-- 通用页脚，无特定服务器信息 -->
<div class="footer-note">
<i class="fas fa-cube"></i> 适用于 Minecraft 聊天/告示牌 · 自由使用
</div>
</div>
<script>
(function() {
// --- 核心数据 ---
// 当前选中的格式
let activeFormats = new Set();
// 颜色数组：默认两个颜色（橙->橙红）
let colorValues = ['#ff4500', '#ff8c00'];
// DOM 元素
const inputText = document.getElementById('inputText');
const previewBox = document.getElementById('previewBox');
const resultCode = document.getElementById('resultCode');
const copyBtn = document.getElementById('copyBtn');
const colorListDiv = document.getElementById('colorList');
const addColorBtn = document.getElementById('addColorBtn');
const removeLastColorBtn = document.getElementById('removeLastColorBtn');
const presetContainer = document.getElementById('presetContainer');
const formatBtns = document.querySelectorAll('.format-btn');
const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;
// --- 多色预设 (三色/四色) ---
const multiPresets = [
{ name: '彩虹', colors: ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#4B0082', '#9400D3'] },
{ name: '晚霞', colors: ['#FF4500', '#FF8C00', '#FFD700', '#FFB6C1'] },
{ name: '海洋', colors: ['#00CED1', '#1E90FF', '#4169E1', '#191970'] },
{ name: '森林', colors: ['#228B22', '#32CD32', '#ADFF2F', '#6B8E23'] },
{ name: '紫罗兰', colors: ['#DA70D6', '#BA55D3', '#9932CC', '#9400D3'] },
{ name: '金橙', colors: ['#FFD700', '#FFA500', '#FF8C00'] }
];
// --- 工具函数：颜色插值 (16进制) ---
function interpolateColor(color1, color2, t) {
const r1 = parseInt(color1.slice(1,3), 16);
const g1 = parseInt(color1.slice(3,5), 16);
const b1 = parseInt(color1.slice(5,7), 16);
const r2 = parseInt(color2.slice(1,3), 16);
const g2 = parseInt(color2.slice(3,5), 16);
const b2 = parseInt(color2.slice(5,7), 16);
const r = Math.round(r1 + (r2 - r1) * t);
const g = Math.round(g1 + (g2 - g1) * t);
const b = Math.round(b1 + (b2 - b1) * t);
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).padStart(6, '0')}`;
}
// 多色插值：根据颜色数组和比例 t (0-1) 返回颜色
function getMultiColor(colors, t) {
if (colors.length === 0) return '#000000';
if (colors.length === 1) return colors[0];
// 将t映射到区间 [0, colors.length-1]
const pos = t * (colors.length - 1);
const index = Math.floor(pos);
if (index >= colors.length - 1) return colors[colors.length-1];
const frac = pos - index;
return interpolateColor(colors[index], colors[index+1], frac);
}
// 生成Minecraft代码 (每个字符独立颜色+格式)
function generateGradientText(text) {
if (!text) return '';
let formatStr = '';
const formatOrder = ['k', 'l', 'm', 'n', 'o'];
for (const f of formatOrder) {
if (activeFormats.has(f)) {
formatStr += `&${f}`;
}
}
let result = '';
const len = text.length;
for (let i = 0; i < len; i++) {
const char = text[i];
if (char === ' ') {
result += ' ';
continue;
}
const t = len === 1 ? 0 : i / (len - 1);
const colorHex = getMultiColor(colorValues, t);
const colorCode = colorHex.slice(1).toLowerCase(); // 去掉#
result += `&#${colorCode}${formatStr}${char}&r`;
}
return result;
}
// 更新预览 (HTML模拟)
function updatePreview() {
const text = inputText.value;
if (!text) {
previewBox.innerText = '（输入文字）';
resultCode.innerText = '';
return;
}
const mcCode = generateGradientText(text);
resultCode.innerText = mcCode;
let previewHtml = '';
const len = text.length;
for (let i = 0; i < len; i++) {
const char = text[i];
if (char === ' ') {
previewHtml += ' ';
continue;
}
const t = len === 1 ? 0 : i / (len - 1);
const colorHex = getMultiColor(colorValues, t);
let fontWeight = activeFormats.has('l') ? 'bold' : 'normal';
let fontStyle = activeFormats.has('o') ? 'italic' : 'normal';
let textDecoration = '';
if (activeFormats.has('n')) textDecoration += ' underline';
if (activeFormats.has('m')) textDecoration += ' line-through';
if (activeFormats.has('k')) {
// 随机效果无法在HTML模拟，简单加个背景提示
previewHtml += `<span style="color: ${colorHex}; font-weight: ${fontWeight}; font-style: ${fontStyle}; text-decoration:${textDecoration}; background: repeating-linear-gradient(45deg, #ccc, #ccc 2px, transparent 2px, transparent 6px);">${char}</span>`;
} else {
previewHtml += `<span style="color: ${colorHex}; font-weight: ${fontWeight}; font-style: ${fontStyle}; text-decoration:${textDecoration};">${char}</span>`;
}
}
previewBox.innerHTML = previewHtml;
}
// --- 渲染颜色选择器列表 ---
function renderColorPickers() {
colorListDiv.innerHTML = '';
colorValues.forEach((color, index) => {
const item = document.createElement('div');
item.className = 'color-picker-item';
const colorInput = document.createElement('input');
colorInput.type = 'color';
colorInput.value = color;
colorInput.setAttribute('data-index', index);
colorInput.addEventListener('input', function(e) {
const idx = parseInt(e.target.dataset.index);
colorValues[idx] = e.target.value;
updatePreview();
});
item.appendChild(colorInput);
// 只有颜色数量大于2时才显示移除按钮
if (colorValues.length > 2) {
const removeBtn = document.createElement('button');
removeBtn.className = 'remove-color-btn';
removeBtn.innerHTML = '<i class="fas fa-times"></i>';
removeBtn.addEventListener('click', () => {
colorValues.splice(index, 1);
renderColorPickers();
updatePreview();
});
item.appendChild(removeBtn);
}
colorListDiv.appendChild(item);
});
}
// 添加新颜色 (默认添加 #4f46e5)
function addColor() {
if (colorValues.length >= 8) {
alert('最多支持8个颜色点，以免界面拥挤');
return;
}
colorValues.push('#4f46e5'); // 默认靛蓝
renderColorPickers();
updatePreview();
}
// 移除最后一个颜色
function removeLastColor() {
if (colorValues.length <= 2) {
alert('至少保留两个颜色');
return;
}
colorValues.pop();
renderColorPickers();
updatePreview();
}
// 初始化预设 (多色)
function initPresets() {
multiPresets.forEach(p => {
const btn = document.createElement('div');
btn.className = 'preset-item';
// 显示前两个颜色的小圆点
const gradientStyle = p.colors.length >= 2 ?
`linear-gradient(135deg, ${p.colors[0]}, ${p.colors[p.colors.length-1]})` :
p.colors[0];
btn.innerHTML = `<span class="preset-color" style="background: ${gradientStyle};"></span> ${p.name}`;
btn.addEventListener('click', () => {
colorValues = [...p.colors]; // 复制新数组
renderColorPickers();
updatePreview();
});
presetContainer.appendChild(btn);
});
}
// 格式按钮事件
formatBtns.forEach(btn => {
btn.addEventListener('click', () => {
const format = btn.dataset.format;
if (activeFormats.has(format)) {
activeFormats.delete(format);
btn.classList.remove('active');
} else {
activeFormats.add(format);
btn.classList.add('active');
}
updatePreview();
});
});
// 输入框事件
inputText.addEventListener('input', updatePreview);
// 复制
copyBtn.addEventListener('click', () => {
const code = resultCode.innerText;
if (!code) return;
navigator.clipboard.writeText(code).then(() => {
alert('复制成功！');
}).catch(() => {
const textarea = document.createElement('textarea');
textarea.value = code;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
alert('复制成功！');
});
});
// 添加/移除颜色
addColorBtn.addEventListener('click', addColor);
removeLastColorBtn.addEventListener('click', removeLastColor);
// --- 夜间模式 (保留，使用新图标) ---
const currentHour = new Date().getHours();
const isNightTime = currentHour >= 22 || currentHour < 6;
const savedTheme = localStorage.getItem('darkMode');
if (savedTheme === null) {
if (isNightTime) {
body.classList.add('dark-mode');
darkModeToggle.textContent = '☀️';
} else {
body.classList.remove('dark-mode');
darkModeToggle.textContent = '🌙';
}
} else if (savedTheme === 'true') {
body.classList.add('dark-mode');
darkModeToggle.textContent = '☀️';
} else {
body.classList.remove('dark-mode');
darkModeToggle.textContent = '🌙';
}
darkModeToggle.addEventListener('click', function() {
body.classList.toggle('dark-mode');
const isDark = body.classList.contains('dark-mode');
darkModeToggle.textContent = isDark ? '☀️' : '🌙';
localStorage.setItem('darkMode', isDark);
});
// 启动！
renderColorPickers();
initPresets();
updatePreview();
})();
</script>
</body>
</html>
