小村のポートフォリオサイト開発（３）　共通設定（テーマカラー、Mixin）

こんばんは、小村だよ！
ポートフォリオ作成における現時点までの苦労した点を記録するよ！
今回は共通設定の、テーマカラーとMixinあたりを書いていきまふ
サイト：Little Village
下図が記事作成時点でのTopページになるよ！よろしくね！

記録

テーマカラーの設定

まずはテーマカラーの設定から話すよ！
create nuxt-appでVuetifyを選択した時の初期Webサイトはこんな感じ

見ての通り、ダークモードで表示されます。
で、このダークモードや色の設定は、nuxt.config.jsに定義されてます

  // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
        },
      },
    },
  },

今回私は、画面モードを選択できるようにする予定です
ヘッダーのボタン押下時にライトモード、ダークモードを切り替える形

これを実現するために、各画面モードの色の定義を行います
色の定義はnuxt.config.jsにします

～
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
          backgroundHeader: '#000000',
          backgroundMenu: '#060606',
          backgroundContents: '#0C0C0C',
          blogCardTitle: colors.grey.lighten4,
          blogCardSubtitle: colors.grey.lighten3,
          blogCardText: colors.grey.lighten1,
          blogPagenation: colors.grey.darken1,
          blogCalendar: colors.grey.darken1,
          blogCategory: colors.grey.darken1,
        },
        light: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
          backgroundHeader: '#FFFFFF',
          backgroundMenu: '#FBFBFB',
          backgroundContents: '#F7F7F7',
          blogCardTitle: colors.grey.darken3,
          blogCardSubtitle: colors.grey.darken2,
          blogCardText: colors.grey.darken1,
          blogPagenation: colors.grey.lighten1,
          blogCalendar: colors.grey.darken1,
          blogCategory: colors.grey.darken1,
        },
      },
    },
～

もともとdark: {の中に、primary～successが定義されてます
これらは通常、ボタンの色などでcolor="primary"などと定義すると適用されます
これは自由に定義することができるため、必要な分だけ色の定義を追加しています
また、light: {を定義し、同じだけ色の定義を設定しています
こうすることで、ダークモードとライトモードのそれぞれの色を設定できます
一番上のdark: false,のときはライトモード、trueならダークモードとなります

Mixinの設定

今の画面モードは？などの判断は、全画面で使用する可能性があります
このような共通で使用する処理は、Mixinとして記述するのが一般的のようです
Mixinは、plugins配下にMixin用のjsファイルを用意してそこに記述します

画面モードに関する処理を記述しました（詳細は使うとき説明します）
このmixin.jsを使用するには、nuxt.config.jsに下記の記述が必要です

      plugins: ['@/plugins/mixin'],

実際の使用方法は、次回のヘッダ作成時の記録で紹介したいと思います

背景色の設定

コンポーネントやオブジェクトに対する色は、上記の色の定義を使用します
ただ、画面全体に関しては別の設定がひつようになります
assetsのvariables.scssを開き、下記を記述します

// ライトモード
$material-light: (
  'background': #EEE
);

// ダークモード）
$material-dark: (
  'background': #111
);

上記の通り、ライトモードとダークモードの背景色をそれぞれ定義します

おわりに

ひとまず現在使用している共通の設定はここまでになります
次回はヘッダについて苦労した点を記述したいと思います
ではでは、ちゃお～～～！

小村記録

小村のポートフォリオサイト開発（３）　共通設定（テーマカラー、Mixin）

目次

記録

テーマカラーの設定

Mixinの設定

背景色の設定

おわりに