1

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

Leonardo Girardi
  • 11
  • 1

2 Answers2

1

<Button onPress={toggleColorMode}/>

Try to pass an anonymous function to trigger that

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

Bernhard Wallner
  • 11
  • 1
0

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.

Pedro Bennesby
  • 31
  • 7