Themen

@sixtyfold/themes stellt unveränderliche, nur für Diagramme geltende Erscheinungs‑Voreinstellungen für Line‑ und Stock‑Diagramme bereit. Voreinstellungen legen Hintergrund, Raster, Achsen, Tooltip, Auswahl, Bereichsauswahl sowie Serien‑ oder Kerzenfarben fest. Ihre Anwendung behält das Eigentum an ihren Daten, Beschriftungen, Einheiten, Formatierung, Lokalisierung und Verhalten.

Einen Theme anwenden

Verwenden Sie den diagrammspezifischen Einstiegspunkt, damit eine Line‑Anwendung nicht von Stock abhängt und umgekehrt:

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

applyLineTheme(lineChart, "mainframe");

import { applyStockTheme } from "@sixtyfold/themes/stock";

applyStockTheme(stockChart, "default");

Theme‑Bezeichner sind stabile Laufzeitwerte. Der default‑Bezeichner wählt Midnight aus. Voreinstellungen und Katalogwerte sind eingefroren; behandeln Sie sie als schreibgeschützt.

Themes auf dieser Website

Auf dieser Website stehen sieben dunkle und sieben helle Themes zur Verfügung:

Wenn keine Auswahl gespeichert ist, verwendet die Website Azulejo bei einer hellen Browser‑Präferenz und andernfalls Midnight. Das Paket exportiert denselben vierzehn‑Theme‑Katalog; Anwendungen können jede Teilmenge anbieten, die zur Oberfläche passt.

Einen Selektor erstellen

Lesen Sie Bezeichner und Beschriftungen aus dem Katalog statt sie zu duplizieren:

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,
  };
});

Persistieren Sie die id, zeigen Sie die label an, und verwenden Sie colorScheme, um helle und dunkle Optionen zu gruppieren.

Bedeutung des Diagramms bewahren

Line‑Themes wenden eine sich wiederholende visuelle Serienpalette nach Index an. Bewahren Sie Serientyp, Stapelung, Beschriftungen, Einheiten und Formatierer in der Anwendungs‑Konfiguration. Wenn eine strukturelle Einstellung einen Erscheinungswert verwendet — zum Beispiel width: 0, um ein Bereichszentrum oder eine Grenze auszublenden — wenden Sie diese Einstellung nach dem Wechsel des Themes erneut an.

Themes übersetzen keinen Diagrammtext, ändern nicht document.lang oder document.dir und stylen keine Steuerelemente außerhalb der Canvas.

Siehe die generierten Theme functions, types, und constants für die vollständige API.