104 lines
2.4 KiB
JavaScript
104 lines
2.4 KiB
JavaScript
var THEMES = [
|
|
{
|
|
id: 'orange',
|
|
name: '活力橙',
|
|
primary: '#FF6B35',
|
|
primaryLight: '#FF8C5A',
|
|
primaryBg: '#FFF3ED',
|
|
primaryRgb: '255,107,53'
|
|
},
|
|
{
|
|
id: 'blue',
|
|
name: '深海蓝',
|
|
primary: '#2979FF',
|
|
primaryLight: '#5C9CFF',
|
|
primaryBg: '#EDF4FF',
|
|
primaryRgb: '41,121,255'
|
|
},
|
|
{
|
|
id: 'green',
|
|
name: '森林绿',
|
|
primary: '#43A047',
|
|
primaryLight: '#6EC072',
|
|
primaryBg: '#EDF7EE',
|
|
primaryRgb: '67,160,71'
|
|
},
|
|
{
|
|
id: 'purple',
|
|
name: '优雅紫',
|
|
primary: '#7E57C2',
|
|
primaryLight: '#A08AD6',
|
|
primaryBg: '#F5F0FA',
|
|
primaryRgb: '126,87,194'
|
|
},
|
|
{
|
|
id: 'pink',
|
|
name: '樱花粉',
|
|
primary: '#EC407A',
|
|
primaryLight: '#F06A9A',
|
|
primaryBg: '#FDEEF3',
|
|
primaryRgb: '236,64,122'
|
|
}
|
|
]
|
|
|
|
var DEFAULT_THEME_ID = 'orange'
|
|
var THEME_KEY = 'app_theme'
|
|
var _lastNavColor = ''
|
|
var _navColorTimer = null
|
|
|
|
function getThemeById(id) {
|
|
return THEMES.find(function (t) { return t.id === id }) || THEMES[0]
|
|
}
|
|
|
|
function getCurrentTheme() {
|
|
var id = wx.getStorageSync(THEME_KEY) || DEFAULT_THEME_ID
|
|
return getThemeById(id)
|
|
}
|
|
|
|
function _setNavBarColor(primary) {
|
|
if (_lastNavColor === primary) return
|
|
_lastNavColor = primary
|
|
if (_navColorTimer) clearTimeout(_navColorTimer)
|
|
_navColorTimer = setTimeout(function () {
|
|
try {
|
|
wx.setNavigationBarColor({
|
|
frontColor: '#ffffff',
|
|
backgroundColor: primary
|
|
})
|
|
} catch (e) {}
|
|
}, 50)
|
|
}
|
|
|
|
function setTheme(id) {
|
|
wx.setStorageSync(THEME_KEY, id)
|
|
var theme = getThemeById(id)
|
|
_setNavBarColor(theme.primary)
|
|
var app = getApp()
|
|
if (app && app.globalData) app.globalData.theme = theme
|
|
return theme
|
|
}
|
|
|
|
function applyThemeToPage(self) {
|
|
var theme = getCurrentTheme()
|
|
self.setData({
|
|
theme: theme,
|
|
themeStyle: '--primary:' + theme.primary + ';--primary-light:' + theme.primaryLight + ';--primary-bg:' + theme.primaryBg + ';--primary-rgb:' + theme.primaryRgb + ';'
|
|
})
|
|
_setNavBarColor(theme.primary)
|
|
}
|
|
|
|
function getThemeStyle(theme) {
|
|
var t = theme || getCurrentTheme()
|
|
return '--primary:' + t.primary + ';--primary-light:' + t.primaryLight + ';--primary-bg:' + t.primaryBg + ';--primary-rgb:' + t.primaryRgb + ';'
|
|
}
|
|
|
|
module.exports = {
|
|
THEMES: THEMES,
|
|
DEFAULT_THEME_ID: DEFAULT_THEME_ID,
|
|
getThemeById: getThemeById,
|
|
getCurrentTheme: getCurrentTheme,
|
|
setTheme: setTheme,
|
|
applyThemeToPage: applyThemeToPage,
|
|
getThemeStyle: getThemeStyle
|
|
}
|