2020年5月19日,<年代p一个n class="mx-1 text-xs">•11分钟阅读
图片由<一个href="https://unsplash.com/@vorosbenisop" target="_blank" rel="noreferer noopener">本杰明:

视图演示/<一个href="https://github.com/nuxt-community/color-mode-module" target="_blank" rel="noopener nofollow">源

< p >的<一个href="https://github.com/nuxt-community/color-mode-module" rel="nofollow noopener noreferrer" target="_blank">@nuxtjs /颜色模式模块是一种很酷的方式添加黑暗模式到您的网站。但它不仅可以从黑暗切换到光明,而且还可以切换任何颜色主题(例如:深褐色模式)。它甚至有自动检测,因此它会根据您的系统外观选择正确的模式。

    <李><一个href="#how-does-it-work">它是如何工作的<李><一个href="#lets-get-started">让我们开始< ul ><李><一个href="#install-the-color-mode-module">安装颜色模式模块<李><一个href="#adding-your-color-styles">添加颜色样式<李><一个href="#inspecting-the-html">检查HTML<李><一个href="#creating-a-color-mode-switcher">创建一个颜色模式切换器<李><一个href="#importing-our-component">进口我们的组件<李><一个href="#adding-a-click-event-to-change-our-colors">添加一个点击事件来改变我们的颜色<李><一个href="#adding-some-icons">添加一些图标<李><一个href="#importing-the-svgs-as-components">将svg作为组件导入<李><一个href="#adding-a-dynamic-component">添加动态组件<李><一个href="#styling-our-icons">样式图标<李><一个href="#creating-a-method-to-show-our-preferred-class">创建一个方法来显示我们的首选类<李><一个href="#adding-some-text-using-the-colorscheme-component">使用ColorScheme组件添加一些文本<李><一个href="#adding-a-text-when-system-is-chosen">当系统被选择时,添加一个文本<李><一个href="#tidying-up-our-styles">整理我们的风格<李><一个href="#conclusion">结论<李><一个href="#what-to-do-next">下一步怎么办?

它是如何工作的

@nuxtjs /颜色模式添加一个颜色。${}模式类的< html >标签。它适用于任何next目标,无论是静态的还是服务器的,通用的还是客户端呈现。它自动检测系统的颜色模式,所以你不必手动改变颜色。

它注入colorMode美元助手:

    <李>偏好:实际颜色模式选择(可以“系统”),更新它以更改用户首选的颜色模式<李>价值:用于知道何时检测到什么颜色模式$ colorMode = = =“系统”,你不应该更新它<李>未知的:用于知道是否,在SSR或静态生成,我们需要渲染占位符

让我们开始

您可以处理一个已经创建的项目,也可以开始一个新的项目。对于本例,我创建了一个新项目,并向索引中添加了一些虚拟文本。页面文件夹中的Vue文件。

index.vue
<模板><h1>测试颜色模式<年代p一个n class="token tag">h1>模板>

安装颜色模式模块

首先,你需要将模块作为一个依赖于你的Nuxt.js项目来安装。

添加- d @nuxtjs /颜色模式
npm安装——save-dev @nuxtjs /颜色模式

然后,需要将模块添加到buildModules在你的nuxt.config.js文件中。

信息:如果你还没有一个nuxt.config.js文件,你可以在根目录下创建一个,并添加下面的代码。

nuxt.config.js
出口默认的buildModules<年代p一个n class="token operator">:“@nuxtjs /颜色模式”

如果您使用的是低于2.9.0的Nuxt.js版本,则需要将其添加到模块财产,而不是buildModules

信息:要检查你有什么版本的Nuxt.js,你可以运行纱nuxt - vNPM运行next -v

添加颜色样式

现在需要向模式类添加一些样式。让我们添加一个main.css文件在我们的资产文件夹。我们将使用CSS变量来设置根颜色,这将是浅模式,然后设置颜色为黑暗和深褐色模式。然后我们可以添加一些样式到我们的正文和链接标签。

资产/ main.css
:根——颜色# 243746——色原# 158876——color-secondary# 0 e2233——bg# f3f5f4——bg-secondary# fff——边框颜色# ddd.dark-mode——颜色# ebf4f1——色原# 41 b38a——color-secondary# fdf9f3——bg25 # 091——bg-secondary# 071521——边框颜色# 0 d2538.sepia-mode——颜色# 433422——color-secondary# 504231——bg# f1e7d0——bg-secondary# eae0c9——边框颜色# ded0bf身体字体类型苹果系统<年代p一个n class="token punctuation">,BlinkMacSystemFont<年代p一个n class="token punctuation">,“Segoe UI”Roboto<年代p一个n class="token punctuation">,氧气<年代p一个n class="token punctuation">,Ubuntu<年代p一个n class="token punctuation">,Cantarell<年代p一个n class="token punctuation">,“开放无”“Helvetica Neue”无衬线<年代p一个n class="token punctuation">;背景颜色var——bg颜色var——颜色过渡背景颜色<年代p一个n class="token number">0.3年代一个颜色var——色原

为了在我们的应用程序中使用这个CSS文件,我们需要注册它。为此,我们将css属性添加到配置文件中,并添加刚刚创建的css文件。

nuxt.config.js
css<年代p一个n class="token operator">:“@ /资产/ main.css”

检查HTML

如果你用npm运行开发npx nuxt dev如果您的系统已经被设置为暗模式,您应该会看到暗模式,如果检查代码,您将看到添加到HTML标记的类。

<超文本标记语言深色模式<年代p一个n class="token punctuation">">//你可能在这里有光模式<年代p一个n class="token tag">超文本标记语言>

使用开发工具将模式更改为棕褐色模式和光模式以查看效果。

<超文本标记语言sepia-mode<年代p一个n class="token punctuation">"><!-或- ><超文本标记语言光亮模式<年代p一个n class="token punctuation">"><!-或暗模式,如果你已经看到了光->超文本标记语言>超文本标记语言>

你也可以在控制台中通过输入来改变颜色:

nuxt美元<年代p一个n class="token punctuation">.colorMode美元偏好“乌贼”

创建一个颜色模式切换器

显然,在开发工具中改变模式并不是我们想要的,所以让我们创建一个颜色模式切换器,以便用户可以快速地从一种颜色切换到另一种颜色。

让我们创建一个名为ColorModePicker我们可以添加一系列颜色。现在我们可以打印出v-for的颜色。

组件/ ColorModePicker.vue
<模板><div><ul><v代表色的颜色<年代p一个n class="token punctuation">":关键颜色<年代p一个n class="token punctuation">">{{颜色}}<年代p一个n class="token tag">>ul>div>模板>

在data属性中,我们为每种模式返回一个颜色数组。

组件/ ColorModePicker.vue
<脚本>出口默认的数据返回颜色<年代p一个n class="token operator">:“系统”“光”“黑暗”“乌贼”脚本>

进口我们的组件

让我们将组件导入索引。我们可以看到发生了什么。

页面/ index.vue
<模板><ColorModePicker/>模板><脚本>进口ColorModePicker“@ /组件/ ColorModePicker”出口默认的组件<年代p一个n class="token operator">:ColorModePicker脚本>

在我们的浏览器下面http://localhost:3000你会看到我们的颜色列表。

<我mg alt="颜色列表"年代rc="https://d33wubrfki0l68.cloudfront.net/d0b4208348f3042dfdcfb9ce2f57d08b8bb5bfb7/92d4d/blog/going-dark-with-nuxtjs-color-mode/list-of-colors.png">

添加一个点击事件来改变我们的颜色

然后在我们的模板中添加一个单击事件,它将使colorMode.preference美元等于从我们的数据中得到的颜色。

我们可以利用colorMode美元帮助我们使用颜色模式模块。单击colorMode.preference美元将被设置为来自我们的数据的颜色。

组件/ ColorModePicker.vue
<v代表色的颜色<年代p一个n class="token punctuation">":关键颜色<年代p一个n class="token punctuation">"@clickcolorMode.preference美元=颜色<年代p一个n class="token punctuation">">>

这就是让它工作所需要的全部。如果你在浏览器中点击任何一种颜色,你就会看到背景正在改变。它可能不会有一个指针指针,所以如果你认为它不工作,它可能只是你习惯看到光标。

如果我们在浏览器中检查,我们可以看到它工作,但这是非常丑陋的。让我们整理一下。

添加一些图标

让我们添加一些图标。你可以复制图标<一个href="https://github.com/nuxt-community/color-mode-module/tree/master/example/assets/icons" rel="nofollow noopener noreferrer" target="_blank">从这里然后把它们放到assets文件夹中一个叫做icons的新文件夹中。

我们将使用图标作为组件,为了做到这一点,我们将使用<一个href="https://www.npmjs.com/package/@nuxtjs/svg" rel="nofollow noopener noreferrer" target="_blank">@nuxtjs / svg模块,它允许你根据你提供的资源查询以多种方式导入.svg文件。

首先,您需要安装它

添加- - - dev @nuxtjs / svg<年代p一个n class="token comment">#或者npm install——save-dev @nuxtjs/svg

那我们就把它加到你的nuxt.config.js在buildModules部分中,它应该已经有@nuxtjs /颜色模式模块。

nuxt.config.js
buildModules<年代p一个n class="token operator">:“@nuxtjs / svg”“@nuxtjs /颜色模式”

将svg作为组件导入

属性将这些svg图标作为组件导入内联?查询,以便将它们作为内联svg导入。

组件/ ColorModePicker.vue
<脚本>进口IconSystem@ /资产/图标/ system.svg吗?内嵌的进口IconLight@ /资产/图标/ light.svg吗?内嵌的进口IconDark@ /资产/图标/ dark.svg吗?内嵌的进口IconSepia@ /资产/图标/ sepia.svg吗?内嵌的出口默认的组件<年代p一个n class="token operator">:IconSystemIconLightIconDarkIconSepia/ /……Data属性在这里脚本>

添加动态组件

现在我们可以使用一个动态组件,它将根据数据数组中的颜色来检查添加哪个图标。可以取代{{颜色}}我们的<李>

组件/ ColorModePicker.vue
<组件:”图标- ${颜色}'<年代p一个n class="token punctuation">"/>

让我们把点击事件从<李>到我们的图标组件。

组件/ ColorModePicker.vue
<组件:”图标- ${颜色}'<年代p一个n class="token punctuation">"@clickcolorMode.preference美元=颜色<年代p一个n class="token punctuation">"/>

样式图标

让我们添加一些样式,这样我们就能看到图标了。我们将使用范围样式化并使用类羽。如果你查看你的svg文件,你会看到我们的svg有羽毛类,所以我们可以使用这个类来样式化它。我们还将添加一个首选和选择类,这样我们就知道哪个已经被选择和什么是首选的。

组件/ ColorModePicker.vue
<风格作用域>.feather位置相对<年代p一个n class="token punctuation">;0px光标指针<年代p一个n class="token punctuation">;填充7px背景颜色var——bg-secondary边境2px固体<年代p一个n class="token function">var——边框颜色保证金0这个特性5px过渡所有<年代p一个n class="token number">0.1年代缓解<年代p一个n class="token punctuation">;.feather:徘徊3px.feather.preferred边框颜色var——色原3px.feather.selected颜色var——色原风格>

你现在不会看到太多的区别除了图标看起来有点漂亮,而且现在我们需要为我们的首选图标,显示一个不同的类来自我们的系统偏好和选择图标,当我们使用点击事件改变颜色。

创建一个方法来显示我们的首选类

为此,我们可以创建一个方法来返回我们想要的类。我们可以调用我们的方法getclass我们想要返回的两个类是preferred和selected。首选颜色应等于colorMode.preference美元选择的颜色应该等于colorMode.value美元.如果colorMode未知,我们可以返回一个空对象。

组件/ ColorModePicker.vue
数据返回颜色<年代p一个n class="token operator">:“系统”“光”“黑暗”“乌贼”方法<年代p一个n class="token operator">:getclass颜色//当首选项是系统时,不会在ssr上设置类(因为我们直到客户端才知道首选项)如果colorMode美元未知的返回返回首选<年代p一个n class="token operator">:颜色<年代p一个n class="token operator">===colorMode美元偏好选择<年代p一个n class="token operator">:颜色<年代p一个n class="token operator">===colorMode美元价值

现在我们可以将这个类添加到图标组件中。当我们使用click事件时,这个类将调用getClasses方法来传递我们接收到的颜色。

组件/ ColorModePicker.vue
<组件:”图标- ${颜色}'<年代p一个n class="token punctuation">"@clickcolorMode.preference美元=颜色<年代p一个n class="token punctuation">":类getclass(颜色)<年代p一个n class="token punctuation">"/>

你会在浏览器中看到我们想要的颜色正在被应用。但当我们点击系统图标时,并不清楚发生了什么。

使用ColorScheme组件添加一些文本

让我们添加一些可以帮助用户理解它的东西。

如果你在做SSR (nuxt开始nuxt生成),如果colorMode.preference美元被设置为“系统”,使用colorMode美元在你的Vue模板中会导致闪光。这是因为在预呈现页面时,我们无法知道用户首选项,因为它们是在客户端检测到的。

为了避免flash,我们必须保护所有依赖的渲染路径colorMode美元colorMode.unknown美元渲染占位符或使用< ColorScheme >组件。

让我们创建一个ColorScheme组件< ul >的标记和占位符跨度.在其中,我们可以添加一些文本并显示colorMode.preference美元我们从颜色模式模块接收到的。

组件/ ColorModePicker.vue
<ColorScheme占位符...<年代p一个n class="token punctuation">"标签跨度<年代p一个n class="token punctuation">">颜色模式:<年代p一个n class="token tag"><b>{{colorMode美元。偏好}}<年代p一个n class="token tag">b>ColorScheme>

现在您将在浏览器中看到,如果您更改图标,将显示与单击图标对应的文本。

当系统被选择时,添加一个文本

我们可以通过查看什么时候首选项是系统并添加另一条消息来显示检测到的值来进一步改进这一点。

组件/ ColorModePicker.vue
<ColorScheme占位符...<年代p一个n class="token punctuation">"标签跨度<年代p一个n class="token punctuation">">颜色模式:<年代p一个n class="token tag"><b>{{colorMode美元。偏好}}<年代p一个n class="token tag">b><跨度vcolorMode.preference美元===<年代p一个n class="token punctuation">'系统<年代p一个n class="token punctuation">'>(<年代p一个n class="token tag"><>{{colorMode美元。值}}<年代p一个n class="token tag">>模式检测)<年代p一个n class="token tag">跨度>ColorScheme>

如果你在浏览器中测试它,你会看到它看起来很好,我们几乎做到了。

整理我们的风格

我们现在只需要整理几款。把这些点去掉< ul >添加一些间距和样式< p >标签。

组件/ ColorModePicker.vue
ullist-style没有一个<年代p一个n class="token punctuation">;填充0保证金0ul李显示inline-block<年代p一个n class="token punctuation">;填充5pxp保证金0padding-top5pxpadding-bottom20.px

为了让它居中我们可以用container类将ColorModePicker组件包装在div中。

页面/ index.vue
<div容器<年代p一个n class="token punctuation">"><ColorModePicker/>div>

并在样式中添加样式到容器类中

页面/ index.vue
<风格作用域>.containertext-align中心<年代p一个n class="token punctuation">;填充50px风格>

结论

这样你就有了漂亮的完全工作的颜色模式组件。您可以通过更改图标或添加更多颜色或修改配色方案来获得更多乐趣。玩得开心。

下一步怎么办?

  • 要了解更多关于使用颜色模式与顺风检查<一个href="https://medium.com/@fayazara/quick-way-to-implement-darkmode-in-nuxt-js-tailwindcss-corona-virus-tracker-712d004a0846" rel="nofollow noopener noreferrer" target="_blank">这篇文章<李><一个href="#subscribe-to-newsletter">订阅时事通讯不要错过即将发布的文章和资源。
Nuxt 颜色模式

贡献者

抓到一个错误或想为这篇博客文章贡献?万博全站客户端app<一个href="https://github.com/nuxt/www.lycasleep.com/blob/main/content/en/blog/going-dark-with-nuxtjs-color-mode.md" target="_blank" rel="noopener" class="text-primary-base hover:underline">在GitHub上编辑此页!