Skip to content

fix(ui): lock light theme and reliable media playback #990

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ppapsmoken merged 1 commit into from
Aug 31, 2026
Merged

fix(ui): lock light theme and reliable media playback #990

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 13 additions & 86 deletions web/classic/src/components/layout/headerbar/ThemeToggle.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,94 +17,21 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/

import React, { useMemo } from 'react';
import { Button, Dropdown } from '@douyinfe/semi-ui';
import { Sun, Moon, Monitor } from 'lucide-react';
import { useActualTheme } from '../../../context/Theme';

const ThemeToggle = ({ theme, onThemeToggle, t }) => {
const actualTheme = useActualTheme();

const themeOptions = useMemo(
() => [
{
key: 'light',
icon: <Sun size={18} />,
buttonIcon: <Sun size={18} />,
label: t('浅色模式'),
description: t('始终使用浅色主题'),
},
{
key: 'dark',
icon: <Moon size={18} />,
buttonIcon: <Moon size={18} />,
label: t('深色模式'),
description: t('始终使用深色主题'),
},
{
key: 'auto',
icon: <Monitor size={18} />,
buttonIcon: <Monitor size={18} />,
label: t('自动模式'),
description: t('跟随系统主题设置'),
},
],
[t],
);

const getItemClassName = (isSelected) =>
isSelected
? '!bg-semi-color-primary-light-default !font-semibold'
: 'hover:!bg-semi-color-fill-1';

const currentButtonIcon = useMemo(() => {
const currentOption = themeOptions.find((option) => option.key === theme);
return currentOption?.buttonIcon || themeOptions[2].buttonIcon;
}, [theme, themeOptions]);
import React from 'react';
import { Button } from '@douyinfe/semi-ui';
import { Sun } from 'lucide-react';

const ThemeToggle = ({ t }) => {
return (
<Dropdown
position='bottomRight'
render={
<Dropdown.Menu>
{themeOptions.map((option) => (
<Dropdown.Item
key={option.key}
icon={option.icon}
onClick={() => onThemeToggle(option.key)}
className={getItemClassName(theme === option.key)}
>
<div className='flex flex-col'>
<span>{option.label}</span>
<span className='text-xs text-semi-color-text-2'>
{option.description}
</span>
</div>
</Dropdown.Item>
))}

{theme === 'auto' && (
<>
<Dropdown.Divider />
<div className='px-3 py-2 text-xs text-semi-color-text-2'>
{t('当前跟随系统')}：
{actualTheme === 'dark' ? t('深色') : t('浅色')}
</div>
</>
)}
</Dropdown.Menu>
}
>
<span className='inline-flex'>
<Button
icon={currentButtonIcon}
aria-label={t('切换主题')}
theme='borderless'
type='tertiary'
className='!p-1.5 !text-current focus:!bg-semi-color-fill-1 !rounded-full !bg-semi-color-fill-0 hover:!bg-semi-color-fill-1'
/>
</span>
</Dropdown>
<span className='inline-flex' title={t('浅色模式')}>
<Button
icon={<Sun size={18} />}
aria-label={t('浅色模式')}
theme='borderless'
type='tertiary'
className='!p-1.5 !text-current !rounded-full !bg-semi-color-fill-0'
/>
</span>
);
};

Expand Down
80 changes: 12 additions & 68 deletions web/classic/src/context/Theme/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/

import {
createContext,
useCallback,
useContext,
useState,
useEffect,
} from 'react';
import { createContext, useCallback, useContext, useEffect } from 'react';

const ThemeContext = createContext(null);
export const useTheme = () => useContext(ThemeContext);
Expand All @@ -34,74 +28,24 @@ export const useActualTheme = () => useContext(ActualThemeContext);
const SetThemeContext = createContext(null);
export const useSetTheme = () => useContext(SetThemeContext);

// 检测系统主题偏好
const getSystemTheme = () => {
if (typeof window !== 'undefined' && window.matchMedia) {
return window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light';
}
return 'light';
};

export const ThemeProvider = ({ children }) => {
const [theme, _setTheme] = useState(() => {
try {
return localStorage.getItem('theme-mode') || 'auto';
} catch {
return 'auto';
}
});

const [systemTheme, setSystemTheme] = useState(getSystemTheme());

// 计算实际应用的主题
const actualTheme = theme === 'auto' ? systemTheme : theme;

// 监听系统主题变化
useEffect(() => {
if (typeof window !== 'undefined' && window.matchMedia) {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

const handleSystemThemeChange = (e) => {
setSystemTheme(e.matches ? 'dark' : 'light');
};

mediaQuery.addEventListener('change', handleSystemThemeChange);

return () => {
mediaQuery.removeEventListener('change', handleSystemThemeChange);
};
}
}, []);
const theme = 'light';
const actualTheme = 'light';

// 应用主题到DOM
useEffect(() => {
const body = document.body;
if (actualTheme === 'dark') {
body.setAttribute('theme-mode', 'dark');
document.documentElement.classList.add('dark');
} else {
body.removeAttribute('theme-mode');
document.documentElement.classList.remove('dark');
}
}, [actualTheme]);
body.removeAttribute('theme-mode');
document.documentElement.classList.remove('dark');
document.documentElement.classList.add('light');
document.documentElement.style.colorScheme = 'light';
}, []);

const setTheme = useCallback((newTheme) => {
let themeValue;

if (typeof newTheme === 'boolean') {
// 向后兼容原有的 boolean 参数
themeValue = newTheme ? 'dark' : 'light';
} else if (typeof newTheme === 'string') {
// 新的字符串参数支持 'light', 'dark', 'auto'
themeValue = newTheme;
} else {
themeValue = 'auto';
}

_setTheme(themeValue);
localStorage.setItem('theme-mode', themeValue);
// Keep the setter API for existing callers, but persist only the fixed
// light mode so old dark/auto preferences cannot take effect.
void newTheme;
localStorage.setItem('theme-mode', 'light');
}, []);

return (
Expand Down
4 changes: 4 additions & 0 deletions web/classic/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@
}

/* ==================== 全局基础样式 ==================== */
html {
color-scheme: light !important;
}

:root {
--sidebar-width: 180px;
--sidebar-width-collapsed: 60px;
Expand Down
Binary file added web/default/public/flatkey-overview-welcome-logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
73 changes: 19 additions & 54 deletions web/default/src/context/theme-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,17 @@ import {
useMemo,
useState,
} from 'react'
import { getCookie, setCookie, removeCookie } from '@/lib/cookies'
import { setCookie, removeCookie } from '@/lib/cookies'

type Theme = 'dark' | 'light' | 'system'
type ResolvedTheme = Exclude<Theme, 'system'>

const DEFAULT_THEME = 'system'
// The console intentionally uses a single, light appearance. Keep the public
// theme shape for backwards compatibility with existing consumers, but do not
// derive it from the browser's `prefers-color-scheme` setting.
const DEFAULT_THEME: Theme = 'light'
const THEME_COOKIE_NAME = 'vite-ui-theme'
const THEME_COOKIE_MAX_AGE = 60 * 60 * 24 * 365 // 1 year
const THEMES = new Set<Theme>(['dark', 'light', 'system'])

type ThemeProviderProps = {
children: React.ReactNode
Expand All @@ -58,82 +60,45 @@ const initialState: ThemeProviderState = {

const ThemeContext = createContext<ThemeProviderState>(initialState)

function getSystemTheme(): ResolvedTheme {
if (typeof window === 'undefined') return 'light'
return window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light'
}

function resolveTheme(theme: Theme): ResolvedTheme {
return theme === 'system' ? getSystemTheme() : theme
}

function getStoredTheme(storageKey: string, fallback: Theme): Theme {
const storedTheme = getCookie(storageKey) as Theme | undefined
return storedTheme && THEMES.has(storedTheme) ? storedTheme : fallback
}

export function ThemeProvider({
children,
defaultTheme = DEFAULT_THEME,
storageKey = THEME_COOKIE_NAME,
...props
}: ThemeProviderProps) {
const [theme, _setTheme] = useState<Theme>(() =>
getStoredTheme(storageKey, defaultTheme)
)
const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>(() =>
resolveTheme(getStoredTheme(storageKey, defaultTheme))
)
const [theme, _setTheme] = useState<Theme>(DEFAULT_THEME)
const resolvedTheme: ResolvedTheme = 'light'

useEffect(() => {
const root = window.document.documentElement
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')

const applyTheme = () => {
const nextResolvedTheme = theme === 'system' ? getSystemTheme() : theme
root.classList.remove('light', 'dark')
root.classList.add(nextResolvedTheme)
setResolvedTheme(nextResolvedTheme)
}

applyTheme()

mediaQuery.addEventListener('change', applyTheme)

return () => mediaQuery.removeEventListener('change', applyTheme)
}, [theme])
root.classList.remove('dark')
root.classList.add('light')
root.style.colorScheme = 'light'
}, [])

const setTheme = useCallback(
(theme: Theme) => {
setCookie(storageKey, theme, THEME_COOKIE_MAX_AGE)
_setTheme(theme)
(_theme: Theme) => {
setCookie(storageKey, DEFAULT_THEME, THEME_COOKIE_MAX_AGE)
_setTheme(DEFAULT_THEME)
},
[storageKey]
)

const resetTheme = useCallback(() => {
removeCookie(storageKey)
_setTheme(defaultTheme)
}, [defaultTheme, storageKey])
_setTheme(DEFAULT_THEME)
}, [storageKey])

const contextValue = useMemo(
() => ({
defaultTheme,
defaultTheme: DEFAULT_THEME,
resolvedTheme,
resetTheme,
theme,
setTheme,
}),
[defaultTheme, resolvedTheme, resetTheme, theme, setTheme]
[resolvedTheme, resetTheme, theme, setTheme]
)

return (
<ThemeContext value={contextValue} {...props}>
{children}
</ThemeContext>
)
return <ThemeContext value={contextValue}>{children}</ThemeContext>
}

// eslint-disable-next-line react-refresh/only-export-components
Expand Down
14 changes: 11 additions & 3 deletions web/default/src/features/dashboard/components/overview/overview-hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.

For commercial licensing, please contact support@quantumnous.com
*/
import { type ComponentType } from 'react'
import { type ComponentType, useState } from 'react'
import {
Claude,
DeepSeek,
Expand Down Expand Up @@ -47,15 +47,23 @@ const featuredModels: Array<{ label: string; logo: ModelLogo }> = [
const WELCOME_LOGO_URL =
'https://cdn.shulex-voc.com/flatkey/console/overview-welcome-logo.png'

const FALLBACK_WELCOME_LOGO_URL = '/flatkey-overview-welcome-logo.png'

function WelcomeLogo() {
const [imageFailed, setImageFailed] = useState(false)
const src = imageFailed ? FALLBACK_WELCOME_LOGO_URL : WELCOME_LOGO_URL

return (
<img
src={WELCOME_LOGO_URL}
src={src}
alt=''
width={68}
height={68}
aria-hidden='true'
decoding='async'
onError={() => {
if (!imageFailed) setImageFailed(true)
}}
className='size-[68px] shrink-0'
/>
)
Expand Down Expand Up @@ -99,7 +107,7 @@ export function OverviewHero() {
</span>
</div>
<span className='text-muted-foreground max-w-[15rem] pr-1 text-[13px] sm:max-w-none sm:pr-2'>
{t('One key connects you to the models shaping AI:')}
{t('One key connects you to the models shaping AI')}
</span>
</div>
</section>
Expand Down
Loading