如何解决错位问题？以及如何通过服务端动态控制灰色模式开关请看下文。
注：此方式无法控制非自定义导航栏颜色，如想要实现更完美的效果，请配合使用自定义导航栏。
原生小程序前端设置灰色模式：
wxml
<view class="grayscale"> <view class="content"></view> ...小程序代码</view>
wxss
.grayscale .content,.grayscale text,.grayscale button { -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);}
第三方UI组件/库（如：vant）
.grayscale .van-goods-action,.grayscale .van-submit-bar,.grayscale .van-swipe-cell { -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);}
切忌直接设置
page { filter: grayscale(100%);}
小结：简单来说，就是把样式控制明确到具体的标签。
服务端动态控制接下来讲我们利用小程序的数据预拉取来实现动态开关。
之所以选择使用数据预拉取来控制，是因为灰色模式并不是我们日常运营所需，如果单独封装到一个请求中去，会造成不必要的资源浪费，而且数据预拉取会在用户每次访问小程序的时候都会执行一次，所以能够保证尽可能实时获取到最新的状态，但是因为本身也是异步请求，所以无法100%保证页面加载完之前，就能够实时响应，所以返回的class并没有直接设置在全局变量globalData中，而是先存到本地存储Storage里，当我们在小程序后台关闭数据预拉取后，小程序端便不会再去请求相关接口，这样就做到了随时控制开关的效果了。
实现方式：app.js
App({ onLaunch: async function (options) { // 此处用于服务端鉴权，可根据自身情况设置 wx.setBackgroundFetchToken({ token: 'grayscale' }) wx.onBackgroundFetchData((res) => { if(res.fetchedData && res.fetchedData.class) { wx.setStorageSync('class', res.fetchedData.class); } }) }, globalData: { grayscale: wx.getStorageSync("class").grayscale || "" }})
需要灰色模式的wxml
<view class="{{grayscale}}"> <view class="content"></view> ...小程序代码</view>
需要灰色模式的js
const app = getApp()Page({ data: { grayscale: app.globalData.class.grayscale }})
服务端（node.js）接收到微信推送的get请求后返回数据
ctx.body = { class: { grayscale: "grayscale" }}
PS：以上方案仅供参考，当前方案在微信开发者工具中因缓存问题无法实时控制，iOS端基本上是没什么大问题，如果其它更好的方案可自行处理。
