[轉載]uniapp換膚實現原生導航欄、tabbar和頁面全部替換

通過全局緩存參數設置當前主題：

• 換膚代碼如下

• setSkinme(theme) {uni.setStorageSync("theme", theme)uni.showModal({title: "系統提醒",content: &＃39;切換成功，是否重啟生效？&＃39;,confirmText: "是",cancelText: "否",success: res => {console.log(res.confirm)if (res.confirm) {plus.runtime.restart();}}})},


  在main.js中全局混入主題相關函數

• ?import themeUtil from &＃39;./common/ThemeUtil.js&＃39;Vue.mixin(themeUtil)

• ThemeUtil內容如下

• const styles = require(&＃39;./theme-define.json&＃39;) const themeClass=uni.getStorageSync("theme") || &＃39;theme-light&＃39; //默認是亮主題const getThemeStyles = function() {return styles[themeClass]?styles[themeClass]:styles[&＃39;theme-light&＃39;]}const themeStyle = getThemeStyles()const setThemetheme-dark": {"navigationBarStyle": {"frontColor":"#ffffff","backgroundColor":"#272D3B","animation": {"duration": 0,"timingFunc": "easeIn"}},"tabBarStyle": {"color": " #797D86","selectedColor": "#0c78e4","backgroundColor": "#272D3B","borderStyle": "#151b29"},"COLORS": {"background": "#363D50","front": "#ffffff","border": "#272d3b","light": "#8799a3","activated": "#11FF11","ucharBg":"#363D50"}},"theme-light": {"navigationBarStyle": {"frontColor": "#ffffff","backgroundColor": "#116bc5","animation": {"duration": 0,"timingFunc": "easeIn"}},"tabBarStyle": {"color": "#363d50","selectedColor": "#0c78e4","backgroundColor": "#f1f1f1","borderStyle": "#151b29"},"COLORS": {"background": "#FFFFFF","front": "#666666","border": "#f1f1f1","light": "#666666","activated": "#FF1111","ucharBg":"#116bc5"}}}


  定義全局css的主題相關類，用scss實現可以更好的劃分層級

• .theme-dark {background-color:#272d3b;.bgSelected{background-color: #d94365;}.textSelected{color: #ffffff;}.bgNormal{background-color:#272d3b;}.textNormal{color: #88abda;}.pageBg{background-color: #272d3b;}.compenBg{background-color: #363D50;}}.theme-light {background-color:#ffffff; .bgSelected{background-color: #d94365;}.textSelected{color: #ffffff;}.bgNormal{background-color:#cdcdcd;}.textNormal{color: #ffffff;}.pageBg{background-color: #ffffff;}.compenBg{background-color: #f1f1f1;}}


  在頁面組件中使用主題樣式

• 根節點綁定css類

• 


  子組件中應用主題樣式子組件中在綁定樣式中使用主題顏色子組件中在綁定樣式中使用

• ?

  子組件中在綁定樣式中使用主題顏色

• 


• nvue使用注意

  • 在nvue中需單獨混入ThemeUtil

• 另外注意導航欄的frontColor只能是#FFFFFF和#000000