feat(app): darkmode

packages/shims-uni-app.d.ts

@@ -22,6 +22,7 @@ declare namespace UniNamespace {
   type ClassObj = Record<string, boolean>
   type StyleObj = Record<string, any>
   type PLATFORM = keyof PagesJsonPagePlatformStyle
+  type ThemeMode = 'light' | 'dark'
 
   type OpenType =
     | 'navigateTo'
@@ -93,6 +94,8 @@ declare namespace UniNamespace {
     appName: string
     appVersion: string
     appVersionCode: string
+    darkmode: Boolean
+    themeConfig: ThemeJson
   }
 
   interface UniRoute {
@@ -289,6 +292,11 @@ declare namespace UniNamespace {
     }
   }
 
+  interface ThemeJson {
+    light?: Record<string, string>
+    dark?: Record<string, string>
+  }
+
   interface TabBarItemBaseOptions {
     pagePath: string
     text: string

packages/uni-app-plus/src/service/api/device/systemInfo.ts

@@ -6,7 +6,7 @@ import { sortObject } from '@dcloudio/uni-shared'
 let systemInfo: any
 let _initSystemInfo = true
 
-function weexGetSystemInfoSync() {
+export function weexGetSystemInfoSync() {
   if (!_initSystemInfo) return
   const { getSystemInfoSync } = weex.requireModule('plus')
   systemInfo = getSystemInfoSync()
@@ -15,6 +15,7 @@ function weexGetSystemInfoSync() {
       systemInfo = JSON.parse(systemInfo)
     } catch (error) {}
   }
+  return systemInfo
 }
 
 export const getDeviceInfo = defineSyncApi<typeof uni.getDeviceInfo>(
@@ -59,6 +60,7 @@ export const getAppBaseInfo = defineSyncApi<typeof uni.getAppBaseInfo>(
       hostVersion,
       hostLanguage,
       osLanguage,
+      osTheme,
       hostTheme,
       appId,
       appName,
@@ -84,7 +86,7 @@ export const getAppBaseInfo = defineSyncApi<typeof uni.getAppBaseInfo>(
       hostSDKVersion: undefined,
       language: osLanguage,
       SDKVersion: '',
-      theme: undefined,
+      theme: hostTheme || osTheme,
       version: plus.runtime.innerVersion!,
     }
   }
@@ -120,7 +122,9 @@ export const getSystemInfoSync = defineSyncApi<typeof uni.getSystemInfoSync>(
 
     delete (_systemInfo as any).screenTop
     delete (_systemInfo as any).enableDebug
-    delete (_systemInfo as any).theme
+    if (!__uniConfig.darkmode) {
+      delete (_systemInfo as any).theme
+    }
 
     return sortObject(_systemInfo)
   }

packages/uni-app-plus/src/service/api/ui/tabBar.ts

@@ -32,7 +32,7 @@ import {
   ShowTabBarRedDotProtocol,
 } from '@dcloudio/uni-api'
 import tabBar from '../../framework/app/tabBar'
-import { removeLeadingSlash } from '@dcloudio/uni-shared'
+import { removeLeadingSlash, normalizeTabBarStyles } from '@dcloudio/uni-shared'
 import { normalizeTabBarRoute } from '@dcloudio/uni-core'
 import { isTabBarPage } from '../../../helpers/plus'
 
@@ -82,14 +82,7 @@ export const setTabBarStyle = defineAsyncApi<API_TYPE_SET_TAB_BAR_STYLE>(
     if (!isTabBarPage()) {
       return reject('not TabBar page')
     }
-    const borderStyles = {
-      black: 'rgba(0,0,0,0.4)',
-      white: 'rgba(255,255,255,0.4)',
-    }
-    const borderStyle = style.borderStyle
-    if (borderStyle && borderStyle in borderStyles) {
-      style.borderStyle = borderStyles[borderStyle as keyof typeof borderStyles]
-    }
+    style.borderStyle = normalizeTabBarStyles(style.borderStyle)
     tabBar.setTabBarStyle(style)
     resolve()
   },

packages/uni-app-plus/src/service/framework/app/tabBar.ts

@@ -7,6 +7,8 @@ import {
   OnTabBarMidButtonTap,
 } from '@dcloudio/uni-api'
 
+import { useTabBarThemeChange } from '../../theme'
+
 let config: UniApp.TabBarOptions
 
 /**
@@ -48,6 +50,15 @@ function setTabBarBadge(
     })
   }
 }
+/**
+ * 动态设置 tabBar 多项的内容
+ */
+function setTabBarItems(tabBarConfig: {
+  list: Partial<UniApp.TabBarItemBaseOptions>[]
+  midButton?: Partial<UniApp.TabBarMidButtonOptions>
+}) {
+  tabBar && tabBar.setTabBarItems(tabBarConfig)
+}
 /**
  * 动态设置 tabBar 某一项的内容
  */
@@ -87,7 +98,7 @@ function setTabBarItem(
     }))
     tabbarItems[index] = item
 
-    tabBar && tabBar.setTabBarItems({ list: tabbarItems })
+    setTabBarItems({ list: tabbarItems })
   } else {
     tabBar && tabBar.setTabBarItem(item)
   }
@@ -150,6 +161,8 @@ export default {
           API_ON_TAB_BAR_MID_BUTTON_TAP
         )
       })
+
+    useTabBarThemeChange(tabBar, options)
   },
   indexOf(page: string) {
     const config = this.config

packages/uni-app-plus/src/service/framework/webview/init/style.ts

 import { formatLog } from '@dcloudio/uni-shared'
 import { parseWebviewStyle } from '../style'
 import { initUniPageUrl, initDebugRefresh } from '../utils'
+import { parseTheme, useWebviewThemeChange } from '../../../theme'
 
 export function initWebviewStyle(
   webview: PlusWebviewWebviewObject,
@@ -8,7 +9,9 @@ export function initWebviewStyle(
   query: Record<string, any>,
   routeMeta: UniApp.PageRouteMeta
 ) {
-  const webviewStyle = parseWebviewStyle(path, routeMeta, webview)
+  const getWebviewStyle = () =>
+    parseWebviewStyle(path, parseTheme(routeMeta), webview)
+  const webviewStyle = getWebviewStyle()
   webviewStyle.uniPageUrl = initUniPageUrl(path, query)
   const isTabBar = !!routeMeta.isTabBar
   if (!routeMeta.isNVue) {
@@ -21,5 +24,8 @@ export function initWebviewStyle(
   if (__DEV__) {
     console.log(formatLog('updateWebview', webviewStyle))
   }
+
+  useWebviewThemeChange(webview, getWebviewStyle)
+
   webview.setStyle(webviewStyle)
 }

packages/uni-app-plus/src/service/framework/webview/nvue.ts

@@ -4,6 +4,7 @@ import { extend } from '@vue/shared'
 import { CreateWebviewOptions } from '.'
 import { parseWebviewStyle } from './style'
 import { genWebviewId, initUniPageUrl } from './utils'
+import { parseTheme, useWebviewThemeChange } from '../../theme'
 
 export function createNVueWebview({
   path,
@@ -11,10 +12,12 @@ export function createNVueWebview({
   routeOptions,
   webviewExtras,
 }: CreateWebviewOptions) {
+  const getCurWebviewStyle = () =>
+    parseWebviewStyle(path, parseTheme(routeOptions.meta), {
+      id: curWebviewId + '',
+    })
   const curWebviewId = genWebviewId()
-  const curWebviewStyle = parseWebviewStyle(path, routeOptions.meta, {
-    id: curWebviewId + '',
-  })
+  const curWebviewStyle = getCurWebviewStyle()
   ;(curWebviewStyle as any).uniPageUrl = initUniPageUrl(path, query)
   if (__DEV__) {
     console.log(
@@ -23,7 +26,8 @@ export function createNVueWebview({
   }
   // android 需要使用
   ;(curWebviewStyle as any).isTab = !!routeOptions.meta.isTabBar
-  return plus.webview.create(
+
+  const webview = plus.webview.create(
     '',
     String(curWebviewId),
     curWebviewStyle,
@@ -36,4 +40,8 @@ export function createNVueWebview({
       webviewExtras
     )
   )
+
+  useWebviewThemeChange(webview, getCurWebviewStyle)
+
+  return webview
 }

packages/uni-app-plus/src/service/framework/webview/style/backgroundColor.ts

@@ -17,4 +17,13 @@ export function initBackgroundColor(
   if (!webviewStyle.backgroundColorTop) {
     webviewStyle.backgroundColorTop = backgroundColor
   }
+  if (!webviewStyle.backgroundColorBottom) {
+    webviewStyle.backgroundColorBottom = backgroundColor
+  }
+  if (!webviewStyle.animationAlphaBGColor) {
+    webviewStyle.animationAlphaBGColor = backgroundColor
+  }
+  if (typeof webviewStyle.webviewBGTransparent === 'undefined') {
+    webviewStyle.webviewBGTransparent = true
+  }
 }

packages/uni-app-plus/src/service/theme.ts

+import { weexGetSystemInfoSync } from './api/device/systemInfo'
+import { normallizeStyles } from '@dcloudio/uni-shared'
+import { parseWebviewStyle } from './framework/webview/style/index'
+import { ON_THEME_CHANGE } from '@dcloudio/uni-shared'
+
+function onThemeChange(callback: UniApp.CallbackFunction) {
+  UniServiceJSBridge.on(ON_THEME_CHANGE, callback)
+}
+
+function offThemeChange(callback: UniApp.CallbackFunction) {
+  UniServiceJSBridge.off(ON_THEME_CHANGE, callback)
+}
+
+export function parseTheme<T extends Object>(pageStyle: T): T {
+  let parsedStyle = {} as T
+  if (__uniConfig.darkmode) {
+    let theme: UniApp.ThemeMode = '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: any,
+  options: UniApp.TabBarOptions
+) {
+  if (__uniConfig.darkmode) {
+    const fn = () => {
+      const {
+        list = [],
+        color,
+        selectedColor,
+        backgroundColor,
+        borderStyle,
+      } = parseTheme(options)
+      tabBar &&
+        tabBar.setTabBarStyle({
+          color,
+          selectedColor,
+          backgroundColor,
+          borderStyle,
+        })
+      tabBar &&
+        tabBar.setTabBarItems({
+          list: list.map((item) => ({
+            iconPath: item.iconPath,
+            selectedIconPath: item.selectedIconPath,
+          })),
+        })
+    }
+
+    // 由于应用首次启动获取不到手机 theme 应用首次启动设置下 tabBar
+    fn()
+
+    onThemeChange(fn)
+  }
+}
+
+export function useWebviewThemeChange(
+  webview: PlusWebviewWebviewObject,
+  getWebviewStyle: () => ReturnType<typeof parseWebviewStyle>
+) {
+  if (__uniConfig.darkmode) {
+    const fn = () => {
+      const {
+        animationAlphaBGColor,
+        background,
+        backgroundColorBottom,
+        backgroundColorTop,
+        titleNView: { backgroundColor, titleColor } = {},
+      } = getWebviewStyle()
+      webview?.setStyle({
+        animationAlphaBGColor,
+        background,
+        backgroundColorBottom,
+        backgroundColorTop,
+        titleNView: {
+          backgroundColor,
+          titleColor,
+        },
+      })
+    }
+
+    onThemeChange(fn)
+
+    webview.addEventListener('close', () => offThemeChange(fn))
+  }
+}

packages/uni-cli-shared/src/constants.ts

@@ -87,3 +87,5 @@ export const KNOWN_ASSET_TYPES = [
 export const DEFAULT_ASSETS_RE = new RegExp(
   `\\.(` + KNOWN_ASSET_TYPES.join('|') + `)(\\?.*)?$`
 )
+
+export const TEXT_STYLE = ['black', 'white']

packages/uni-cli-shared/src/json/app/manifest/index.ts

@@ -12,15 +12,18 @@ import { initLaunchwebview } from './launchwebview'
 import { initCheckSystemWebview } from './checksystemwebview'
 import { initTabBar } from './tabBar'
 import { initI18n } from './i18n'
+import { initTheme } from '../../theme'
 
 export function normalizeAppManifestJson(
   userManifestJson: Record<string, any>,
   pagesJson: UniApp.PagesJson
 ) {
   const manifestJson = initRecursiveMerge(
-    initAppStatusbar(initDefaultManifestJson(), pagesJson),
+    initDefaultManifestJson(),
     userManifestJson
   )
+  pagesJson = initTheme(manifestJson, pagesJson)
+  initAppStatusbar(manifestJson, pagesJson)
   initArguments(manifestJson, pagesJson)
   initPlus(manifestJson, pagesJson)
   initNVue(manifestJson, pagesJson)

packages/uni-cli-shared/src/json/app/manifest/statusbar.ts

@@ -2,12 +2,12 @@ export function initAppStatusbar(
   manifestJson: Record<string, any>,
   pagesJson: UniApp.PagesJson
 ) {
-  const { titleColor = '#000', backgroundColor = '#000000' } =
+  const { titleColor = '#000000', backgroundColor = '#000000' } =
     pagesJson.globalStyle?.navigationBar || {}
 
   manifestJson.plus.statusbar = {
     immersed: 'supportedDevice',
-    style: titleColor === '#000' ? 'dark' : 'light',
+    style: titleColor === '#000000' ? 'dark' : 'light',
     background: backgroundColor,
   }
   return manifestJson

packages/uni-cli-shared/src/json/app/manifest/tabBar.ts

-import { SELECTED_COLOR, TABBAR_HEIGHT } from '@dcloudio/uni-shared'
+import {
+  SELECTED_COLOR,
+  TABBAR_HEIGHT,
+  normalizeTabBarStyles,
+} from '@dcloudio/uni-shared'
 
-const borderStyles = {
-  black: 'rgba(0,0,0,0.4)',
-  white: 'rgba(255,255,255,0.4)',
-}
 export function initTabBar(
   entryPagePath: string,
   manifestJson: Record<string, any>,
@@ -16,11 +16,9 @@ export function initTabBar(
     JSON.stringify(pagesJson.tabBar)
   ) as UniApp.TabBarOptions
 
-  if (tabBar.borderStyle! in borderStyles) {
-    tabBar.borderStyle = borderStyles[
-      tabBar.borderStyle!
-    ] as UniNamespace.TabBarOptions['borderStyle']
-  }
+  tabBar.borderStyle = normalizeTabBarStyles(
+    tabBar.borderStyle
+  ) as UniNamespace.TabBarOptions['borderStyle']
 
   if (!tabBar.selectedColor) {
     tabBar.selectedColor = SELECTED_COLOR

packages/uni-cli-shared/src/json/app/pages/uniConfig.ts

@@ -8,6 +8,7 @@ import {
 } from '../manifest'
 import { parseArguments } from '../manifest/arguments'
 import { getSplashscreen } from '../manifest/splashscreen'
+import { normalizeThemeConfigOnce } from '../../theme'
 
 interface AppUniConfig {
   pages: string[]
@@ -37,6 +38,8 @@ interface AppUniConfig {
   locale?: string
   fallbackLocale?: string
   locales?: Record<string, Record<string, string>>
+  darkmode: boolean
+  themeConfig: UniApp.ThemeJson
 }
 
 export function normalizeAppUniConfig(
@@ -44,6 +47,11 @@ export function normalizeAppUniConfig(
   manifestJson: Record<string, any>
 ) {
   const { autoclose, alwaysShowBeforeRender } = getSplashscreen(manifestJson)
+  const platformConfig =
+    manifestJson[
+      process.env.UNI_PLATFORM === 'app' ? 'app-plus' : process.env.UNI_PLATFORM
+    ] || {}
+  const darkmode = platformConfig.darkmode || false
 
   const config: AppUniConfig = {
     pages: [],
@@ -65,6 +73,8 @@ export function normalizeAppUniConfig(
     networkTimeout: normalizeNetworkTimeout(manifestJson.networkTimeout),
     tabBar: pagesJson.tabBar,
     locales: initLocales(path.join(process.env.UNI_INPUT_DIR, 'locale')),
+    darkmode,
+    themeConfig: normalizeThemeConfigOnce(platformConfig),
   }
   // TODO 待支持分包
   return JSON.stringify(config)

packages/uni-cli-shared/src/json/index.ts

@@ -3,3 +3,4 @@ export * from './app'
 export * from './json'
 export * from './pages'
 export * from './manifest'
+export * from './theme'

packages/uni-cli-shared/src/json/mp/pages.ts

@@ -7,6 +7,8 @@ import { AppJson, NetworkTimeout, PageWindowOptions } from './types'
 import { parseTabBar, parseWindowOptions } from './utils'
 import { normalizePath } from '../../utils'
 import { isMiniProgramProjectJsonKey } from './project'
+import { parseManifestJsonOnce } from '../manifest'
+import { initTheme } from '../theme'
 
 interface ParsePagesJsonOptions {
   debug?: boolean
@@ -65,11 +67,11 @@ function parsePagesJson(
     subpackages: false,
   }
 ) {
-  const appJson: AppJson = {
+  let appJson: AppJson = {
     pages: [],
   }
-  const pageJsons: Record<string, PageWindowOptions> = {}
-  const nvuePages: string[] = []
+  let pageJsons: Record<string, PageWindowOptions> = {}
+  let nvuePages: string[] = []
   // preprocess
   const pagesJson = parseJson(jsonStr, true) as UniApp.PagesJson
   if (!pagesJson) {
@@ -178,6 +180,10 @@ function parsePagesJson(
   if (darkmode) {
     appJson.darkmode = true
     appJson.themeLocation = 'theme.json'
+  } else {
+    const manifestJson = parseManifestJsonOnce(process.env.UNI_INPUT_DIR)
+    appJson = initTheme(manifestJson, appJson)
+    pageJsons = initTheme(manifestJson, pageJsons)
   }
   return {
     appJson,

packages/uni-cli-shared/src/json/pages.ts

 import fs from 'fs'
 import path from 'path'
 import { extend, hasOwn, isArray, isPlainObject } from '@vue/shared'
-import { addLeadingSlash, once, TABBAR_HEIGHT } from '@dcloudio/uni-shared'
+import {
+  addLeadingSlash,
+  once,
+  TABBAR_HEIGHT,
+  normalizeTitleColor,
+} from '@dcloudio/uni-shared'
 import { removeExt, normalizePath } from '../utils'
 import { parseJson } from './json'
 import { isVueSfcFile } from '../vue/utils'
 import { parseVueRequest } from '../vite'
-import { EXTNAME_VUE_RE } from '../constants'
+import { EXTNAME_VUE_RE, TEXT_STYLE } from '../constants'
+import { initTheme } from './theme'
+import { parseManifestJsonOnce } from './manifest'
 
 const pagesCacheSet: Set<string> = new Set()
 
@@ -124,7 +131,9 @@ export function normalizePagesJson(
   pagesCacheSet.clear()
   pagesJson.pages.forEach((page) => pagesCacheSet.add(page.path))
 
-  return pagesJson
+  return process.env.UNI_PLATFORM === 'app'
+    ? pagesJson
+    : initTheme(parseManifestJsonOnce(process.env.UNI_INPUT_DIR), pagesJson)
 }
 
 export function validatePages(pagesJson: Record<string, any>, jsonStr: string) {
@@ -315,8 +324,12 @@ function normalizeNavigationBar(
   }
 
   if (!navigationBar.titleColor && hasOwn(navigationBar, 'textStyle')) {
-    navigationBar.titleColor =
-      (navigationBar as any).textStyle === 'black' ? '#000000' : '#ffffff'
+    const textStyle = (navigationBar as any).textStyle as string
+    if (TEXT_STYLE.includes(textStyle)) {
+      navigationBar.titleColor = normalizeTitleColor(textStyle)
+    } else {
+      navigationBar.titleColor = (navigationBar as any).textStyle
+    }
     delete (navigationBar as any).textStyle
   }
 
@@ -328,12 +341,17 @@ function normalizeNavigationBar(
     delete pageStyle.navigationBarShadow
   }
 
+  const parsedNavigationBar = initTheme(
+    parseManifestJsonOnce(process.env.UNI_INPUT_DIR),
+    navigationBar
+  )
+
   if (isArray(navigationBar.buttons)) {
     navigationBar.buttons = navigationBar.buttons.map((btn) =>
       normalizeNavigationBarButton(
         btn,
         navigationBar.type,
-        navigationBar.titleColor!
+        parsedNavigationBar.titleColor!
       )
     )
   }

packages/uni-cli-shared/src/json/theme.ts

+import fs from 'fs'
+import path from 'path'
+import { parseJson } from './json'
+import { once, normallizeStyles } from '@dcloudio/uni-shared'
+
+export const parseThemeJson = (themeLocation: string = 'theme.json') => {
+  if (!themeLocation) {
+    return {}
+  }
+  themeLocation = path.join(process.env.UNI_INPUT_DIR, themeLocation)
+  if (!fs.existsSync(themeLocation)) {
+    return {}
+  }
+  const jsonStr = fs.readFileSync(themeLocation, 'utf8')
+  return parseJson(jsonStr, true) as UniApp.ThemeJson
+}
+
+export const normalizeThemeConfigOnce = once(
+  (manifestJsonPlatform: Record<string, any> = {}) =>
+    parseThemeJson(manifestJsonPlatform.themeLocation)
+)
+
+export function initTheme<T extends object>(
+  manifestJson: Record<string, any>,
+  pagesJson: T
+) {
+  const platform =
+    process.env.UNI_PLATFORM === 'app' ? 'app-plus' : process.env.UNI_PLATFORM
+  const manifestPlatform = manifestJson['plus'] || manifestJson[platform] || {}
+  const themeConfig = normalizeThemeConfigOnce(manifestPlatform)
+  return normallizeStyles(pagesJson, themeConfig)
+}

packages/uni-core/src/helpers/page.ts

@@ -2,6 +2,7 @@ import {
   addLeadingSlash,
   EventChannel,
   resolveComponentInstance,
+  normallizeStyles,
 } from '@dcloudio/uni-shared'
 import { extend } from '@vue/shared'
 import {
@@ -145,6 +146,10 @@ export function initPageInternalInstance(
   eventChannel?: EventChannel
 ): Page.PageInstance['$page'] {
   const { id, route } = meta
+  const titleColor = normallizeStyles(
+    meta.navigationBar,
+    __uniConfig.themeConfig
+  ).titleColor
   return {
     id: id!,
     path: addLeadingSlash(route),
@@ -154,7 +159,6 @@ export function initPageInternalInstance(
     meta,
     openType,
     eventChannel,
-    statusBarStyle:
-      meta.navigationBar.titleColor === '#000000' ? 'dark' : 'light',
+    statusBarStyle: titleColor === '#000000' ? 'dark' : 'light',
   }
 }

packages/uni-shared/dist/uni-shared.cjs.js

@@ -1381,6 +1381,56 @@ E.prototype = {
 };
 var E$1 = E;
 
+const borderStyles = {
+    black: 'rgba(0,0,0,0.4)',
+    white: 'rgba(255,255,255,0.4)',
+};
+function normalizeTabBarStyles(borderStyle) {
+    if (borderStyle && borderStyle in borderStyles) {
+        return borderStyles[borderStyle];
+    }
+    return borderStyle;
+}
+function normalizeTitleColor(titleColor) {
+    return titleColor === 'black' ? '#000000' : '#ffffff';
+}
+function normallizeStyles(pageStyle, themeConfig, mode = 'light') {
+    const modeStyle = themeConfig[mode];
+    const styles = {};
+    if (!modeStyle) {
+        return pageStyle;
+    }
+    Object.keys(pageStyle).forEach((key) => {
+        let styleItem = pageStyle[key] // Object Array String
+        ;
+        styles[key] = (() => {
+            if (shared.isPlainObject(styleItem)) {
+                return normallizeStyles(styleItem, themeConfig, mode);
+            }
+            else if (shared.isArray(styleItem)) {
+                return styleItem.map((item) => shared.isPlainObject(item)
+                    ? normallizeStyles(item, themeConfig, mode)
+                    : item);
+            }
+            else if (shared.isString(styleItem) && styleItem.startsWith('@')) {
+                const _key = styleItem.replace('@', '');
+                let _styleItem = modeStyle[_key];
+                switch (key) {
+                    case 'titleColor':
+                        _styleItem = normalizeTitleColor(_styleItem);
+                        break;
+                    case 'borderStyle':
+                        _styleItem = normalizeTabBarStyles(_styleItem);
+                        break;
+                }
+                return _styleItem;
+            }
+            return styleItem;
+        })();
+    });
+    return styles;
+}
+
 function getEnvLocale() {
     const { env } = process;
     const lang = env.LC_ALL || env.LC_MESSAGES || env.LANG || env.LANGUAGE;
@@ -1491,6 +1541,7 @@ exports.WXS_MODULES = WXS_MODULES;
 exports.WXS_PROTOCOL = WXS_PROTOCOL;
 exports.addFont = addFont;
 exports.addLeadingSlash = addLeadingSlash;
+exports.borderStyles = borderStyles;
 exports.cache = cache;
 exports.cacheStringFunction = cacheStringFunction;
 exports.callOptions = callOptions;
@@ -1529,7 +1580,10 @@ exports.isRootImmediateHook = isRootImmediateHook;
 exports.isUniLifecycleHook = isUniLifecycleHook;
 exports.normalizeDataset = normalizeDataset;
 exports.normalizeEventType = normalizeEventType;
+exports.normalizeTabBarStyles = normalizeTabBarStyles;
 exports.normalizeTarget = normalizeTarget;
+exports.normalizeTitleColor = normalizeTitleColor;
+exports.normallizeStyles = normallizeStyles;
 exports.onCreateVueApp = onCreateVueApp;
 exports.once = once;
 exports.parseEventName = parseEventName;

packages/uni-shared/dist/uni-shared.d.ts

@@ -81,6 +81,11 @@ export declare const ATTR_V_SHOW = ".vShow";
 
 export declare const BACKGROUND_COLOR = "#f7f7f7";
 
+export declare const borderStyles: {
+    black: string;
+    white: string;
+};
+
 export declare const BUILT_IN_TAG_NAMES: string[];
 
 export declare const BUILT_IN_TAGS: string[];
@@ -322,6 +327,8 @@ export declare function normalizeDataset(el: Element): any;
 
 export declare function normalizeEventType(type: string, options?: AddEventListenerOptions): string;
 
+export declare function normalizeTabBarStyles(borderStyle?: string): string | undefined;
+
 export declare function normalizeTarget(el: HTMLElement): {
     id: string;
     dataset: DOMStringMap & Record<string, any>;
@@ -329,6 +336,10 @@ export declare function normalizeTarget(el: HTMLElement): {
     offsetLeft: number;
 };
 
+export declare function normalizeTitleColor(titleColor: string): "#000000" | "#ffffff";
+
+export declare function normallizeStyles<T extends Object>(pageStyle: T, themeConfig: UniApp.ThemeJson, mode?: UniApp.ThemeMode): T;
+
 export declare interface NVue {
     config: NVueConfigAPI;
     document: NVueDocument;

packages/uni-shared/dist/uni-shared.es.js

@@ -1377,10 +1377,60 @@ E.prototype = {
 };
 var E$1 = E;
 
+const borderStyles = {
+    black: 'rgba(0,0,0,0.4)',
+    white: 'rgba(255,255,255,0.4)',
+};
+function normalizeTabBarStyles(borderStyle) {
+    if (borderStyle && borderStyle in borderStyles) {
+        return borderStyles[borderStyle];
+    }
+    return borderStyle;
+}
+function normalizeTitleColor(titleColor) {
+    return titleColor === 'black' ? '#000000' : '#ffffff';
+}
+function normallizeStyles(pageStyle, themeConfig, mode = 'light') {
+    const modeStyle = themeConfig[mode];
+    const styles = {};
+    if (!modeStyle) {
+        return pageStyle;
+    }
+    Object.keys(pageStyle).forEach((key) => {
+        let styleItem = pageStyle[key] // Object Array String
+        ;
+        styles[key] = (() => {
+            if (isPlainObject(styleItem)) {
+                return normallizeStyles(styleItem, themeConfig, mode);
+            }
+            else if (isArray(styleItem)) {
+                return styleItem.map((item) => isPlainObject(item)
+                    ? normallizeStyles(item, themeConfig, mode)
+                    : item);
+            }
+            else if (isString(styleItem) && styleItem.startsWith('@')) {
+                const _key = styleItem.replace('@', '');
+                let _styleItem = modeStyle[_key];
+                switch (key) {
+                    case 'titleColor':
+                        _styleItem = normalizeTitleColor(_styleItem);
+                        break;
+                    case 'borderStyle':
+                        _styleItem = normalizeTabBarStyles(_styleItem);
+                        break;
+                }
+                return _styleItem;
+            }
+            return styleItem;
+        })();
+    });
+    return styles;
+}
+
 function getEnvLocale() {
     const { env } = process;
     const lang = env.LC_ALL || env.LC_MESSAGES || env.LANG || env.LANGUAGE;
     return (lang && lang.replace(/[.:].*/, '')) || 'en';
 }
 
-export { ACTION_TYPE_ADD_EVENT, ACTION_TYPE_ADD_WXS_EVENT, ACTION_TYPE_CREATE, ACTION_TYPE_EVENT, ACTION_TYPE_INSERT, ACTION_TYPE_PAGE_CREATE, ACTION_TYPE_PAGE_CREATED, ACTION_TYPE_PAGE_SCROLL, ACTION_TYPE_REMOVE, ACTION_TYPE_REMOVE_ATTRIBUTE, ACTION_TYPE_REMOVE_EVENT, ACTION_TYPE_SET_ATTRIBUTE, ACTION_TYPE_SET_TEXT, ATTR_CHANGE_PREFIX, ATTR_CLASS, ATTR_INNER_HTML, ATTR_STYLE, ATTR_TEXT_CONTENT, ATTR_V_OWNER_ID, ATTR_V_RENDERJS, ATTR_V_SHOW, BACKGROUND_COLOR, BUILT_IN_TAGS, BUILT_IN_TAG_NAMES, COMPONENT_NAME_PREFIX, COMPONENT_PREFIX, COMPONENT_SELECTOR_PREFIX, DATA_RE, E$1 as Emitter, EventChannel, EventModifierFlags, I18N_JSON_DELIMITERS, JSON_PROTOCOL, LINEFEED, MINI_PROGRAM_PAGE_RUNTIME_HOOKS, NAVBAR_HEIGHT, NODE_TYPE_COMMENT, NODE_TYPE_ELEMENT, NODE_TYPE_PAGE, NODE_TYPE_TEXT, NVUE_BUILT_IN_TAGS, NVUE_U_BUILT_IN_TAGS, ON_ADD_TO_FAVORITES, ON_APP_ENTER_BACKGROUND, ON_APP_ENTER_FOREGROUND, ON_BACK_PRESS, ON_ERROR, ON_HIDE, ON_INIT, ON_KEYBOARD_HEIGHT_CHANGE, ON_LAUNCH, ON_LOAD, ON_NAVIGATION_BAR_BUTTON_TAP, ON_NAVIGATION_BAR_CHANGE, ON_NAVIGATION_BAR_SEARCH_INPUT_CHANGED, ON_NAVIGATION_BAR_SEARCH_INPUT_CLICKED, ON_NAVIGATION_BAR_SEARCH_INPUT_CONFIRMED, ON_NAVIGATION_BAR_SEARCH_INPUT_FOCUS_CHANGED, ON_PAGE_NOT_FOUND, ON_PAGE_SCROLL, ON_PULL_DOWN_REFRESH, ON_REACH_BOTTOM, ON_REACH_BOTTOM_DISTANCE, ON_READY, ON_RESIZE, ON_SAVE_EXIT_STATE, ON_SHARE_APP_MESSAGE, ON_SHARE_TIMELINE, ON_SHOW, ON_TAB_ITEM_TAP, ON_THEME_CHANGE, ON_UNHANDLE_REJECTION, ON_UNLOAD, ON_WEB_INVOKE_APP_SERVICE, ON_WXS_INVOKE_CALL_METHOD, PLUS_RE, PRIMARY_COLOR, RENDERJS_MODULES, RESPONSIVE_MIN_WIDTH, SCHEME_RE, SELECTED_COLOR, SLOT_DEFAULT_NAME, TABBAR_HEIGHT, TAGS, UNI_SSR, UNI_SSR_DATA, UNI_SSR_GLOBAL_DATA, UNI_SSR_STORE, UNI_SSR_TITLE, UNI_STORAGE_LOCALE, UniBaseNode, UniCommentNode, UniElement, UniEvent, UniInputElement, UniLifecycleHooks, UniNode, UniTextAreaElement, UniTextNode, WEB_INVOKE_APPSERVICE, WXS_MODULES, WXS_PROTOCOL, addFont, addLeadingSlash, cache, cacheStringFunction, callOptions, createIsCustomElement, createRpx2Unit, createUniEvent, customizeEvent, debounce, decode, decodedQuery, defaultMiniProgramRpx2Unit, defaultNVueRpx2Unit, defaultRpx2Unit, dynamicSlotName, forcePatchProp, formatDateTime, formatLog, getCustomDataset, getEnvLocale, getLen, getValueByDataPath, initCustomDatasetOnce, invokeArrayFns, invokeCreateErrorHandler, invokeCreateVueAppHook, isAppNVueNativeTag, isAppNativeTag, isBuiltInComponent, isComponentInternalInstance, isComponentTag, isH5CustomElement, isH5NativeTag, isMiniProgramNativeTag, isRootHook, isRootImmediateHook, isUniLifecycleHook, normalizeDataset, normalizeEventType, normalizeTarget, onCreateVueApp, once, parseEventName, parseNVueDataset, parseQuery, parseUrl, passive, plusReady, removeLeadingSlash, resolveComponentInstance, resolveOwnerEl, resolveOwnerVm, sanitise, scrollTo, sortObject, stringifyQuery, updateElementStyle };
+export { ACTION_TYPE_ADD_EVENT, ACTION_TYPE_ADD_WXS_EVENT, ACTION_TYPE_CREATE, ACTION_TYPE_EVENT, ACTION_TYPE_INSERT, ACTION_TYPE_PAGE_CREATE, ACTION_TYPE_PAGE_CREATED, ACTION_TYPE_PAGE_SCROLL, ACTION_TYPE_REMOVE, ACTION_TYPE_REMOVE_ATTRIBUTE, ACTION_TYPE_REMOVE_EVENT, ACTION_TYPE_SET_ATTRIBUTE, ACTION_TYPE_SET_TEXT, ATTR_CHANGE_PREFIX, ATTR_CLASS, ATTR_INNER_HTML, ATTR_STYLE, ATTR_TEXT_CONTENT, ATTR_V_OWNER_ID, ATTR_V_RENDERJS, ATTR_V_SHOW, BACKGROUND_COLOR, BUILT_IN_TAGS, BUILT_IN_TAG_NAMES, COMPONENT_NAME_PREFIX, COMPONENT_PREFIX, COMPONENT_SELECTOR_PREFIX, DATA_RE, E$1 as Emitter, EventChannel, EventModifierFlags, I18N_JSON_DELIMITERS, JSON_PROTOCOL, LINEFEED, MINI_PROGRAM_PAGE_RUNTIME_HOOKS, NAVBAR_HEIGHT, NODE_TYPE_COMMENT, NODE_TYPE_ELEMENT, NODE_TYPE_PAGE, NODE_TYPE_TEXT, NVUE_BUILT_IN_TAGS, NVUE_U_BUILT_IN_TAGS, ON_ADD_TO_FAVORITES, ON_APP_ENTER_BACKGROUND, ON_APP_ENTER_FOREGROUND, ON_BACK_PRESS, ON_ERROR, ON_HIDE, ON_INIT, ON_KEYBOARD_HEIGHT_CHANGE, ON_LAUNCH, ON_LOAD, ON_NAVIGATION_BAR_BUTTON_TAP, ON_NAVIGATION_BAR_CHANGE, ON_NAVIGATION_BAR_SEARCH_INPUT_CHANGED, ON_NAVIGATION_BAR_SEARCH_INPUT_CLICKED, ON_NAVIGATION_BAR_SEARCH_INPUT_CONFIRMED, ON_NAVIGATION_BAR_SEARCH_INPUT_FOCUS_CHANGED, ON_PAGE_NOT_FOUND, ON_PAGE_SCROLL, ON_PULL_DOWN_REFRESH, ON_REACH_BOTTOM, ON_REACH_BOTTOM_DISTANCE, ON_READY, ON_RESIZE, ON_SAVE_EXIT_STATE, ON_SHARE_APP_MESSAGE, ON_SHARE_TIMELINE, ON_SHOW, ON_TAB_ITEM_TAP, ON_THEME_CHANGE, ON_UNHANDLE_REJECTION, ON_UNLOAD, ON_WEB_INVOKE_APP_SERVICE, ON_WXS_INVOKE_CALL_METHOD, PLUS_RE, PRIMARY_COLOR, RENDERJS_MODULES, RESPONSIVE_MIN_WIDTH, SCHEME_RE, SELECTED_COLOR, SLOT_DEFAULT_NAME, TABBAR_HEIGHT, TAGS, UNI_SSR, UNI_SSR_DATA, UNI_SSR_GLOBAL_DATA, UNI_SSR_STORE, UNI_SSR_TITLE, UNI_STORAGE_LOCALE, UniBaseNode, UniCommentNode, UniElement, UniEvent, UniInputElement, UniLifecycleHooks, UniNode, UniTextAreaElement, UniTextNode, WEB_INVOKE_APPSERVICE, WXS_MODULES, WXS_PROTOCOL, addFont, addLeadingSlash, borderStyles, cache, cacheStringFunction, callOptions, createIsCustomElement, createRpx2Unit, createUniEvent, customizeEvent, debounce, decode, decodedQuery, defaultMiniProgramRpx2Unit, defaultNVueRpx2Unit, defaultRpx2Unit, dynamicSlotName, forcePatchProp, formatDateTime, formatLog, getCustomDataset, getEnvLocale, getLen, getValueByDataPath, initCustomDatasetOnce, invokeArrayFns, invokeCreateErrorHandler, invokeCreateVueAppHook, isAppNVueNativeTag, isAppNativeTag, isBuiltInComponent, isComponentInternalInstance, isComponentTag, isH5CustomElement, isH5NativeTag, isMiniProgramNativeTag, isRootHook, isRootImmediateHook, isUniLifecycleHook, normalizeDataset, normalizeEventType, normalizeTabBarStyles, normalizeTarget, normalizeTitleColor, normallizeStyles, onCreateVueApp, once, parseEventName, parseNVueDataset, parseQuery, parseUrl, passive, plusReady, removeLeadingSlash, resolveComponentInstance, resolveOwnerEl, resolveOwnerVm, sanitise, scrollTo, sortObject, stringifyQuery, updateElementStyle };

packages/uni-shared/src/index.ts

@@ -14,5 +14,6 @@ export * from './EventChannel'
 export * from './lifecycle'
 export * from './onCreateVueApp'
 export { default as Emitter } from './TinyEmitter'
+export * from './theme'
 
 export * from './node/locale'

packages/uni-shared/src/theme.ts

+import { isPlainObject, isString, isArray } from '@vue/shared'
+
+export const borderStyles = {
+  black: 'rgba(0,0,0,0.4)',
+  white: 'rgba(255,255,255,0.4)',
+}
+export function normalizeTabBarStyles(borderStyle?: string) {
+  if (borderStyle && borderStyle in borderStyles) {
+    return borderStyles[borderStyle as keyof typeof borderStyles]
+  }
+  return borderStyle
+}
+
+export function normalizeTitleColor(titleColor: string) {
+  return titleColor === 'black' ? '#000000' : '#ffffff'
+}
+
+export function normallizeStyles<T extends Object>(
+  pageStyle: T,
+  themeConfig: UniApp.ThemeJson,
+  mode: UniApp.ThemeMode = 'light'
+) {
+  const modeStyle = themeConfig[mode]
+  const styles = {} as T
+
+  if (!modeStyle) {
+    return pageStyle
+  }
+
+  Object.keys(pageStyle).forEach((key) => {
+    type Key = keyof typeof pageStyle
+    let styleItem = pageStyle[key as Key] // Object Array String
+
+    ;(styles as any)[key] = (() => {
+      if (isPlainObject(styleItem)) {
+        return normallizeStyles(styleItem as T, themeConfig, mode)
+      } else if (isArray(styleItem)) {
+        return styleItem.map((item) =>
+          isPlainObject(item)
+            ? normallizeStyles(item as T, themeConfig, mode)
+            : item
+        )
+      } else if (isString(styleItem) && styleItem.startsWith('@')) {
+        const _key = styleItem.replace('@', '')
+        let _styleItem = modeStyle[_key]
+        switch (key) {
+          case 'titleColor':
+            _styleItem = normalizeTitleColor(_styleItem)
+            break
+          case 'borderStyle':
+            _styleItem = normalizeTabBarStyles(_styleItem) as string
+            break
+
+          default:
+            break
+        }
+        return _styleItem
+      }
+      return styleItem
+    })()
+  })
+
+  return styles
+}