Cambiar el color del tema en vue

1. Cree un nuevo globalstyle.scss en la carpeta de estilos

 

2. Introducir en App.vue

importar './styles/globalstyle.scss'

3. Definir variables en globalstyle.scss

 :root {      --primary-color: #1890ff; // color de tema predeterminado      --background-color: #fafafa; // color de fondo      --text-color: #333; // color de fuente    }

4. Use variables de estilo en los componentes de Vue y use el atributo CSS var() para hacer referencia

 div { color de fondo: var( --color-primario);}

---

5. Haga clic para cambiar el tema

1. Cree un método de cambio de tema que use las propiedades calculadas de Vue para acceder a las variables de estilo. Utilice la opción de observación de Vue para observar los cambios en las variables del tema.

data() {

 return {
       currentTheme: "default" // 默认主题
     };
   },
   computed: {
     primaryColor() {
       const themes = {
         default: "#1890ff",
         red: "#f5222d",
       };
       return themes[this.currentTheme] || themes.default;
     }
   },
   watch: {
     currentTheme() {
       document.documentElement.style.setProperty(
         "--primary-color",
         this.primaryColor
       );
     }
   },
   methods: {
     switchTheme(theme) {
       this.currentTheme = theme;
     }
   }

2. Use la función de cambio de tema en Vue. Puede crear un botón o menú desplegable para alternar temas y usar variables de estilo en cada componente de vista.

  <button @click="switchTheme('default')">Default Theme</button>
  <button @click="switchTheme('red')">Red Theme</button>