Maison > Article > interface Web > Vue utilise des variables CSS pour implémenter la fonction de changement de thème
Vue utilise des variables CSS pour implémenter la fonction de changement de thème
- angryTomavant
- 2019-11-29 16:47:053644parcourir
La gestion des thèmes est souvent visible sur les sites Web. L'idée générale est de séparer les styles CSS liés au thème et de charger les fichiers de style CSS correspondants lorsque l'utilisateur sélectionne le thème. La plupart des navigateurs sont désormais bien compatibles avec les variables CSS et les styles thématiques sont plus faciles à gérer. Récemment, j'ai utilisé des variables CSS pour effectuer une pratique de thématisation dans le projet Vue. Jetons un coup d'œil à l'ensemble du processus.
Adresse du projet Github https://github.com/JofunLiang/vue-project-themable-demo
Adresse de la démo https://jofunliang.github .io/vue-project-themable-demo/
Test de faisabilité
Afin de tester la faisabilité de la méthode, créez un nouveau dossier de thèmes sous le dossier public . Et créez un nouveau fichier default.css dans le dossier themes :
:root {
--color: red;
}Apprentissage recommandé : Tutoriel vidéo CSS
dans Introduisez le style externe theme.css dans le fichier index.html du dossier public, comme suit :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue-skin-peeler-demo</title>
<!-- 引入themes文件夹下的default.css -->
<link rel="stylesheet" type="text/css" href="src/themes/default.css" rel="external nofollow">
</head>
<body>
<noscript>
<strong>We're sorry but vue-skin-peeler-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>Ensuite, utilisez la variable CSS dans Home.vue :
<template>
<div>
<div :class="$style.demo">变红色</div>
</div>
</template>
<script>
export default {
name: 'home'
}
</script>
<style module>
.demo {
color: var(--color);
}
</style>Ensuite, lancez le projet et ouvrez la page dans le navigateur, la page s'affiche normalement.
Remarque : @vue/cli utilisant la balise de lien pour introduire des styles CSS peut signaler une erreur "Nous sommes désolés mais vue-skin-peeler-demo ne fonctionne pas correctement sans l'activation de JavaScript. S'il vous plaît permettez-lui de continuer. Cela est dû au fait que @vue/cli regroupe tous les fichiers du répertoire src via webpack. Par conséquent, les ressources de fichiers statiques doivent être placées dans le dossier public (si la version @vue/cli 2.x est placée dans static).
Implémentation du changement de thème
L'idée du changement de thème ici est de remplacer l'attribut href de la balise de lien. Par conséquent, vous avez besoin. pour écrire une fonction de remplacement dans src Créez un nouveau fichier themes.js dans le répertoire avec le code suivant :
// themes.js
const createLink = (() => {
let $link = null
return () => {
if ($link) {
return $link
}
$link = document.createElement('link')
$link.rel = 'stylesheet'
$link.type = 'text/css'
document.querySelector('head').appendChild($link)
return $link
}
})()
/**
* 主题切换函数
* @param {string} theme - 主题名称, 默认default
* @return {string} 主题名称
*/
const toggleTheme = (theme = 'default') => {
const $link = createLink()
$link.href = `./themes/${theme}.css`
return theme
}
export default toggleThemeEnsuite, créez default.css et dark.css sous le fichier de thèmes Deux fichiers de thème. Créez des variables CSS pour implémenter des thèmes. Pour implémenter le changement de thème avec des variables CSS, veuillez vous référer à un autre article Premier contact avec les variables CSS
Compatibilité
Le navigateur IE et certains navigateurs plus anciens ne prennent pas en charge les variables CSS, par conséquent, nécessite css-vars-ponyfill, un ponyfill qui fournit une prise en charge côté client des propriétés personnalisées CSS (également appelées « variables CSS ») dans les navigateurs anciens et modernes. Puisque vous devez activer la surveillance de la surveillance, vous devez également installer MutationObserver.js.
Installation :
npm install css-vars-ponyfill mutationobserver-shim --save
Ensuite, introduisez-le et utilisez-le dans le fichier thèmes.js :
// themes.js
import 'mutationobserver-shim'
import cssVars from 'css-vars-ponyfill'
cssVars({
watch: true
})
const createLink = (() => {
let $link = null
return () => {
if ($link) {
return $link
}
$link = document.createElement('link')
$link.rel = 'stylesheet'
$link.type = 'text/css'
document.querySelector('head').appendChild($link)
return $link
}
})()
/**
* 主题切换函数
* @param {string} theme - 主题名称, 默认default
* @return {string} 主题名称
*/
const toggleTheme = (theme = 'default') => {
const $link = createLink()
$link.href = `./themes/${theme}.css`
return theme
}
export default toggleThemeAprès avoir allumé la montre, cliquez sur IE 11 navigateur Basculer le commutateur de thème ne fonctionne pas. Par conséquent, si vous réexécutez cssVars() à chaque fois que vous changez de thème, vous ne pouvez toujours pas changer de thème. La raison est que la réexécution de cssVars() après avoir activé la montre n'est pas valide. Finalement, la seule option est d’éteindre la montre puis de la rallumer. Le code theme.js pour changer de thème avec succès est le suivant :
// themes.js
import 'mutationobserver-shim'
import cssVars from 'css-vars-ponyfill'
const createLink = (() => {
let $link = null
return () => {
if ($link) {
return $link
}
$link = document.createElement('link')
$link.rel = 'stylesheet'
$link.type = 'text/css'
document.querySelector('head').appendChild($link)
return $link
}
})()
/**
* 主题切换函数
* @param {string} theme - 主题名称, 默认default
* @return {string} 主题名称
*/
const toggleTheme = (theme = 'default') => {
const $link = createLink()
$link.href = `./themes/${theme}.css`
cssVars({
watch: false
})
setTimeout(function () {
cssVars({
watch: true
})
}, 0)
return theme
}
export default toggleThemePour voir tous les codes, veuillez vous rendre à l'adresse du projet Github.
Mémoriser le thème
Pour implémenter la fonction de mémorisation du thème, l'une consiste à enregistrer le thème sur le serveur et l'autre consiste à utiliser le thème de stockage local . Pour plus de commodité, la méthode de stockage local du thème est principalement utilisée ici, c'est-à-dire que localStorage est utilisé pour stocker le thème. Pour une implémentation spécifique, veuillez visiter l'adresse du projet Github.
Cet article provient du site Web PHP chinois, colonne Tutoriel CSS, bienvenue pour apprendre
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!