https://github.com/natsuneko-laboratory/next-theme

Integrate custom theme feature into your Next.js project.
https://github.com/natsuneko-laboratory/next-theme

Last synced: 3 months ago
JSON representation

Integrate custom theme feature into your Next.js project.

• Host: GitHub
• URL: https://github.com/natsuneko-laboratory/next-theme
• Owner: natsuneko-laboratory
• License: mit
• Created: 2024-06-20T11:06:28.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-06-21T03:53:52.000Z (7 months ago)
• Last Synced: 2024-10-31T23:17:36.812Z (3 months ago)
• Language: TypeScript
• Homepage:
• Size: 69.3 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @natsuneko-laboratory/next-theme

Integrate custom theme feature into your Next.js project.

## Installation

```bash

$ npm install @natsuneko-laboratory/next-theme

```

## Usage

Import Provider to your `layout.tsx` or `app.tsx`:

```tsx

import { ThemeProvider } from "@natsuneko-laboratory/next-theme/components/ThemeProvider";

const ApplicationRootLayout = async ({

  children,

}: {

  children: React.ReactNode;

}) => {

  const theme = await getTheme("light"); // throws compile error in this section

  return (

    

      

        {children}

      

    

  );

};

```

And create a server action in your any file:

```tsx

// @/app/actions/theme.ts

"use server";

import {

  setTheme as setThemeInternal,

  getTheme as getThemeInternal,

} from "@natsuneko-laboratory/next-theme/actions/theme";

import { cookies } from "next/headers";

export const setTheme = setThemeInternal;

export const getTheme = getThemeInternal;

```

Import the server action in your `layout.tsx` or `app.tsx`:

```tsx

import { getTheme } from "@/app/actions/theme"; // add to head section to avoid compile error

```

Reference current theme in your component:

```tsx

// client

import { useTheme } from "@natsuneko-laboratory/next-theme/components/ThemeProvider";

const theme = useTheme();

// server

import { getTheme } from "@/app/actions/theme";

const theme = await getTheme("light"); // must specify default theme

```

## License

MIT by [@6jz](https://to.natsuneko.com/6jz)