diff --git a/lib/README.md b/lib/README.md index 7697196f..4aeb6d89 100644 --- a/lib/README.md +++ b/lib/README.md @@ -38,8 +38,6 @@ The `nextjs-themes` library was initially created to achieve a similar functiona - ✅ Manipulate theme via the `useMode` hook -- ✅ No cookies when not using the corresponding `ServerTarget` - - ✅ Comprehensive documentation with [Typedoc](https://react18-tools.github.io/nextjs-darkmode) 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 > Please explore `examples` and `packages/shared-ui` for more working examples. (updates coming soon...) -### SPA (e.g., Vite, CRA) and Next.js pages directory (No server components) +### SPA (e.g., Vite, CRA) and Next.js pages directory Modify `_app` to add dark mode support: @@ -135,21 +133,19 @@ export default MyApp; > For `vite` or any other build tool, find a similar root component, e.g., `` in `CRA` and `vite`. -### With Next.js `app` router (Server Components) +### With Next.js `app` router -Update `app/layout.jsx` to add `Core` and `ServerTarget` to avoid flash of un-themed content: +Update `app/layout.jsx` to add `Core` component. ```tsx // app/layout.jsx import { Core } from "nextjs-darkmode"; // for better tree-shaking -import { ServerTarget } from "nextjs-darkmode/server"; export default function Layout({ children }) { return ( - {children} @@ -158,26 +154,6 @@ export default function Layout({ children }) { } ``` -If you prefer SSR over SSG for your entire app, you can wrap entire app with `ServerTarget` as follows: - -```tsx -// app/layout.jsx -import { Core } from "nextjs-darkmode"; // for better tree-shaking -import { ServerTarget } from "nextjs-darkmode/server"; - -export default function Layout({ children }) { - return ( - - - - - {children} - - - ); -} -``` - ### Switch An elegant color switch to toggle color schemes: @@ -188,7 +164,7 @@ An elegant color switch to toggle color schemes: ### HTML & CSS -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: +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. ```css :root { @@ -206,19 +182,10 @@ Fully support dark mode, including system preference with `prefers-color-scheme` [data-rm="dark"] {...} ``` -When using `ServerTarget`, use the CSS general sibling combinator (~): - -```css -.selector, -.selector *, -.selector ~ *, -.selector ~ * * { - --th-variable: value; -} -``` - #### Using the data-attributes +data-attributes are very helpful when you want to customize styles in a CSS module file (`styles.module.css`) + `data-rm` -> Resolved Mode `data-m` -> User's preference @@ -352,8 +319,6 @@ Now you can use dark-mode specific classes:

``` -> When you use Tailwind, make sure you replace `html` in `app/layout` to `