Complete Examples

Author: mayank1513

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

@@ -93,8 +93,8 @@ function applyClasses({ targets, theme, resolvedColorScheme, styles }: ApplyClas
   targets.forEach(t => {
     t?.classList.remove(cls[0]); // dark
     t?.classList.remove(cls[1]); // light
-    t?.classList.forEach(cls => {
-      if (cls.match(/(^|_)th-/)) t.classList.remove(cls);
+    t?.classList.forEach(c => {
+      if (/(?:^|_)th-/.exec(c)) t.classList.remove(c);
     });
     t?.classList.add(`th-${cls[2]}`); // theme
     t?.classList.add(cls[3]); // resolvedColorScheme
@@ -149,6 +149,6 @@ export function ThemeSwitcher({ targetId, dontSync, themeTransition, styles }: T
       localStorage.setItem(key, stateToSave);
     }
     restoreTransitions();
-  }, [dontSync, targetId, themeState, themeTransition]);
+  }, [dontSync, styles, targetId, themeState, themeTransition]);
   return null;
 }

packages/shared-ui/src/globals.css

@@ -44,15 +44,6 @@
   --tile-border: conic-gradient(#00000080, #00000040, #00000030, #00000020, #00000010, #00000010, #00000080);
 }
 
-/* dark themes */
-.th-.dark,
-.th-.dark *,
-.th-.dark ~ *,
-.th-.dark ~ * * {
-  --bg-color: var(--bg-dark);
-  --text-color: var(--color-dark);
-}
-
 .dark,
 .dark ~ * {
   --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
@@ -65,36 +56,66 @@
   --tile-border: conic-gradient(#ffffff80, #ffffff40, #ffffff30, #ffffff20, #ffffff10, #ffffff10, #ffffff80);
 }
 
-/* light themes */
+/* dark themes */
+.th-.dark,
+.th-.dark *,
+.th-.dark ~ *,
+.th-.dark ~ * *,
+/* for increased specificity of localized themes */
+.nth-scoped.th-.dark,
+.nth-scoped.th-.dark *,
+.nth-scoped.th-.dark ~ *,
+.nth-scoped.th-.dark ~ * * {
+  --bg-color: var(--bg-dark);
+  --text-color: var(--color-dark);
+}
 
+/* light themes */
 .th-.light,
 .th-.light *,
 .th-.light ~ *,
-.th-.light ~ * * {
+.th-.light ~ * *,
+/* for increased specificity of localized themes */
+.nth-scoped.th-.light,
+.nth-scoped.th-.light *,
+.nth-scoped.th-.light ~ *,
+.nth-scoped.th-.light ~ * * {
   --bg-color: var(--bg-light);
   --text-color: var(--color-light);
 }
 
 .th-theme1.light ~ *,
-.th-theme1.light ~ * * {
+.th-theme1.light ~ * *,
+/* for increased specificity of localized themes */
+.nth-scoped.th-theme1.light ~ *,
+.nth-scoped.th-theme1.light ~ * * {
   --bg-color: var(--th1-bg-light);
   --text-color: var(--th1-color-light);
 }
 
 .th-theme1.dark ~ *,
-.th-theme1.dark ~ * * {
+.th-theme1.dark ~ * * ,
+/* for increased specificity of localized themes */
+.nth-scoped.th-theme1.dark ~ *,
+.nth-scoped.th-theme1.dark ~ * * {
   --bg-color: var(--th1-bg-dark);
   --text-color: var(--th1-color-dark);
 }
 
 .th-theme2.light ~ *,
-.th-theme2.light ~ * * {
+.th-theme2.light ~ * *,
+/* for increased specificity of localized themes */
+.nth-scoped.th-theme2.light ~ *,
+.nth-scoped.th-theme2.light ~ * * {
   --bg-color: var(--th2-bg-light);
   --text-color: var(--th2-color-light);
 }
 
 .th-theme2.dark ~ *,
-.th-theme2.dark ~ * * {
+.th-theme2.dark ~ * *,
+/* for increased specificity of localized themes */
+.nth-scoped.th-theme2.dark ~ *,
+.nth-scoped.th-theme2.dark ~ * * {
   --bg-color: var(--th2-bg-dark);
   --text-color: var(--th2-color-dark);
 }

packages/shared-ui/src/lib-examples/index.tsx

@@ -2,13 +2,18 @@ import { Logo } from "../common/logo";
 import SimpleColorSwitch from "./simple-color-switch";
 import ThemeSwitching from "./theme-switching";
 import styles from "./lib-examples.module.css";
+import ThemesList from "./themes-list";
 
 export default function LibExamples() {
   return (
     <div className={styles["lib-example-container"]}>
       <h1>
         <Logo /> examples.
       </h1>
+      <div className={styles.globalThemes}>
+        <h2>Global Themes</h2>
+        <ThemesList />
+      </div>
       <SimpleColorSwitch />
       <ThemeSwitching />
     </div>

packages/shared-ui/src/lib-examples/lib-examples.module.css

@@ -6,7 +6,8 @@
   justify-content: space-evenly;
 }
 
-.lib-example-container h1 {
+.lib-example-container h1,
+.globalThemes {
   text-align: center;
   width: 100%;
 }

packages/shared-ui/src/lib-examples/simple-color-switch/index.tsx renamed to packages/shared-ui/src/lib-examples/simple-color-switch.tsx

@@ -1,6 +1,6 @@
 import { ColorSwitch, ThemeSwitcher } from "nthul";
 import { ServerTarget } from "nthul/server";
-import styles from "../lib-examples.module.css";
+import styles from "./lib-examples.module.css";
 
 const targetId = "simple-color-switch";
 export default function SimpleColorSwitch() {

packages/shared-ui/src/lib-examples/theme-switching/theme-button.tsx renamed to packages/shared-ui/src/lib-examples/theme-button.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { useTheme } from "nthul/src/hooks";
-import styles from "../lib-examples.module.css";
+import styles from "./lib-examples.module.css";
 
-export default function ThemeButton({ th, targetId }: { th: string; targetId: string }) {
+export default function ThemeButton({ th, targetId }: { th: string; targetId?: string }) {
   const { setTheme } = useTheme(targetId);
   return (
     <li>

packages/shared-ui/src/lib-examples/theme-switching/index.tsx renamed to packages/shared-ui/src/lib-examples/theme-switching.tsx

@@ -1,10 +1,9 @@
 import { ColorSwitch, ThemeSwitcher } from "nthul";
 import { ServerTarget } from "nthul/server";
-import styles from "../lib-examples.module.css";
-import ThemeButton from "./theme-button";
+import styles from "./lib-examples.module.css";
+import ThemesList from "./themes-list";
 
-export const targetId = "theme-switching";
-const themes = ["", "theme1", "theme2"];
+const targetId = "theme-switching";
 
 export default function SimpleColorSwitch() {
   return (
@@ -16,11 +15,7 @@ export default function SimpleColorSwitch() {
       </header>
       <main>
         Simple scoped multi-theme.
-        <ul className={styles.themes}>
-          {themes.map(th => (
-            <ThemeButton key={th} {...{ targetId, th }} />
-          ))}
-        </ul>
+        <ThemesList targetId={targetId} />
       </main>
     </div>
   );

packages/shared-ui/src/lib-examples/themes-list.tsx

@@ -0,0 +1,14 @@
+import ThemeButton from "./theme-button";
+import styles from "./lib-examples.module.css";
+
+const themes = ["", "theme1", "theme2"];
+
+export default function ThemesList({ targetId }: { targetId?: string }) {
+  return (
+    <ul className={styles.themes}>
+      {themes.map(th => (
+        <ThemeButton key={th} {...{ targetId, th }} />
+      ))}
+    </ul>
+  );
+}