From 7366a50b771c91c5f13ab42a688c768ac865249f Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 26 Aug 2023 13:31:20 +0530 Subject: [PATCH 1/2] docs(changeset): Complete redesign of the UI --- .changeset/friendly-dogs-roll.md | 5 + .../app/ColorSchemePreference.tsx | 8 +- .../app/DarkThemeSelector.tsx | 7 +- .../app/LightThemeSelector.tsx | 7 +- .../app/ThemeSelector.tsx | 5 +- .../app/_components/forkMe.module.css | 21 ++ .../app/_components/forkMe.tsx | 13 + examples/advanced-multi-theme/app/favicon.ico | Bin 0 -> 1150 bytes examples/advanced-multi-theme/app/global.css | 68 ----- examples/advanced-multi-theme/app/globals.css | 110 +++++++ examples/advanced-multi-theme/app/layout.tsx | 27 +- .../advanced-multi-theme/app/page.module.css | 276 ++++++++++++++++++ examples/advanced-multi-theme/app/page.tsx | 71 ++++- .../app/pageNavigator.tsx | 21 +- 14 files changed, 531 insertions(+), 108 deletions(-) create mode 100644 .changeset/friendly-dogs-roll.md create mode 100644 examples/advanced-multi-theme/app/_components/forkMe.module.css create mode 100644 examples/advanced-multi-theme/app/_components/forkMe.tsx create mode 100644 examples/advanced-multi-theme/app/favicon.ico delete mode 100644 examples/advanced-multi-theme/app/global.css create mode 100644 examples/advanced-multi-theme/app/globals.css create mode 100644 examples/advanced-multi-theme/app/page.module.css diff --git a/.changeset/friendly-dogs-roll.md b/.changeset/friendly-dogs-roll.md new file mode 100644 index 00000000..083bc5fb --- /dev/null +++ b/.changeset/friendly-dogs-roll.md @@ -0,0 +1,5 @@ +--- +"advanced-multi-theme": minor +--- + +Complete redesign of the UI diff --git a/examples/advanced-multi-theme/app/ColorSchemePreference.tsx b/examples/advanced-multi-theme/app/ColorSchemePreference.tsx index b5178f39..06f8eaaf 100644 --- a/examples/advanced-multi-theme/app/ColorSchemePreference.tsx +++ b/examples/advanced-multi-theme/app/ColorSchemePreference.tsx @@ -1,5 +1,6 @@ "use client"; import { useTheme, ColorSchemeType } from "nextjs-themes"; +import styles from "./page.module.css"; const colorSchemes: ColorSchemeType[] = ["", "system", "light", "dark"]; @@ -7,8 +8,11 @@ export default function ColorSchemePreference() { const [colorSchemePref, setColorSchemePref] = useTheme(state => [state.colorSchemePref, state.setColorSchemePref]); return (

- Color Scheme Preference{" "} - setColorSchemePref(e.target.value as ColorSchemeType)} + className={styles.active}> {colorSchemes.map(theme => (

Select default dark theme{" "} - setDefaultDarkTheme(e.target.value)} className={className}> {darkThemes.map(theme => (

Select default light theme{" "} - setDefaultLightTheme(e.target.value)} className={className}> {lightThemes.map(theme => (

Select Theme{" "} - setTheme(e.target.value)} className={colorSchemePref ? "" : styles.active}> {["auto", ...lightThemes, ...darkThemes].map(theme => (

-
- -

🏡

- {" "} -

Advanced Multi Theme Example

-
-

- Example showing how to use nextjs-themes to implement multi theme switching -

- -
- {children} -
+
{children}
+ + ); diff --git a/examples/advanced-multi-theme/app/page.module.css b/examples/advanced-multi-theme/app/page.module.css new file mode 100644 index 00000000..77863dfb --- /dev/null +++ b/examples/advanced-multi-theme/app/page.module.css @@ -0,0 +1,276 @@ +.main { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + padding: 3rem 0; + min-height: calc(100vh - 55px); +} + +.description { + display: inherit; + justify-content: inherit; + align-items: inherit; + font-size: 0.85rem; + max-width: var(--max-width); + width: 100%; + z-index: 2; + font-family: var(--font-mono); +} + +.description a { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.description p { + position: relative; + margin: 0; + padding: 1rem; + background-color: rgba(var(--callout-rgb), 0.5); + border: 1px solid rgba(var(--callout-border-rgb), 0.3); + border-radius: var(--border-radius); +} + +.code { + font-weight: 700; + font-family: var(--font-mono); +} + +.cards { + display: flex; + justify-content: space-evenly; + width: var(--max-width); +} + +.card { + padding: 1rem 1.2rem; + border-radius: var(--border-radius); + background: rgba(var(--card-rgb), 0); + border: 1px solid rgba(var(--card-border-rgb), 0.1); + transition: + background 200ms, + border 200ms; +} + +.card span { + display: inline-block; + transition: transform 200ms; +} + +.card h2 { + font-weight: 600; + margin-bottom: 0.7rem; +} + +.card p { + margin: 0; + opacity: 0.6; + font-size: 0.9rem; + line-height: 1.5; + width: 34ch; +} + +.center { + display: flex; + justify-content: center; + align-items: center; + position: relative; + padding-bottom: 2rem; + gap: 50px; +} + +.prefs { + padding-bottom: 4rem; +} + +.prefs select { + width: 85px; + float: right; + margin-left: 20px; + opacity: 0.3; +} + +select.active, +select.light { + opacity: 1; +} + +.center > div { + position: relative; +} + +.center::before { + background: var(--secondary-glow); + border-radius: 50%; + width: 480px; + height: 360px; + margin-left: -400px; + pointer-events: none; +} + +.center::after { + background: var(--primary-glow); + width: 240px; + height: 180px; + z-index: -1; +} + +.center::before, +.center::after { + content: ""; + left: 50%; + position: absolute; + filter: blur(45px); + transform: translateZ(0); +} + +.logo { + position: relative; + display: flex; + justify-content: center; + align-items: center; + margin-left: 16px; + transform: translateZ(0); + border-radius: var(--border-radius); + overflow: hidden; + box-shadow: 0px 2px 8px -1px #0000001a; + padding: 2px; +} +.logo p { + background: var(--bg-color); +} +.logo::before, +.logo::after { + content: " "; + position: absolute; + z-index: -1; +} + +/* Conic Gradient Animation */ +.logo::before { + animation: 3s rotate infinite linear; + width: 800%; + height: 800%; + background: var(--tile-border); +} + +/* Inner Square */ +.logo::after { + inset: 0; + padding: 1px; + border-radius: var(--border-radius); + background: linear-gradient(to bottom right, rgba(var(--tile-start-rgb), 1), rgba(var(--tile-end-rgb), 1)); + background-clip: content-box; +} + +/* Enable hover only on non-touch devices */ +@media (hover: hover) and (pointer: fine) { + .card:hover { + background: rgba(var(--card-rgb), 0.1); + border: 1px solid rgba(var(--card-border-rgb), 0.15); + } + + .card:hover span { + transform: translateX(4px); + } +} + +/* @media (prefers-reduced-motion) { + .logo::before { + animation: none; + } + + .card:hover span { + transform: none; + } +} */ + +/* Mobile and Tablet */ +@media (max-width: 1023px) { + .content { + padding: 4rem; + } + + .grid { + grid-template-columns: 1fr; + margin-bottom: 120px; + max-width: 320px; + text-align: center; + } + + .card { + padding: 1rem 2.5rem; + } + + .card h2 { + margin-bottom: 0.5rem; + } + + .center { + padding: 8rem 0 6rem; + } + + .center::before { + transform: none; + height: 300px; + } + + .description { + font-size: 0.8rem; + } + + .description a { + padding: 1rem; + } + + .description p, + .description div { + display: flex; + justify-content: center; + position: fixed; + width: 100%; + } + + .description p { + align-items: center; + inset: 0 0 auto; + padding: 2rem 1rem 1.4rem; + border-radius: 0; + border: none; + border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); + background: linear-gradient(to bottom, rgba(var(--background-start-rgb), 1), rgba(var(--callout-rgb), 0.5)); + background-clip: padding-box; + backdrop-filter: blur(24px); + } + + .description div { + align-items: flex-end; + pointer-events: none; + inset: auto 0 0; + padding: 2rem; + height: 200px; + background: linear-gradient(to bottom, transparent 0%, rgb(var(--background-end-rgb)) 40%); + z-index: 1; + } +} + +@media (prefers-color-scheme: dark) { + select.dark { + opacity: 1; + } + select.light { + opacity: 0.3; + } +} + +@keyframes rotate { + from { + transform: rotate(360deg); + } + to { + transform: rotate(0deg); + } +} diff --git a/examples/advanced-multi-theme/app/page.tsx b/examples/advanced-multi-theme/app/page.tsx index 060ad2c2..b2e5ce73 100644 --- a/examples/advanced-multi-theme/app/page.tsx +++ b/examples/advanced-multi-theme/app/page.tsx @@ -1,15 +1,68 @@ -import DarkThemeSelector from "./DarkThemeSelector"; +import { Inter } from "next/font/google"; +import styles from "./page.module.css"; import ColorSchemePreference from "./ColorSchemePreference"; -import LightThemeSelector from "./LightThemeSelector"; +import DarkThemeSelector from "./DarkThemeSelector"; import ThemeSelector from "./ThemeSelector"; +import LightThemeSelector from "./LightThemeSelector"; +import PageNavigator from "./pageNavigator"; +import Image from "next/image"; + +const inter = Inter({ subsets: ["latin"] }); -export default function Page() { +export default function Home() { return ( -
- - - - -
+
+
+ +

+ nextjs-themes +

+ +
+ + By Mayank + +
+
+ +
+
+

+ Theme with nextjs-themes +

+

Unleash the power of React Server Components!

+
+
+ +
+
+ + +
+
+ + +
+
+ +
+ + + +

+ More Examples -> +

+

Explore more examples on official GitHub Repo.

+ +
+
); } diff --git a/examples/advanced-multi-theme/app/pageNavigator.tsx b/examples/advanced-multi-theme/app/pageNavigator.tsx index fdbe2107..a92813ac 100644 --- a/examples/advanced-multi-theme/app/pageNavigator.tsx +++ b/examples/advanced-multi-theme/app/pageNavigator.tsx @@ -2,6 +2,7 @@ import { useState } from "react"; import { darkThemes, lightThemes } from "./themes"; import Link from "next/link"; +import styles from "./page.module.css"; export default function PageNavigator() { const [exampleType, _setExampleType] = useState("themed-page"); @@ -15,14 +16,23 @@ export default function PageNavigator() { _setExampleType(exampleType); }; return ( -
-
-

Example Page Navigator

+
+

+ Pages Navigator + + {" "} + -> + +

+

+ Pages with forced theme/colorScheme +

+
); From 89c8f3ab8b128413666a88cc45dc648260d3fe71 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 26 Aug 2023 13:36:25 +0530 Subject: [PATCH 2/2] fix build error due to typo --- examples/advanced-multi-theme/app/layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/advanced-multi-theme/app/layout.tsx b/examples/advanced-multi-theme/app/layout.tsx index 6ebbab1d..3dca9e49 100644 --- a/examples/advanced-multi-theme/app/layout.tsx +++ b/examples/advanced-multi-theme/app/layout.tsx @@ -1,7 +1,7 @@ import "./globals.css"; import { ThemeSwitcher } from "nextjs-themes"; import { SSCWrapper } from "nextjs-themes/dist/server/nextjs"; -import ForkMe from "./_components/ForkMe"; +import ForkMe from "./_components/forkMe"; export default function RootLayout({ children }: { children: React.ReactNode }) { return (