Merge pull request #36 from react18-tools/fix-target-selector

Fix target selector

examples/app-router/src/app/layout.tsx

@@ -7,6 +7,7 @@ import Link from "next/link";
 import { Cards, LandingPage } from "@repo/shared/dist/server";
 import { PageNavigatorCard, ThemeController } from "@repo/shared";
 import { ColorSwitch } from "nextjs-themes/color-switch";
+import { ScopedThemes } from "@repo/shared/dist/client/scoped-themes";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -22,6 +23,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }):
           <LandingPage title="Next.js Example">
             <ColorSwitch className="center" />
             <ThemeController />
+            <ScopedThemes />
             <Cards>
               <PageNavigatorCard LinkElement={Link} />{" "}
             </Cards>

examples/pages-router/src/pages/_app.tsx

@@ -9,6 +9,7 @@ import Link from "next/link";
 import { Card, Cards, LandingPage } from "@repo/shared/dist/server";
 import { ThemeController, PageNavigatorCard } from "@repo/shared";
 import { ColorSwitch } from "nextjs-themes/color-switch";
+import { ScopedThemes } from "@repo/shared/dist/client/scoped-themes";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -38,6 +39,7 @@ export default function App({ Component, pageProps }: _AppProps) {
         <LandingPage title="Next.js Example">
           <ColorSwitch className="center" />
           <ThemeController />
+          <ScopedThemes />
           <Cards>
             <PageNavigatorCard LinkElement={Link} />
             {staticCards.map(card => (

lib/CHANGELOG.md

@@ -1,5 +1,11 @@
 # nextjs-themes
 
+## 4.0.1
+
+### Patch Changes
+
+- a2fd744: Update forced components to use targetSelector
+
 ## 4.0.0
 
 ### Major Changes

lib/package.json

@@ -2,7 +2,7 @@
   "name": "nextjs-themes",
   "author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
   "private": false,
-  "version": "4.0.0",
+  "version": "4.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.",
   "license": "MPL-2.0",
   "main": "./dist/index.js",

lib/src/client/force-color-scheme/force-color-scheme.tsx

@@ -4,8 +4,11 @@ import { useForcedStore } from "../../store";
 import { ColorSchemeType } from "../../types";
 
 /** Force color scheme on a page */
-export const ForceColorScheme = (props: { colorScheme: ColorSchemeType }) => {
-  const [_, setState] = useForcedStore();
+export const ForceColorScheme = (props: {
+  colorScheme: ColorSchemeType;
+  targetSelector?: string;
+}) => {
+  const [_, setState] = useForcedStore(props.targetSelector);
   useEffect(() => {
     setState(state => ({ ...state, fc: props.colorScheme }));
     return () => {

lib/src/client/force-theme/force-theme.tsx

@@ -3,8 +3,8 @@ import { useEffect } from "react";
 import { useForcedStore } from "../../store";
 
 /** Force theme on a page */
-export const ForceTheme = (props: { theme: string }) => {
-  const [_, setState] = useForcedStore();
+export const ForceTheme = (props: { theme: string; targetSelector?: string }) => {
+  const [_, setState] = useForcedStore(props.targetSelector);
   useEffect(() => {
     setState(state => ({ ...state, f: props.theme }));
     return () => {

lib/src/client/theme-switcher/no-fouc.ts

@@ -2,7 +2,7 @@ import type { ThemeStoreType } from "../../store";
 import type { ColorSchemeType, ResolvedColorSchemeType } from "../../types";
 
 type ValuesType = [ResolvedColorSchemeType, ColorSchemeType, string, string];
-export type UpdateDOMFunc = (values: ValuesType) => void;
+export type UpdateDOMFunc = (values: ValuesType, targetSelector: string) => void;
 
 export type ResolveFunc = (store: ThemeStoreType) => ValuesType;
 
@@ -34,7 +34,7 @@ export const noFOUCScript = (
 ) => {
   window.m = matchMedia("(prefers-color-scheme: dark)");
   const keys = ["color-scheme", "csp", "theme", "th"];
-  window.u = values => {
+  window.u = (values, key) => {
     const el = document.querySelector(key) ?? document.documentElement;
     let classes = [];
     keys.forEach((key, index) => {
@@ -80,5 +80,5 @@ export const noFOUCScript = (
       forcedTheme ?? store.t,
     ] as ValuesType;
   };
-  u(r(store));
+  u(r(store), key);
 };

lib/src/client/theme-switcher/theme-switcher.tsx

@@ -106,19 +106,19 @@ const Switcher = ({
 
   useEffect(() => {
     const restoreThansitions = modifyTransition(themeTransition);
-    updateDOM(resolveTheme(state));
+    updateDOM(resolveTheme(state), k);
     restoreThansitions();
     localStorage.setItem(k, JSON.stringify(state));
   }, [state]);
 
   useEffect(() => {
     updateForcedProps(forcedTheme, forcedColorScheme);
-    updateDOM(resolveTheme(state));
+    updateDOM(resolveTheme(state), k);
   }, [forcedColorScheme, forcedTheme]);
 
   useEffect(() => {
     updateForcedState(forced.f, forced.fc);
-    updateDOM(resolveTheme(state));
+    updateDOM(resolveTheme(state), k);
   }, [forced]);
   return null;
 };

packages/shared/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @repo/shared
 
+## 0.0.7
+
+### Patch Changes
+
+- Updated dependencies [a2fd744]
+  - [email protected]
+
 ## 0.0.6
 
 ### Patch Changes

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repo/shared",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "private": true,
   "sideEffects": false,
   "main": "./dist/index.js",

packages/shared/src/client/index.ts

@@ -7,7 +7,7 @@
  */
 
 // client component exports
-export * from "./demo";
+export * from "./scoped-themes";
 export * from "./header";
 export * from "./global-loader";
 export * from "./drawer-button";

packages/shared/src/client/demo/index.ts → packages/shared/src/client/scoped-themes/index.ts

@@ -1,4 +1,4 @@
 "use client";
 
 // component exports
-export * from "./demo";
+export * from "./scoped-themes";

packages/shared/src/client/scoped-themes/scoped-themes.tsx

@@ -0,0 +1,20 @@
+"use client";
+import { ColorSwitch, ThemeSwitcher } from "nextjs-themes";
+import { ThemeController } from "../theme-controller";
+
+export function ScopedThemes() {
+  const id = "scoped-themes";
+  const targetSelector = `#${id}`;
+  return (
+    <div
+      id={id}
+      style={{ background: "var(--bg-color)", color: "var(--text-color)", textAlign: "center" }}>
+      <h1>
+        Apply themes locally using <code>targetSelector</code>
+      </h1>
+      <ColorSwitch targetSelector={targetSelector} />
+      <ThemeSwitcher targetSelector={targetSelector} themeTransition="all .5s" />
+      <ThemeController targetSelector={targetSelector} />
+    </div>
+  );
+}

packages/shared/src/client/theme-controller/color-scheme-preference.tsx

@@ -7,8 +7,8 @@ import styles from "./theme-controller.module.scss";
 
 const colorSchemes: ColorSchemeType[] = ["", "system", "light", "dark"];
 
-export function ColorSchemePreference() {
-  const { colorSchemePref, setColorSchemePref } = useTheme();
+export function ColorSchemePreference({ targetSelector }: { targetSelector?: string }) {
+  const { colorSchemePref, setColorSchemePref } = useTheme(targetSelector);
   const handleChange: (e: ChangeEvent<HTMLSelectElement>) => void = e =>
     setColorSchemePref(e.target.value as ColorSchemeType);
 

packages/shared/src/client/theme-controller/theme-controller.tsx

@@ -2,16 +2,21 @@ import styles from "./theme-controller.module.scss";
 import { ColorSchemePreference } from "./color-scheme-preference";
 import { ThemeSelector } from "./theme-selector";
 
-export function ThemeController() {
+export interface ThemeControllerProps {
+  targetSelector?: string;
+}
+
+/** ThemeController */
+export function ThemeController({ targetSelector }: ThemeControllerProps) {
   return (
     <div className={[styles.center, styles.prefs].join(" ")}>
       <div>
-        <ColorSchemePreference />
-        <ThemeSelector scope="" />
+        <ColorSchemePreference targetSelector={targetSelector} />
+        <ThemeSelector scope="" targetSelector={targetSelector} />
       </div>
       <div>
-        <ThemeSelector scope="dark" />
-        <ThemeSelector scope="light" />
+        <ThemeSelector scope="dark" targetSelector={targetSelector} />
+        <ThemeSelector scope="light" targetSelector={targetSelector} />
       </div>
     </div>
   );

packages/shared/src/client/theme-controller/theme-selector.tsx

@@ -6,13 +6,14 @@ import type { ChangeEvent } from "react";
 import { Select } from "../select";
 import styles from "./theme-controller.module.scss";
 import { darkThemes, lightThemes } from "./themes";
+import { ThemeControllerProps } from "./theme-controller";
 
-interface ThemeSelectorProps {
+interface ThemeSelectorProps extends ThemeControllerProps {
   scope: "" | "dark" | "light";
 }
 
-export function ThemeSelector({ scope }: ThemeSelectorProps) {
-  const { colorSchemePref, theme, setTheme } = useThemeStates(scope);
+export function ThemeSelector({ scope, targetSelector }: ThemeSelectorProps) {
+  const { colorSchemePref, theme, setTheme } = useThemeStates(scope, targetSelector);
   const themes = useMemo(() => {
     switch (scope) {
       case "":
@@ -49,9 +50,9 @@ function getClassName(scope: ThemeSelectorProps["scope"], colorSchemePref: Color
   return colorSchemePref === "system" ? styles[scope] : "";
 }
 
-function useThemeStates(scope: ThemeSelectorProps["scope"]) {
+function useThemeStates(scope: ThemeSelectorProps["scope"], targetSelector?: string) {
   const { colorSchemePref, theme, darkTheme, lightTheme, setTheme, setDarkTheme, setLightTheme } =
-    useTheme();
+    useTheme(targetSelector);
   switch (scope) {
     case "":
       return { colorSchemePref, theme, setTheme };

packages/shared/src/global.scss

@@ -21,7 +21,7 @@
 
 /* dark themes */
 .dark,
-.dark ~ * {
+.scoped.dark {
   --bg-color: #000;
   --text-color: #9ca3af;
   --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
@@ -41,7 +41,7 @@
 /* light themes */
 
 .light,
-.light ~ * {
+.scoped.light {
   --bg-color: #fff;
   --text-color: #534c40;
   --primary-glow: conic-gradient(
@@ -56,29 +56,29 @@
 
 /* dark themes */
 [data-theme="dark"],
-[data-theme="dark"] ~ * {
+[data-theme="dark"].scoped {
   --bg-color: #000;
   --text-color: #fff;
 }
 
 [data-theme="gray"],
-[data-theme="gray"] ~ * {
+[data-theme="gray"].scoped {
   --bg-color: gray;
   --text-color: #fff;
 }
 
 [data-theme="dark-blue"],
-[data-theme="dark-blue"] ~ * {
+[data-theme="dark-blue"].scoped {
   --bg-color: #006;
   --text-color: #ff0;
 }
 
 [data-theme="dark"],
-[data-theme="dark"] ~ *,
+[data-theme="dark"].scoped,
 [data-theme="gray"],
-[data-theme="gray"] ~ *,
+[data-theme="gray"].scoped,
 [data-theme="dark-blue"],
-[data-theme="dark-blue"] ~ * {
+[data-theme="dark-blue"].scoped {
   --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
   --secondary-glow: linear-gradient(
     to bottom right,
@@ -105,19 +105,19 @@
 /* light themes */
 
 [data-theme="white"],
-[data-theme="white"] ~ * {
+[data-theme="white"].scoped {
   --bg-color: #fff;
   --text-color: #000;
 }
 
 [data-theme="yellow"],
-[data-theme="yellow"] ~ * {
+[data-theme="yellow"].scoped {
   --bg-color: #ff0;
   --text-color: #00f;
 }
 
 [data-theme="orange"],
-[data-theme="orange"] ~ * {
+[data-theme="orange"].scoped {
   --bg-color: #ffa500;
   --text-color: #05f;
 }