From 1afba34027da25297c4d1a60d7e0e2f1f674e7d3 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 16 Dec 2023 18:36:07 +0530 Subject: [PATCH 1/6] Add option to skipSystem colorScheme --- .../src/client/color-switch/color-switch.tsx | 13 ++++++++----- lib/nextjs-themes/src/styles.css | 1 + 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/lib/nextjs-themes/src/client/color-switch/color-switch.tsx b/lib/nextjs-themes/src/client/color-switch/color-switch.tsx index 4bf00480..cddec46b 100644 --- a/lib/nextjs-themes/src/client/color-switch/color-switch.tsx +++ b/lib/nextjs-themes/src/client/color-switch/color-switch.tsx @@ -2,8 +2,10 @@ import * as React from "react"; import { useTheme } from "../../store"; export interface ColorSwitchProps { - /** Diameter of the color color switch */ + /** Diameter of the color switch */ size?: number; + /** Skip system colorScheme while toggling */ + skipSystem?: boolean; } /** @@ -14,12 +16,13 @@ export interface ColorSwitchProps { * * ``` * - * custom size + * Custom size & skipSystem + * * ```ts - * + * * ``` */ -export function ColorSwitch({ size = 25 }: ColorSwitchProps) { +export function ColorSwitch({ size = 25, skipSystem }: ColorSwitchProps) { const [colorSchemePref, setColorSchemePref] = useTheme(state => [state.colorSchemePref, state.setColorSchemePref]); const toggleColorScheme = () => { switch (colorSchemePref) { @@ -31,7 +34,7 @@ export function ColorSwitch({ size = 25 }: ColorSwitchProps) { setColorSchemePref("light"); break; case "light": - setColorSchemePref("system"); + setColorSchemePref(skipSystem ? "dark" : "system"); } }; return ( diff --git a/lib/nextjs-themes/src/styles.css b/lib/nextjs-themes/src/styles.css index 791a929b..d3c06f95 100644 --- a/lib/nextjs-themes/src/styles.css +++ b/lib/nextjs-themes/src/styles.css @@ -9,6 +9,7 @@ --size: 25px; height: var(--size); width: var(--size); + transition: all 0.3s ease-in-out 0s !important; } [data-csp="system"] .nextjs-themes--color-switch::after, From ff9a8ad441356947ca96955b5cb38609932627f4 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 16 Dec 2023 18:38:11 +0530 Subject: [PATCH 2/6] Make backward compatible --- .../server-side-wrapper/server-side-wrapper.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx b/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx index 52ef01f5..8bd2dafc 100644 --- a/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx +++ b/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx @@ -1,11 +1,13 @@ import * as React from "react"; import type { HTMLProps, ReactNode } from "react"; import { cookies, headers } from "next/headers"; -import type { ThemeStoreType } from "../../../store"; +import type { ColorSchemeType, ThemeStoreType } from "../../../store"; import { resolveTheme } from "../../../utils"; import { DataProps, ThemeSwitcherProps, UpdateProps } from "../../../client"; -export type ForcedPage = { pathMatcher: RegExp | string; props: ThemeSwitcherProps }; +export type ForcedPage = + | { pathMatcher: RegExp | string; props: ThemeSwitcherProps } + | [pathMatcher: RegExp | string, themes: { theme?: string; colorScheme?: ColorSchemeType }]; export interface NextJsSSRThemeSwitcherProps extends HTMLProps { children?: ReactNode; @@ -22,8 +24,12 @@ function sharedServerComponentRenderer( const state = cookies().get("nextjs-themes")?.value; const path = headers().get("referer"); - const forcedPageProps = forcedPages?.find(forcedPage => path?.match(forcedPage.pathMatcher))?.props; - + const forcedPage = forcedPages?.find( + forcedPage => path?.match(Array.isArray(forcedPage) ? forcedPage[0] : forcedPage.pathMatcher), + ); + const forcedPageProps = Array.isArray(forcedPage) + ? { forcedTheme: forcedPage[1].theme, forcedColorScheme: forcedPage[1].colorScheme } + : forcedPage?.props; const themeState = state ? (JSON.parse(state) as ThemeStoreType) : undefined; const isSystemDark = cookies().get("data-color-scheme-system")?.value === "dark"; const resolvedData = resolveTheme(isSystemDark, themeState, forcedPageProps); From adcad12e7617eb8feed0d6a1e135b9ee9df45a1b Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 16 Dec 2023 18:38:19 +0530 Subject: [PATCH 3/6] Improve clarity --- .../server/nextjs/server-side-wrapper/server-side-wrapper.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx b/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx index 8bd2dafc..0063ac66 100644 --- a/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx +++ b/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx @@ -3,10 +3,10 @@ import type { HTMLProps, ReactNode } from "react"; import { cookies, headers } from "next/headers"; import type { ColorSchemeType, ThemeStoreType } from "../../../store"; import { resolveTheme } from "../../../utils"; -import { DataProps, ThemeSwitcherProps, UpdateProps } from "../../../client"; +import { DataProps, UpdateProps } from "../../../client"; export type ForcedPage = - | { pathMatcher: RegExp | string; props: ThemeSwitcherProps } + | { pathMatcher: RegExp | string; props: { forcedTheme?: string; forcedColorScheme?: ColorSchemeType } } | [pathMatcher: RegExp | string, themes: { theme?: string; colorScheme?: ColorSchemeType }]; export interface NextJsSSRThemeSwitcherProps extends HTMLProps { From 6de349341749d117a5aa626071bb0c8da9bc0ec4 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 16 Dec 2023 18:43:47 +0530 Subject: [PATCH 4/6] upgrade build setup --- .changeset/young-files-peel.md | 5 +++++ lib/nextjs-themes/package.json | 1 + lib/nextjs-themes/tsup.config.ts | 6 ++---- package.json | 8 ++++---- 4 files changed, 12 insertions(+), 8 deletions(-) create mode 100644 .changeset/young-files-peel.md diff --git a/.changeset/young-files-peel.md b/.changeset/young-files-peel.md new file mode 100644 index 00000000..ad4474e0 --- /dev/null +++ b/.changeset/young-files-peel.md @@ -0,0 +1,5 @@ +--- +"nextjs-themes": patch +--- + +Add option to skip System colorScheme | Make forcedPage options backward compatible diff --git a/lib/nextjs-themes/package.json b/lib/nextjs-themes/package.json index 8cec58a5..4f56c783 100644 --- a/lib/nextjs-themes/package.json +++ b/lib/nextjs-themes/package.json @@ -32,6 +32,7 @@ "@vitejs/plugin-react": "^4.2.1", "@vitest/coverage-v8": "^1.0.2", "esbuild-plugin-ignoretests": "^0.0.7", + "esbuild-plugin-react18": "^0.0.6", "esbuild-plugin-removetestid": "^0.0.5", "esbuild-react18-useclient": "^1.0.7", "eslint-config-custom": "workspace:*", diff --git a/lib/nextjs-themes/tsup.config.ts b/lib/nextjs-themes/tsup.config.ts index 81422578..3f49b631 100644 --- a/lib/nextjs-themes/tsup.config.ts +++ b/lib/nextjs-themes/tsup.config.ts @@ -1,7 +1,5 @@ import { defineConfig } from "tsup"; -import reactUseClientPlugin from "esbuild-react18-useclient"; -import ignoretestsPlugin from "esbuild-plugin-ignoretests"; -import removeTestidPluging from "esbuild-plugin-removetestid"; +import react18Plugin from "esbuild-plugin-react18"; // eslint-disable-next-line import/no-default-export -- export default is required for config files export default defineConfig(options => ({ @@ -10,6 +8,6 @@ export default defineConfig(options => ({ sourcemap: false, clean: true, minify: !options.watch, - esbuildPlugins: [reactUseClientPlugin, ignoretestsPlugin(), removeTestidPluging()], + esbuildPlugins: [react18Plugin()], legacyOutput: true, })); diff --git a/package.json b/package.json index 14437324..1c86b085 100644 --- a/package.json +++ b/package.json @@ -10,11 +10,11 @@ }, "devDependencies": { "@changesets/cli": "^2.27.1", - "@turbo/gen": "^1.11.1", - "eslint": "^8.55.0", + "@turbo/gen": "^1.11.2", + "eslint": "^8.56.0", "eslint-config-custom": "workspace:*", - "prettier": "^3.1.0", - "turbo": "^1.11.1" + "prettier": "^3.1.1", + "turbo": "^1.11.2" }, "packageManager": "pnpm@8.6.10", "name": "theme-switch" From 46eebc405dee418ab52d475a6110aa38e05f2098 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 16 Dec 2023 18:48:04 +0530 Subject: [PATCH 5/6] update tests --- .../nextjs/server-side-wrapper/server-side-wrapper.test.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.test.tsx b/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.test.tsx index 3c45d305..79a0a21a 100644 --- a/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.test.tsx +++ b/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.test.tsx @@ -79,6 +79,11 @@ describe("server-side-target", () => { ); expect(screen.getByTestId("server-side-target").getAttribute("data-theme")).toBe("yellow"); }); + test("force disable color scheme -- legacy input format", ({ expect }) => { + globalThis.path = "/forced-color-scheme"; + render(); + expect(screen.getByTestId("server-side-target").getAttribute("data-theme")).toBe("yellow"); + }); /** forced page but no cookies */ test("force disable color scheme - no cookies", ({ expect }) => { globalThis.cookies = {}; From 5c3e9df5a9211bc267d8fa161518c2d7300b0970 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 16 Dec 2023 18:49:45 +0530 Subject: [PATCH 6/6] Changeset --- .changeset/young-files-peel.md | 5 ----- examples/app-router/CHANGELOG.md | 8 ++++++++ examples/app-router/package.json | 2 +- examples/pages-router/CHANGELOG.md | 8 ++++++++ examples/pages-router/package.json | 2 +- examples/simple-multi-theme/CHANGELOG.md | 8 ++++++++ examples/simple-multi-theme/package.json | 2 +- examples/tailwind/CHANGELOG.md | 7 +++++++ examples/tailwind/package.json | 2 +- examples/vite/CHANGELOG.md | 8 ++++++++ examples/vite/package.json | 2 +- lib/nextjs-themes/CHANGELOG.md | 6 ++++++ lib/nextjs-themes/package.json | 2 +- 13 files changed, 51 insertions(+), 11 deletions(-) delete mode 100644 .changeset/young-files-peel.md diff --git a/.changeset/young-files-peel.md b/.changeset/young-files-peel.md deleted file mode 100644 index ad4474e0..00000000 --- a/.changeset/young-files-peel.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"nextjs-themes": patch ---- - -Add option to skip System colorScheme | Make forcedPage options backward compatible diff --git a/examples/app-router/CHANGELOG.md b/examples/app-router/CHANGELOG.md index 12dc680f..88fb2885 100644 --- a/examples/app-router/CHANGELOG.md +++ b/examples/app-router/CHANGELOG.md @@ -1,5 +1,13 @@ # app-router +## 0.0.15 + +### Patch Changes + +- Updated dependencies [6de3493] + - nextjs-themes@2.0.1 + - shared-ui@1.0.2 + ## 0.0.14 ### Patch Changes diff --git a/examples/app-router/package.json b/examples/app-router/package.json index 9e5970d3..0425f4ad 100644 --- a/examples/app-router/package.json +++ b/examples/app-router/package.json @@ -1,6 +1,6 @@ { "name": "app-router", - "version": "0.0.14", + "version": "0.0.15", "private": true, "scripts": { "dev": "next dev --port 3002", diff --git a/examples/pages-router/CHANGELOG.md b/examples/pages-router/CHANGELOG.md index 595c1862..e7e2544f 100644 --- a/examples/pages-router/CHANGELOG.md +++ b/examples/pages-router/CHANGELOG.md @@ -1,5 +1,13 @@ # nextjs-pages-router +## 1.0.10 + +### Patch Changes + +- Updated dependencies [6de3493] + - nextjs-themes@2.0.1 + - shared-ui@1.0.2 + ## 1.0.9 ### Patch Changes diff --git a/examples/pages-router/package.json b/examples/pages-router/package.json index fa57d2ef..fb126f0b 100644 --- a/examples/pages-router/package.json +++ b/examples/pages-router/package.json @@ -1,6 +1,6 @@ { "name": "pages-router", - "version": "1.0.9", + "version": "1.0.10", "private": true, "scripts": { "dev": "next dev --port 3003", diff --git a/examples/simple-multi-theme/CHANGELOG.md b/examples/simple-multi-theme/CHANGELOG.md index 1c65d2b9..d5748aca 100644 --- a/examples/simple-multi-theme/CHANGELOG.md +++ b/examples/simple-multi-theme/CHANGELOG.md @@ -1,5 +1,13 @@ # simple-multi-theme +## 1.0.10 + +### Patch Changes + +- Updated dependencies [6de3493] + - nextjs-themes@2.0.1 + - shared-ui@1.0.2 + ## 1.0.9 ### Patch Changes diff --git a/examples/simple-multi-theme/package.json b/examples/simple-multi-theme/package.json index 3931bc40..6562d6bd 100644 --- a/examples/simple-multi-theme/package.json +++ b/examples/simple-multi-theme/package.json @@ -1,6 +1,6 @@ { "name": "simple-multi-theme", - "version": "1.0.9", + "version": "1.0.10", "private": true, "scripts": { "dev": "next dev --port 3001", diff --git a/examples/tailwind/CHANGELOG.md b/examples/tailwind/CHANGELOG.md index aabb5523..384f3790 100644 --- a/examples/tailwind/CHANGELOG.md +++ b/examples/tailwind/CHANGELOG.md @@ -1,5 +1,12 @@ # tailwind +## 0.1.4 + +### Patch Changes + +- Updated dependencies [6de3493] + - nextjs-themes@2.0.1 + ## 0.1.3 ### Patch Changes diff --git a/examples/tailwind/package.json b/examples/tailwind/package.json index 92a2ca53..624c46cb 100644 --- a/examples/tailwind/package.json +++ b/examples/tailwind/package.json @@ -1,6 +1,6 @@ { "name": "tailwind", - "version": "0.1.3", + "version": "0.1.4", "private": true, "scripts": { "dev": "next dev", diff --git a/examples/vite/CHANGELOG.md b/examples/vite/CHANGELOG.md index 3eba641c..28a77691 100644 --- a/examples/vite/CHANGELOG.md +++ b/examples/vite/CHANGELOG.md @@ -1,5 +1,13 @@ # vite-example +## 0.0.15 + +### Patch Changes + +- Updated dependencies [6de3493] + - nextjs-themes@2.0.1 + - shared-ui@1.0.2 + ## 0.0.14 ### Patch Changes diff --git a/examples/vite/package.json b/examples/vite/package.json index c3d43c29..fa873d02 100644 --- a/examples/vite/package.json +++ b/examples/vite/package.json @@ -1,7 +1,7 @@ { "name": "vite-example", "private": true, - "version": "0.0.14", + "version": "0.0.15", "type": "module", "scripts": { "dev": "vite --port 3001", diff --git a/lib/nextjs-themes/CHANGELOG.md b/lib/nextjs-themes/CHANGELOG.md index e5237ad0..ed009b01 100644 --- a/lib/nextjs-themes/CHANGELOG.md +++ b/lib/nextjs-themes/CHANGELOG.md @@ -1,5 +1,11 @@ # nextjs-themes +## 2.0.1 + +### Patch Changes + +- 6de3493: Add option to skip System colorScheme | Make forcedPage options backward compatible + ## 2.0.0 ### Major Changes diff --git a/lib/nextjs-themes/package.json b/lib/nextjs-themes/package.json index 4f56c783..74fa8b84 100644 --- a/lib/nextjs-themes/package.json +++ b/lib/nextjs-themes/package.json @@ -2,7 +2,7 @@ "name": "nextjs-themes", "author": "Mayank Kumar Chaudhari ", "private": false, - "version": "2.0.0", + "version": "2.0.1", "description": "Unleash the Power of React Server Components! Use multiple themes on your site with confidence, without losing any advantages of React Server Components.", "main": "./index.ts", "types": "./index.ts",