hospital-rescue-app-v2/uni_modules/tmx-ui/config/observeAppTheme.uts

import { xProvitae, xConfig } from "./xConfig.uts"
import { xPageStyle} from "../interface.uts"

/**
 * 获取当前缓存的暗黑主题设置。
 */
export function getDarkMode() : 'light' | 'dark' {
	let dark = getOsTheme();
	
	let model = "light" as 'light' | 'dark'
	if (dark == 'dark' || dark == 'light') {
		model = dark
	}

	let customSetings = uni.getStorageSync('tmuiXuiOsThemeSet');
	if (customSetings != null && customSetings != 'auto' && customSetings!='') {
		let dsd = customSetings as string;
		if (dark == 'dark' || dark == 'light') {
			model = dsd as 'light' | 'dark'
		}
	}
	

	return model;
}
/**
 * 是否设置过暗黑主题，即是否有缓存。
 */
export function isCustomTheme() : boolean {

	let issettheme = false
	let customSetings = uni.getStorageSync('tmuiXuiOsThemeSet');
	if (customSetings != null) {
		let str = customSetings as string;
		if (str == 'dark' || str == 'light' || str == 'auto') {
			issettheme = true
		}
	}
	return issettheme;
}

export function getOsTheme() : 'dark' | 'light' {
	
	let defaultModel = 'light' as 'dark' | 'light'
	// #ifdef WEB
	const mq = window.matchMedia('(prefers-color-scheme: dark)');
	
	if (mq.matches) {
		defaultModel = 'dark'
	}
	
	// #endif
	// #ifdef APP
	let str = uni.getSystemInfoSync().osTheme 
	if (str != null) {
		defaultModel = str
	}
	// #endif
	
	return defaultModel;

}

export function WebObserveTheme() {
	// #ifdef WEB
	const mq = window.matchMedia('(prefers-color-scheme: dark)');
	const listener = (e) => {
		
		let customSetings = uni.getStorageSync('tmuiXuiOsThemeSet');
		if (customSetings != 'auto') return;
		if (e.matches) {
			// 系统设置了主题为暗黑
			xConfig.dark = 'dark'
		} else {
			// 系统设置了主题为非暗黑
			xConfig.dark = 'light'
		}
		
		setThemeDarkModel()
	};
	// 添加监听器  
	mq.onchange = listener
	// #endif
	// #ifdef APP
	uni.onOsThemeChange((res : OsThemeChangeResult) => {
		let customSetings = uni.getStorageSync('tmuiXuiOsThemeSet');
		if (customSetings != 'auto') return;
		xConfig.dark = res.osTheme
		setThemeDarkModel()
	})
	// #endif
}

export function setThemeDarkModel(){
	setBgBodyColor();
}

export function setBgBodyColor(){
	let dark = xConfig.dark
	
	
	// #ifdef WEB
	
	let pages = getCurrentPages()
	let page = pages[pages.length-1]
	if(!page?.$getPageStyle||!page) return;
	let pageJson = page.$getPageStyle()
	let newpages = {} as UTSJSONObject
	if(!xProvitae.pageStyle.has(page.route)){
		let oldNavbgColor = ""
		let oldNavTxtColor = ""
		let oldbgColor = ""
		// #ifdef WEB
		oldNavbgColor = pageJson.navigationBarBackgroundColor||""
		oldNavTxtColor = pageJson.navigationBarTextStyle||""
		//h5无法获取背景色 sdk有bug
		oldbgColor = pageJson.backgroundColorContent||""
		// oldbgColor = document.body.style.getPropertyValue("--background-color-content")||""
		// #endif
		xProvitae.pageStyle.set(page.route,{
			path:page.route,
			backgroundColorContent:oldbgColor==null?"":oldbgColor,
			navigationBarBackgroundColor:oldNavbgColor==null?"":oldNavbgColor,
			navigationBarTextStyle:oldNavTxtColor==null?"":oldNavTxtColor
		} as xPageStyle )
	}
	
	let pageStyles = xProvitae.pageStyle.get(page.route) as xPageStyle
	
	document.body.style.setProperty('--header-bg-color',`#ffffff`)
	document.body.style.setProperty('--header-title-color','black')
	let header = document.body.querySelector("style")

	if(!header){
		let cssNode = document.createElement("style")
		cssNode.id="xTmui4.0BodyCssId"
		cssNode.type = 'text/css'
		cssNode.innerHTML  = ".uni-page-head{background-color:var(--header-bg-color) !important;color:var(--header-title-color) !important;}"
		document.body.appendChild(cssNode)
		
	}
	if(dark=='light'){
		let pageBgColor = pageStyles!.backgroundColorContent==""?xConfig.backgroundColorContentLight:pageStyles!.backgroundColorContent
		let navBgColor = pageStyles!.navigationBarBackgroundColor==""?xConfig.navigationBarBackgroundColorLight:pageStyles!.navigationBarBackgroundColor
		let navTextColor = pageStyles!.navigationBarTextStyle==""?xConfig.navigationBarTextStyleLight:pageStyles!.navigationBarTextStyle
		
		pageJson.backgroundColorContent = pageBgColor
		pageJson.navigationBarBackgroundColor = navBgColor
		pageJson.navigationBarTextStyle = navTextColor
		if(pageBgColor){
			document.body.style.setProperty('background-color',pageBgColor)
			document.body.style.setProperty('--background-color-content',pageBgColor)
		}

		document.body.style.setProperty('--header-bg-color',navBgColor)
		document.body.style.setProperty('--header-title-color',navTextColor)
		
	}
	if(dark=='dark'){
		pageJson.backgroundColorContent = xConfig.backgroundColorContentDark
		pageJson.navigationBarBackgroundColor = xConfig.navigationBarBackgroundColorDark
		pageJson.navigationBarTextStyle = xConfig.navigationBarTextStyleDark
		
		document.body.style.setProperty('background-color',xConfig.backgroundColorContentDark)
	
		document.body.style.setProperty('--background-color-content',xConfig.backgroundColorContentDark)
		document.body.style.setProperty('--header-bg-color',xConfig.navigationBarBackgroundColorDark)
		document.body.style.setProperty('--header-title-color',xConfig.navigationBarTextStyleDark)
	
	}
	
	uni.setTabBarStyle({
		backgroundColor:dark=='dark'?xConfig.tabarBackgroundColorDark:xConfig.tabarBackgroundColorLight,
		borderStyle:dark=='dark'?xConfig.tabarBackgroundColorDark:xConfig.tabarBackgroundColorLight,
		fail:(result)=>{}
	} as SetTabBarStyleOptions)
	uni.setNavigationBarColor({
		frontColor:dark=='dark'?'#ffffff':'#000000',
		backgroundColor:pageJson.navigationBarBackgroundColor
	} as SetNavigationBarColorOptions)
	page.$setPageStyle(newpages)
	// #endif
	// #ifdef APP
	uni.setAppTheme({
		theme:dark,
		success(_: SetAppThemeSuccessResult){
			// console.log(uni.getSystemInfoSync().osTheme,'****')
		},
		fail(result: IAppThemeFail){
			console.log(result)
		}
	})
	
	// #endif

}