CODEWITHSUNDEEP
react-nativenative-basedarkmodelightmode
Leonardo Girardi
Leonardo Girardi

Reputation: 11

Light mode and Dark mode using Native-Base

I'm trying to implement light and dark mode in my code but i got stuck. I have a theme file to global changes and i need to create a button to change the theme when pressed.

My theme file is that:

import { extendTheme } from 'native-base'

const LightTheme = {
  mode: 'light',
  colors: {
    green: {
      700: '#006330',
      500: '#009649',
    },
    gray: {
      700: '#EDEDED',
      600: '#FFFFFF',
      500: '#C4C4CC',
      400: '#BBBBBB',
      300: '#868686',
      200: '#686873',
      100: '#585860',
    },
    white: '#FFFFFF',
    red: {
      500: '#F75A68',
    }
  },
}

const DarkTheme = {
  mode: 'dark',
  colors: {
    green: {
      700: '#008943',
      500: '#00E36E',
    },
    gray: {
      700: '#121214',
      600: '#202024',
      500: '#29292E',
      400: '#323238',
      300: '#7C7C8A',
      200: '#C4C4CC',
      100: '#E1E1E6',
    },
    white: '#FFFFFF',
    red: {
      500: '#F75A68',
    }
  },
}

export const THEME = extendTheme({
  config: {
    initialColorMode: 'light',
  },
  colors: {
    ...LightTheme.colors,
    modes: {
      dark: { ...DarkTheme.colors }
    }
  },
  fonts: {
    heading: 'Roboto_700Bold',
    body: 'Roboto_400Regular',
    text: 'Roboto_300Light',
  },
  fontSizes: {
    xs: 12,
    sm: 14,
    md: 16,
    lg: 18,
    xl: 20,
  },
  sizes: {
    14: 56,
    33: 148
  }
})

What do i need to do to for my button work? I've tried several things and none of them worked

I've tried to do something like this:

const { colorMode, toggleColorMode } = useColorMode();

<Button onPress={toggleColorMode}/>

But didn't work

Upvotes: 1

Views: 620

Answers (2)

Bernhard Wallner
Bernhard Wallner

Reputation: 11

<Button onPress={toggleColorMode}/>

Try to pass an anonymous function to trigger that

<Button onPress={() => toggleColorMode}/>

Upvotes: 1

Pedro Bennesby
Pedro Bennesby

Reputation: 31

I'm having the same problem, what solved for me was changing the color mode into another component, for some weird reason you can't access the colorMode info in the App.js, or at least not in the NativeBaseProvider childrens.

Upvotes: 0

Related Questions