Temas

@sixtyfold/themes proporciona ajustes inmutables y exclusivos para la apariencia de gráficos Line y Stock. Los ajustes definen el fondo del gráfico, la cuadrícula, los ejes, el tooltip, la selección, el range selector y los colores de series o velas. Su aplicación mantiene la propiedad de sus datos, etiquetas, unidades, formatos, localización y comportamiento.

Aplicar un tema

Use el punto de entrada específico del gráfico para que una aplicación Line no dependa de Stock, y viceversa:

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

applyLineTheme(lineChart, "mainframe");

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

applyStockTheme(stockChart, "default");

Los identificadores de tema son valores estables en tiempo de ejecución. El identificador default selecciona Midnight. Los ajustes y valores del catálogo están congelados; trátelos como de solo lectura.

Temas en este sitio web

Este sitio web ofrece siete temas oscuros y siete temas claros:

Cuando no se guarda una elección, el sitio web usa Azulejo para una preferencia de navegador clara y Midnight en caso contrario. El paquete exporta este mismo catálogo de catorce temas; las aplicaciones pueden exponer cualquier subconjunto que convenga a su interfaz.

Crear un selector

Lea identificadores y etiquetas del catálogo en lugar de duplicarlos:

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

Persista el id, muestre el label y use colorScheme para agrupar las opciones claras y oscuras.

Preservar el significado del gráfico

Los temas Line aplican una paleta visual repetitiva de series por índice. Mantenga el tipo de serie, el stacking, las etiquetas, las unidades y los formateadores en la configuración de la aplicación. Si un ajuste estructural usa un valor de apariencia—como width: 0 para ocultar un centro o límite de rango—vuelva a aplicar ese ajuste después de cambiar el tema.

Los temas no traducen el texto del gráfico, no cambian document.lang ni document.dir, ni estilizan controles fuera del canvas.

Consulte las Theme functions, types, y constants generados para la API completa.