DeOldify Web UI主题定制：CSS变量注入+暗色模式+品牌VI色系适配-编程实验室

DeOldify Web UI主题定制：CSS变量注入+暗色模式+品牌VI色系适配

1. 项目概述

DeOldify是一款基于U-Net深度学习模型的黑白图片上色工具，能够将历史照片、老电影等黑白影像自动转换为彩色版本。本文将重点介绍如何通过CSS变量注入和主题定制技术，为DeOldify Web UI实现暗色模式和品牌VI色系适配。

2. 主题定制基础

2.1 CSS变量简介

CSS变量（也称为CSS自定义属性）是现代Web开发中用于主题定制的关键技术。它允许我们在:root选择器中定义可重用的值，然后在整个样式表中引用这些变量。

:root { --primary-color: #4285f4; --text-color: #333333; --bg-color: #ffffff; } body { background-color: var(--bg-color); color: var(--text-color); }

2.2 DeOldify UI结构分析

DeOldify的Web界面主要包含以下核心组件：

图片上传区域
处理控制按钮
结果对比展示区
参数调整面板

3. 暗色模式实现

3.1 基础暗色主题

通过CSS变量切换实现暗色模式：

/* 默认浅色主题 */ :root { --bg-primary: #ffffff; --bg-secondary: #f5f5f5; --text-primary: #333333; --text-secondary: #666666; --border-color: #e0e0e0; } /* 暗色主题 */ [data-theme="dark"] { --bg-primary: #121212; --bg-secondary: #1e1e1e; --text-primary: #e0e0e0; --text-secondary: #aaaaaa; --border-color: #333333; }

3.2 动态切换实现

使用JavaScript实现主题切换功能：

function toggleTheme() { const currentTheme = document.documentElement.getAttribute('data-theme'); const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; document.documentElement.setAttribute('data-theme', newTheme); localStorage.setItem('theme', newTheme); } // 初始化时读取用户偏好 const savedTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); document.documentElement.setAttribute('data-theme', savedTheme);

4. 品牌VI色系适配

4.1 定义品牌色变量

:root { /* 主品牌色 */ --brand-primary: #4285f4; --brand-primary-light: #8ab4f8; --brand-primary-dark: #3367d6; /* 辅助色 */ --brand-secondary: #34a853; --brand-accent: #ea4335; --brand-warning: #fbbc05; }

4.2 应用品牌色

将品牌色应用到UI组件：

.button-primary { background-color: var(--brand-primary); color: white; border: 1px solid var(--brand-primary-dark); } .button-primary:hover { background-color: var(--brand-primary-dark); } .progress-bar { background-color: var(--brand-primary-light); } .alert-warning { background-color: var(--brand-warning); color: var(--text-primary); }

5. 高级定制技巧

5.1 响应式主题调整

根据设备特性动态调整主题：

@media (prefers-color-scheme: dark) { :root { --bg-primary: #121212; --text-primary: #e0e0e0; } } @media (max-width: 768px) { :root { --font-size-base: 14px; --spacing-unit: 8px; } }

5.2 主题切换动画

为颜色变化添加平滑过渡：

body { transition: background-color 0.3s ease, color 0.3s ease; } button, input, select { transition: background-color 0.2s ease, border-color 0.2s ease; }

6. 完整实现示例

6.1 HTML结构

<!DOCTYPE html> <html>// theme.js document.addEventListener('DOMContentLoaded', () => { const themeToggle = document.getElementById('theme-toggle'); // 初始化主题 const initTheme = () => { const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; const savedTheme = localStorage.getItem('theme') || (prefersDark ? 'dark' : 'light'); document.documentElement.setAttribute('data-theme', savedTheme); // 更新按钮文本 themeToggle.textContent = savedTheme === 'dark' ? '浅色模式' : '深色模式'; }; // 切换主题 themeToggle.addEventListener('click', () => { const currentTheme = document.documentElement.getAttribute('data-theme'); const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; document.documentElement.setAttribute('data-theme', newTheme); localStorage.setItem('theme', newTheme); themeToggle.textContent = newTheme === 'dark' ? '浅色模式' : '深色模式'; }); initTheme(); });