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 8cec58a5..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", @@ -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/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/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 = {}; 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..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 @@ -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"; +import { DataProps, UpdateProps } from "../../../client"; -export type ForcedPage = { pathMatcher: RegExp | string; props: ThemeSwitcherProps }; +export type ForcedPage = + | { pathMatcher: RegExp | string; props: { forcedTheme?: string; forcedColorScheme?: ColorSchemeType } } + | [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); 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, 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 c6cac781..1c86b085 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "devDependencies": { "@changesets/cli": "^2.27.1", "@turbo/gen": "^1.11.2", - "eslint": "^8.55.0", + "eslint": "^8.56.0", "eslint-config-custom": "workspace:*", "prettier": "^3.1.1", "turbo": "^1.11.2"