Package Exports

expo-theme-switcher
expo-theme-switcher/ThemeSwitcherProvider.ts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (expo-theme-switcher) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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!