themesx

v1.1.3

Published

2 hours ago

<h1 align="center">ThemesX</h1>

0High
0Medium
0Low

react themes next-themes nextjs-themes next theme nextjs dark mode react-themes astro-themes remix-themes gatsby-themes react dark mode dark mode utility dark mode

Features

Seamless Dark Mode Support: ThemesX provides a quick setup for dark and light modes, handling background, text colors, and system theme detection automatically.
System Theme Detection: Automatically syncs with the user’s device theme preference, so your app can adjust its appearance according to the system's light or dark mode setting.
React Ecosystem Compatibility: Works effortlessly with major frameworks like Next.js, Vite, Gatsby, Remix, Astro, Qwik, and Solid, ensuring broad compatibility for any React-based project.
SSR Friendly: Fully compatible with server-side rendering, making it ideal for Next.js and other SSR frameworks.
Dynamic Theme Switching: Includes options for system-based, user-selected dark or light themes, making it highly customizable.
Embedded CSS Styling: Automatically injects the necessary CSS for background and text color adjustments, saving you from adding extra styling code.
TypeScript Support: Fully typed with TypeScript, enabling improved development experience, code completion, and safety.

Installation

Install ThemesX using your preferred package manager:

Bun

bun add themesx

npm

npm install themesx

pnpm

pnpm add themesx

yarn

yarn add themesx

Usage

Basic Setup

In your main app file, wrap your app in ThemeProvider to enable ThemesX functionality.

import React from 'react';
import { ThemeProvider } from 'themesx';

function App({ Component, pageProps }) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default App;

Accessing the Theme Context

Use the useTheme hook to control and monitor theme state in your components.

import React from 'react';
import { useTheme } from 'themesx';

const MyComponent = () => {
  const { theme, setTheme } = useTheme();

  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={() => setTheme('dark')}>Switch to Dark Mode</button>
      <button onClick={() => setTheme('light')}>Switch to Light Mode</button>
      <button onClick={() => setTheme('system')}>Use System Theme</button>
    </div>
  );
};

export default MyComponent;

Framework-Specific Examples

Next.js

App Directory (Next.js 13+)

In the app directory, place ThemeProvider in layout.js or layout.tsx to ensure theme support for all pages.

// app/layout.js or app/layout.tsx
import React from 'react';
import { ThemeProvider } from 'themesx';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

Pages Directory

In the pages directory, add ThemeProvider to _app.js or _app.tsx to wrap all pages with theme support.

// pages/_app.js or pages/_app.tsx
import React from 'react';
import { ThemeProvider } from 'themesx';

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

Vite

For Vite projects, simply wrap your main application component in ThemeProvider in main.js or main.tsx.

// src/main.js or src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { ThemeProvider } from 'themesx';

ReactDOM.createRoot(document.getElementById('root')).render(
  <ThemeProvider>
    <App />
  </ThemeProvider>,
);

Gatsby

To use ThemesX in a Gatsby project, add ThemeProvider in gatsby-browser.js and gatsby-ssr.js to enable SSR and client-side support.

// gatsby-browser.js and gatsby-ssr.js
import React from 'react';
import { ThemeProvider } from 'themesx';

export const wrapRootElement = ({ element }) => (
  <ThemeProvider>{element}</ThemeProvider>
);

Remix

In Remix, wrap your root component in ThemeProvider to ensure theme support throughout the app.

// root.tsx or root.js
import React from 'react';
import { ThemeProvider } from 'themesx';
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from 'remix';

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <ThemeProvider>
          <Outlet />
        </ThemeProvider>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

Astro

Astro with React components can use ThemeProvider by wrapping your app in the main App file.

// src/components/App.jsx
import React from 'react';
import { ThemeProvider } from 'themesx';
import MyComponent from './MyComponent';

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

export default App;

Qwik

In a Qwik React project, you can wrap the main component in ThemeProvider as shown below.

// src/App.jsx
import React from 'react';
import { ThemeProvider } from 'themesx';
import MyComponent from './MyComponent';

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

export default App;

Solid

Using ThemesX in Solid requires wrapping the main React component in ThemeProvider.

// src/App.jsx
import React from 'react';
import { ThemeProvider } from 'themesx';
import MyComponent from './MyComponent';

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

export default App;

API Reference

`ThemeProvider`

The ThemeProvider component wraps your application to provide global theme state and CSS support.

Props:
- children: The components to render within the ThemeProvider.
- enableSystemTheme: (Optional) Boolean to enable automatic system theme detection.
- defaultTheme: (Optional) Sets the default theme ("light", "dark", or "system").

`useTheme`

A hook to access and control the theme state. Use useTheme to set and toggle themes in any component.

const { theme, setTheme } = useTheme();

theme: The current theme ("light", "dark", or "system").
setTheme: Function to change the theme; accepts "light", "dark", or "system" as parameters.

License

This project is licensed under the GPL-3.0-or-later License.