Add simple theme example [skip ci]

react18-tools · Jun 28, 2024 · 2cffa8f · 2cffa8f
1 parent f6b139d
commit 2cffa8f
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/examples/themes/src/app/layout.tsx b/examples/themes/src/app/layout.tsx
@@ -1,11 +1,13 @@
 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 (
     <html lang="en">
       <body>
-        <ThemeSwitcher />
+        <ThemeSwitcher forcedColorScheme="" />
         <main>{children}</main>
       </body>
     </html>

diff --git a/examples/themes/src/app/page.tsx b/examples/themes/src/app/page.tsx
@@ -1,13 +1,24 @@
 import styles from "./page.module.css";
+import { ThemeSelector } from "@repo/shared";
 
 export default function Page() {
   return (
     <div className={styles.container}>
       <h1>Simple Multi Theme</h1>
       <hr />
       <p>
-        Example showing how to use <code>nextjs-themes</code> to implement simple multi theme
-        switching
+        This example demonstrates how to use <code>nextjs-themes</code> for simple multi-theme
+        switching.
+      </p>
+      <ThemeSelector scope="" />
+      <p>
+        Ensure you set or force <code>colorSchemePreference</code> to an empty string{" "}
+        <code>""</code>. Other values for the color scheme will cause <code>darkTheme</code> and{" "}
+        <code>lightTheme</code> to be assigned as <code>resolvedTheme</code>.
+      </p>
+      <p>
+        Another approach is to use <code>theme</code> instead of <code>resolvedTheme</code>. In CSS,
+        this means using the <code>data-th</code> attribute instead of <code>data-theme</code>.
       </p>
     </div>
   );

diff --git a/packages/shared/src/client/theme-controller/index.ts b/packages/shared/src/client/theme-controller/index.ts
@@ -1,2 +1,3 @@
 export * from "./theme-controller";
 export * from "./themes";
+export * from "./theme-selector";
diff --git a/packages/shared/src/global.scss b/packages/shared/src/global.scss
@@ -125,13 +125,20 @@ body,
   display: flex;
   flex-direction: column;
   background: var(--bg-color);
+  color: var(--text-color);
 }
 
 a {
   color: inherit;
   text-decoration: none;
 }
 
+code {
+  padding: 1px 5px;
+  box-shadow: 0 0 2px currentColor inset;
+  border-radius: 20px;
+}
+
 // utils
 .grow {
   flex-grow: 1;