feat(setting): add dark/light iframe CSS vars

Signed-off-by: codewithvk <vivek.javiya@collabora.com>

Author: codewithvk

src/components/CoolFrame.vue

@@ -13,6 +13,7 @@
 			<input type="hidden" name="wopi_setting_base_url" :value="wopiSettingBaseUrl">
 			<input type="hidden" name="iframe_type" :value="iframeType">
 			<input type="hidden" name="css_variables" :value="cssVariables">
+			<input type="hidden" name="theme" :value="theme">
 			<input type="hidden" name="ui_theme" :value="uiTheme">
 		</form>
 		<iframe :id="iframeName"
@@ -26,7 +27,7 @@
 
 <script>
 
-import { generateCSSVarTokens, getUITheme } from '../helpers/coolParameters.js'
+import { generateSettingCssVarTokens, getCollaboraTheme, getUITheme } from '../helpers/coolParameters.js'
 
 export default {
 	name: 'CoolFrame',
@@ -56,8 +57,9 @@ export default {
 		return {
 			iframeName: 'coolFrameIframe',
 			formAction: '',
-			cssVariables: generateCSSVarTokens(),
+			cssVariables: generateSettingCssVarTokens(),
 			isIframeLoaded: false,
+			theme: getCollaboraTheme(),
 			uiTheme: getUITheme(),
 		}
 	},

src/helpers/coolParameters.js

@@ -47,6 +47,42 @@ const createDataThemeDiv = (elementType, theme) => {
 	document.body.appendChild(element)
 	return element
 }
+
+const mapSettingVariables = (element, mapping) => {
+	let result = ''
+	for (const cssVarKey in mapping) {
+		const computedStyle = window.getComputedStyle(element).getPropertyValue(cssVarKey)
+		if (!computedStyle) continue
+		const tokenName = mapping[cssVarKey]
+		result += tokenName + '=' + computedStyle.trim() + ';'
+	}
+	return result
+}
+
+const generateSettingCssVarTokens = () => {
+	let str = ''
+	const lightElement = createDataThemeDiv('div', 'light')
+	const darkElement = createDataThemeDiv('div', 'dark')
+	const settingVarMapping = {
+		'--color-primary-element': '--co-settings-btn-primary',
+		'--color-primary-element-text': '--co-settings-btn-primary-text',
+		'--color-primary-element-light': '--co-settings-btn-light',
+		'--color-primary-element-light-text': '--co-settings-btn-light-text',
+		'--color-border': '--co-settings-border',
+		'--color-border-dark': '--co--settings-border-contrast',
+		'--color-main-text': '--co-settings-text',
+		'--color-text-maxcontrast': '--co-settings-text-maxcontrast',
+		'--color-main-background': '--co-settings-background',
+		'color-background-hover': '--co-settings-background-hover',
+	}
+	if (getUITheme() === 'dark') {
+		str += mapSettingVariables(darkElement, settingVarMapping)
+	} else {
+		str += mapSettingVariables(lightElement, settingVarMapping)
+	}
+	return str.replace(/["']/g, '\\\'')
+}
+
 const generateCSSVarTokens = () => {
 	/* NC versus COOL */
 	const cssVarMap = {
@@ -169,4 +205,6 @@ export {
 	getCollaboraTheme,
 	generateCSSVarTokens,
 	getUITheme,
+	generateSettingCssVarTokens,
+
 }