macOS Mojaveで取り入れられたダークモード。元々その手のユーティリティはたくさんありましたが、OS標準に入ってきたのが大きなインパクトです。それに伴ってダークモードへの注目が集まっています。 近くリリースされるSafariではダークモードがサポートされるそうです。そんな時に使えそうなのがVue Dark Modeです。

Vue Dark Modeの使い方

ベースのカラーリング。黒背景でも見やすいコンストラクトです。

ヘッダー。

ボタン。

バッジ。

ソーシャルログイン。

入力欄。

ドロップダウン。

テキストエリア。

チェックボックス。

トグル。

ファイルアップロード。

タブ。

水平線。

プログレスバー。

プロフィールアイコン。

アイコン集。マテリアルデザインのものが使えます。

Vue Dark Modeは標準の白ベースのデザインも用意されつつ、ダークモードへの切り替えで即座にデザインを変えられるようになっています。将来的にOSがダークモードの状態であれば、自動的にWebサイトもダークモードで表示するといったことも可能になるでしょう。デザインをユーザニーズに近いものにする、そんな考えが求められるようになっています。

Vue Dark ModeはVue製のオープンソース・ソフトウェア（MIT License）です。

Vue Dark Mode | A Minimalist Dark Design System for Vue.js LeCoupa/vuedarkmode: Vue Dark Mode | A minimalist dark design system. Designed for the insomniacs who enjoy dark interfaces as much as we do. ?