Implementing Dark mode with Vuetify
Nuxt.js + Vuetifyで作っているPortfolioサイトをdark mode対応してみたら意外とすんなりできたので、書き残しておく。
Vuetifyのコンポーネントとutil cssを使ってフリーハンドのCSSを極力減らしていたのがよかったみたい。
VuetifyのTheme
VuetifyはThemeの切り替え機能を提供していて、Material Design準拠の Light/dark modeのバリエーションがサポートされている。ここで改めて書き残して置くまでもなく、このドキュメントに知りたいことは全て書いてある。
https://vuetifyjs.com/en/features/theme/
どうやったか
先にも書いたとおり、ほとんどオリジナルのCSSがなかったため、Themeの切り替えだけでアプリケーションの見た目を切り替えることができた。やったことは、次のように $vuetify のthemeオプションをtrue/falseに切り替えるボタンを追加しただけ。
code:ts
const switchTheme = () => {
if (!$vuetify.theme.dark) {
$vuetify.theme.dark = true;
} else {
$vuetify.theme.dark = false;
}
};
https://gyazo.com/57347a8a5c99836936f7c7a948005572
https://gyazo.com/ba51f11f0e3c34b0e7c0a3e939d5d75f
最終的な実装
https://github.com/daikiojm/daikiojm.me/blob/master/components/ThemeSwitcher.vue
#vuetify #memo