Implementing Dark mode with Vuetify
Nuxt.js + Vuetifyで作っているPortfolioサイトをdark mode対応してみたら意外とすんなりできたので、書き残しておく。
Vuetifyのコンポーネントとutil cssを使ってフリーハンドのCSSを極力減らしていたのがよかったみたい。
VuetifyのTheme
VuetifyはThemeの切り替え機能を提供していて、Material Design準拠の Light/dark modeのバリエーションがサポートされている。ここで改めて書き残して置くまでもなく、このドキュメントに知りたいことは全て書いてある。
どうやったか
先にも書いたとおり、ほとんどオリジナルの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
最終的な実装