@livelike/react-native/src/store/theme.ts

LiveLike React Native package

import { LLFonts, LLThemes, LLThemeType } from '../types';
import { createStore } from './store';

export let DEFAULT_THEMES: LLThemes = {
  [LLThemeType.LIGHT]: {
    text: '#131617',
    secondaryText: '#7A7B7C',
    background: '#F1F1F1',
    secondaryBackground: '#FFFFFF',
    popoverBackground: '#EDEDED',
    primaryButtonBackground: '#27BF9D',
    primaryPressedButtonBackground: '#007878',
    primaryButtonText: '#131617',
    border: '#DADADA',
    info: '#27BF9D',
    error: '#BF2727',
    widgetBackground: '#F4F5F6',
    widgetOption: '#DDE2E3',
    widgetSelectedOption: '#BCC5C8',
    disabledButtonBackground: '#A5B1B6',
    disabledButtonText: '#FFFFFF',
    correct: '#3DCF25',
    incorrect: '#A00D32',
    correctIncorrectText: '#FFFFFF',
  },
  [LLThemeType.DARK]: {
    text: '#FFFFFF',
    secondaryText: '#7A7B7C',
    background: '#131617',
    secondaryBackground: '#1B1E1F',
    popoverBackground: '#2B3136',
    primaryButtonBackground: '#27BF9D',
    primaryPressedButtonBackground: '#007878',
    primaryButtonText: '#131524',
    border: '#474E55',
    info: '#27BF9D',
    error: '#BF2727',
    widgetBackground: '#131524',
    widgetOption: '#202233',
    widgetSelectedOption: '#383D57',
    disabledButtonBackground: '#363847',
    disabledButtonText: '#FFFFFF',
    correct: '#3DCF25',
    incorrect: '#A00D32',
    correctIncorrectText: '#FFFFFF',
  },
};

export type ThemeStoreValue = {
  currentThemeType: LLThemeType;
  themes: LLThemes;
  isNonDefaultThemeType: boolean;
  fonts?: LLFonts;
};

export type SetThemeFontsActionArg = {
  fonts: LLFonts;
};

export const themeStore = createStore<ThemeStoreValue>({
  currentThemeType: LLThemeType.DARK,
  themes: DEFAULT_THEMES,
  isNonDefaultThemeType: false,
  fonts: {},
});

export const themeStoreActions = {
  setThemeTypeAction(newThemeType: LLThemeType) {
    themeStore.set({
      ...themeStore.get(),
      currentThemeType: newThemeType,
      isNonDefaultThemeType: true,
    });
  },
  setThemesAction(_themes: LLThemes) {
    themeStore.set({
      ...themeStore.get(),
      themes: {
        ...themeStore.get().themes,
        ..._themes,
      },
    });
  },
  setFontsAction({ fonts }: SetThemeFontsActionArg) {
    themeStore.set({
      ...themeStore.get(),
      fonts: {
        ...themeStore.get().fonts,
        ...fonts,
      },
    });
  },
};