How to use the @callstack/react-theme-provider.createTheming function in @callstack/react-theme-provider

To help you get started, we’ve selected a few @callstack/react-theme-provider examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github callstack / react-native-paper / src / core / theming.js View on Github external
/* @flow */
/* eslint-disable no-redeclare */

import {
  createTheming,
  type ThemingType,
} from '@callstack/react-theme-provider';
import DefaultTheme from '../styles/DefaultTheme';
import type { Theme, ThemeShape } from '../types';

export const {
  ThemeProvider,
  withTheme,
}: ThemingType = createTheming(DefaultTheme);
github sw-yx / gatsby-theme-dev-blog / v3 / packages / gatsby-theme-dev-blog / src / components / Theming.js View on Github external
},
  },
  dark: {
    themeName: 'dark',
    colors: {
      primary: lighten(0.05, colors.blue),
      text: colors.white,
      bodyBg: colors.black,
      headerBg: colors.black,
      link: lighten(0.15, colors.blue),
      ...colors,
    },
  },
}

const { ThemeProvider, withTheme, useTheme } = createTheming(themes.default)

export { ThemeProvider, withTheme, useTheme, themes, colors }
github callstack / delightful-ux-training-app / src / utils / theming.js View on Github external
secondaryBackgroundColor: '#0c0c0c',
  primaryTextColor: '#FFF',
  secondaryTextColor: '#757575',
  accentColor: '#F8F32B',
};

export const lightTheme = {
  name: 'light',
  backgroundColor: '#FFF',
  secondaryBackgroundColor: '#f5f9ff',
  primaryTextColor: '#131313',
  secondaryTextColor: '#333',
  accentColor: '#3903fc',
};

const { ThemeProvider, withTheme } = createTheming(lightTheme);

export { ThemeProvider, withTheme };
github callstack / react-theme-provider / examples / web / src / theming.js View on Github external
primaryColor: '#FFA72A',
    accentColor: '#458622',
    backgroundColor: '#FFC777',
    textColor: '#504f4d',
    secondaryColor: '#7F5315',
  },
  dark: {
    primaryColor: '#FFA72A',
    accentColor: '#458622',
    backgroundColor: '#504f4d',
    textColor: '#FFC777',
    secondaryColor: '#252525',
  },
};

const { ThemeProvider, withTheme }: ThemingType = createTheming(
  themes.default
);

export { ThemeProvider, withTheme };
github longseespace / ben / src / theming.ts View on Github external
primaryColor: '#FFA72A',
    accentColor: '#458622',
    backgroundColor: '#FFC777',
    textColor: '#504f4d',
    secondaryColor: '#7F5315',
  },
  dark: {
    primaryColor: '#FFA72A',
    accentColor: '#458622',
    backgroundColor: '#504f4d',
    textColor: '#FFC777',
    secondaryColor: '#252525',
  },
};

export const { ThemeProvider, withTheme } = createTheming(themes.default);
github callstack / react-native-paper / src / core / theming.tsx View on Github external
import { createTheming } from '@callstack/react-theme-provider';
import DefaultTheme from '../styles/DefaultTheme';
import { Theme } from '../types';

export const { ThemeProvider, withTheme, useTheme } = createTheming(
  DefaultTheme
);
github xcarpentier / react-native-country-picker-modal / src / CountryTheme.ts View on Github external
filterPlaceholderTextColor: '#aaa',
  activeOpacity: 0.5,
  itemHeight: getHeightPercent(7),
  flagSize: Platform.select({ android: 20, default: 30 }),
  flagSizeButton: Platform.select({ android: 20, default: 30 })
}
export const DARK_THEME = {
  ...DEFAULT_THEME,
  primaryColor: '#222',
  primaryColorVariant: '#444',
  backgroundColor: '#000',
  onBackgroundTextColor: '#fff'
}
export type Theme = Partial

const { ThemeProvider, useTheme } = createTheming(DEFAULT_THEME)

export { ThemeProvider, useTheme }
github Setsun / react-koa-universal / src / components / Provider / index.tsx View on Github external
import * as React from 'react';
import ApolloClient from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import { createTheming } from '@callstack/react-theme-provider';
import theme from '../../style/theme';
import createGlobalStyle from '../../style/createGlobalStyle';

createGlobalStyle();

const { ThemeProvider } = createTheming(theme);

const Provider = ({
  client,
  children
}: {
  client: ApolloClient;
  children: React.ReactNode;
}) => {
  return (
    
      
        {children}
      
    
  );
};

@callstack/react-theme-provider

Theme provider for react and react-native applications

MIT
Latest version published 1 year ago

Package Health Score

68 / 100
Full package analysis