Vue implementiert mehrere Ideen zum Themenwechsel

// Seitenkomponente <template>
    <div>
        <Komponente: ist = "Themenname" />
    </div>
</Vorlage>
<Skript>
    Standard exportieren{
        Name: "Home",
        Komponenten: {
            Thema1:()=>importieren('@/Thema/Thema1/a'),
            Thema2:()=>importieren('@/Thema/Thema2/a'),
        },
        berechnet:{
            Themenname(){
                gibt `theme${this.$store.state.themeId}` zurück
            }
        }
    }
</Skript>

//Aktion.js
Standard exportieren{
    Name:'Thema1',
    ....
}
<Vorlage>
<div Klasse="Thema1"></div>
</Vorlage>
<Skript>
    Aktion importieren aus „../componentAction/action“
    Aktion.name='Thema1'
    Standardaktion exportieren
</Skript>
<Stilbereich>

</Stil>

// router.js
{
    Pfad: '/theme3',
    Name:'theme3Index',
    Komponente: () => import('../views/theme3/Index.vue'),
    Kinder:[
      {
        Pfad: '/theme3/entry',
        Name: 'theme3Entry',
        Komponente: () => import('../views/theme3/entry.vue'),
      }
     ]
 }
      

<!-- Mitte -->
<Vorlage>
 Den Namen der übergeordneten Klasse dynamisch abrufen und eine übergeordnete Klasse mehrfach definieren <div :class="className">
    <div Klasse="Schalter" v-on:click="ändern()">
      {{ className == "box" ? "Mach das Licht an" : "Mach das Licht aus" }}
    </div>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: "Zentrum",
  Daten() {
    zurückkehren {
      Klassenname: "Box"
    };
  },
  Methoden: {
  // Klasse ändern
    ändern() {
      dieser.Klassenname === "Box"
        ? (dieser.Klassenname = "Boxen") 
        : (dieser.Klassenname = "Box");
    }
  },
};
</Skript>
<style lang="scss">
Wenn die Klasse Box ist, verwenden Sie das CSS dieser Person
@import "./style/witch.scss";
Wenn die Klasse aus Boxen besteht, verwenden Sie schwarzes CSS
@import "./style/black.scss";
.schalten {
  Position: fest;
  oben: 4px;
  rechts: 10px;
  Z-Index: 50;
  Breite: 60px;
  Höhe: 60px;
  Hintergrund: #fff;
  Zeilenhöhe: 60px;
  Randradius: 20 %;
}
</Stil>

// Designwechsel $bgColor:var(--backgroundColor,rgb(255,255,255));
$fontColor:var(--fontColor,rgb(0,0,0));
$bgmColor:var(--backgroundMColor,rgb(238,238,238));
$tableColor:var(--tableColor,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: {
    loaderOptions: {
      // Diese Datei ist die Datei zum Wechseln des Designs sass: {
        prependData: `@import "./src/styles/_variable.scss";`,
      },
    },
  },

// Themenwechsel 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");
};
Standardschnitt exportieren;

<!-- Startseite -->
<Vorlage>
<div Klasse='Startseite'>
      <el-switch v-model="cutcheack" active-color="#333" inactive-color="#13ce66" active-text="Design" @change="switchs"></el-switch>
</div>
</Vorlage>
<Skript>
Schnitt aus "../../utils/publicStyle.js" importieren;
Standard exportieren {
  Name: "Home",
  Daten() {
    zurückkehren {
      cutcheack: false, //Theme wechseln};
  },
  Methoden: {
    //Linke Navigation ein- oder ausblenden //Design wechseln switches() {
      Schnitt(dies.cutcheack);
    },
  },
};
</Skript>
<style lang='scss' scope>
.heim {
    Höhe: 100%;
    Breite: 100 %;
	Hintergrund:$bgColor;
    .el-container {
        Höhe: 100%;
        Farbe:$Schriftfarbe;
    }
}
</Stil>