用Next.js实现了一个多主题切换的博客

589 阅读1分钟

技术栈

  • Next.js
  • Tailwindcss
  • daisyui
  • cloudflare pages(免费!)

模板主题

tailwind-nextjs-starter-blog

效果图

具体的建站过程 请看 Hugo博客迁移,使用Next.Js实现纯前端博客

暗黑模式

这次完成 Next.js 博客多主题切换功能,总共 5 个主题,包括暗黑模式

采用了技术

  • next-themes 实现主题状态切换

  • 用了 daisyui 四个主题

  • 暗黑 dark 模式是自己配的

  • 兼容了原模板 themetailwindcss 的 dark:*** 各种样式

关于 next-themes

  • 大概看了下 next-themes 原理是 使用 useState 来维护当前选定的主题
  • 调用 next-themes 提供的 setTheme 函数时,它会更新内部的主题状态
  • 这时就能切换到对应的 daisyui 样式

打算将 next-themes 配合 daisyui 切换主题功能,单独抽离出来做成一个单页面 next.js 示例

具体的建站过程 请看 Hugo博客迁移,使用Next.Js实现纯前端博客