web-dev-qa-db-ja.com

Vue.js SPAのテーマを動的に変更する最良の方法は？

したがって、タイトルは十分な説明だと思います。アプリケーション全体に動的にテーマを設定したいと思います。これは、特定のボタンを押したときにすべてのdivの色を変更したり、特定のユーザーがログインしたときにWebアプリ全体の色を変更したりすることを意味します。

私が現在取り組んでいることについていくつかの洞察を与えるために、すでにテーマオプションが組み込まれているElement-uiと呼ばれるものを含む多くのライブラリを使用するVue.jsアプリを構築したと言います。問題は、それがscssで書かれていることであり、ナビゲーション中にすべての可変色を変更したいと思います。私のプロジェクトは次のようになります。

<template>
  ... some HTML and components...
</template>

<script>
  ... some javascript ...
</script>

<style scoped>
  ... some style that is scoped to the current component only ...
</style>

私はこのようなファイルをたくさん持っているので、それらすべてに対して「グローバル関数」を作成することは私には実用的ではないようです。また、メインのscssファイルをmain.jsに1回だけインポートします。

Webアプリの動的テーマを作成するためにできることはありますか？ Saasを使用するのは良い考えですか？ Javascriptかも？

編集

説明が足りなかった気がするので、簡単な例を付け加えたいと思います。 Element ページにアクセスすると、右上隅にカラーセレクターがあり、色が変わると、ボタンの色やリンクの色など、Webサイト全体のアクセントの色も変わります。 。

これがもう少し理解に役立つことを願っています

編集

今、私は非常に貧弱で、ひどく最適化されたソリューションに落ち着きました。ユーザーがテーマを変更すると、新しいcssファイルを作成して、現在のドキュメントに追加するだけです。

let sheet = document.createElement('style')
sheet.innerHTML = `*[class*="--primary"]{
                      background-color: ${colors[0]};
                    }
                    ...`;
document.body.appendChild(sheet);

これは非常に悪い解決策だと本当に思いますが、今のところ、ユーザーがパラメーターを変更したときに動的に機能するものは他にありません。私は本当にプロセスを完璧にしたいと思っています。ユーザーが色を選択すると、アプリケーション全体がその特定の色に変わるだけで、ビルド済みのtheme.cssはありません。

最終編集

私はついに解決策を見つけました、答えを参照してください！

vue.jsthemingelement-ui
6
Eugenio

最後に、数日後、実装が簡単で非常に軽量であると思うソリューションを思いつきました。

CSS変数

たくさん検索する前は、この種の変数の存在すら知らなかったし、あまり使われていないようです。とにかく、これが私の同じ答えを探している誰かを助けることができることを願っています：

_<template
  <app-main></app-main>
  <app-sidebar></app-sidebar>
  ...
</template>

<style>
  :root{
    --primary-color: #C5C5C5!important;
    --secondary-color: #6C7478!important;
    --tertiary-color: #FFFFFF!important;
    --success-color: #80b855!important;
    --warning-color: #eaca44!important;
    --error-color: #ef4d4d!important;
  }

  /* Theming */
  header{
    background-color: var(--primary-color);
  }
  div{
    color: var(--tetriary-colory);
  }
  ...
  /*   END   */
</style>

<script>
  import axios from 'axios' /* all your imports etc. */

  export default{
    data(){
    },
    methods: {
      axios.post(`http://localhost:8080/foo`).then(function (response){
        let bodyStyles = document.body.style;
        bodyStyles.setProperty('--primary-color', response.colors[0]);
        bodyStyles.setProperty('--tertiary-color', response.colors[1]);
        ...
      }
    }
  }
</script>
_

ご覧のとおり、いくつかの便利なCSS変数を初期化し、必要な場合（たとえば、そのapi post呼び出しで）を使用して変更します。単純なbodyStyles.setProperty('propertyName')関数。

このタイプのセットアップはログインページで使用するので本当に楽しいので、ユーザーが正常にログインすると、データベースから自分の色をロードして、そのようにセットアップします。

My website example

これが誰かを助けることができることを願っています！乾杯！

14
Eugenio