Vueはテーマ切り替えのための複数のアイデアを実装します

// ページコンポーネント <テンプレート>
    <div>
        <コンポーネント:is="テーマ名" />
    </div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        名前: 'ホーム'、
        コンポーネント:{
            theme1:()=>import('@/theme/theme1/a')、
            theme2:()=>import('@/theme/theme2/a')、
        },
        計算:{
            テーマ名(){
                `theme${this.$store.state.themeId}` を返します
            }
        }
    }
</スクリプト>

//アクション.js
エクスポートデフォルト{
    名前:'テーマ1',
    ....
}
<テンプレート>
<div class="theme1"></div>
</テンプレート>
<スクリプト>
    '../componentAction/action' からアクションをインポートします
    action.name='テーマ1'
    デフォルトのアクションをエクスポートする
</スクリプト>
<スタイルスコープ>

</スタイル>

// ルータ.js
{
    パス:'/theme3',
    名前:'theme3Index',
    コンポーネント: () => import('../views/theme3/Index.vue'),
    子供たち：[
      {
        パス: '/theme3/entry',
        名前: 'theme3Entry',
        コンポーネント: () => import('../views/theme3/entry.vue'),
      }
     ]
 }
      

<!-- 中央 -->
<テンプレート>
 親クラス名を動的に取得し、親クラスを複数回定義する <div :class="className">
    <div class="switch" v-on:click="chang()">
      {{ className == "box" ? "ライトを点灯する" : "ライトを消す" }}
    </div>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前:「センター」、
  データ（） {
    戻る {
      クラス名: "ボックス"
    };
  },
  メソッド: {
  // クラスを変更する
    変更() {
      this.className === "ボックス"
        ? (this.className = "boxs") 
        : (this.className = "box");
    }
  },
};
</スクリプト>
<スタイル lang="scss">
クラスがboxの場合は、witchのCSSを使用します
@import "./style/witch.scss";
クラスがボックスの場合は、黒いCSSを使用します
@import "./style/black.scss";
.スイッチ{
  位置: 固定;
  上: 4px;
  右: 10px;
  zインデックス: 50;
  幅: 60ピクセル;
  高さ: 60px;
  背景: #fff;
  行の高さ: 60px;
  境界線の半径: 20%;
}
</スタイル>

// テーマの切り替え $bgColor:var(--backgroundColor,rgb(255,255,255));
$fontColor:var(--fontColor,rgb(0,0,0));
$bgmColor:var(--backgroundMColor,rgb(238,238,238));
テーブルカラーを rgb(218,218,218) に設定します。
$borderColor:var(--borderColor,rgb(238,238,238));
$tablesColor:var(--tablesColor,rgb(255,255,255));
$inputColor:var(--inputColor,rgb(255,255,255))

  css: {
    ローダーオプション: {
      // このファイルはテーマ切り替えファイルです sass: {
        prependData: `@import "./src/styles/_variable.scss";`,
      },
    },
  },

// テーマの切り替え const cut = (cutcheack) => {
    document.getElementsByTagName("body")[0].style.setProperty("--backgroundColor", cutcheack ? "#121212" : "#fff");
    document.getElementsByTagName("body")[0].style.setProperty("--fonntColor", cutcheack ? "#cecece" : "#333");
    document.getElementsByTagName("body")[0].style.setProperty("--backgroundMColor", cutcheack ? "#333" : "#eee");
    document.getElementsByTagName("body")[0].style.setProperty("--tableColor", cutcheack ? "#000" : "#d8d8d8");
    document.getElementsByTagName("body")[0].style.setProperty("--tablesColor", cutcheack ? "#222" : "#fff");
    document.getElementsByTagName("body")[0].style.setProperty("--inputColor", cutcheack ? "#666" : "#fff");
    document.getElementsByTagName("body")[0].style.setProperty("--borderColor", cutcheack ? "#666" : "#fff");
};
デフォルトのカットをエクスポートします。

<!-- ホーム -->
<テンプレート>
<div クラス = 'ホーム'>
      <el-switch v-model="cutcheack" active-color="#333" inactive-color="#13ce66" active-text="テーマ" @change="スイッチ"></el-switch>
</div>
</テンプレート>
<スクリプト>
「../../utils/publicStyle.js」から切り取ってインポートします。
エクスポートデフォルト{
  名前: "ホーム",
  データ（） {
    戻る {
      cutcheack: false, //テーマスイッチ};
  },
  メソッド: {
    // 左のナビゲーションを非表示または表示 // テーマを切り替える switches() {
      カット(this.cutcheack);
    },
  },
};
</スクリプト>
<スタイル lang='scss' スコープ>
。家 {
    高さ: 100%;
    幅: 100%;
	背景:$bgColor;
    .el-コンテナ{
        高さ: 100%;
        色:$fontColor;
    }
}
</スタイル>