Vueで変更可能なテーマ

Question

Vue.js 2.0を使用しているアプリケーションで作業しています。状態管理のためのVuex。いわゆる「ブランディング」の可能性を実装する必要があります。つまり、ユーザーはアカウントのテーマを選択する必要があります。特定の色はアプリケーションのスタイルに適用されます。

概念の証明として実装した最初のオプションは、Vuexを使用してアプリケーションストアに目的のスタイルをオブジェクトとして格納することでした。これをVuexでオブジェクトのスタイルにバインドしましたに適用する必要があります。色を選択するためのカラーピッカーは、色を変えるために状態上の突然変異を引き起こす。これは完全にうまく動作し、それを適用する必要があるhtml要素にstyle = "$ store.state.brand"のような式を使用するだけで、使いにくくなりません。私は色を変更すると、すべてのコンポーネントを更新します。このオプションは、非常に単純であり、ユーザーがカラーピッカーから必要な色を選択できるという利点があります。しかし、複雑なスタイルをこのように実装することはできません（ホバー上の色の変更、タブやページのアクティブなクラスなど）。

2番目のオプションを試したいと思います私たちのクライアントには、ユーザーが選択できる一連の定義済みのテーマを用意することが推奨されます。これらのテーマはCSSファイルで定義されます（sass/lessなどを使用）。

ユーザーがテーマを選択したときに、プルダウンからアプリケーションのスタイルを適切なCSSファイルから読み込み、その変更を反映するようにアプリケーションをリロードするとしましょう。 Vueでこれを行う最も効率的でベストプラクティスな方法は何ですか？

Answer 1

他の誰かがこれを必要とする場合には、私たちはスタイリッシュなコンポーネントを使用することになりました。詳細は、https://www.npmjs.com/package/vue-styled-componentsをご確認ください。指定されたテーマの色（ボタン、ラジオボタン、ヘッダー、メニューアイテムなど）を受け取る必要がある要素のスタイル付きコンポーネントを作成し、必要な色を小道具として渡しました。小道具の価値はVuexストアから得られ、アプリケーション全体で一貫しています。このアプローチのメリットは、（私たちが検討していた定義済みのテーマと比較して）クライアントにとって色の選択肢が無限であることです。さらに、もう一つの利点は、クライアントが、カラーピッカーを介してvuexストアの色を変更し、テーマがライブで変わるのを見てみることができることです。最後に、このアプローチでは、CSSセレクタを使用してより複雑なスタイルを作成するなど、CSSのすべての機能を使用することもできます。これは、通常のvueスタイルバインディングでは不可能でした。これについての詳細が必要な場合は、私に連絡してください。