Theme

If you want to change the theme of a component or of your entire app, you can do so by following the steps below.

Installation

npm

npm install @nomada-sh/react-native-eyecandy-theme

Yarn

yarn add @nomada-sh/react-native-eyecandy-theme

Create a theme

import React from 'react';

import {
  ThemeProvider,
  createTheme,
} from '@nomada-sh/react-native-eyecandy-theme';

import { Button } from '@nomada-sh/react-native-eyecandy';

const theme = createTheme({
  palette: {
    primary: {
      500: '#00bcd4',
    },
    secondary: {
      500: '#ff9800',
    },
  },
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary">Primary</Button>
      <Button color="secondary">Secondary</Button>
    </ThemeProvider>
  );
}

Light and Dark Mode

import React from 'react';

import {
  ThemeProvider,
  createTheme,
} from '@nomada-sh/react-native-eyecandy-theme';

import { Button } from '@nomada-sh/react-native-eyecandy';

export default function App() {
  const [dark, setDark] = React.useState(false);

  const theme = React.useMemo(
    () =>
      createTheme({
        dark,
        palette: ({ dark }) => ({
          primary: {
            500: dark ? '#ff9800' : '#00bcd4',
          },
          secondary: {
            500: dark ? '#00bcd4' : '#ff9800',
          },
        }),
      }),
    [dark],
  );

  return (
    <ThemeProvider theme={theme}>
      <Button
        color="primary"
        onPress={() => {
          setDark(true);
        }}
      >
        Dark Theme
      </Button>
      <Button
        color="secondary"
        onPress={() => {
          setDark(false);
        }}
      >
        Light Theme
      </Button>
    </ThemeProvider>
  );
}