docs(changeset): Complete redesign of the UI

.changeset/friendly-dogs-roll.md

@@ -0,0 +1,5 @@
+---
+"advanced-multi-theme": minor
+---
+
+Complete redesign of the UI

examples/advanced-multi-theme/app/ColorSchemePreference.tsx

@@ -1,14 +1,18 @@
 "use client";
 import { useTheme, ColorSchemeType } from "nextjs-themes";
+import styles from "./page.module.css";
 
 const colorSchemes: ColorSchemeType[] = ["", "system", "light", "dark"];
 
 export default function ColorSchemePreference() {
   const [colorSchemePref, setColorSchemePref] = useTheme(state => [state.colorSchemePref, state.setColorSchemePref]);
   return (
     <p>
-      Color Scheme Preference{" "}
-      <select value={colorSchemePref} onChange={e => setColorSchemePref(e.target.value as ColorSchemeType)}>
+      ColorScheme Preference{" "}
+      <select
+        value={colorSchemePref}
+        onChange={e => setColorSchemePref(e.target.value as ColorSchemeType)}
+        className={styles.active}>
         {colorSchemes.map(theme => (
           <option key={theme} value={theme}>
             {theme}

examples/advanced-multi-theme/app/DarkThemeSelector.tsx

@@ -2,19 +2,22 @@
 import { useTheme } from "nextjs-themes";
 import { darkThemes } from "./themes";
 import { useEffect } from "react";
+import styles from "./page.module.css";
 
 export default function DarkThemeSelector() {
-  const [defaultDarkTheme, setDefaultDarkTheme] = useTheme(state => [
+  const [colorSchemePref, defaultDarkTheme, setDefaultDarkTheme] = useTheme(state => [
+    state.colorSchemePref,
     state.defaultDarkTheme,
     state.setDefaultDarkTheme,
   ]);
   useEffect(() => {
     setDefaultDarkTheme(darkThemes[0]);
   }, []);
+  const className = colorSchemePref === "dark" ? styles.active : colorSchemePref === "system" ? styles.dark : "";
   return (
     <p>
       Select default dark theme{" "}
-      <select value={defaultDarkTheme} onChange={e => setDefaultDarkTheme(e.target.value)}>
+      <select value={defaultDarkTheme} onChange={e => setDefaultDarkTheme(e.target.value)} className={className}>
         {darkThemes.map(theme => (
           <option key={theme} value={theme}>
             {theme}

examples/advanced-multi-theme/app/LightThemeSelector.tsx

@@ -2,19 +2,22 @@
 import { useTheme } from "nextjs-themes";
 import { lightThemes } from "./themes";
 import { useEffect } from "react";
+import styles from "./page.module.css";
 
 export default function LightThemeSelector() {
-  const [defaultLightTheme, setDefaultLightTheme] = useTheme(state => [
+  const [colorSchemePref, defaultLightTheme, setDefaultLightTheme] = useTheme(state => [
+    state.colorSchemePref,
     state.defaultLightTheme,
     state.setDefaultLightTheme,
   ]);
   useEffect(() => {
     setDefaultLightTheme(lightThemes[0]);
   }, []);
+  const className = colorSchemePref === "light" ? styles.active : colorSchemePref === "system" ? styles.light : "";
   return (
     <p>
       Select default light theme{" "}
-      <select value={defaultLightTheme} onChange={e => setDefaultLightTheme(e.target.value)}>
+      <select value={defaultLightTheme} onChange={e => setDefaultLightTheme(e.target.value)} className={className}>
         {lightThemes.map(theme => (
           <option key={theme} value={theme}>
             {theme}

examples/advanced-multi-theme/app/ThemeSelector.tsx

@@ -1,13 +1,14 @@
 "use client";
 import { useTheme } from "nextjs-themes";
 import { darkThemes, lightThemes } from "./themes";
+import styles from "./page.module.css";
 
 export default function ThemeSelector() {
-  const [theme, setTheme] = useTheme(state => [state.theme, state.setTheme]);
+  const [colorSchemePref, theme, setTheme] = useTheme(state => [state.colorSchemePref, state.theme, state.setTheme]);
   return (
     <p>
       Select Theme{" "}
-      <select value={theme} onChange={e => setTheme(e.target.value)}>
+      <select value={theme} onChange={e => setTheme(e.target.value)} className={colorSchemePref ? "" : styles.active}>
         {["auto", ...lightThemes, ...darkThemes].map(theme => (
           <option key={theme} value={theme}>
             {theme}

examples/advanced-multi-theme/app/_components/forkMe.module.css

@@ -0,0 +1,21 @@
+.ribbon {
+  --w: 15em;
+  --h: 35px;
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  width: var(--w);
+  height: var(--h);
+  transform: rotate(45deg);
+  top: calc(0.354 * var(--w) - var(--h));
+  right: calc(-0.14 * var(--w) - 0.5 * var(--h));
+  color: var(--bg-color);
+  background-color: var(--text-color);
+  text-shadow:
+    0px 1px 0px rgba(255, 255, 255, 0.3),
+    0px -1px 0px rgba(0, 0, 0, 0.7);
+  border: 1px dashed gray;
+  outline: 4px solid var(--text-color);
+}

examples/advanced-multi-theme/app/_components/forkMe.tsx

@@ -0,0 +1,13 @@
+import styles from "./forkMe.module.css";
+
+export default function ForkMe() {
+  return (
+    <a
+      href="https://github.com/mayank1513/nextjs-themes"
+      target="_blank"
+      rel="noopener noreferrer"
+      className={styles.ribbon}>
+      Fork Me on GitHub
+    </a>
+  );
+}

examples/advanced-multi-theme/app/globals.css

@@ -0,0 +1,110 @@
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --max-width: 1100px;
+  --border-radius: 12px;
+  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono",
+    "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+  --bg-color: #fff;
+  --text-color: #000;
+
+  --primary-glow: conic-gradient(
+    from 180deg at 50% 50%,
+    #16abff33 0deg,
+    #0885ff33 55deg,
+    #54d6ff33 120deg,
+    #0071ff33 160deg,
+    transparent 360deg
+  );
+  --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+
+  --callout-rgb: 238, 240, 241;
+  --callout-border-rgb: 172, 175, 176;
+  --card-rgb: 180, 185, 188;
+  --card-border-rgb: 131, 134, 135;
+  --tile-border: conic-gradient(#00000080, #00000040, #00000030, #00000020, #00000010, #00000010, #00000080);
+}
+
+/* dark themes */
+[data-theme="dark"],
+[data-theme="black"] {
+  --bg-color: #000;
+  --text-color: #fff;
+}
+
+[data-theme="gray"] {
+  --bg-color: gray;
+  --text-color: #fff;
+}
+
+[data-theme="dark-blue"] {
+  --bg-color: #006;
+  --text-color: #ff0;
+}
+
+[data-theme="dark"],
+[data-theme="black"],
+[data-theme="gray"],
+[data-theme="dark-blue"] {
+  --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+  --secondary-glow: linear-gradient(to bottom right, rgba(1, 65, 255, 0), rgba(1, 65, 255, 0), rgba(1, 65, 255, 0.3));
+
+  --callout-rgb: 20, 20, 20;
+  --callout-border-rgb: 108, 108, 108;
+  --card-rgb: 100, 100, 100;
+  --card-border-rgb: 200, 200, 200;
+  --tile-border: conic-gradient(#ffffff80, #ffffff40, #ffffff30, #ffffff20, #ffffff10, #ffffff10, #ffffff80);
+}
+
+/* light themes */
+
+[data-theme="white"] {
+  --bg-color: #fff;
+  --text-color: #000;
+}
+
+[data-theme="yellow"] {
+  --bg-color: #ff0;
+  --text-color: #00f;
+}
+
+[data-theme="orange"] {
+  --bg-color: #ffa500;
+  --text-color: #05f;
+}
+
+html {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  background: var(--bg-color);
+  color: var(--text-color);
+}
+
+.container {
+  max-width: var(--max-width);
+  min-height: calc(100vh - 100px);
+  margin: auto;
+}
+
+.container header {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+}
+
+footer {
+  text-align: center;
+  padding: 10px;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

examples/advanced-multi-theme/app/layout.tsx

@@ -1,28 +1,21 @@
-import Link from "next/link";
-import "./global.css";
+import "./globals.css";
 import { ThemeSwitcher } from "nextjs-themes";
 import { SSCWrapper } from "nextjs-themes/dist/server/nextjs";
-import PageNavigator from "./pageNavigator";
+import ForkMe from "./_components/forkMe";
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <SSCWrapper tag="html" lang="en">
       <body>
         <ThemeSwitcher />
-        <div className="container">
-          <header>
-            <Link href="/">
-              <h1>🏡</h1>
-            </Link>{" "}
-            <h1>Advanced Multi Theme Example</h1>
-          </header>
-          <p>
-            Example showing how to use <code>nextjs-themes</code> to implement multi theme switching
-          </p>
-          <PageNavigator />
-          <hr />
-          {children}
-        </div>
+        <div className="container">{children}</div>
+        <footer>
+          with 💖 by{" "}
+          <a href="https://mayank-chaudhari.vercel.app" target="_blank" rel="noopener noreferrer">
+            Mayank Chaudhari
+          </a>
+        </footer>
+        <ForkMe />
       </body>
     </SSCWrapper>
   );