从 create-next-app 里学到的知识（一） - dark 模式

这里记录在 npx create-next-app@13.1.16 创建的 nextjs 初始项目里学习到的知识

Dark 模式

在 NextJS 的项目里使用 媒体查询 prefers-color-theme 来获取当前系统是什么主题色 具体代码为:

@media (prefers-color-scheme: dark)
  ...
}

实现 dark 模式和 light 模式的方式依然定义一套 css 变量, 在不同主题色下,变量的值不同. 比如:

:root {
  --primary-glow: conic-gradient(from 180deg at 50% 50%,
      #16abff33 0deg,
      #0885ff33 55deg,
      #54d6ff33 120deg,
      #0071ff33 160deg,
      transparent 360deg);
  --secondary-glow: radial-gradient(rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0));
}

@media (prefers-color-scheme: dark) {
  :root {
        --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
    --secondary-glow: linear-gradient(to bottom right,
        rgba(1, 65, 255, 0),
        rgba(1, 65, 255, 0),
        rgba(1, 65, 255, 0.3));
  }
}

另外还使用了 color-schema 这个 css 属性(MDN 文档) 这是浏览器自带的主题样式

简单的说就是当 color-schema: dark 时浏览器会自动将默认的页面背景色改成黑色, 字体改成白色。

NextJS 初始项目里的写法是在媒体查询的结果为 dark 时,设置 color-scheme: dark;

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

但可以直接写成 color-scheme: light dark 这样浏览器会自动判断主题色, 效果如下图所示.

关于color-schema 的兼容性

桌面端：

移动端：

属于 2020 年之后的版本可用， 兼容性不算优秀