直接使用脚手架创建 Next.js 项目，有些默认的样式效果，做了暗色主题的适配，正好是一个暗色主题实现的示范。

在删除默认代码前，顺便学习一下。

创建项目

https://nextjs.org/docs/getting-started/installation

直接使用脚手架创建，在这个 demo 里不使用 Tailwind 。

npx create-next-app@latest nextjs-project

通过媒体查询改变 css 变量值

创建的默认代码里，有些介绍 Next.js 的实例代码。

有个公共样式文件 globals.css ，示范了暗色主题的实现。

比如这个默认的文字色值：

:root {
  --foreground-rgb: 0, 0, 0;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

直接使用 css 变量

使用的时候，就不需要判断现在是什么主题，直接使用变量就行了。

body {
  color: rgb(var(--foreground-rgb));
}

原生 html 元素设置为暗色效果

https://developer.mozilla.org/zh-CN/docs/Web/CSS/color-scheme

同时，设置浏览器原生 html 元素的样式效果。

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}