Matrix

Appearance

initTheme ​

初始化主题，自动为文档根元素添加相应的主题类名。

语法 ​

ts
initTheme(): void

返回值 ​

  • void - 无返回值

描述 ​

根据当前环境检测结果（调用 isDark() 函数），自动为文档根元素（<html>）添加相应的主题类名：

  • 暗色主题：添加 dark 类名，移除 light 类名
  • 亮色主题：添加 light 类名，移除 dark 类名

示例 ​

基本使用 ​

typescript
import { initTheme } from '@fu/matrix';
// 或
const initTheme = window.fuMatrix.initTheme;

// 在页面加载时初始化主题
initTheme();

// 文档根元素会自动添加相应的类名
// 暗色主题：<html class="dark">
// 亮色主题：<html class="light">

在应用初始化时使用 ​

typescript
import { initTheme } from '@fu/matrix';

// 应用启动时初始化主题
document.addEventListener('DOMContentLoaded', () => {
  initTheme();
});

// 或者在脚本加载完成后立即初始化
(function() {
  initTheme();
})();

配合 CSS 变量使用 ​

css
/* 亮色主题样式 */
html.light {
  --background-color: #ffffff;
  --text-color: #333333;
  --border-color: #e0e0e0;
  --card-background: #f8f9fa;
}

/* 暗色主题样式 */
html.dark {
  --background-color: #1a1a1a;
  --text-color: #ffffff;
  --border-color: #333333;
  --card-background: #2d2d2d;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.card {
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
}

结合主题检测的完整示例 ​

typescript
import { isDark, initTheme } from '@fu/matrix';

class ThemeManager {
  constructor() {
    this.init();
  }

  init() {
    // 初始化主题
    initTheme();
    
    // 设置事件监听
    this.setupEventListeners();
    
    // 初始化UI
    this.updateUI();
  }

  setupEventListeners() {
    // 页面可见性变化时重新检查主题
    document.addEventListener('visibilitychange', () => {
      if (!document.hidden) {
        initTheme();
        this.updateUI();
      }
    });

    // 监听自定义主题变化事件
    window.addEventListener('themeChange', (event) => {
      console.log('主题已变化:', event.detail);
    });
  }

  updateUI() {
    const isDarkMode = isDark();
    
    // 更新导航栏
    const navbar = document.querySelector('.navbar');
    if (navbar) {
      navbar.className = `navbar ${isDarkMode ? 'navbar-dark' : 'navbar-light'}`;
    }

    // 更新其他UI元素
    const cards = document.querySelectorAll('.card');
    cards.forEach(card => {
      card.className = `card ${isDarkMode ? 'card-dark' : 'card-light'}`;
    });
    
    // 触发主题变化事件
    window.dispatchEvent(new CustomEvent('themeChange', { 
      detail: { isDark: isDarkMode } 
    }));
  }
}

// 使用示例
const themeManager = new ThemeManager();

环境支持 ​

  • ✅ 浏览器环境
  • ✅ Node.js 环境（安全执行，不会抛出错误）

注意事项 ​

  • 在服务端渲染（SSR）环境中会安全返回，不执行任何操作
  • 函数会自动移除之前的主题类名，避免类名冲突
  • 依赖 isDark() 函数进行主题检测