Vue.jsベースのフレームワーク！ Nuxt3プラグイン《@nuxtjs/color-modeで画面背景の変更》

#プログラム #Nuxt.js #Vue.js

記事をシェア：

コピー

こんにちは、樋口です。

今回はNuxt3で画面上の背景色を変更できる「@nuxtjs/color-mode」についてご紹介します。簡単に画面上の背景変更を実現できるので、是非ご覧ください。

使用するライブラリ

今回は下記ライブラリを使用します。

Vue.js: 3.4.21
Nuxt.js: 3.11.1
@nuxtjs/color-mode: 3.5.2

@nuxtjs/color-modeの追加

初めにコマンドプロンプトで、使用するNuxt.jsのプロジェクトフォルダまで移動します。移動後、以下のコマンドを実行します。

npm i @nuxtjs/color-mode

これで対象のプロジェクトに、ライブラリを追加することができました。

次に実際のライブラリの使用方法について解説していきます。

プロジェクト構成

今回は下記のプロジェクト構成で作業を行っていきます。

nuxt.config.tsファイルへの記載追加

ライブラリの追加をしたら、「nuxt.config.ts」ファイルの「modules」にライブラリの記載追加を行います。

– nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@nuxtjs/color-mode'← 記載追加
  ],
})

これでライブラリの利用が可能となります。

Vueファイル

今回サンプル用に作成した、Vueファイルを下記に記載します。

– index.vue

<template>
<div style="text-align: center;">
    <h1>Color mode: {{ $colorMode.value }}</h1>
    <select v-model="$colorMode.preference">
        <option value="system">System</option>
        <option value="light">Light</option>
        <option value="dark">Dark</option>
        <option value="sepia">Sepia</option>
    </select>
</div>
</template>

<script setup>
const colorMode = useColorMode()
console.log(colorMode.preference)
</script>

<style>
body {
  background-color: #fff;
  color: rgba(0,0,0,0.8);
}
.dark-mode body {
  background-color: #091a28;
  color: #ebf4f1;
}
.sepia-mode body {
  background-color: #f1e7d0;
  color: #433422;
}
</style>

3行目：
現在選択されている背景タイプを出力します。

4行目～9行目：
背景色のモードの選択を行うことができます。ここで選択された「value」＋「-mode」に一致するCSSを読み込むことができます。「system」のように、CSSの指定がないものについては、全体に適応されているデフォルトの設定を読み込みます。

14行目～15行目：
スクリプト上で、選択されている背景色のモードを確認するサンプルとなります。

19行目～30行目：
選択された場合に読み込まれるCSSの記載を行っています。