99 lines
3.0 KiB
TypeScript
99 lines
3.0 KiB
TypeScript
import { onMounted } from 'vue';
|
|
|
|
type ThemeKey = 'classic' | 'light' | 'dark';
|
|
|
|
const THEME_STORAGE_KEY = 'agents_ui_theme';
|
|
|
|
const applyTheme = (theme: ThemeKey) => {
|
|
const root = document.documentElement;
|
|
root.setAttribute('data-theme', theme);
|
|
document.body.setAttribute('data-theme', theme);
|
|
|
|
// 调试信息
|
|
console.log('=== Theme Applied ===');
|
|
console.log('Theme:', theme);
|
|
|
|
// 检查样式是否生效
|
|
setTimeout(() => {
|
|
console.log('=== Elements Check ===');
|
|
|
|
// 输入栏底色
|
|
const stadiumShell = document.querySelector('.stadium-shell');
|
|
console.log('.stadium-shell exists:', !!stadiumShell);
|
|
if (stadiumShell) {
|
|
const styles = window.getComputedStyle(stadiumShell);
|
|
console.log('.stadium-shell background-color:', styles.backgroundColor);
|
|
}
|
|
|
|
// 对话区域顶部的模型选择器
|
|
const ribbonSelector = document.querySelector('.conversation-ribbon__selector');
|
|
console.log('.conversation-ribbon__selector exists:', !!ribbonSelector);
|
|
if (ribbonSelector) {
|
|
const styles = window.getComputedStyle(ribbonSelector);
|
|
console.log('.conversation-ribbon__selector color:', styles.color);
|
|
}
|
|
|
|
const selectorModel = document.querySelector('.selector-model');
|
|
if (selectorModel) {
|
|
const styles = window.getComputedStyle(selectorModel);
|
|
console.log('.selector-model color:', styles.color);
|
|
}
|
|
|
|
const selectorMode = document.querySelector('.selector-mode');
|
|
if (selectorMode) {
|
|
const styles = window.getComputedStyle(selectorMode);
|
|
console.log('.selector-mode color:', styles.color);
|
|
}
|
|
|
|
// 下拉菜单
|
|
const dropdown = document.querySelector('.model-mode-dropdown');
|
|
console.log('.model-mode-dropdown exists:', !!dropdown);
|
|
if (dropdown) {
|
|
const styles = window.getComputedStyle(dropdown);
|
|
console.log('.model-mode-dropdown background-color:', styles.backgroundColor);
|
|
}
|
|
|
|
const dropdownItem = document.querySelector('.dropdown-item');
|
|
if (dropdownItem) {
|
|
const styles = window.getComputedStyle(dropdownItem);
|
|
console.log('.dropdown-item color:', styles.color);
|
|
}
|
|
|
|
console.log('=== End Elements Check ===');
|
|
}, 100);
|
|
};
|
|
|
|
const loadTheme = (): ThemeKey => {
|
|
if (typeof window === 'undefined') return 'classic';
|
|
const saved = window.localStorage.getItem(THEME_STORAGE_KEY) as ThemeKey | null;
|
|
if (saved === 'light' || saved === 'dark' || saved === 'classic') return saved;
|
|
return 'classic';
|
|
};
|
|
|
|
const persistTheme = (theme: ThemeKey) => {
|
|
if (typeof window === 'undefined') return;
|
|
window.localStorage.setItem(THEME_STORAGE_KEY, theme);
|
|
};
|
|
|
|
export const installTheme = () => {
|
|
const theme = loadTheme();
|
|
applyTheme(theme);
|
|
};
|
|
|
|
export const useTheme = () => {
|
|
const setTheme = (theme: ThemeKey) => {
|
|
applyTheme(theme);
|
|
persistTheme(theme);
|
|
};
|
|
|
|
const restore = () => applyTheme(loadTheme());
|
|
|
|
onMounted(() => {
|
|
restore();
|
|
});
|
|
|
|
return { setTheme, restore, loadTheme };
|
|
};
|
|
|
|
export type { ThemeKey };
|