【Vuetify 3】基礎設定を考える

目標

• にbase（Headerとfooter）となるレイアウトを追加する
• メインのテーマをdarkに変更する
• テーマカラーの設定

事前準備

vue3に事前準備uetify3が導入されたProject
記事では下記Git hub Repositoryを使用する
https://github.com/viviomega/vue-viviomega

テーマカラーを考える

Vuetify3ではアプリケーション全体の色をLight(昼間)とdark(夜間)モードを設定があるのですが、今回は「dark(夜間)」に設定していきます。
※今後切り替えを可能にする機能を実装していくかもしれません

Vuetify3にはカラーを管理する資材は存在しているのでそちらを使ってHeaderとfooterなどメイン要素やメインとなる文字の色を決めていく
https://vuetifyjs.com/en/styles/colors/

dark(夜間)モードに設定する

src/plugins/vuetify.jsを編集する

 // Styles
 import "@mdi/font/css/materialdesignicons.css";
 import "vuetify/styles";
 
 // Vuetify
 import { createVuetify } from "vuetify";
 
 export default createVuetify(
   // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+   {
+     theme: {
+       defaultTheme: "dark",
+     },
+   }
 );
 

起動確認

編集を保存して問題なければ編集完了

yarn serve

背景がdarkになっていれば成功です

Git commit情報

b18ff2e: 【Vuetify 3】基礎レイアウトを考える
dark(夜間)モードに設定する

メインとなるカラーを設定

https://vuetifyjs.com/en/styles/colors/
今回はVuetifyの解説も兼ねているのでメインカラーは上記カラー一覧の青色を選択してきたいと思います

name	code
blue-darken-1	#1E88E5

プロジェクト全体にメインカラーとして設定する

colorを設定する項目で常にblue-darken-1と記述するのは面倒であり、今後、メインカラーの変更を考えた際にメインカラーとして設定したblue-darken-1の記述を全て変更する必要がでて面倒なのでprimaryという変数に設定していこうと思います

src/plugins/vuetify.jsを編集する

src/plugins/vuetify.js

 // Styles
 import "@mdi/font/css/materialdesignicons.css";
+import colors from "vuetify/lib/util/colors";
 import "vuetify/styles";
 
 // Vuetify
 import { createVuetify } from "vuetify";
 
 export default createVuetify(
   // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
   {
     theme: {
       defaultTheme: "dark",
+       themes: {
+         dark: {
+           colors: {
+             primary: colors.blue.darken1, // #1E88E5
+           },
+         },
+       },
     },
   }
 );

• Javascriptカラーパックのインポート
• darkのcolor設定にprimaryの色を設定

Git commit情報

abcf939: メインとなるカラーを設定

あとがき

今後、夜間モードと昼間モードの切り替え機能の追加やメインカラーを動的に変更できたりと使用ユーザ毎にカスタマイズ可能なアプリケーションにするためのセットアップを行いました