Skip to content

Commit

Permalink
feat(app): darkmode
Browse files Browse the repository at this point in the history
  • Loading branch information
StrivingRabbit committed Oct 26, 2022
1 parent f1a9e2c commit cd01f6b
Show file tree
Hide file tree
Showing 11 changed files with 228 additions and 42 deletions.
20 changes: 12 additions & 8 deletions packages/uni-cli-shared/lib/theme.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,29 +15,33 @@ function parseThemeByJsonStr (jsonStr, keys, theme) {
return jsonStr
}

const themeJsonPath = path.join(process.env.UNI_INPUT_DIR, 'theme.json')

function hasTheme () {
function hasTheme (themeLocation = '') {
const themeJsonPath = path.join(process.env.UNI_INPUT_DIR, themeLocation || 'theme.json')
return fs.existsSync(themeJsonPath)
}

function darkmode () {
return !!(global.uniPlugin.options || {}).darkmode
}

let themeConfig = {}

module.exports = {
getTheme: () => themeConfig,
darkmode,
hasTheme,
initTheme () {
if (!hasTheme()) {
initTheme (manifestJson = {}) {
const platform = process.env.UNI_PLATFORM
const themeLocation = (manifestJson[platform] || {}).themeLocation
if (!hasTheme(themeLocation)) {
return
}
if (darkmode()) {
return
}
try {
const theme = getJson('theme.json', true)
global.uniPlugin.defaultTheme = theme.light
themeConfig = getJson(themeLocation || 'theme.json', true)
global.uniPlugin.defaultTheme = themeConfig.light
} catch (e) {
console.error(e)
}
Expand All @@ -56,4 +60,4 @@ module.exports = {
}
return JSON.parse(parseThemeByJsonStr(JSON.stringify(json), keys, theme))
}
}
}
14 changes: 7 additions & 7 deletions packages/webpack-uni-pages-loader/lib/index-new.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,6 @@ function renameUsingComponents (jsonObj) {
module.exports = function (content, map) {
this.cacheable && this.cacheable()

initTheme()

let isAppView = false
if (this.resourceQuery) {
const params = loaderUtils.parseQuery(this.resourceQuery)
Expand All @@ -68,6 +66,8 @@ module.exports = function (content, map) {
fs.readFileSync(manifestJsonPath, 'utf8')
)

initTheme(manifestJson)

// this.addDependency(pagesJsonJsPath)
const localePath = path.resolve(process.env.UNI_INPUT_DIR, 'locale')
// 路径不存在时会触发 webpack5 差量编译
Expand All @@ -76,7 +76,7 @@ module.exports = function (content, map) {
}
this.addDependency(manifestJsonPath)

let pagesJson = parsePagesJson(content, {
const originalPagesJson = parsePagesJson(content, {
addDependency: file => {
(process.UNI_PAGES_DEPS || (process.UNI_PAGES_DEPS = new Set())).add(
normalizePath(file)
Expand All @@ -85,7 +85,7 @@ module.exports = function (content, map) {
}
})

if (!pagesJson.pages || pagesJson.pages.length === 0) {
if (!originalPagesJson.pages || originalPagesJson.pages.length === 0) {
console.error(uniI18n.__('pagesLoader.pagesNodeCannotNull'))
process.exit(0)
}
Expand All @@ -94,13 +94,13 @@ module.exports = function (content, map) {
const queryParam = loaderUtils.parseQuery(this.resourceQuery)
if (queryParam) {
if (queryParam.type === 'origin-pages-json') {
return `export default ${JSON.stringify(pagesJson)}`
return `export default ${JSON.stringify(originalPagesJson)}`
}
}
}

const pagesJson = parseTheme(originalPagesJson)
if (global.uniPlugin.defaultTheme) {
pagesJson = parseTheme(pagesJson)
this.addDependency(path.resolve(process.env.UNI_INPUT_DIR, 'theme.json'))
}

Expand Down Expand Up @@ -167,7 +167,7 @@ module.exports = function (content, map) {
}

const jsonFiles = require('./platforms/' + process.env.UNI_PLATFORM)(
pagesJson,
process.env.UNI_PLATFORM === 'app-plus' ? originalPagesJson : pagesJson,
manifestJson,
isAppView
)
Expand Down
33 changes: 25 additions & 8 deletions packages/webpack-uni-pages-loader/lib/platforms/app-plus/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@ const {
normalizePath,
getFlexDirection
} = require('@dcloudio/uni-cli-shared')
const {
getTheme,
hasTheme,
parseTheme
} = require('@dcloudio/uni-cli-shared/lib/theme')
const {
compileI18nJsonStr
} = require('@dcloudio/uni-i18n')
Expand Down Expand Up @@ -104,6 +109,16 @@ function updateFileFlag (appJson) {
}
}

function _initTheme (appJson, userManifestJson) {
const manifestJson = userManifestJson[process.env.UNI_PLATFORM] || {}
appJson.darkmode = manifestJson.darkmode || false
const themeLocation = manifestJson.themeLocation || ''
if (themeLocation && hasTheme(themeLocation)) {
appJson.themeConfig = getTheme()
}
return appJson
}

module.exports = function (pagesJson, userManifestJson, isAppView) {
const {
app
Expand All @@ -115,10 +130,12 @@ module.exports = function (pagesJson, userManifestJson, isAppView) {

const appJson = app.content

_initTheme(appJson, userManifestJson)

const {
navigationBarTextStyle = 'white',
navigationBarBackgroundColor = '#000000'
} = appJson.window || {}
} = parseTheme(appJson.window) || {}

const TABBAR_HEIGHT = 50

Expand Down Expand Up @@ -279,7 +296,7 @@ module.exports = function (pagesJson, userManifestJson, isAppView) {
// 安全区配置 仅包含 tabBar 的时候才配置
if (!manifestJson.plus.safearea) {
manifestJson.plus.safearea = {
background: appJson.tabBar.backgroundColor || '#FFFFFF',
background: parseTheme(appJson.tabBar).backgroundColor || '#FFFFFF',
bottom: {
offset: 'auto'
}
Expand Down Expand Up @@ -470,7 +487,7 @@ module.exports = function (pagesJson, userManifestJson, isAppView) {
if (args && (args.path || args.pathName)) {
entryPagePath = conditionPagePath = args.path || args.pathName
}
} catch (e) {}
} catch (e) { }
}

let isNVueEntryPage = appJson.nvue && appJson.nvue.entryPagePath
Expand Down Expand Up @@ -521,7 +538,7 @@ module.exports = function (pagesJson, userManifestJson, isAppView) {
pagesJson.tabBar.list.length
) {
const tabBar = (manifestJson.plus.tabBar = Object.assign({},
pagesJson.tabBar
parseTheme(pagesJson.tabBar)
))
const borderStyles = {
black: 'rgba(0,0,0,0.4)',
Expand All @@ -546,9 +563,9 @@ module.exports = function (pagesJson, userManifestJson, isAppView) {
const item = tabBar.list.find(
page =>
page.pagePath ===
(process.env.UNI_USING_NATIVE
? appJson.entryPagePath
: entryPagePath)
(process.env.UNI_USING_NATIVE
? appJson.entryPagePath
: entryPagePath)
)
if (item) {
tabBar.child = ['lauchwebview']
Expand Down Expand Up @@ -634,7 +651,7 @@ function initUniStatistics (manifestJson) {
let spaces = []
try {
spaces = JSON.parse(process.env.UNI_CLOUD_PROVIDER)
} catch (e) {}
} catch (e) { }
if (!Array.isArray(spaces) || !spaces.length) {
return
}
Expand Down
8 changes: 7 additions & 1 deletion packages/webpack-uni-pages-loader/lib/util.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,13 @@ const alipayWindowMap = {
navigationBarShadow: 'navigationBarShadow',
titleImage: 'titleImage',
transparentTitle: 'transparentTitle',
titlePenetrate: 'titlePenetrate'
titlePenetrate: 'titlePenetrate',
barButtonTheme: {
key: 'navigationBarTextStyle',
transform: function (value) {

}
}
}

const alipayTabBarMap = {
Expand Down
13 changes: 8 additions & 5 deletions src/platforms/app-plus/service/api/device/system.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,16 @@ import { sortObject } from 'uni-shared'
let systemInfo = {}
let _initSystemInfo = true

function weexGetSystemInfoSync () {
export function weexGetSystemInfoSync () {
if (!_initSystemInfo) return
const { getSystemInfoSync } = weex.requireModule('plus')
systemInfo = getSystemInfoSync()
if (typeof systemInfo === 'string') {
try {
systemInfo = JSON.parse(systemInfo)
} catch (error) {}
} catch (error) { }
}
return systemInfo
}

export function getDeviceInfo () {
Expand Down Expand Up @@ -47,7 +48,7 @@ export function getAppBaseInfo () {
hostPackageName, hostName, osLanguage,
hostVersion, hostLanguage, hostTheme,
appId, appName, appVersion, appVersionCode,
appWgtVersion
appWgtVersion, osTheme
} = systemInfo

const appLanguage = uni
Expand All @@ -73,7 +74,7 @@ export function getAppBaseInfo () {
hostFontSizeSetting: undefined,
language: osLanguage,
SDKVersion: '',
theme: undefined,
theme: hostTheme || osTheme,
version: plus.runtime.innerVersion
}
}
Expand Down Expand Up @@ -112,7 +113,9 @@ export function getSystemInfo () {

delete _systemInfo.screenTop
delete _systemInfo.enableDebug
delete _systemInfo.theme
if (!__uniConfig.darkmode) {
delete _systemInfo.theme
}

return sortObject(_systemInfo)
}
16 changes: 12 additions & 4 deletions src/platforms/app-plus/service/framework/tab-bar.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import {
requireNativePlugin
} from '../bridge'

import { useTabBarThemeChange } from './theme'

const TABBAR_HEIGHT = 50
let config

Expand All @@ -17,6 +19,10 @@ let visible = true

let tabBar

function setTabBarItems (style) {
tabBar && tabBar.setTabBarItems(style)
}

/**
* 设置角标
* @param {string} type
Expand Down Expand Up @@ -60,9 +66,9 @@ function setTabBarItem (index, text, iconPath, selectedIconPath, visible, iconfo
}
if (selectedIconPath) {
item.selectedIconPath = getRealPath(selectedIconPath)
}
if (iconfont !== undefined) {
item.iconfont = iconfont
}
if (iconfont !== undefined) {
item.iconfont = iconfont
}
if (visible !== undefined) {
item.visible = config.list[index].visible = visible
Expand All @@ -71,7 +77,7 @@ function setTabBarItem (index, text, iconPath, selectedIconPath, visible, iconfo
const tabbarItems = config.list.map(item => ({ visible: item.visible }))
tabbarItems[index] = item

tabBar && tabBar.setTabBarItems({ list: tabbarItems })
setTabBarItems({ list: tabbarItems })
} else {
tabBar && tabBar.setTabBarItem(item)
}
Expand Down Expand Up @@ -128,6 +134,8 @@ export default {
tabBar && tabBar.onMidButtonClick(() => {
publish('onTabBarMidButtonTap', {})
})

useTabBarThemeChange(tabBar, options)
},
indexOf (page) {
const config = this.config
Expand Down
80 changes: 80 additions & 0 deletions src/platforms/app-plus/service/framework/theme.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import { normallizeStyles } from 'uni-shared'
import { weexGetSystemInfoSync } from '../api/device/system'

const ON_THEME_CHANGE = 'api.onThemeChange'

function onThemeChange (callback = () => { }) {
UniServiceJSBridge.on(ON_THEME_CHANGE, callback)
}

function offThemeChange (callback = () => { }) {
UniServiceJSBridge.off(ON_THEME_CHANGE, callback)
}

export function parseTheme (pageStyle) {
let parsedStyle = {}
if (__uniConfig.darkmode) {
let theme = 'light'
const systemInfo = weexGetSystemInfoSync()
if (systemInfo) {
theme = systemInfo.hostTheme || systemInfo.osTheme
}
parsedStyle = normallizeStyles(pageStyle, __uniConfig.themeConfig, theme)
}
return __uniConfig.darkmode ? parsedStyle : pageStyle
}

export function useTabBarThemeChange (tabBar, options) {
if (__uniConfig.darkmode) {
const fn = () => {
const {
list = [], color, selectedColor,
backgroundColor, borderStyle
} = parseTheme(options, false)
const tabbarStyle = {
color,
selectedColor,
backgroundColor,
borderStyle
}

tabBar && tabBar.setTabBarStyle(tabbarStyle)
tabBar && tabBar.setTabBarItems({
list: list.map((item) => ({
iconPath: item.iconPath,
selectedIconPath: item.selectedIconPath
}))
})
// TODO 暂未实现
// tabBar && tabBar.setAnimationAlphaBGColor(parseTheme((__uniConfig.window || {}).backgroundColor, false))
}

fn()

onThemeChange(fn)
}
}

export function useWebviewThemeChange (webview, getWebviewStyle) {
if (__uniConfig.darkmode) {
const fn = () => {
const {
animationAlphaBGColor, background,
backgroundColorBottom, backgroundColorTop,
titleNView: { backgroundColor, titleColor } = {}
} = getWebviewStyle()
webview && webview.setStyle({
animationAlphaBGColor,
background,
backgroundColorBottom,
backgroundColorTop,
titleNView: {
backgroundColor,
titleColor
}
})
}
onThemeChange(fn)
webview.addEventListener('close', () => offThemeChange(fn))
}
}
Loading

0 comments on commit cd01f6b

Please sign in to comment.