From 7df7817aa1f565acd34af1ce1c4b5cc655cb22bd Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Wed, 13 Mar 2024 22:11:51 +0100 Subject: [PATCH 1/6] Delete next-themes/jest.config.js (#271) --- next-themes/jest.config.js | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 next-themes/jest.config.js diff --git a/next-themes/jest.config.js b/next-themes/jest.config.js deleted file mode 100644 index 39b2ce6..0000000 --- a/next-themes/jest.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$' -} From 3cfbbed92dc3b3082107b79c5e77195e330bfded Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Wed, 13 Mar 2024 22:12:46 +0100 Subject: [PATCH 2/6] mention `next-themes` is react agnostic (#268) * Update README.md * Update README.md --- README.md | 44 ++++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index a109f04..7c31561 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # next-themes ![next-themes minzip package size](https://img.shields.io/bundlephobia/minzip/next-themes) [![Version](https://img.shields.io/npm/v/next-themes.svg?colorB=green)](https://www.npmjs.com/package/next-themes) -An abstraction for themes in your Next.js app. +An abstraction for themes in your React app. - ✅ Perfect dark mode in 2 lines of code - ✅ System setting with prefers-color-scheme @@ -29,7 +29,7 @@ $ yarn add next-themes You'll need a [Custom `App`](https://nextjs.org/docs/advanced-features/custom-app) to use next-themes. The simplest `_app` looks like this: -```js +```jsx // pages/_app.js function MyApp({ Component, pageProps }) { @@ -41,7 +41,7 @@ export default MyApp Adding dark mode support takes 2 lines of code: -```js +```jsx import { ThemeProvider } from 'next-themes' function MyApp({ Component, pageProps }) { @@ -59,7 +59,7 @@ export default MyApp You'll need to update your `app/layout.jsx` to use next-themes. The simplest `layout` looks like this: -```js +```jsx // app/layout.jsx export default function Layout({ children }) { @@ -74,7 +74,7 @@ export default function Layout({ children }) { Adding dark mode support still only takes a few lines of code. Start by creating a new [providers component](https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers) in its own file: -```js +```jsx // app/providers.jsx 'use client' @@ -88,7 +88,7 @@ export function Providers({ children }) { Then add the `` component to your layout _inside_ of the ``. -```js +```jsx // app/layout.jsx import { Providers } from './providers' @@ -130,7 +130,7 @@ That's it, your Next.js app fully supports dark mode, including System preferenc Your UI will need to know the current theme and be able to change it. The `useTheme` hook provides theme information: -```js +```jsx import { useTheme } from 'next-themes' const ThemeChanger = () => { @@ -192,7 +192,7 @@ The [Live Example](https://next-themes-example.vercel.app/) shows next-themes in For versions above v0.0.12, the `defaultTheme` is automatically set to "system", so to use System preference you can simply use: -```js +```jsx ``` @@ -200,7 +200,7 @@ For versions above v0.0.12, the `defaultTheme` is automatically set to "system", If you don't want a System theme, disable it via `enableSystem`: -```js +```jsx ``` @@ -208,7 +208,7 @@ If you don't want a System theme, disable it via `enableSystem`: If your Next.js app uses a class to style the page based on the theme, change the attribute prop to `class`: -```js +```jsx ``` @@ -228,7 +228,7 @@ export default Page In your `_app`, read the variable and pass it to ThemeProvider: -```js +```jsx function MyApp({ Component, pageProps }) { return ( @@ -253,7 +253,7 @@ I wrote about [this technique here](https://paco.sh/blog/disable-theme-transitio To enable this behavior, pass the `disableTransitionOnChange` prop: -```js +```jsx ``` @@ -263,7 +263,7 @@ The name of the active theme is used as both the localStorage value and the valu If we want the DOM to instead render `data-theme="my-pink-theme"` when the theme is "pink", pass the `value` prop: -```js +```jsx ``` @@ -284,13 +284,13 @@ document.documentElement.getAttribute('data-theme') next-themes is designed to support any number of themes! Simply pass a list of themes: -```js +```jsx ``` > **Note!** When you pass `themes`, the default set of themes ("light" and "dark") are overridden. Make sure you include those if you still want your light and dark themes: -```js +```jsx ``` @@ -316,7 +316,7 @@ body { Next Themes is completely CSS independent, it will work with any library. For example, with Styled Components you just need to `createGlobalStyle` in your custom App: -```js +```jsx // pages/_app.js import { createGlobalStyle } from 'styled-components' import { ThemeProvider } from 'next-themes' @@ -352,7 +352,7 @@ Because we cannot know the `theme` on the server, many of the values returned fr The following code sample is **unsafe**: -```js +```jsx import { useTheme } from 'next-themes' // Do NOT use this! It will throw a hydration mismatch error. @@ -373,7 +373,7 @@ export default ThemeSwitch To fix this, make sure you only render UI that uses the current theme when the page is mounted on the client: -```js +```jsx import { useState, useEffect } from 'react' import { useTheme } from 'next-themes' @@ -408,7 +408,7 @@ To avoid [Layout Shift](https://web.dev/cls/), consider rendering a skeleton/pla Showing different images based on the current theme also suffers from the hydration mismatch problem. With [`next/image`](https://nextjs.org/docs/basic-features/image-optimization) you can use an empty image until the theme is resolved: -```js +```jsx import Image from 'next/image' import { useTheme } from 'next-themes' @@ -482,7 +482,7 @@ module.exports = { Set the attribute for your Theme Provider to class: -```js +```jsx // pages/_app.js ``` @@ -491,7 +491,7 @@ If you're using the `value` prop to specify different attribute values, make sur That's it! Now you can use dark-mode specific classes: -```js +```jsx

``` @@ -531,7 +531,7 @@ Nope. If you have a good reason for supporting this feature, please open an issu **Can I use this package with Gatsby or CRA?** -Nope. +Yes, starting from the 0.3.0 version. --- From 5f8669adb3c29970191f83e8b1993fe6b3226425 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Wed, 13 Mar 2024 22:13:46 +0100 Subject: [PATCH 3/6] Do not pass unneeded `disableTransitionOnChange` and `children` props in `` (#270) Update index.tsx --- next-themes/src/index.tsx | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/next-themes/src/index.tsx b/next-themes/src/index.tsx index 39b78e2..c3dc639 100644 --- a/next-themes/src/index.tsx +++ b/next-themes/src/index.tsx @@ -150,15 +150,13 @@ const Theme = ({ @@ -179,8 +177,8 @@ const ThemeScript = React.memo( value, themes, nonce - }: ThemeProviderProps & { defaultTheme: string }) => { - const scriptProps = [ + }: Omit & { defaultTheme: string }) => { + const scriptArgs = JSON.stringify([ attribute, storageKey, defaultTheme, @@ -189,15 +187,13 @@ const ThemeScript = React.memo( value, enableSystem, enableColorScheme - ] + ]).slice(1, -1) return (