Charts - Темизация

Общая информация

Все чарты поддерживает светлую и тёмную тему. Однако стоит учесть, что тема не переключается автоматически, по умолчанию тема тёмная. Переключить тему можно с помощью соответствующего пропсы (colorScheme). Библиотека surf-charts сделана так, чтобы вам было максимально удобно менять стили, для изменения всей темы чарта необходимо всего несколько классов.

Темы по умолчанию

Как уже известно, surf-charts поддерживает темную и светлую тему посредством пропса colorScheme, который принимает одно из двух значений light или dark. Вся стили библиотеки полностью открыты и вы можете их изменять и перезаписывать по средством пропсов className и styling. Меняйте, перезаписывайте и экспериментируйте. Вся библиотека полностью работает "из коробки", но позволяет изменить практически всё внутри при такой надобности.

TailwindCSS

Если вы хотите сделать автоматическое переключение темы с помощью TailwindCSS, вам нужно сделать некоторые действия.

Для начала укажите светлую тему в пропсе colorScheme, после этого вы сможете стилизовать чарт с помощью TailwindCSS свойства dark:.

Смена тем

Переключение между светлой и темной темами в surf-charts очень простое. Установив свойство colorScheme для любого компонента чарта, вы можете мгновенно изменить визуальный стиль в соответствии с темой вашего приложения.

Пример: светлая тема

import { VerticalChart } from '@surf/charts';
 
const data = [
  { label: 'January', value: 120 },
  { label: 'February', value: 80 },
  { label: 'March', value: 150 },
  { label: 'April', value: 130 },
  { label: 'May', value: 70 }
];
 
<VerticalChart label='Sales' colorScheme='light' data={data} />;

Результат

Sales

15011375380

120
January
80
February
150
March
130
April
70
May

Пример: темная тема

import { VerticalChart } from '@surf/charts';
 
const data = [
  { label: 'January', value: 120 },
  { label: 'February', value: 80 },
  { label: 'March', value: 150 },
  { label: 'April', value: 130 },
  { label: 'May', value: 70 }
];
 
<VerticalChart label='Sales' colorScheme='dark' data={data} />;

Результат

Sales

15011375380

120
January
80
February
150
March
130
April
70
May

Кастомизация тем

Хотя пропс colorScheme обеспечивает быстрый способ переключения между темной и светлой темами, вы можете дополнительно настроить внешний вид с помощью пропсов className и styling. Они позволяют применять особые стили, соответствующие вашему бренду или языку дизайна.

Например, вы можете настроить фон, границы или текст с помощью классов TailwindCSS:

<VerticalChart
  label='Sales'
  colorScheme='dark'
  className='bg-gray-800 border border-gray-700 rounded-lg'
  styling={{
    labelClass: 'text-white',
    tooltipClass: 'bg-gray-900 text-white'
  }}
  data={data}
/>

Автоматическое переключение тем с помощью TailwindCSS

Чтобы включить автоматическое переключение темы в зависимости от предпочтений пользователя или настроек системы, можно использовать вариант dark: от TailwindCSS. Это позволяет определить стили, которые динамически меняются в зависимости от того, включен ли у пользователя темный режим.

Шаги для автоматического переключения тем

Установите начальную тему: Начните с установки начальной темы для вашего графика с помощью пропса colorScheme. Это обеспечит правильную стилизацию чарта в светлом или темном режиме.
Используйте вариант TailwindCSS dark:: Примените вариант dark: к классам TailwindCSS в пропсах className или styling, чтобы определить стили, которые будут применяться при активном темном режиме.

Пример

import { VerticalChart } from '@surf/charts';
 
const data = [
  { label: 'January', value: 120 },
  { label: 'February', value: 80 },
  { label: 'March', value: 150 }
];
 
<VerticalChart
  label='Sales'
  colorScheme='light'
  className='bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-lg'
  styling={{
    labelClass: 'text-black dark:text-white',
    tooltipClass: 'bg-gray-100 dark:bg-gray-900 text-black dark:text-white'
  }}
  data={data}
/>;

В этом примере график будет автоматически переключаться между светлой и темной темами на основе системы тем TailwindCSS, обеспечивая лучший UX.

Расширение и перезапись стилей

Библиотека surf-charts создана для того, чтобы быть гибкой и настраиваемой. Если темы по умолчанию не полностью отвечают вашим потребностям, вы можете легко расширить или переписать стили, предоставляемые библиотекой.

Вы можете создавать собственные темы, комбинируя пользовательские классы с пропсами colorScheme, className и styling. Это позволит вам создать совершенно уникальный внешний вид, используя при этом преимущества функций библиотеки.

Темизация