Skip to content

Commit f0ac35d

Browse files
mayank1513mayank1513
authored
Merge pull request #11 from react18-tools/fix/use-script
Fix/use script
2 parents b9c1839 + dcb1ca9 commit f0ac35d

31 files changed

+101
-481
lines changed

‎.changeset/seven-parents-sniff.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"nextjs-darkmode": major
3+
---
4+
5+
Inject script to set mode on page load.

‎.changeset/shaggy-mirrors-trade.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"nextjs-darkmode": patch
3+
---
4+
5+
Reuse code from script

‎README.md‎

Lines changed: 6 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,6 @@ The `nextjs-themes` library was initially created to achieve a similar functiona
3838

3939
- ✅ Manipulate theme via the `useMode` hook
4040

41-
- ✅ No cookies when not using the corresponding `ServerTarget`
42-
4341
- ✅ Comprehensive documentation with [Typedoc](https://react18-tools.github.io/nextjs-darkmode)
4442

4543
Feel free to [request new features](https://github.com/react18-tools/nextjs-darkmode/issues/new?assignees=&labels=&projects=&template=feature_request.md&title=), [discuss](https://github.com/react18-tools/nextjs-darkmode/discussions), or [report bugs](https://github.com/react18-tools/nextjs-darkmode/issues/new?assignees=&labels=&projects=&template=bug_report.md&title=).
@@ -108,7 +106,7 @@ $ yarn add nextjs-darkmode-lite
108106

109107
> Please explore `examples` and `packages/shared-ui` for more working examples. (updates coming soon...)
110108
111-
### SPA (e.g., Vite, CRA) and Next.js pages directory (No server components)
109+
### SPA (e.g., Vite, CRA) and Next.js pages directory
112110

113111
Modify `_app` to add dark mode support:
114112

@@ -135,21 +133,19 @@ export default MyApp;
135133

136134
> For `vite` or any other build tool, find a similar root component, e.g., `<App />` in `CRA` and `vite`.
137135
138-
### With Next.js `app` router (Server Components)
136+
### With Next.js `app` router
139137

140-
Update `app/layout.jsx` to add `Core` and `ServerTarget` to avoid flash of un-themed content:
138+
Update `app/layout.jsx` to add `Core` component.
141139

142140
```tsx
143141
// app/layout.jsx
144142
import { Core } from "nextjs-darkmode"; // for better tree-shaking
145-
import { ServerTarget } from "nextjs-darkmode/server";
146143

147144
export default function Layout({ children }) {
148145
return (
149146
<html lang="en">
150147
<head />
151148
<body>
152-
<ServerTarget />
153149
<Core />
154150
{children}
155151
</body>
@@ -158,26 +154,6 @@ export default function Layout({ children }) {
158154
}
159155
```
160156

161-
If you prefer SSR over SSG for your entire app, you can wrap entire app with `ServerTarget` as follows:
162-
163-
```tsx
164-
// app/layout.jsx
165-
import { Core } from "nextjs-darkmode"; // for better tree-shaking
166-
import { ServerTarget } from "nextjs-darkmode/server";
167-
168-
export default function Layout({ children }) {
169-
return (
170-
<ServerTarget tag="html" lang="en">
171-
<head />
172-
<body>
173-
<Core />
174-
{children}
175-
</body>
176-
</ServerTarget>
177-
);
178-
}
179-
```
180-
181157
### Switch
182158

183159
An elegant color switch to toggle color schemes:
@@ -188,7 +164,7 @@ An elegant color switch to toggle color schemes:
188164

189165
### HTML & CSS
190166

191-
Fully support dark mode, including system preference with `prefers-color-scheme`. The dark/light mode is synced between tabs and modifies the `className` and data-attributes on the `html` or ServerTarget element:
167+
Fully support dark mode, including system preference with `prefers-color-scheme`. The dark/light mode is synced between tabs and modifies the `className` and data-attributes on the `html` elemnt.
192168

193169
```css
194170
:root {
@@ -206,19 +182,10 @@ Fully support dark mode, including system preference with `prefers-color-scheme`
206182
[data-rm="dark"] {...}
207183
```
208184

209-
When using `ServerTarget`, use the CSS general sibling combinator (~):
210-
211-
```css
212-
.selector,
213-
.selector *,
214-
.selector ~ *,
215-
.selector ~ * * {
216-
--th-variable: value;
217-
}
218-
```
219-
220185
#### Using the data-attributes
221186

187+
data-attributes are very helpful when you want to customize styles in a CSS module file (`styles.module.css`)
188+
222189
`data-rm` -> Resolved Mode
223190

224191
`data-m` -> User's preference
@@ -352,8 +319,6 @@ Now you can use dark-mode specific classes:
352319
<h1 className="text-black dark:text-white">
353320
```
354321

355-
> When you use Tailwind, make sure you replace `html` in `app/layout` to `<ServerTarget tag="html"...` to avoid FOUC.
356-
357322
## Performance
358323

359324
`nextjs-darkmode` is designed to be fully tree-shakable, including only the code you use. For instance, if you only use the `useMode` hook, the rest of the library's code will be removed during the build process.

‎examples/nextjs/src/app/layout.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import "./styles.css";
22
import "react18-loaders/dist/index.css";
3-
import { ServerTarget } from "nextjs-darkmode/server";
43
import { Core } from "nextjs-darkmode";
54
import { Layout } from "@repo/shared/dist/server";
65
import { GlobalLoader, Header } from "@repo/shared";
@@ -13,7 +12,6 @@ export default function RootLayout({ children }: { children: React.ReactNode }):
1312
return (
1413
<html lang="en">
1514
<body className={inter.className}>
16-
<ServerTarget />
1715
<Core t="all .5s" />
1816
<Layout>
1917
<Header />

‎examples/tailwind-ssg/.eslintrc.js‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎examples/tailwind-ssg/app/_components/card.tsx‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎examples/tailwind-ssg/app/favicon.ico‎

-1.12 KB
Binary file not shown.

‎examples/tailwind-ssg/app/globals.css‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎examples/tailwind-ssg/app/layout.tsx‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎examples/tailwind-ssg/app/page.tsx‎

Lines changed: 0 additions & 61 deletions
This file was deleted.

0 commit comments

Comments
 (0)