1. 概要
簡単なアニメーションの挙動
https://x.com/Nao8epicmotion/status/1780411806277919134
ソースコード
https://github.com/Kroro1208/nextjs-portfolio-website.git
React/Next.jsを使用してwebsiteの開発を行う際に、よく出てくるライトモードとダークモードの切り替えを解説します。
もうこれはパターン化できるもので、一度覚えてしまえば使いまわしたりして表現できる幅も広がると思います。この際に覚えちゃいましょう。
2. 必要なコンポーネントとファイル
今回のテーマに関係ある部分だけ解説させていただきます。
iconはReact iconを使用してます。
app/layout.jsx
ここで後に作成するThemeProviderコンポーネントでレンダリングされる部分を囲います。
import { Inter } from "next/font/google";
import "./globals.css";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { ThemeProvider } from "@/components/ThemeProvider";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en" suppressHydrationWarning>
<body className={inter.className}>
<ThemeProvider attribute="class" defaultTheme="light">
<Header />
{children}
<Footer />
</ThemeProvider>
</body>
</html>
);
}
app/Home.jsx
import About from "@/components/About";
import Cta from "@/components/Cta";
import Hero from "@/components/Hero";
import Reviews from "@/components/Reviews";
import Services from "@/components/Services";
import Works from "@/components/Works";
export default function Home() {
return (
<main>
<Hero />
<About />
<Services />
<Works />
<Reviews />
<Cta />
</main>
);
}
components/Header.jsx
※ここのuseEffectはスクロールアニメーションに関係するので今回は関係ありません。
動画にあるスクールの時に、遅れてニュルっと出てくるオレンジのBarのやつです。
"use client";
import { useEffect, useState } from "react";
import Logo from "./Logo";
import MobileNav from "./MobileNav";
import Nav from "./Nav";
import ThemeToggle from "./ThemeToggle"
import { usePathname } from "next/navigation";
const Header = () => {
const [header, setHeader] = useState(false);
const pathname = usePathname();
useEffect(() => {
const scrollYPos = window.addEventListener('scroll', () => {
window.scrollY > 50 ? setHeader(true) : setHeader(false);
});
return () => window.removeEventListener('scroll', scrollYPos);
});
return (
<header className={`${header ? "py-4 bg-gray-200 shadow-lg dark:bg-accent" : "py-6 dark:bg-transparent"}
sticky top-0 z-30 transition-all ${pathname === "/" && "bg-sky-200"}`}>
<div className="container mx-auto">
<div className="flex justify-between items-center">
<Logo />
<div className="flex items-center gap-x-6">
<Nav
containerStyles="hidden xl:flex gap-x-8 items-center"
linkStyles="relative hover:text-primary transition-all"
underlineStyles="absolute left-0 top-full h-[2px] bg-primary w-full"
/>
<ThemeToggle />
<div className="xl:hidden">
<MobileNav />
</div>
</div>
</div>
</div>
</header>
)
}
export default Header
components/ThemeProvider.jsx
ここでライブラリをインポートしてNextThemeProviderとして返します。
この使い方がちょっとだけ難しいかもですが、...propsにはlayout.jsxに記載している<ThemeProvider>内のattribute="class" defaultTheme="light"が渡ってきます。
この二つのpropsはThemeProviderを使用するときの書き方みたいなものです。
"use client";
import { ThemeProvider as NextThemeProvider } from "next-themes";
export function ThemeProvider({ children, ...props }) {
return <NextThemeProvider {...props}>{children}</NextThemeProvider>;
}
components/ThemeToggle.jsx
rotateとscaleを使用してアイコンをクリックしたときに回転させてちょっとオシャレに。
ボタンにvariant="outline"を指定して、枠線だけが表示させ中身が透明な「アウトラインスタイル」を持たせてます。
"use client";
import { Button } from "./ui/button";
import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
import { useTheme } from "next-themes";
const ThemeToggle = () => {
const { theme, setTheme } = useTheme();
return (
<Button variant="outline" size="icon" onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
<SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-0 scale-0 transition-all dark:rotate-0 dark:scale-100" />
</Button>
)
}
export default ThemeToggle
app/global.css
ここでデフォルトカラーとdarkモード時に必要となるカラーを定義する
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
@layer base {
:root {
--background: 0 0% 100%;
--primary: 8 99% 67%;
--primary-foreground: 300 0% 100%;
--secondary: 240 19% 16%;
--secondary-foreground: 300 0% 100%;
--border: 8 82% 92%;
--input: 8 82% 92%;
--ring: 9 99% 67%;
他の設定
}
.dark {
--background: 237 22% 20%;
--primary: 8 99% 67%;
--primary-foreground: 300 0% 100%;
--secondary: 240 19% 16%;
--secondary-foreground: 300 0% 100%;
--border: 237 22% 23%;
--input: 237 22% 23%;
--ring: 8 99% 67%;
他の設定
}
}
}
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
'./pages/**/*.{js,jsx}',
'./components/**/*.{js,jsx}',
'./app/**/*.{js,jsx}',
'./src/**/*.{js,jsx}',
],
prefix: "",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"sm": "640px",
"md": "768px",
"lg": "1024px",
"xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
},
},
},
plugins: [require("tailwindcss-animate")],
}
以上です！！
次回は、スクロール時のニュルっと出てくるやつを解説します！