mirror of
https://github.com/hicccc77/WeFlow.git
synced 2026-03-25 07:16:51 +00:00
新增纯黑白样式
This commit is contained in:
@@ -979,8 +979,12 @@ function SettingsPage() {
|
|||||||
<div key={theme.id} className={`theme-card ${currentTheme === theme.id ? 'active' : ''}`} onClick={() => setTheme(theme.id)}>
|
<div key={theme.id} className={`theme-card ${currentTheme === theme.id ? 'active' : ''}`} onClick={() => setTheme(theme.id)}>
|
||||||
<div className="theme-preview" style={{
|
<div className="theme-preview" style={{
|
||||||
background: effectiveMode === 'dark'
|
background: effectiveMode === 'dark'
|
||||||
? (theme.id === 'blossom-dream' ? 'linear-gradient(150deg, #151316 0%, #1A1620 50%, #131018 100%)' : 'linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%)')
|
? (theme.id === 'blossom-dream' ? 'linear-gradient(150deg, #151316 0%, #1A1620 50%, #131018 100%)'
|
||||||
: (theme.id === 'blossom-dream' ? `linear-gradient(150deg, ${theme.bgColor} 0%, #F8F2F8 45%, #F2F6FB 100%)` : `linear-gradient(135deg, ${theme.bgColor} 0%, ${theme.bgColor}dd 100%)`)
|
: theme.id === 'geist' ? 'linear-gradient(135deg, #000000 0%, #111111 100%)'
|
||||||
|
: 'linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%)')
|
||||||
|
: (theme.id === 'blossom-dream' ? `linear-gradient(150deg, ${theme.bgColor} 0%, #F8F2F8 45%, #F2F6FB 100%)`
|
||||||
|
: theme.id === 'geist' ? 'linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%)'
|
||||||
|
: `linear-gradient(135deg, ${theme.bgColor} 0%, ${theme.bgColor}dd 100%)`)
|
||||||
}}>
|
}}>
|
||||||
<div className="theme-accent" style={{
|
<div className="theme-accent" style={{
|
||||||
background: theme.accentColor
|
background: theme.accentColor
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { create } from 'zustand'
|
import { create } from 'zustand'
|
||||||
import { persist } from 'zustand/middleware'
|
import { persist } from 'zustand/middleware'
|
||||||
|
|
||||||
export type ThemeId = 'cloud-dancer' | 'corundum-blue' | 'kiwi-green' | 'spicy-red' | 'teal-water' | 'blossom-dream'
|
export type ThemeId = 'cloud-dancer' | 'corundum-blue' | 'kiwi-green' | 'spicy-red' | 'teal-water' | 'blossom-dream' | 'geist'
|
||||||
export type ThemeMode = 'light' | 'dark' | 'system'
|
export type ThemeMode = 'light' | 'dark' | 'system'
|
||||||
|
|
||||||
export interface ThemeInfo {
|
export interface ThemeInfo {
|
||||||
@@ -57,6 +57,13 @@ export const themes: ThemeInfo[] = [
|
|||||||
description: 'RAL 180 80 10',
|
description: 'RAL 180 80 10',
|
||||||
primaryColor: '#5A8A8A',
|
primaryColor: '#5A8A8A',
|
||||||
bgColor: '#E4F0F0'
|
bgColor: '#E4F0F0'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'geist',
|
||||||
|
name: 'Geist',
|
||||||
|
description: 'Vercel · 极简黑白',
|
||||||
|
primaryColor: '#000000',
|
||||||
|
bgColor: '#ffffff'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@@ -190,6 +190,31 @@
|
|||||||
--sent-card-bg: var(--primary);
|
--sent-card-bg: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Geist · 极简黑白 - 浅色
|
||||||
|
[data-theme="geist"][data-mode="light"],
|
||||||
|
[data-theme="geist"]:not([data-mode]) {
|
||||||
|
--primary: #000000;
|
||||||
|
--primary-rgb: 0, 0, 0;
|
||||||
|
--primary-hover: #333333;
|
||||||
|
--primary-light: rgba(0, 0, 0, 0.06);
|
||||||
|
--bg-primary: #ffffff;
|
||||||
|
--bg-secondary: rgba(250, 250, 250, 0.95);
|
||||||
|
--bg-tertiary: rgba(0, 0, 0, 0.03);
|
||||||
|
--bg-hover: rgba(0, 0, 0, 0.05);
|
||||||
|
--text-primary: #000000;
|
||||||
|
--text-secondary: #666666;
|
||||||
|
--text-tertiary: #999999;
|
||||||
|
--border-color: #eaeaea;
|
||||||
|
--border-radius: 6px;
|
||||||
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
|
||||||
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
|
||||||
|
--bg-gradient: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
|
||||||
|
--primary-gradient: linear-gradient(135deg, #000000 0%, #333333 100%);
|
||||||
|
--card-bg: rgba(250, 250, 250, 0.95);
|
||||||
|
--card-inner-bg: #f5f5f5;
|
||||||
|
--sent-card-bg: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
// ==================== 深色主题 ====================
|
// ==================== 深色主题 ====================
|
||||||
|
|
||||||
// 云上舞白 - 深色
|
// 云上舞白 - 深色
|
||||||
@@ -339,6 +364,31 @@
|
|||||||
--sent-card-bg: var(--primary);
|
--sent-card-bg: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Geist · 极简黑白 - 深色
|
||||||
|
[data-theme="geist"][data-mode="dark"] {
|
||||||
|
--primary: #ffffff;
|
||||||
|
--primary-rgb: 255, 255, 255;
|
||||||
|
--primary-hover: #dddddd;
|
||||||
|
--primary-light: rgba(255, 255, 255, 0.1);
|
||||||
|
--bg-primary: #000000;
|
||||||
|
--bg-secondary: rgba(22, 22, 22, 0.95);
|
||||||
|
--bg-secondary-solid: #161616;
|
||||||
|
--bg-tertiary: rgba(255, 255, 255, 0.04);
|
||||||
|
--bg-hover: rgba(255, 255, 255, 0.08);
|
||||||
|
--text-primary: #ffffff;
|
||||||
|
--text-secondary: #888888;
|
||||||
|
--text-tertiary: #555555;
|
||||||
|
--border-color: #333333;
|
||||||
|
--border-radius: 6px;
|
||||||
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||||||
|
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
|
||||||
|
--bg-gradient: linear-gradient(135deg, #000000 0%, #111111 100%);
|
||||||
|
--primary-gradient: linear-gradient(135deg, #ffffff 0%, #cccccc 100%);
|
||||||
|
--card-bg: rgba(22, 22, 22, 0.95);
|
||||||
|
--card-inner-bg: #161616;
|
||||||
|
--sent-card-bg: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
// 重置样式
|
// 重置样式
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
Reference in New Issue
Block a user