diff --git a/examples/app-router/public/favicon.ico b/examples/app-router/public/favicon.ico index af984505..71e4bd71 100644 Binary files a/examples/app-router/public/favicon.ico and b/examples/app-router/public/favicon.ico differ diff --git a/examples/pages-router/cache/config.json b/examples/pages-router/cache/config.json new file mode 100644 index 00000000..a544f0f8 --- /dev/null +++ b/examples/pages-router/cache/config.json @@ -0,0 +1,6 @@ +{ + "telemetry": { + "notifiedAt": "1715050199607", + "enabled": false + } +} \ No newline at end of file diff --git a/examples/pages-router/package.json b/examples/pages-router/package.json index 156a32e3..f64be906 100644 --- a/examples/pages-router/package.json +++ b/examples/pages-router/package.json @@ -3,7 +3,7 @@ "version": "0.0.0", "private": true, "scripts": { - "dev": "next dev --port 3003", + "dev": "next dev --port 3000", "build": "next build", "start": "next start", "lint": "next lint" diff --git a/examples/pages-router/public/favicon.ico b/examples/pages-router/public/favicon.ico new file mode 100644 index 00000000..71e4bd71 Binary files /dev/null and b/examples/pages-router/public/favicon.ico differ diff --git a/examples/tailwind/cache/config.json b/examples/tailwind/cache/config.json new file mode 100644 index 00000000..a544f0f8 --- /dev/null +++ b/examples/tailwind/cache/config.json @@ -0,0 +1,6 @@ +{ + "telemetry": { + "notifiedAt": "1715050199607", + "enabled": false + } +} \ No newline at end of file diff --git a/examples/tailwind/package.json b/examples/tailwind/package.json index 671e6571..524e450d 100644 --- a/examples/tailwind/package.json +++ b/examples/tailwind/package.json @@ -3,26 +3,29 @@ "version": "0.0.0", "private": true, "scripts": { - "dev": "next dev", "build": "next build", - "start": "next start", - "lint": "next lint" + "clean": "rm -rf .next", + "dev": "next dev -p 3003", + "lint": "next lint", + "typecheck": "tsc --noEmit", + "start": "next start" }, "dependencies": { - "@mayank1513/fork-me": "^2.1.2", + "@repo/scripts": "workspace:*", + "@repo/shared": "workspace:*", "next": "^14.2.4", "nextjs-themes": "workspace:*", "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { + "@next/eslint-plugin-next": "^14.2.4", "@repo/eslint-config": "workspace:*", "@repo/typescript-config": "workspace:*", "@types/node": "^20.14.9", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "autoprefixer": "^10.4.19", - "eslint": "9.5.0", "postcss": "^8.4.38", "tailwindcss": "^3.4.4", "typescript": "^5.5.2" diff --git a/examples/tailwind/src/app/page.tsx b/examples/tailwind/src/app/page.tsx index dab95eee..7de79f41 100644 --- a/examples/tailwind/src/app/page.tsx +++ b/examples/tailwind/src/app/page.tsx @@ -1,4 +1,3 @@ -import { StarMe } from "@mayank1513/fork-me"; import Image from "next/image"; import { ColorSwitch } from "nextjs-themes"; import Card from "./_components/card"; @@ -48,19 +47,6 @@ export default function Home() { title="Examples" text="Learn through more examples on official GitHub repo." /> - -

- Star Me{" "} - - -> - -

-

- Explore and star official nextjs-themes repo. -

- +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/examples/themes/next.config.js b/examples/themes/next.config.js new file mode 100644 index 00000000..da1bb770 --- /dev/null +++ b/examples/themes/next.config.js @@ -0,0 +1,3 @@ +module.exports = { + reactStrictMode: true, +}; diff --git a/examples/themes/package.json b/examples/themes/package.json new file mode 100644 index 00000000..3ddd3899 --- /dev/null +++ b/examples/themes/package.json @@ -0,0 +1,33 @@ +{ + "name": "@example/themes", + "version": "0.0.0", + "private": true, + "scripts": { + "build": "next build", + "clean": "rm -rf .next", + "dev": "next dev -p 3004", + "lint": "next lint", + "typecheck": "tsc --noEmit", + "start": "next start", + "postinstall": "next telemetry disable" + }, + "dependencies": { + "@repo/scripts": "workspace:*", + "@repo/shared": "workspace:*", + "next": "^14.2.4", + "nextjs-darkmode": "^1.0.4", + "nextjs-themes": "workspace:*", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react18-loaders": "^1.1.3" + }, + "devDependencies": { + "@next/eslint-plugin-next": "^14.2.4", + "@repo/eslint-config": "workspace:*", + "@repo/typescript-config": "workspace:*", + "@types/node": "^20.14.9", + "@types/react": "^18.3.3", + "@types/react-dom": "^18.3.0", + "typescript": "^5.5.2" + } +} diff --git a/examples/themes/src/app/favicon.ico b/examples/themes/src/app/favicon.ico new file mode 100644 index 00000000..71e4bd71 Binary files /dev/null and b/examples/themes/src/app/favicon.ico differ diff --git a/examples/themes/src/app/layout.tsx b/examples/themes/src/app/layout.tsx new file mode 100644 index 00000000..ddd96de0 --- /dev/null +++ b/examples/themes/src/app/layout.tsx @@ -0,0 +1,15 @@ +import "@repo/shared/dist/index.css"; +import "@repo/shared/dist/global.css"; +import { ThemeSwitcher } from "nextjs-themes"; + +/** Layout colorScheme is forced to '' to ensure theme is resolved and not darkTheme and lightTheme.*/ +export default function RootLayout({ children }: { children: React.ReactNode }) { + return ( + + + +
{children}
+ + + ); +} diff --git a/examples/themes/src/app/page.module.css b/examples/themes/src/app/page.module.css new file mode 100644 index 00000000..b724a1f5 --- /dev/null +++ b/examples/themes/src/app/page.module.css @@ -0,0 +1,6 @@ +.container { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; +} diff --git a/examples/themes/src/app/page.tsx b/examples/themes/src/app/page.tsx new file mode 100644 index 00000000..87223e72 --- /dev/null +++ b/examples/themes/src/app/page.tsx @@ -0,0 +1,25 @@ +import styles from "./page.module.css"; +import { ThemeSelector } from "@repo/shared"; + +export default function Page() { + return ( +
+

Simple Multi Theme

+
+

+ This example demonstrates how to use nextjs-themes for simple multi-theme + switching. +

+ +

+ Ensure you set or force colorSchemePreference to an empty string{" "} + "". Other values for the color scheme will cause darkTheme and{" "} + lightTheme to be assigned as resolvedTheme. +

+

+ Another approach is to use theme instead of resolvedTheme. In CSS, + this means using the data-th attribute instead of data-theme. +

+
+ ); +} diff --git a/examples/themes/tsconfig.json b/examples/themes/tsconfig.json new file mode 100644 index 00000000..aaddcaa8 --- /dev/null +++ b/examples/themes/tsconfig.json @@ -0,0 +1,13 @@ +{ + "exclude": ["node_modules"], + "extends": "@repo/typescript-config/nextjs.json", + "compilerOptions": { + "outDir": "dist", + "plugins": [ + { + "name": "next" + } + ] + }, + "include": ["src", "next.config.js", "next-env.d.ts", ".next/types/**/*.ts"] +} diff --git a/examples/themes/turbo.json b/examples/themes/turbo.json new file mode 100644 index 00000000..bca04ff0 --- /dev/null +++ b/examples/themes/turbo.json @@ -0,0 +1,13 @@ +{ + "extends": [ + "//" + ], + "tasks": { + "build": { + "outputs": [ + ".next/**", + "!.next/cache/**" + ] + } + } +} diff --git a/lib/CHANGELOG.md b/lib/CHANGELOG.md index 7492f180..03f0d0fb 100644 --- a/lib/CHANGELOG.md +++ b/lib/CHANGELOG.md @@ -1,5 +1,11 @@ # nextjs-themes +## 4.0.4-squize.0 + +### Patch Changes + +- 04ea9ea: Attempt to Squeeze out... + ## 4.0.3 ### Patch Changes diff --git a/lib/src/client/color-switch/color-switch.tsx b/lib/src/client/color-switch/color-switch.tsx index 905de525..e54364c8 100644 --- a/lib/src/client/color-switch/color-switch.tsx +++ b/lib/src/client/color-switch/color-switch.tsx @@ -40,7 +40,7 @@ export const ColorSwitch = ({ // skipcq: JS-0417 onClick={() => toggleColorScheme(skipSystem)} // @ts-expect-error -- setting custom attribute - style={{ "--s": `${size}px` }} + style={{ "--s": size + "px" }} {...props} /> ); diff --git a/lib/src/client/switcher/switcher.tsx b/lib/src/client/switcher/switcher.tsx index bd4c9300..fd7eaa76 100644 --- a/lib/src/client/switcher/switcher.tsx +++ b/lib/src/client/switcher/switcher.tsx @@ -41,7 +41,7 @@ export const Switcher = ({ targetSelector, themeTransition, }: ThemeSwitcherProps) => { - const k = targetSelector || `#${DEFAULT_ID}`; + const k = targetSelector || "#" + DEFAULT_ID; const [state, setState] = useThemeStore(targetSelector); const [forced] = useForcedStore(targetSelector); diff --git a/lib/src/client/theme-switcher/no-fouc.ts b/lib/src/client/theme-switcher/no-fouc.ts index 89f5f971..44fc6fb1 100644 --- a/lib/src/client/theme-switcher/no-fouc.ts +++ b/lib/src/client/theme-switcher/no-fouc.ts @@ -46,8 +46,8 @@ export const noFOUCScript = ( const el = document.querySelector(key) ?? document.documentElement; let classes = []; keys.forEach((key, index) => { - classes.push(`${key}-${values[index]}`); - el.setAttribute(`data-${key}`, values[index]); + classes.push(key + "-" + values[index]); + el.setAttribute("data-" + key, values[index]); }); classes[0] = values[0]; if (styles) classes = classes.map(cls => styles[cls] ?? cls); diff --git a/lib/src/client/theme-switcher/theme-switcher.tsx b/lib/src/client/theme-switcher/theme-switcher.tsx index bcdec4dc..3282aebf 100644 --- a/lib/src/client/theme-switcher/theme-switcher.tsx +++ b/lib/src/client/theme-switcher/theme-switcher.tsx @@ -46,14 +46,14 @@ const Script = ({ forcedColorScheme, }: ThemeSwitcherProps) => { const args = [ - targetSelector || `#${DEFAULT_ID}`, + targetSelector || "#" + DEFAULT_ID, initialState, styles, forcedTheme, forcedColorScheme, ] as ScriptArgs; // handle client side exceptions when script is not run. <- for client side apps like vite or CRA - if (typeof window !== "undefined" && !window.m) noFOUCScript(...args); + typeof window !== "undefined" && noFOUCScript(...args); return (