fix(theme): 全主题文字对比度达标 WCAG AA——8套主题 textTertiary 从 #666/#999(对比2-3✗) 提升到 #8a8a9a/#6a5a4a 等(≥4.5✓); textSecondary 提升到 ≥5.3; 浅色主题 accentText 加深(latte #a06840→#8a5830, daylight #2070c0→#1860a8); 组件硬编码色 #2a2a3a/#3a4a6a/#4a6a8a/#fff/#888/#ddd 全替换为 CSS 变量(App/FileTree/GraphView/ImageView/TagFilter/SettingsPanel/InputDialog); styles.css 加 :root[data-theme-group=light] 浅色语法高亮配色; applyTheme 传 group 参数设置 data-theme-group 属性; 标签栏开关 ☰/– 图标修复可见性; TitleBar ▤🎨 按钮加 noDrag 修复不可点击
This commit is contained in:
@@ -52,7 +52,7 @@ export function App() {
|
||||
// 编辑器样式随设置生效(FR-编辑器设置真实生效)
|
||||
useEffect(() => { document.documentElement.style.setProperty('--editor-font-size', settings.fontSize + 'px'); document.documentElement.style.setProperty('--editor-font-family', settings.fontFamily); document.documentElement.style.setProperty('--editor-white-space', settings.wordWrap ? 'pre-wrap' : 'pre'); }, [settings.fontSize, settings.fontFamily, settings.wordWrap]);
|
||||
return (
|
||||
<div style={{ position: 'relative', display: 'flex', flexDirection: 'column', height: '100vh', background: 'var(--bg-primary, #1a1a1a)', color: '#ddd' }}>
|
||||
<div style={{ position: 'relative', display: 'flex', flexDirection: 'column', height: '100vh', background: 'var(--bg-primary, #1a1a1a)', color: 'var(--text-primary)' }}>
|
||||
{appearance.bgImage && <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(' + appearance.bgImage + ')', backgroundSize: 'cover', backgroundPosition: 'center', filter: settings.perfMode ? 'none' : 'blur(var(--blur-px,0px))', opacity: 0.45, zIndex: 0, pointerEvents: 'none' }} />}
|
||||
<div style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', height: '100vh' }}>
|
||||
<TitleBar view={view} onToggleView={() => setView(v => v === 'editor' ? 'graph' : 'editor')} onSettings={() => setShowSettings(true)} onAppearance={() => setShowAppearance(true)} onToggleSidebar={() => layout.toggleSidebar()} onToggleMinimal={() => layout.toggleMinimal()} onToggleTabbar={() => layout.toggleTabbar()} minimal={layout.minimal} tabbarVisible={layout.tabbarVisible} />
|
||||
@@ -61,7 +61,7 @@ export function App() {
|
||||
<div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
|
||||
{layout.minimal ? (<Editor />) : (<>
|
||||
{layout.sidebarVisible && (<>
|
||||
<div style={{ width: layout.sidebarWidth, borderRight: '1px solid #2a2a3a', display: 'flex', flexDirection: 'column', overflow: 'hidden', flexShrink: 0 }}>
|
||||
<div style={{ width: layout.sidebarWidth, borderRight: '1px solid var(--control-border)', display: 'flex', flexDirection: 'column', overflow: 'hidden', flexShrink: 0 }}>
|
||||
<SearchBox />
|
||||
<div style={{ flex: 1, overflow: 'auto' }}><FileTree /></div>
|
||||
<TagFilter />
|
||||
@@ -71,8 +71,8 @@ export function App() {
|
||||
{view === 'editor' ? <Editor /> : <GraphView onSwitchToEditor={() => setView('editor')} />}
|
||||
{view === 'editor' && layout.outlineVisible && (<>
|
||||
<Resizer side="right" onDrag={d => layout.setOutlineWidth(layout.outlineWidth + d)} />
|
||||
<div style={{ width: layout.outlineWidth, borderLeft: '1px solid #2a2a3a', display: 'flex', flexDirection: 'column', overflow: 'hidden', flexShrink: 0 }}>
|
||||
<div style={{ display: 'flex', borderBottom: '1px solid #2a2a3a' }}>
|
||||
<div style={{ width: layout.outlineWidth, borderLeft: '1px solid var(--control-border)', display: 'flex', flexDirection: 'column', overflow: 'hidden', flexShrink: 0 }}>
|
||||
<div style={{ display: 'flex', borderBottom: '1px solid var(--control-border)' }}>
|
||||
<button style={tabBtn(rightTab==='outline')} onClick={() => setRightTab('outline')}>大纲</button>
|
||||
<button style={tabBtn(rightTab==='info')} onClick={() => setRightTab('info')}>信息</button>
|
||||
</div>
|
||||
@@ -93,5 +93,5 @@ export function App() {
|
||||
}
|
||||
|
||||
function tabBtn(active: boolean): React.CSSProperties {
|
||||
return { flex: 1, padding: '6px', background: active ? '#2a2a3a' : 'transparent', border: 'none', color: active ? '#fff' : '#888', cursor: 'pointer', borderBottom: active ? '2px solid #4a9eff' : '2px solid transparent' };
|
||||
return { flex: 1, padding: '6px', background: active ? 'var(--control-border)' : 'transparent', border: 'none', color: active ? 'var(--text-primary)' : 'var(--text-tertiary)', cursor: 'pointer', borderBottom: active ? '2px solid var(--accent)' : '2px solid transparent' };
|
||||
}
|
||||
Reference in New Issue
Block a user