@finam/web-ui-kit-theme-finam

Finam theme package for web-ui-kit.

Установка

npm install @finam/web-ui-kit-theme-finam

Использование

Для активации темы нужно импортировать css-классы и добавить их на корневой элемент:

import { baseClass, defaultLayoutClass } from '@finam/web-ui-kit-core/theme/base';
import { Finam } from '@finam/web-ui-kit-theme-finam';

// Задаём классы темы
const lightThemeClasses = [baseClass, defaultLayoutClass, Finam.lightModeClass];
const darkThemeClasses = [baseClass, defaultLayoutClass, Finam.darkModeClass];

document.body.classList.add(...lightThemeClasses);

Доступные темы

• Finam.lightModeClass / Finam.darkModeClass - основная тема Finam
• FinamPremium.lightModeClass / FinamPremium.darkModeClass - тема Premium
• FinamExclusive.lightModeClass / FinamExclusive.darkModeClass - тема Exclusive
• FinamPrestige.lightModeClass / FinamPrestige.darkModeClass - тема Prestige
• FinamUltra.lightModeClass / FinamUltra.darkModeClass - тема Ultra

Переключение темы

import { ThemeMode, baseClass, defaultLayoutClass } from '@finam/web-ui-kit-core/theme/base';
import { Finam, FinamPremium } from '@finam/web-ui-kit-theme-finam';

const getThemeClasses = (mode: ThemeMode) => {
  return [baseClass, defaultLayoutClass, 
    mode === ThemeMode.Dark ? Finam.darkModeClass : Finam.lightModeClass
  ];
};

Подробнее об использовании тем в общей документации web-ui-kit.