From c572ce62e99311c627183d24ec083d899b5f5564 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Thu, 7 Dec 2023 13:12:49 +0530 Subject: [PATCH] support tailwind css --- examples/tailwind/app/globals.css | 20 +++--- examples/tailwind/app/layout.tsx | 30 ++++---- examples/tailwind/app/page.tsx | 68 ++++++++----------- examples/tailwind/tailwind.config.ts | 18 ++--- examples/tailwind/tsconfig1.json | 27 -------- .../client/theme-switcher/theme-switcher.tsx | 1 + .../server-side-wrapper.tsx | 14 +++- packages/shared-ui/src/globals.css | 8 +-- .../shared-ui/src/theme-controller/themes.ts | 2 +- 9 files changed, 77 insertions(+), 111 deletions(-) delete mode 100644 examples/tailwind/tsconfig1.json diff --git a/examples/tailwind/app/globals.css b/examples/tailwind/app/globals.css index fd81e885..ab97d718 100644 --- a/examples/tailwind/app/globals.css +++ b/examples/tailwind/app/globals.css @@ -2,26 +2,22 @@ @tailwind components; @tailwind utilities; +@import "nextjs-themes/styles.css"; + :root { --foreground-rgb: 0, 0, 0; --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; } -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - } +.dark, +.cs-dark { + --foreground-rgb: 255, 255, 255; + --background-start-rgb: 0, 0, 0; + --background-end-rgb: 0, 0, 0; } body { color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); + background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); } diff --git a/examples/tailwind/app/layout.tsx b/examples/tailwind/app/layout.tsx index 40e027fb..3ff78f8c 100644 --- a/examples/tailwind/app/layout.tsx +++ b/examples/tailwind/app/layout.tsx @@ -1,22 +1,24 @@ -import type { Metadata } from 'next' -import { Inter } from 'next/font/google' -import './globals.css' +import type { Metadata } from "next"; +import { Inter } from "next/font/google"; +import "./globals.css"; +import { ThemeSwitcher } from "nextjs-themes"; +import { NextJsSSGThemeSwitcher } from "nextjs-themes/server"; -const inter = Inter({ subsets: ['latin'] }) +const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { - title: 'Create Next App', - description: 'Generated by create next app', -} + title: "Tailwind CSS Example", + description: "Generated by Mayank ", +}; -export default function RootLayout({ - children, -}: { - children: React.ReactNode -}) { +export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - {children} + + + + {children} + - ) + ); } diff --git a/examples/tailwind/app/page.tsx b/examples/tailwind/app/page.tsx index e396bc7b..04f96bdc 100644 --- a/examples/tailwind/app/page.tsx +++ b/examples/tailwind/app/page.tsx @@ -1,29 +1,23 @@ -import Image from 'next/image' +import { StarMe } from "@mayank1513/fork-me"; +import Image from "next/image"; +import { ColorSwitch } from "nextjs-themes"; export default function Home() { return (

- Get started by editing  - app/page.tsx + nextjs-themes Tailwind CSS example

@@ -39,66 +33,58 @@ export default function Home() { /> + +
- ) + ); } diff --git a/examples/tailwind/tailwind.config.ts b/examples/tailwind/tailwind.config.ts index c7ead804..45a2821f 100644 --- a/examples/tailwind/tailwind.config.ts +++ b/examples/tailwind/tailwind.config.ts @@ -1,20 +1,20 @@ -import type { Config } from 'tailwindcss' +import type { Config } from "tailwindcss"; const config: Config = { content: [ - './pages/**/*.{js,ts,jsx,tsx,mdx}', - './components/**/*.{js,ts,jsx,tsx,mdx}', - './app/**/*.{js,ts,jsx,tsx,mdx}', + "./pages/**/*.{js,ts,jsx,tsx,mdx}", + "./components/**/*.{js,ts,jsx,tsx,mdx}", + "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { backgroundImage: { - 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', - 'gradient-conic': - 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', + "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", + "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", }, }, }, plugins: [], -} -export default config + darkMode: "class", +}; +export default config; diff --git a/examples/tailwind/tsconfig1.json b/examples/tailwind/tsconfig1.json deleted file mode 100644 index c7146963..00000000 --- a/examples/tailwind/tsconfig1.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "lib": ["dom", "dom.iterable", "esnext"], - "allowJs": true, - "skipLibCheck": true, - "strict": true, - "noEmit": true, - "esModuleInterop": true, - "module": "esnext", - "moduleResolution": "bundler", - "resolveJsonModule": true, - "isolatedModules": true, - "jsx": "preserve", - "incremental": true, - "plugins": [ - { - "name": "next" - } - ], - "paths": { - "@/*": ["./*"] - } - }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], - "exclude": ["node_modules"] -} diff --git a/packages/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx b/packages/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx index 4ed79871..bf4432bf 100644 --- a/packages/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx +++ b/packages/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx @@ -57,6 +57,7 @@ interface UpdateDOMProps { function updateDOM({ newTheme, colorScheme, media }: UpdateDOMProps, targetSelector?: string) { [document.querySelector(targetSelector || "#nextjs-themes"), document.documentElement].forEach(target => { + if (target) target.className = `${newTheme} cs-${colorScheme}`; /** cs == color-scheme */ target?.setAttribute("data-theme", newTheme); target?.setAttribute("data-color-scheme", colorScheme); }); diff --git a/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx b/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx index 2a128271..55a8c0a1 100644 --- a/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx +++ b/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx @@ -30,9 +30,17 @@ function sharedServerComponentRenderer( ? getTheme(themeState, isSystemDark) : getForcedPageTheme(themeState, forcedPageData, isSystemDark); - const dataProps: { "data-theme"?: string; "data-color-scheme"?: ColorSchemeType } = {}; - if (dataTheme !== undefined) dataProps["data-theme"] = dataTheme; - if (dataColorScheme !== undefined) dataProps["data-color-scheme"] = dataColorScheme; + const dataProps: { "data-theme"?: string; "data-color-scheme"?: ColorSchemeType; className?: string } = { + className: "", + }; + if (dataTheme !== undefined) { + dataProps["data-theme"] += dataTheme; + dataProps.className = dataTheme; + } + if (dataColorScheme !== undefined) { + dataProps["data-color-scheme"] = dataColorScheme; + dataProps.className += ` cs-${dataColorScheme}`; + } return ( // @ts-expect-error -> svg props and html element props conflict diff --git a/packages/shared-ui/src/globals.css b/packages/shared-ui/src/globals.css index 271dd6b8..a37611fc 100644 --- a/packages/shared-ui/src/globals.css +++ b/packages/shared-ui/src/globals.css @@ -30,8 +30,8 @@ /* dark themes */ [data-theme="dark"], [data-theme="dark"] ~ *, -[data-theme="black"], -[data-theme="black"] ~ * { +[data-theme="dark"], +[data-theme="dark"] ~ * { --bg-color: #000; --text-color: #fff; } @@ -50,8 +50,8 @@ [data-theme="dark"], [data-theme="dark"] ~ *, -[data-theme="black"], -[data-theme="black"] ~ *, +[data-theme="dark"], +[data-theme="dark"] ~ *, [data-theme="gray"], [data-theme="gray"] ~ *, [data-theme="dark-blue"], diff --git a/packages/shared-ui/src/theme-controller/themes.ts b/packages/shared-ui/src/theme-controller/themes.ts index d5f368c2..46a2dad2 100644 --- a/packages/shared-ui/src/theme-controller/themes.ts +++ b/packages/shared-ui/src/theme-controller/themes.ts @@ -1,2 +1,2 @@ -export const darkThemes = ["black", "gray", "dark-blue"]; +export const darkThemes = ["dark", "gray", "dark-blue"]; export const lightThemes = ["white", "yellow", "orange"];