VueUse

先安裝VueUse

<template><header><div class="left">left</div><div class="center">center</div><div class="right">right</div></header><div><button @click="changeSize(36)">大（36）</button><button @click="changeSize(24)">中（24）</button><button @click="changeSize(12)">小（12）</button></div>
</template><script setup lang="ts">
import { useCssVar } from '@vueuse/core'
const changeSize = (number:number) => {const size = useCssVar('--size')size.value = number + 'px'
}
</script><style scoped lang="less">
:root {--size: 12px;
}
header {display: flex;.left {width: 100px;height: 50px;font-size:  var(--size);background: lightblue;}.center {flex: 1;height: 50px;font-size:  var(--size);background: lightcoral;}.right {width: 100px;height: 50px;font-size:  var(--size);background: lightgoldenrodyellow;}
}
</style>

底層原理

const changeSize = (number:number) => {document.documentElement.style.setProperty('--size',number + 'px')// document.documentElement.style.getPropertyValue('--size')// const size = useCssVar('--size')// size.value = number + 'px'
}

常見問題

發現刷新后失效，此時我們可以保留修改到localStorage中。如果想要全局修改顏色，底層也是一樣的道理。