Guess-the-Artwork Next.js主题组件项目
暗/亮模式切换的全局主题管理、用起来顺手的 UI 组件库集成、自动补全也跟得上，这些你都能在 guess-the-artwork 这个项目里体验到。它基于 Next.js 和 TypeScript，UI 构建用的是 Chakra UI，开发效率蛮高的。
主题切换用的是 chakra-ui 的 ColorModeProvider，在 _app.tsx 里包一下就好了，页面就能统一响应暗黑或亮色模式。响应也快，样式也不乱，挺方便的。
组件展示那块也做得比较细，比如按钮、卡片、布局等，都是用 chakra-ui 的风格写法，啥 px、bg、shadow 的，直接写在 JSX 里，改起来不费劲。
要启动项目也挺，命令一句话：
npx create-next-app --example with-chakra-ui-typescript-app或者你喜欢 yarn 也行。配置都写好了，拉下来就能跑，适合拿来做练手项目或者起个头。
嗯对了，如果你还想看看类似的项目，可以顺手瞄一下 Pokedex 模板 或者 Dashgo 后台模板，也都是 TypeScript + Next.js + Chakra UI 搭配，风格不一样但思路通用。
如果你刚好在做组件库整合、暗黑模式切换、或想找个 TypeScript 项目练手，guess-the-artwork 蛮值得一试。
文件大小：55.15KB
评论区