多主题和多样式实现思路，多主题可以控制样式，多语言切换也可以控制样式的解决办法

默认已经做了多个主题的样式切换了，但是又要做多语言的功能，所以就遇到了问题：不同的语言同样的意思，但是长度就不一样，所以有时候就会超过Box的时候，这个时候就需要调整字体大小来做适配了，所以就要跟着不同的语言切换来做适配。但是已经有了多个主题配置了，语言和主题不是匹配的，是会交叉出现的，所以不能把字体大小的样式放到主题的样式下面。所以怎么解决这个问题呢？

解决办法

1.通过设置全局css变量，当语言切换的时候，修改css变量的值。

比如这里我设置了两个变量，这是全局初始化的时候的值。

当有语言切换的时候，我就可以通过js去修改他们的值，修改的方式：

const { locale, t } = useI18n()

// 监听语言变化
watch(locale, (_) => {
    document.documentElement.style.setProperty('--font-family', '20px')
})

这个可以通过if判断是哪个语言，然后单独设置。

2.把样式配置到多语言的翻译文件中，当切换不同的语言的时候，就可以拿到不同语言下面的字体大小的样式，然后再修改css变量的值。

通过监听语言变化来得到不同的字体大小：

const { locale, t } = useI18n()

// 监听语言变化
watch(locale, (_) => {
    const size = t('style.size')
    console.log('lang style', size)
    document.documentElement.style.setProperty('--font-family', size)
})

有多少个语言就都可以获取到了：