GithubBackup/Foxel
1
0
Fork 0
mirror of https://github.com/DrizzleTime/Foxel.git synced 2026-05-27 03:00:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add theme and dark mode

Browse Source
This commit is contained in:
shiyu
2025-09-08 15:20:49 +08:00
parent f40ff4d751
commit d41b72d0ce
22 changed files with 525 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/apps/AppWindowsLayer.tsx
View File

@@ -243,8 +243,8 @@ export const AppWindowsLayer: React.FC<AppWindowsLayerProps> = ({ windows, onClo
left: w.maximized ? 0 : w.x,
width: w.maximized ? '100vw' : w.width,
height: w.maximized ? '100vh' : w.height,
background: 'rgba(240, 242, 245, 0.7)', // Semi-transparent background
border: '1px solid rgba(255, 255, 255, 0.18)',
background: 'var(--ant-color-bg-elevated, var(--ant-color-bg-container))',
border: '1px solid var(--ant-color-border-secondary, rgba(255,255,255,0.18))',
borderRadius: w.maximized ? 0 : 12,
boxShadow: w.maximized
? 'none'
@@ -254,7 +254,7 @@ export const AppWindowsLayer: React.FC<AppWindowsLayerProps> = ({ windows, onClo
display: 'flex',
flexDirection: 'column',
overflow: 'hidden',
backdropFilter: 'blur(20px) saturate(180%)', // Enhanced blur effect
backdropFilter: 'blur(12px) saturate(150%)',
zIndex: 3000 + idx,
willChange: 'left,top,width,height',
transition: interacting ? 'none' : 'top .15s,left .15s,width .15s,height .15s,box-shadow .25s'
@@ -269,9 +269,9 @@ export const AppWindowsLayer: React.FC<AppWindowsLayerProps> = ({ windows, onClo
alignItems: 'center',
justifyContent: 'space-between',
padding: '0 12px',
background: 'rgba(0, 0, 0, 0.25)', // Lighter, transparent title bar
borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
color: '#333', // Darker text for readability
background: 'var(--ant-color-fill-secondary, rgba(0,0,0,0.25))',
borderBottom: '1px solid var(--ant-color-border-secondary, rgba(255,255,255,0.1))',
color: 'var(--ant-color-text, #333)',
fontSize: 13,
fontWeight: 600,
letterSpacing: .2,
@@ -298,7 +298,7 @@ export const AppWindowsLayer: React.FC<AppWindowsLayerProps> = ({ windows, onClo
icon={w.maximized ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
onClick={() => onToggleMax(w.id)}
style={{
color: '#555',
color: 'var(--ant-color-text-secondary, #555)',
width: 30,
height: 30,
display: 'flex',
@@ -314,7 +314,7 @@ export const AppWindowsLayer: React.FC<AppWindowsLayerProps> = ({ windows, onClo
icon={<CloseOutlined />}
onClick={() => onClose(w.id)}
style={{
color: '#ff4d4f',
color: 'var(--ant-color-error, #ff4d4f)',
width: 30,
height: 30,
display: 'flex',

2
web/src/apps/ImageViewer/ImageViewer.tsx
View File

@@ -177,7 +177,7 @@ export const ImageViewerApp: React.FC<AppComponentProps> = ({ filePath, entry, o
if (err) {
return (
<div style={{
color: '#f5222d',
color: 'var(--ant-color-error, #f5222d)',
padding: 16,
background: 'rgba(20,20,20,0.8)',
backdropFilter: 'blur(24px)'

4
web/src/apps/OfficeViewer/OfficeViewer.tsx
View File

@@ -60,7 +60,7 @@ export const OfficeViewerApp: React.FC<AppComponentProps> = ({ filePath, onReque
}
return (
<div style={{ width: '100%', height: '100%', background: '#fff' }}>
<div style={{ width: '100%', height: '100%', background: 'var(--ant-color-bg-container, #fff)' }}>
{url ? (
<iframe
src={url}
@@ -79,4 +79,4 @@ export const OfficeViewerApp: React.FC<AppComponentProps> = ({ filePath, onReque
)}
</div>
);
};
};

10
web/src/apps/TextEditor/TextEditor.tsx
View File

@@ -64,19 +64,19 @@ export const TextEditorApp: React.FC<AppComponentProps> = ({ filePath, entry, on
}, [handleSave]);
return (
<Layout style={{ height: '100%', background: '#ffffff' }}>
<Layout style={{ height: '100%', background: 'var(--ant-color-bg-container, #ffffff)' }}>
<Header
style={{
background: '#f0f2f5',
background: 'var(--ant-color-bg-layout, #f0f2f5)',
padding: '0 16px',
height: 40,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
borderBottom: '1px solid #d9d9d9'
borderBottom: '1px solid var(--ant-color-border-secondary, #d9d9d9)'
}}
>
<span style={{ color: 'rgba(0, 0, 0, 0.88)' }}>
<span style={{ color: 'var(--ant-color-text, rgba(0,0,0,0.88))' }}>
{entry.name} {isDirty && '*'}
</span>
<Space>
@@ -101,4 +101,4 @@ export const TextEditorApp: React.FC<AppComponentProps> = ({ filePath, entry, on
</Content>
</Layout>
);
};
};