hicccc77/WeFlow
1
0
Fork 0
mirror of https://github.com/hicccc77/WeFlow.git synced 2026-03-24 23:06:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

新增纯黑白样式

Browse Source
This commit is contained in:
xuncha
2026-03-04 21:26:20 +08:00
parent d3adae42fe
commit 1d8a7d2e63
3 changed files with 64 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/SettingsPage.tsx
View File

@@ -979,8 +979,12 @@ function SettingsPage() {
<div key={theme.id} className={`theme-card ${currentTheme === theme.id ? 'active' : ''}`} onClick={() => setTheme(theme.id)}>
<div className="theme-preview" style={{
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, ${theme.bgColor} 0%, #F8F2F8 45%, #F2F6FB 100%)` : `linear-gradient(135deg, ${theme.bgColor} 0%, ${theme.bgColor}dd 100%)`)
? (theme.id === 'blossom-dream' ? 'linear-gradient(150deg, #151316 0%, #1A1620 50%, #131018 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={{
background: theme.accentColor

9
src/stores/themeStore.ts
View File

@@ -1,7 +1,7 @@
import { create } from 'zustand'
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 interface ThemeInfo {
@@ -57,6 +57,13 @@ export const themes: ThemeInfo[] = [
description: 'RAL 180 80 10',
primaryColor: '#5A8A8A',
bgColor: '#E4F0F0'
},
{
id: 'geist',
name: 'Geist',
description: 'Vercel · 极简黑白',
primaryColor: '#000000',
bgColor: '#ffffff'
}
]

50
src/styles/main.scss
View File

@@ -190,6 +190,31 @@
--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);
}
// 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;