Temas

@sixtyfold/themes fornece predefinições de aparência imutáveis e específicas para gráficos Line e Stock. As predefinições estilizam o fundo do gráfico, grelha, eixos, tooltip, seleção, seletor de intervalo e cores de séries ou candles. A sua aplicação continua a ser proprietária dos seus dados, rótulos, unidades, formatações, localização e comportamento.

Aplicar um tema

Use o ponto de entrada específico do gráfico para que uma aplicação Line não dependa de Stock, e vice‑versa:

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

applyLineTheme(lineChart, "mainframe");

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

applyStockTheme(stockChart, "default");

Os identificadores de tema são valores estáveis em tempo de execução. O identificador default seleciona Midnight. As predefinições e os valores do catálogo estão congelados; trate‑os como apenas leitura.

Temas neste site

Este site oferece sete temas escuros e sete temas claros:

Quando nenhuma escolha é guardada, o site usa Azulejo para preferência de navegador claro e Midnight caso contrário. O pacote exporta este mesmo catálogo de catorze temas; as aplicações podem expor qualquer subconjunto que se adeque à sua interface.

Construir um seletor

Leia identificadores e rótulos do catálogo em vez de os duplicar:

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 o id, exiba o label e use colorScheme para agrupar escolhas claras e escuras.

Preserve o significado do gráfico

Os temas Line aplicam uma paleta visual repetida por índice de série. Mantenha o tipo de série, empilhamento, rótulos, unidades e formatadores na configuração da aplicação. Se uma definição estrutural usar um valor de aparência — como width: 0 para ocultar um centro ou limite do intervalo — reaplique essa definição após mudar o tema.

Os temas não traduzem o texto do gráfico, alteram document.lang ou document.dir, nem estilizam controlos fora do canvas.

Consulte as funções de Tema, types e constants geradas para a API completa.