Default Image

Dark Mode

@redshank/native automatically handles the dark and light theme you can change using a useTheme function.

Change Theme:

import { useTheme, Switch } from '@redshank/native';

export default function App() {
  const { setTheme, theme } = useTheme();

  return (
    <Switch
      value={theme === 'dark'}
      onChange={(isDark) => {
        setTheme({
          theme: isDark ? 'dark' : 'light'
        });
      }}
    />
  );
};

Custom colors:

import { Appearance } from 'react-native';
import { ThemeProvider } from '@redshank/native';

const colorScheme = Appearance.getColorScheme();

const lightColors = {
  customColor: '#444444'
};

const darkColors = {
  customColor: '#f1f1f1'
};

export default function App() {
  const isDark = colorScheme === 'dark';

  return (
    <ThemeProvider
      theme={
        theme: colorSchema || 'dark',
        colors: isDark ? darkColors : lightColors
      }
    >
      ...
    </ThemeProvider>
  );
};

Complete example:

Community:

We're excited to see the community adopt @redshank/native, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!

DiscordGithub

Contributing:

PR's on @redshank/native are always welcome, please see our contribution guidelines to learn how you can contribute to this project.

Copyright © 2023 @redshank.