bourdon
4aade1cff1
- 添加 Import Map 支持 Lit 和本地模块的简洁导入 - 创建统一的 API 管理模块 (common/api.js) - 重命名 styles/ 为 common/ 目录 - 修复分页时列选择被重置的问题 - 将 app.js 重命名为 main.js - 所有导入路径使用 ~ 别名映射
124 lines
4.1 KiB
JavaScript
124 lines
4.1 KiB
JavaScript
import { LitElement, html, css } from 'lit';
|
|
import { sharedStyles } from '~/common/shared-styles.js';
|
|
|
|
export class ThemeToggle extends LitElement {
|
|
static properties = {
|
|
theme: { type: String }
|
|
};
|
|
|
|
static styles = [
|
|
sharedStyles,
|
|
css`
|
|
:host {
|
|
display: inline-block;
|
|
}
|
|
|
|
.theme-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
font-size: 14px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--border-hover);
|
|
}
|
|
|
|
.icon {
|
|
font-size: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.label {
|
|
font-weight: 500;
|
|
}
|
|
`
|
|
];
|
|
|
|
constructor() {
|
|
super();
|
|
// 从 localStorage 读取主题，默认为 dark
|
|
this.theme = localStorage.getItem('srdb-theme') || 'dark';
|
|
this.applyTheme();
|
|
}
|
|
|
|
toggleTheme() {
|
|
this.theme = this.theme === 'dark' ? 'light' : 'dark';
|
|
localStorage.setItem('srdb-theme', this.theme);
|
|
this.applyTheme();
|
|
|
|
// 触发主题变化事件
|
|
this.dispatchEvent(new CustomEvent('theme-changed', {
|
|
detail: { theme: this.theme },
|
|
bubbles: true,
|
|
composed: true
|
|
}));
|
|
}
|
|
|
|
applyTheme() {
|
|
const root = document.documentElement;
|
|
|
|
if (this.theme === 'light') {
|
|
// 浅色主题
|
|
root.style.setProperty('--srdb-bg-main', '#ffffff');
|
|
root.style.setProperty('--srdb-bg-surface', '#f5f5f5');
|
|
root.style.setProperty('--srdb-bg-elevated', '#e5e5e5');
|
|
root.style.setProperty('--srdb-bg-hover', '#d4d4d4');
|
|
|
|
root.style.setProperty('--srdb-text-primary', '#1a1a1a');
|
|
root.style.setProperty('--srdb-text-secondary', '#666666');
|
|
root.style.setProperty('--srdb-text-tertiary', '#999999');
|
|
|
|
root.style.setProperty('--srdb-border-color', 'rgba(0, 0, 0, 0.1)');
|
|
root.style.setProperty('--srdb-border-hover', 'rgba(0, 0, 0, 0.2)');
|
|
|
|
root.style.setProperty('--srdb-shadow-sm', '0 1px 2px 0 rgba(0, 0, 0, 0.05)');
|
|
root.style.setProperty('--srdb-shadow-md', '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)');
|
|
root.style.setProperty('--srdb-shadow-lg', '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)');
|
|
root.style.setProperty('--srdb-shadow-xl', '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)');
|
|
} else {
|
|
// 深色主题（默认值）
|
|
root.style.setProperty('--srdb-bg-main', '#0f0f1a');
|
|
root.style.setProperty('--srdb-bg-surface', '#1a1a2e');
|
|
root.style.setProperty('--srdb-bg-elevated', '#222236');
|
|
root.style.setProperty('--srdb-bg-hover', '#2a2a3e');
|
|
|
|
root.style.setProperty('--srdb-text-primary', '#ffffff');
|
|
root.style.setProperty('--srdb-text-secondary', '#a0a0b0');
|
|
root.style.setProperty('--srdb-text-tertiary', '#6b6b7b');
|
|
|
|
root.style.setProperty('--srdb-border-color', 'rgba(255, 255, 255, 0.1)');
|
|
root.style.setProperty('--srdb-border-hover', 'rgba(255, 255, 255, 0.2)');
|
|
|
|
root.style.setProperty('--srdb-shadow-sm', '0 1px 2px 0 rgba(0, 0, 0, 0.3)');
|
|
root.style.setProperty('--srdb-shadow-md', '0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3)');
|
|
root.style.setProperty('--srdb-shadow-lg', '0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3)');
|
|
root.style.setProperty('--srdb-shadow-xl', '0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3)');
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<button class="theme-toggle" @click=${this.toggleTheme}>
|
|
<span class="icon">
|
|
${this.theme === 'dark' ? '🌙' : '☀️'}
|
|
</span>
|
|
<span class="label">
|
|
${this.theme === 'dark' ? 'Dark' : 'Light'}
|
|
</span>
|
|
</button>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('srdb-theme-toggle', ThemeToggle);
|