Skip to content

Commit

Permalink
support tailwind css
Browse files Browse the repository at this point in the history
  • Loading branch information
mayank1513 committed Dec 7, 2023
1 parent 64374da commit c572ce6
Show file tree
Hide file tree
Showing 9 changed files with 77 additions and 111 deletions.
20 changes: 8 additions & 12 deletions examples/tailwind/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
30 changes: 16 additions & 14 deletions examples/tailwind/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -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 <https://github.com/mayank1513>",
};

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
<body className={inter.className}>
<NextJsSSGThemeSwitcher />
<ThemeSwitcher />
{children}
</body>
</html>
)
);
}
68 changes: 27 additions & 41 deletions examples/tailwind/app/page.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
Get started by editing&nbsp;
<code className="font-mono font-bold">app/page.tsx</code>
nextjs-themes Tailwind CSS example
</p>
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
<a
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
By{' '}
<Image
src="/vercel.svg"
alt="Vercel Logo"
className="dark:invert"
width={100}
height={24}
priority
/>
rel="noopener noreferrer">
<a href="https://mayank-chaudhari.vercel.app" rel="noopener noreferrer" target="_blank">
By Mayank
</a>
</a>
</div>
</div>
Expand All @@ -39,66 +33,58 @@ export default function Home() {
/>
</div>

<ColorSwitch />

<div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
href="https://react18-tools.github.io/nextjs-themes/"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
rel="noopener noreferrer">
<h2 className={`mb-3 text-2xl font-semibold`}>
Docs{' '}
Docs{" "}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Find in-depth information about Next.js features and API.
Find in-depth information about <code>nextjs-themes</code> features and API.
</p>
</a>

<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
href="https://github.com/react18-tools/nextjs-themes"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
rel="noopener noreferrer">
<h2 className={`mb-3 text-2xl font-semibold`}>
Learn{' '}
Examples{" "}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Learn about Next.js in an interactive course with&nbsp;quizzes!
</p>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>Learn through more examples on official repo.</p>
</a>

<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<StarMe
gitHubUrl="https://github.com/react18-tools/nextjs-themes"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">
<h2 className={`mb-3 text-2xl font-semibold`}>
Templates{' '}
Star Me{" "}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Explore starter templates for Next.js.
Explore and star official <code>nextjs-themes</code> repo.
</p>
</a>

</StarMe>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
rel="noopener noreferrer">
<h2 className={`mb-3 text-2xl font-semibold`}>
Deploy{' '}
Deploy{" "}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
Expand All @@ -109,5 +95,5 @@ export default function Home() {
</a>
</div>
</main>
)
);
}
18 changes: 9 additions & 9 deletions examples/tailwind/tailwind.config.ts
Original file line number Diff line number Diff line change
@@ -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;
27 changes: 0 additions & 27 deletions examples/tailwind/tsconfig1.json

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 4 additions & 4 deletions packages/shared-ui/src/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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"],
Expand Down
2 changes: 1 addition & 1 deletion packages/shared-ui/src/theme-controller/themes.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
export const darkThemes = ["black", "gray", "dark-blue"];
export const darkThemes = ["dark", "gray", "dark-blue"];
export const lightThemes = ["white", "yellow", "orange"];

0 comments on commit c572ce6

Please sign in to comment.