theme-switcher

A lightweight and reusable theme context for React and React Native apps.

✨ Features

• ✅ Simple ThemeProvider context
• 🌗 Supports dark and light themes
• ⚛️ Works with both React and React Native

📦 Install

npm install theme-switcher

🚀 Usages

import React, { ReactNode } from 'react';
import { ThemeProvider, useTheme } from 'theme-switcher';
import { TouchableOpacity, Text, View } from 'react-native'; // for web use react 

const App = () => (
  <ThemeProvider>
    <Main />
  </ThemeProvider>
);

const Main = () => {
  const { theme, toggleTheme } = useTheme();
  const isDark = theme === 'dark';

  return (
    <View style={{ padding: 20 }}>
      <TouchableOpacity onPress={toggleTheme}>
        <Text>
          {isDark ? 'Switch to Light' : 'Switch to Dark'}
        </Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

🧠 Theme-aware styles (Optional Helper)

const getThemedStyles = (isDark: boolean) => ({
  container: {
    backgroundColor: isDark ? '#000' : '#FFF',
    color: isDark ? '#FFF' : '#000',
  },
});

const styles = getThemedStyles(theme === 'dark');
```tsx

## 🛠 API

### ThemeProvider

```tsx
import { ThemeProvider } from '@/context/ThemeContext';

<ThemeProvider>
  <Main />
</ThemeProvider>

useTheme

const { theme, toggleTheme } = useTheme();

📝 License

MIT