搜索 - 腾讯云开发者社区-腾讯云

文章/答案/技术大牛

发布

来自专栏Next.js 实战系列
Next.js 实战 (三)：优雅的实现暗黑主题模式
前言在 Next.js 中要实现暗黑模式，需要用到一个库：next-themes，它可以帮助我们很轻易地实现暗黑模式切换。具体步骤 1、安装 next-themes 依赖： pnpm add next-themes 2、新增 /components/ThemeProvider/index.tsx 文件： 'use client '; import { ThemeProvider as NextThemesProvider } from 'next-themes'; import * as React from 'react' index.tsx 主题切换组件： 'use client'; import { Moon, Sun } from 'lucide-react'; import { useTheme } from 'next-themes 如果你想加入过渡动画，可以把代码改成这样： 'use client'; import { Moon, Sun } from 'lucide-react'; import { useTheme } from 'next-themes
59200编辑于 2025-08-15
来自专栏网络日志
nextjs从零到一开发博客（万字长文）配合strapi
# 切换到web目录，首先添加next-theme包 pnpm install next-themes -S # 然后添加shadcn/ui 的 dropdown-menu pnpm dlx shadcn-ui from 'react'; import { MoonIcon, SunIcon } from '@radix-ui/react-icons'; import { useTheme } from 'next-themes use client'; import * as React from 'react'; import { ThemeProvider as NextThemesProvider } from 'next-themes '; import { type ThemeProviderProps } from 'next-themes/dist/types'; export function ThemeProvider({ '; import { type ThemeProviderProps } from 'next-themes/dist/types'; export function ThemeProvider({
1.1K10编辑于 2024-06-20
来自专栏喵喵侠的社区活动征文
Vite + Tailwind + shadcn-ui：2026 年最舒服的中后台前端开发组合
暗色模式 (Dark Mode)shadcn/ui 基于 next-themes 提供了开箱即用的暗色模式支持。 pnpm install next-themes
41110编辑于 2026-01-23
OpenStock已上线，免费开源！
•支持 cmdk 命令面板、next-themes、lucide-react 图标。
30210编辑于 2026-03-13
来自专栏不知非攻
next.js 的成熟，到底意味着什么
import Button from "@/components/Button"; import { useEffect } from "react"; import { useTheme } from 'next-themes
63110编辑于 2024-07-25
来自专栏前端达人
Claude Code 通关手册（二）：权限系统搞明白，效率直接翻倍
功能实现当你需要开发新功能时：你: 给 DevPulse 添加暗色模式切换功能： - 在 @src/components/Header.tsx 的导航栏右侧添加切换按钮 - 使用 next-themes
1.3K20编辑于 2026-03-12

Next.js 实战 (三)：优雅的实现暗黑主题模式

nextjs从零到一开发博客（万字长文）配合strapi

Vite + Tailwind + shadcn-ui：2026 年最舒服的中后台前端开发组合

OpenStock已上线，免费开源！

next.js 的成熟，到底意味着什么

Claude Code 通关手册（二）：权限系统搞明白，效率直接翻倍

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐