What is it?

A tiny and simple helper set to make it easy to switch your styles in react native when switching between light and dark mode.

Maintains typesafety and code completion on par with the normal StyleSheet.create.

Creating a dark mode stylesheet simply generates two static react native stylesheets and switches between the two with the complimentary hook.

Useage

Create a stylesheet

import { createStyleSheet, DarkModeValue } from 'rn-dark-mode'

export default createStyleSheet({
  appContainer: {
    flex: 1,
    backgroundColor: new DarkModeValue(
      '#ffffff', // light
      '#2a2a2a', // dark
    ),
  },
})

Use a stylesheet

import React from 'react'
import { Text, SafeAreaView } from 'react-native'
import { useDarkModeStyleSheet } from 'rn-dark-mode'

import stylesheet from './App.styles'

function App(): React.ReactElement {
  const styles = useDarkModeStyleSheet(stylesheet)

  return (
    <SafeAreaView style={styles.appContainer}>
      <Text>Hello</Text>
    </SafeAreaView>
  )
}

export default App

Check if dark mode or not

import React from 'react'
import { Text, SafeAreaView } from 'react-native'
import { useIsDarkMode } from 'rn-dark-mode'

function App(): React.ReactElement {
  const isDarkMode = useIsDarkMode()

  return (
    <SafeAreaView>
      <Text>{isDarkMode ? 'It sure is dark in here' : 'Rise and shine'}</Text>
    </SafeAreaView>
  )
}

export default App

Switch between two arbitrary values

import React from 'react'
import { Text, SafeAreaView } from 'react-native'
import { useDarkModeSwitch } from 'rn-dark-mode'

function App(): React.ReactElement {
  const text = useDarkModeSwitch(
    'Rise and shine', // light
    'It sure is dark in here', // dark
  )

  return (
    <SafeAreaView>
      <Text>{text}</Text>
    </SafeAreaView>
  )
}

export default App

Use a dark mode value to switch values

import React from 'react'
import { Text, SafeAreaView } from 'react-native'
import { useDarkModeValue, DarkModeValue } from 'rn-dark-mode'

const BACKGROUND_COLOR = new DarkModeValue(
  '#ffffff', // light
  '#000000', // dark
)

function App(): React.ReactElement {
  const backgroundColor = useDarkModeValue(BACKGROUND_COLOR)

  return (
    <SafeAreaView style={{ backgroundColor }}>
      <Text>Hello</Text>
    </SafeAreaView>
  )
}

export default App

Requirements

React Native >= 0.62.0