Nuxt에서 만든 블로그에 다크 모드 설치

개시하다

이번에는 처음으로 젠의 사람을 청해 기사를 썼다.
나는 스스로 Nuxt의 암흑 모드 설치를 시도했기 때문에 간단하게 요약하고 싶다.
내 블로그

절차.

이번에는 다음과 같은 구조로 암흑 모드를 실시했다.

1. storeでダークモードのオンオフの状態を管理する。
2. ヘッダーのトグルを切り替えることでmutationが働き、storeのダークモードが変化する。
3. storeの状態に応じてcssの切替を行う(v-bind:styleを使用)

store 설정

store 디렉토리에 있는 index에 Vuex를 설치합니다.제작
store/index

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: function() {
      return {
        isDarken: false //ダークモードのオンオフ
      }
    },
    mutations: {
      toggle: function(state) {
        state.isDarken = !state.isDarken //トグルの切替
      }
    },
    actions: {
      changeToggle: function(context) {
        context.commit("toggle") //actionからmutationのtoggleを呼び出している
      }
    }
  })
}

export default createStore

토그의 설치

헤더에 추가된nav-bar의 형식으로 실시됩니다.
vuetify의 v-switch를 사용하면 각도 스위치를 간단하게 만들 수 있습니다.
components/header

<template>
  <div id="header">
    <ul class="nav-bar">
      .
      .
      .
      <li>
        <v-switch type="checkbox" @click="$store.dispatch('changeToggle')" color="secondary"/> // クリックすることでstoreのactionを呼び出す
      </li>
    </ul>
  </div>
</template>

스타일 제어

어둠 모드를 열고 닫을 때, 변경할 요소를 페이지나 구성 요소의 스크립트 탭에 데이터로 전달할 수 있습니다.
components/header

<script>

export default {
  data: function() {
    return {
      colorLight: {
        color: "#fff"
      },
      colorDark: {
        color: "#222"
      }
    }
  }
}
</script>

각도에 따라 스타일을 바꾸려면 v-bind:style의 3가지 연산자를 사용하십시오.
여기서 헤더 링크의 색을 흑백으로 전환합니다.
components/header

<template>
  <div id="header">
    <ul class="nav-bar">
      <li>
        <nuxt-link to="/about" class="nav-link" :style="$store.state.isDarken? colorLight : colorDark">About</nuxt-link>
      </li>
      .
      .
      .
      <li>
        <v-switch type="checkbox" @click="$store.dispatch('changeToggle')" color="secondary"/>
      </li>
    </ul>
  </div>
</template>

완성

단순한 구조지만 암흑 패턴을 구현할 수 있다.

끝맺다

의외로 어둠의 패턴의 실현은 매우 간단하다.나는 블로그를 계속 개선하고 싶다.

참고 자료

Vuex 공식 참조
Vuetify 스위치 구성 요소