@dazl/ 彩色计划

一个简单的网络应用色彩方案管理库,支持光/暗主题和自动系统偏好检测.

特征

• 🌓 浅/暗/系统模式 - 支持轻、暗和自动系统优先检测
• 📱 系统偏好检测 - 自动响应OS级主题变化
• ⚛️ 反应整合 - 准备使用反应钩以无缝结合
• 💾 持续储存 - 记得使用本地Storage的用户偏好
• 🎨 CSS 类管理 - 自动将主题类应用到文档根
• 🏷️ 自动样式插入 - 注射这个 color-scheme 本地浏览器主题文档根上的 CSS 属性
• 📦 零依赖关系 - 重量轻而无外部依赖
• 🔧 类型脚本支持 - 包括全部类型脚本定义

安装

npm install @dazl/color-scheme

使用量

客户端设置

导入客户端模块以初始化色彩方案管理 :

说明: 此导入只应在客户端代码中使用, 必须运行于 <body> 已执行。 要取得最佳效果,请将其收录入内含剧本.

import '@dazl/color-scheme/client';

// The color scheme API is now available globally
const currentScheme = window.colorSchemeApi.current;
console.log(currentScheme); // { config: 'system', resolved: 'dark' }

// Change the color scheme
window.colorSchemeApi.config = 'light';

// Subscribe to changes
const unsubscribe = window.colorSchemeApi.subscribe(({ config, resolved }) => {
  console.log(`Color scheme changed: ${config} (resolved: ${resolved})`);
});

色彩化学 API

• config (单位:千美元)light|dark|system) - 获取或设置当前颜色方案配置
• currentState (单位:千美元){ config: light|dark|system, resolved: light|dark }) - 获取当前状态,包括配置和解析值
• resolvedSystem (单位:千美元)light|dark) - 根据系统偏好获取已解决的主题
• subscribe (单位:千美元)(handler: (currentState) => void) => () => void) - 订阅颜色方案更改并返回未订阅的函数
• getRootCssClass (单位:千美元)(resolved?: light|dark) => string) - CSS 类应用到基于已解析主题或已传递值的文档根上

覆盖根 CSS 类

通过指定来覆盖适用于文档根的默认 CSS 类 data-dark-class 财务报告和审定财务报表 data-light-class 客户端脚本标签中的属性 :

<script src="@dazl/color-scheme/client" data-dark-class="dark-theme" data-light-class="light-theme"></script>

反应集成

使用 resact 钩子进行简单整合 :

import { useColorScheme } from '@dazl/color-scheme/react';

function ThemeToggle() {
  const { configScheme, resolvedScheme, setColorScheme, isLight, isDark } = useColorScheme();

  return (
    <div>
      <p>Current config: {configScheme}</p>
      <p>Resolved theme: {resolvedScheme}</p>
      <p>Is light theme: {isLight}</p>
      <p>Is dark theme: {isDark}</p>

      <button onClick={() => setColorScheme('light')}>Light Theme</button>
      <button onClick={() => setColorScheme('dark')}>Dark Theme</button>
      <button onClick={() => setColorScheme('system')}>System Theme</button>
    </div>
  );
}

虎克 API

• resolvedScheme (单位:千美元)light|dark- 确定的主题(浅/暗)
• configScheme (单位:千美元)light|dark|system) - 当前配置(轻/暗/系统)
• setColorScheme (单位:千美元)(config: light|dark|system) => void) - 改变颜色方案的函数
• isLight (单位:千美元)boolean) - 当前解决的主题是否轻取
• isDark (单位:千美元)boolean) - 当前解决的主题是否为暗色
• rootCssClass (单位:千美元)string) - CSS 类应用到基于已解决主题的文档根上

CSS 结构化

库自动将 CSS 类应用到文档根. 相应的应用程序样式 :

/* Dark theme styles */
:root.dark-theme {
  --bg-color: #000000;
  --text-color: #ffffff;
}

/* Light theme styles (explicit) */
:root.light-theme {
  --bg-color: #ffffff;
  --text-color: #000000;
}

许可证

麻省理工学院