60FOLDCOMPONENTS

主题

应用不可变的仅图表 Sixtyfold 外观预设。

@sixtyfold/themes 提供用于折线图和股票图的不可变仅图表外观预设。预设为图表背景、网格、坐标轴、提示、选择、范围选择器以及序列或烛线颜色设置样式。您的应用继续拥有其数据、标签、单位、格式、本地化和行为。

应用主题

使用图表特定的入口点，以便折线应用不会依赖于股票图，反之亦然：

import { applyLineTheme } from "@sixtyfold/themes/line";

applyLineTheme(lineChart, "mainframe");
import { applyStockTheme } from "@sixtyfold/themes/stock";

applyStockTheme(stockChart, "default");

主题标识符是稳定的运行时值。default 标识符选择 Midnight。预设和目录值被冻结；将它们视为只读。

本网站的主题

本网站提供七个深色和七个浅色主题：

深色浅色
default — Midnightporcelain — Porcelain
mainframe — Mainframeazulejo — Azulejo
blueprint — Blueprintriviera — Riviera
arizona — Arizonabauhaus — Bauhaus
neon — Neonwashi — Washi
shibuya — Shibuyabotanica — Botanica
arcology — Arcologynewsprint — Newsprint

当未保存选择时，网站在浏览器偏好为浅色时使用 Azulejo，否则使用 Midnight。该包导出相同的十四主题目录；应用可根据界面需要公开任意子集。

构建选择器

从目录读取标识符和标签，而不是复制它们：

import {
  PUBLIC_THEME_IDS,
  getLineThemePreset,
} from "@sixtyfold/themes/line";

const choices = PUBLIC_THEME_IDS.map((id) => {
  const preset = getLineThemePreset(id);
  return {
    id: preset.id,
    label: preset.label,
    colorScheme: preset.colorScheme,
  };
});

持久化 id，显示 label，并使用 colorScheme 来分组浅色和深色选项。

保留图表含义

折线主题按索引应用重复的视觉序列调色板。将序列类型、堆叠、标签、单位和格式化程序保留在应用配置中。如果结构性设置使用外观值——例如使用 width: 0 隐藏范围中心或边界——在更改主题后重新应用该设置。

主题不会翻译图表文本、更改 document.lang 或 document.dir，或为画布外的控件设置样式。

请参阅生成的 Theme functions, types, 和 constants 以获取完整 API。