Expo-theme-switcher NPM

expo-theme-switcher

This is package help to handle theme toggle in bigger react native(expo) app, And it provide simple way to apply dark and light in all components

Installation

npm install expo-theme-switcher

yarn add expo-theme-switcher

Import statement

import { ThemeProvider, ThemeSwitcherBtn, useTheme } from 'expo-theme-switcher';

How to use it:

    // In App.js
    // setup part...

    import { ThemeProvider, ThemeSwitcherBtn, useTheme } from 'expo-theme-switcher';

    export default function App() {

        // light theme colors
        const lightTheme = {
            primaryBackgroundColor: "white",
            secondaryBackgroundColor: "#c7c7c7",
            primaryTextColor: "#000",
            secondaryTextColor: "",
            primaryBorderColor: "black",
            secondaryBorderColor: "gray",
        }

        // dark theme colors
        const darkTheme = {
            primaryBackgroundColor: "#111",
            secondaryBackgroundColor: "#333",
            primaryTextColor: "#fff",
            secondaryTextColor: "#cccccc",
            primaryBorderColor: "white",
            secondaryBorderColor: "gray",
        }

        return (
            <ThemeProvider light={lightTheme} dark={darkTheme}>
                <Homepage /> // another component
                <ThemeSwitcherBtn /> // toggle button
            </ThemeProvider>
        );
}

    // In Homepage.tsx

    import { useTheme } from 'expo-theme-switcher'

    const Homepage = () => {
    const { currentTheme } = useTheme() // currentTheme is a object

    // console.log("currentTheme : ", currentTheme) // currentTheme :  {"isDarkMode": false, "primaryBackgroundColor": "white", "primaryTextColor": "#000", "secondaryBackgroundColor": "#ccc", "secondaryTextColor": "#4d4d4d"}

    return (
        <View style={{backgroundColor: currentTheme.primaryBackgroundColor}}>
            <Text style={{color: currentTheme.primaryTextColor}} >Homepage</Text>
            <Text style={{color: currentTheme.primaryTextColor}}>Homepage</Text>
        </View>
    )
}

export default Homepage