为方便节日改版，需要可以在web后台管理系统中可以设置颜色，然后app和小程序中通过接口获取颜色，展示对应风格的页面。
环境：uni-app开发的微信小程序，vue仓库用的pinia，并通过sdk打包嵌入进原生app中。
过程： 方法1：uni.scss是uniapp中统一使用的css变量文件，在里面定义一个变量名，并且值为var（--festivals-color-bg）；
/* 节日修改颜色 */$festivals-color-bg: var(--festivals-color-bg);在页面js中从后端获取要改的颜色，然后赋值给全局变量：
window.document.documentElement.style.setProperty( "--festivals-color-bg", "#115dfc" );再在页面css中直接用就可以了：
background: $festivals-color-bg;不可实现原因：
uni-app的 js 代码，web 端运行于浏览器中。非 web 端（包含小程序和 App），Android 平台运行在 v8 引擎中，iOS 平台运行在 iOS 自带的 jscore 引擎中，都没有运行在浏览器或 webview 里。
uni-app 的非web端，一样支持标准 js，支持 if、for 等语法，支持字符串、数字、时间、布尔值、数组、自定义对象等变量类型及各种处理方法。但是不支持 window、document、navigator 等浏览器专用对象。
所以，这种方法，虽然方便简单，但是只适用于打包成H5的情况，小程序并不适用。
方法2：既然没办法把接口拿到的颜色数据存到公共变量里，就转变存储地址，存到pinia中，用到的时候去取。
但是这个方法有个弊端，就是在使用到的页面，都需要绑定一下store里面的css数据。比较麻烦。
1.store/theme.js 中获取并存储主题颜色数据：
import { defineStore } from "pinia";import { ref, type CSSProperties } from "vue";export default defineStore("theme", () => { //默认值 const themeColor = ref({ "--fade-color-bg": "linear-gradient(90deg, #cee9fe 0%, #f1f7ff 50%, #d5e7ff 100%)", "--festival-color": "#9ebdff", "--btn-bg": "#115dfc", }); const getThemeColor = async () => { const res = await themeUsingGET(); //不可行，因为小程序和app运行在 v8 引擎中，没有document // window.document.documentElement.style.setProperty( // "--festivals-color-bg", // "#115dfc" // ); const bgColor = res.data.bg; themeColor.value = { "--fade-color-bg": `linear-gradient(90deg, ${bgColor} 0%, #f1f7ff 50%, ${bgColor} 100%)`, "--festival-color": bgColor, "--btn-bg": res.btn, }; }; return { themeColor, getThemeColor, };});2.App.vue 中在小程序启动时获取数据：
onLaunch(() => { themeStore.getThemeColor();})3.在需要用到主题颜色的地方，最外层view绑定仓库的值：
home.vue
//html: //js import useStore from "@/store"; import { storeToRefs } from "pinia"; const { themeStore } = useStore(); const { themeColor } = storeToRefs(themeStore); //scss //如果有好几个地方用得到，就可以用mixin定义一下，然后下面用include使用即可 @mixin fade-bg { background: var(--fade-color-bg); } //改变uni-ui组件的样式，用:deep :deep(.uni-navbar__header) { @include fade-bg; } .search-bar { @include fade-bg;} //如果有不常用的颜色，直接用var(变量名)即可。 .search-btn { border: 1rpx solid var(--festival-color); } //注：home的子组件们，不用再重新绑定style，直接用即可另外，如果需要动态修改的颜色只在同一个页面的话，不用仓库，直接在js中获取数据，scss用v-bind绑一下就可以了，更简单：background: v-bind(bgc);(bgc是js中的变量名)。
遗憾：因时间紧急，暂时还没有找到更好的方法，如果大家有更好的方法，欢迎一起讨论~