Dark Mode in React Native

Anand Kashyap

5 August 2021

Dark Mode in React Native

In this blog, We are going to implement the dark mode in our react native application. First of all, we have to know the benefits of this Dark mode.

Benefits Of Dark Mode

Dark Mode is very helpful when the surrounding is dark; it puts less strain on eyes compared to Light Mode.
You can choose the Dark Mode as the default interface style.
You can also use Settings to make your device select the Dark Mode automatically when the ambient light is low.
Dark Mode supports all accessibility features.
Can reduce power usage by a significant amount (depending on the device’s screen technology).
Improves visibility for users with low vision and those who are sensitive to bright light.
Makes it easier for anyone to use a device in a low-light environment.

Dark Mode is a very commonly used feature that most commonly used and famous applications have support for dark mode now. iOS and Android added dark mode support to their platforms within the last year, which means that it’s easier than ever to support this feature in your app. It is a great way to enhance the user experience for a mobile app.

So in this blog, we are going to create a demo application that contains a <text> and a <Switch> and some other custom components. We can change the app theme by just switching the Switch to enable or disable dark mode.

So Let’s get started.

Requirements

Nodejs version <= 10.x.x installed
watchman installed
have access to one package manager such as npm or yarn
use react native version 0.60.x or above

Firstly, We are going to create a new product. You can skip the creation of a project if you already created it.

react-native init DarkModeDemo

1	react-native init DarkModeDemo

Open a terminal window and run the above command you can create a new react-native project. In my case, I have named my project “DarkModeDemo” you can change it as per your requirement.

After this, we need to make some changes to our native code.

For Android devices, there is no specific command to bind the native binaries. It is a two-step process.

First, open android/app/src/main/AndroidManifest.xml and add a uiMode flag.

android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"

1	android:configChanges="keyboard\|keyboardHidden\|orientation\|screenSize\|uiMode"

After this, we need to import some third-party libraries by using below mentioned commands.

Open the terminal window and install the react-native-appearance library.

npm install react-native-appearance

1	npm install react-native-appearance

yarn add react-native-appearance

1	yarn add react-native-appearance

Now, go back to the terminal window and install the styled-components library.

npm install styled-components

1	npm install styled-components

yarn add styled-components

1	yarn add styled-components

Now our all configuration gets completed.

Let’s do some real code……..

Firstly we create Two theme classes that will hold our theme are following.

dark.js

const dark = {
    theme: {
      background: '#2E3440',
      border: '#575c66',
      backgroundAlt: '#575c66',
      borderAlt: '#2E3440',
      text: '#ECEFF4'
    }
  }
export default dark

const dark = {

theme: {

background: '#2E3440',

border: '#575c66',

backgroundAlt: '#575c66',

borderAlt: '#2E3440',

text: '#ECEFF4'

}

export default dark

2. light.js

const light = {
    theme: {
      background: '#ededed',
      border: '#bdbdbd',
      backgroundAlt: '#eaeaeb',
      borderAlt: '#bdbdbd',
      text: '#171717'
    }
  }
export default light

const light = {

theme: {

background: '#ededed',

border: '#bdbdbd',

backgroundAlt: '#eaeaeb',

borderAlt: '#bdbdbd',

text: '#171717'

}

export default light

Now we have to create our theme manager class that will be responsible for entire changes.

ThemeManager.js :

import React, { useEffect, useState } from 'react';
import { StatusBar } from "react-native";
import { Appearance, AppearanceProvider } from "react-native-appearance";
import { ThemeContext, ThemeProvider } from "styled-components/native";
import darkTheme from './dark';
import lightTheme from './light';

const ManageThemeProvider = ({ children }) => {
    const [themeState, setThemeState] = useState(defaultMode)
    const setMode = mode => {
      setThemeState(mode)
    }
    useEffect(() => {
      const subscription = Appearance.addChangeListener(({ colorScheme }) => {
        setThemeState(colorScheme)
      })
      return () => subscription.remove()
    }, [])
    return (
      <ThemeContext.Provider value={{ mode: themeState, setMode }}>
        <ThemeProvider
          theme={themeState === 'dark' ? darkTheme.theme : lightTheme.theme}>
          <>
            <StatusBar
              barStyle={themeState === 'dark' ? 'dark-content' : 'light-content'}
            />
            {children}
          </>
        </ThemeProvider>
      </ThemeContext.Provider>
    )
  }

export const useTheme = () => React.useContext(ThemeContext)

const defaultMode = Appearance.getColorScheme() || 'light'

const ThemeManager = ({ children }) => (
    <AppearanceProvider>
      <ManageThemeProvider>{children}</ManageThemeProvider>
    </AppearanceProvider>
  )
  
export default ThemeManager

import React, { useEffect, useState } from 'react';

import { StatusBar } from "react-native";

import { Appearance, AppearanceProvider } from "react-native-appearance";

import { ThemeContext, ThemeProvider } from "styled-components/native";

import darkTheme from './dark';

import lightTheme from './light';

const ManageThemeProvider = ({ children }) => {

const [themeState, setThemeState] = useState(defaultMode)

const setMode = mode => {

setThemeState(mode)

}

useEffect(() => {

const subscription = Appearance.addChangeListener(({ colorScheme }) => {

setThemeState(colorScheme)

})

return () => subscription.remove()

}, [])

return (

<ThemeContext.Provider value={{ mode: themeState, setMode }}>

<ThemeProvider

theme={themeState === 'dark' ? darkTheme.theme : lightTheme.theme}>

<StatusBar

barStyle={themeState === 'dark' ? 'dark-content' : 'light-content'}

{children}

</>

</ThemeProvider>

</ThemeContext.Provider>

)

}

export const useTheme = () => React.useContext(ThemeContext)

const defaultMode = Appearance.getColorScheme() || 'light'

const ThemeManager = ({ children }) => (

<ManageThemeProvider>{children}</ManageThemeProvider>

</AppearanceProvider>

)

export default ThemeManager

I know the code is a little bit complicated for beginners but no issue you will understand this code very soon because my next blog will be on react hooks that we used in this class. I will mention the blog link soon in the description.

Here is our last class App.js :

import React from 'react';
import {Switch} from 'react-native';
import styled from 'styled-components/native';
import ThemeManager, { useTheme } from './ThemeManager';

const Container = styled.View`
  flex: 1;
  background:${props => props.theme.backgroundAlt};
  align-items: center;
  justify-content: center;`

const Title = styled.Text`
  font-size: 24;
  color: ${props => props.theme.text};
`   
 function HomeScreen() {
    const theme = useTheme()
    return (
      <Container>
        <Title>{theme.mode}</Title>
        <Switch
          value={theme.mode === 'dark'}
          onValueChange={value => theme.setMode(value ? 'dark' : 'light')}
        />
      </Container>
    )
  }
class App extends React.Component{
  
render(){
  return (
   <ThemeManager>
      <HomeScreen />
    </ThemeManager>
  );
}
};

export default App;

import React from 'react';

import {Switch} from 'react-native';

import styled from 'styled-components/native';

import ThemeManager, { useTheme } from './ThemeManager';

const Container = styled.View`

flex: 1;

background:${props => props.theme.backgroundAlt};

align-items: center;

justify-content: center;`

const Title = styled.Text`

font-size: 24;

color: ${props => props.theme.text};

function HomeScreen() {

const theme = useTheme()

return (

<Title>{theme.mode}</Title>

<Switch

value={theme.mode === 'dark'}

onValueChange={value => theme.setMode(value ? 'dark' : 'light')}

</Container>

)

}

class App extends React.Component{

render(){

return (

</ThemeManager>

);

}

};

export default App;

One thing I have to tell you is that I have placed all those classes in the root path because many of my readers ask me for the files because they don’t get the file at the imported path so I have put all the files on the same path (Root).

Here we got the result :

I hope this blog will help you to implement the dark mode feature in your react native app.