Thèmes

@sixtyfold/themes fournit des préréglages d’apparence immuables réservés aux graphiques pour les graphiques Line et Stock. Les préréglages stylisent l’arrière-plan du graphique, la grille, les axes, l’infobulle, la sélection, le sélecteur de plage et les couleurs des séries ou des chandeliers. Votre application conserve la propriété de ses données, étiquettes, unités, formatage, localisation et comportement.

Appliquer un thème

Utilisez le point d’entrée spécifique au type de graphique pour qu’une application Line ne dépende pas de Stock, et réciproquement :

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

applyLineTheme(lineChart, "mainframe");

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

applyStockTheme(stockChart, "default");

Les identifiants de thème sont des valeurs d’exécution stables. L’identifiant default sélectionne Midnight. Les préréglages et les valeurs du catalogue sont gelés ; traitez-les comme en lecture seule.

Thèmes sur ce site

Ce site propose sept thèmes sombres et sept thèmes clairs :

Lorsqu’aucun choix n’est sauvegardé, le site utilise Azulejo pour une préférence de navigateur claire et Midnight sinon. Le package exporte ce même catalogue de quatorze thèmes ; les applications peuvent exposer n’importe quel sous-ensemble adapté à leur interface.

Construire un sélecteur

Lisez les identifiants et les libellés depuis le catalogue plutôt que de les dupliquer :

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

Conservez id pour la persistance, affichez label, et utilisez colorScheme pour grouper les choix clairs et sombres.

Préserver le sens du graphique

Les thèmes Line appliquent une palette visuelle répétée par index aux séries. Conservez le type de série, l’empilement, les étiquettes, les unités et les formatteurs dans la configuration de l’application. Si un réglage structurel utilise une valeur d’apparence — comme width: 0 pour masquer un centre ou une bordure de plage — réappliquez ce réglage après avoir changé le thème.

Les thèmes ne traduisent pas le texte du graphique, ne changent pas document.lang ou document.dir, et ne stylisent pas les contrôles situés en dehors du canvas.

Consultez les Theme functions, types, et constants générés pour l’API complète.