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

#Light Mode

#Dark Mode

Installation

npm install expo-theme-switcher

or

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

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!