Skip to content

Commit

Permalink
Merge pull request #35 from react18-tools/alpha
Browse files Browse the repository at this point in the history 
Alpha
  • Loading branch information
@mayank1513
mayank1513 authored Jun 24, 2024
2 parents e916e25 + ff3b652 commit 73401c1
Show file tree
Hide file tree
Showing 45 changed files with 740 additions and 469 deletions.
5 changes: 5 additions & 0 deletions .changeset/brown-laws-perform.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"nextjs-themes": patch
---

Updaet patch
5 changes: 5 additions & 0 deletions .changeset/clean-turtles-nail.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"nextjs-themes": patch
---

Touchup
5 changes: 5 additions & 0 deletions .changeset/fuzzy-timers-lie.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"nextjs-themes": major
---

Do not export force-theme and force-color-scheme components from root.
5 changes: 5 additions & 0 deletions .changeset/good-cobras-deny.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"nextjs-themes": patch
---

Patch alpha to avoid publishing over previously published version
5 changes: 5 additions & 0 deletions .changeset/mighty-toes-boil.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"nextjs-themes": patch
---

Test bundle size by re-exporting forced components.
5 changes: 5 additions & 0 deletions .changeset/moody-eggs-report.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"nextjs-themes": patch
---

Minify CSS
5 changes: 5 additions & 0 deletions .changeset/plenty-chicken-provide.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"nextjs-themes": patch
---

Remove rarely used exports
25 changes: 25 additions & 0 deletions .changeset/pre.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"mode": "exit",
"tag": "alpha",
"initialVersions": {
"@example/app": "0.0.0",
"@example/pages": "0.0.0",
"@example/vite": "0.0.0",
"nextjs-themes": "4.0.0-alpha.7",
"@repo/eslint-config": "0.0.0",
"@repo/typescript-config": "0.0.0",
"@repo/shared": "0.0.6-alpha.7",
"@repo/scripts": "0.0.0"
},
"changesets": [
"brown-laws-perform",
"clean-turtles-nail",
"fuzzy-timers-lie",
"good-cobras-deny",
"mighty-toes-boil",
"moody-eggs-report",
"plenty-chicken-provide",
"purple-waves-marry",
"twenty-paws-bathe"
]
}
5 changes: 5 additions & 0 deletions .changeset/purple-waves-marry.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"nextjs-themes": patch
---

Avoid rerendering without memo. Attempt to minify minzip further
5 changes: 5 additions & 0 deletions .changeset/twenty-paws-bathe.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"nextjs-themes": patch
---

Import hook and color-switch from their own files.
12 changes: 10 additions & 2 deletions .tkb
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
{
"scope": "Workspace",
"tasks": {},
"tasks": {
"0o1UME_ZgqZdcbYksPgDI": {
"id": "0o1UME_ZgqZdcbYksPgDI",
"description": "Update Docs\n- Use wiki - Export typedoc as md and then publish to wiki",
"columnId": "column-todo"
}
},
"columns": [
{
"id": "column-todo",
"title": "To do",
"tasksIds": []
"tasksIds": [
"0o1UME_ZgqZdcbYksPgDI"
]
},
{
"id": "column-doing",
Expand Down
263 changes: 4 additions & 259 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,267 +45,12 @@ This project was inspired by next-themes. Unlike next-themes, `nextjs-themes` do

> Check out the [live example](https://nextjs-themes.vercel.app/).
<details>
<summary><h2 style="display:inline">Installation</h2></summary>

```bash
$ pnpm add nextjs-themes
```

**_or_**

```bash
$ npm install nextjs-themes
```

**_or_**

```bash
$ yarn add nextjs-themes
```

</details>

<details>
<summary><h2 style="display:inline">Want Lite Version?</h2>

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/nextjs-themes-lite)](https://www.npmjs.com/package/nextjs-themes-lite) [![Version](https://img.shields.io/npm/v/nextjs-themes-lite.svg?colorB=green)](https://www.npmjs.com/package/nextjs-themes-lite) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/nextjs-themes-lite.svg)](https://www.npmjs.com/package/nextjs-themes-lite)

</summary>

```bash
$ pnpm add nextjs-themes-lite
```

**or**

```bash
$ npm install nextjs-themes-lite
```

**or**

```bash
$ yarn add nextjs-themes-lite
```

> Note: `r18gs` is a peer dependency
</details>

## Usage

### SPA (e.g., Vite, CRA) and Next.js pages directory (No server components)

To add dark mode support, modify `_app.js` as follows:

```js
import { ThemeSwitcher } from "nextjs-themes";

function MyApp({ Component, pageProps }) {
return (
<>
<ThemeSwitcher forcedTheme={Component.theme} />
<Component {...pageProps} />
</>
);
}

export default MyApp;
```

⚡🎉Boom! Dark mode is ready in just a couple of lines!

### With Next.js `app` router (Server Components)

Update `app/layout.jsx` to add `ThemeSwitcher` from `nextjs-themes`:

```tsx
// app/layout.jsx
import { ThemeSwitcher } from "nextjs-themes";

export default function Layout({ children }) {
return (
<html lang="en">
<head />
<body>
<ThemeSwitcher />
{children}
</body>
</html>
);
}
```

Woohoo! Multiple theme modes with Server Components support!

### HTML & CSS

Next.js app supports dark mode, including System preference with `prefers-color-scheme`. The theme is synced between tabs, modifying the `data-theme` attribute on the `html` element:

```css
:root {
--background: white;
--foreground: black;
}

[data-theme="dark"] {
--background: black;
--foreground: white;
}
```

## Images

Show different images based on the current theme:

```ts
import Image from "next/image";
import { useTheme } from "nextjs-themes";

function ThemedImage() {
const { resolvedTheme } = useTheme();
const src = resolvedTheme === "light" ? "/light.png" : "/dark.png";
return <Image src={src} width={400} height={400} />;
}

export default ThemedImage;
```

### useTheme

The `useTheme` hook provides theme information and allows changing the theme:

```js
import { useTheme } from "nextjs-themes";

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

return (
<div>
The current theme is: {theme}
<button onClick={() => setTheme("light")}>Light Mode</button>
<button onClick={() => setTheme("dark")}>Dark Mode</button>
</div>
);
};
```

The `useTheme` hook returns the following object:

```tsx
interface UseThemeYield {
theme: string;
darkTheme: string;
lightTheme: string;
colorSchemePref: ColorSchemeType;
systemColorScheme: ResolvedColorSchemeType;
resolvedColorScheme: ResolvedColorSchemeType;
resolvedTheme: string;
setTheme: (theme: string) => void;
setDarkTheme: (darkTheme: string) => void;
setLightTheme: (lightTheme: string) => void;
setThemeSet: (themeSet: { darkTheme: string; lightTheme: string }) => void;
setColorSchemePref: (colorSchemePref: ColorSchemeType) => void;
toggleColorScheme: (skipSystem?: boolean) => void;
setForcedTheme: (forcedTheme: string) => void;
setForcedColorScheme: (forcedColorScheme: ColorSchemeType) => void;
}
```

<details>
<summary><h2 style="display:inline">Force per page theme and color-scheme</h2></summary>

### Next.js App Router

```tsx
import { ForceTheme } from "nextjs-themes/force-theme";

function MyPage() {
return (
<>
<ForceTheme theme="my-theme" />
...
</>
);
}

export default MyPage;
```

> If you are using TypeScript and have not set nodeResolution to `Bundler` or `Node16` or `NodeNext`, you need to import from `nextjs-themes/client/force-theme`
## Getting Started

### Next.js Pages Router
> See [Getting Started](./guides/getting-started.md)
For the pages router, you have two options. The first option is the same as the app router, and the second option, which is compatible with `next-themes`, involves adding the `theme` property to your page component like this:

```javascript
function MyPage() {
return <>...</>;
}

MyPage.theme = "my-theme";

export default MyPage;
```

Similarly, you can force a color scheme. This will apply your `defaultDark` or `defaultLight` theme, which can be configured via hooks.

</details>

### With Styled Components and any CSS-in-JS

Next Themes works with any library. For Styled Components, `createGlobalStyle` in your custom App:

```js
// pages/_app.js
import { createGlobalStyle } from "styled-components";
import { ThemeSwitcher } from "nextjs-themes";

const GlobalStyle = createGlobalStyle`
:root {
--fg: #000;
--bg: #fff;
}
[data-theme="dark"] {
--fg: #fff;
--bg: #000;
}
`;

function MyApp({ Component, pageProps }) {
return (
<>
<GlobalStyle />
<ThemeSwitcher forcedTheme={Component.theme} />
<Component {...pageProps} />
</>
);
}
```

### With Tailwind

In `tailwind.config.js`, set the dark mode property to class:

```js
// tailwind.config.js
module.exports = {
darkMode: "class",
};
```

⚡🎉Ready to use dark mode in Tailwind!

> Caution: Your class must be `"dark"`, which is the default value used in this library. Tailwind requires the class name `"dark"` for dark-theme.
Use dark-mode specific classes:

```tsx
<h1 className="text-black dark:text-white">
```
> Want Lite Version? [![npm bundle size](https://img.shields.io/bundlephobia/minzip/nextjs-themes-lite)](https://www.npmjs.com/package/nextjs-themes-lite) [![Version](https://img.shields.io/npm/v/nextjs-themes-lite.svg?colorB=green)](https://www.npmjs.com/package/nextjs-themes-lite) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/nextjs-themes-lite.svg)](https://www.npmjs.com/package/nextjs-themes-lite)
> In case you are using `r18gs` in your project, you may use lite version which requires `r18gs` as a peerDependency.
## Migration

Expand Down
Loading

0 comments on commit 73401c1

Please sign in to comment.