plugins-nextcloud-mirror/richdocuments
1
0
Fork 0
mirror of https://github.com/nextcloud/richdocuments.git synced 2025-12-18 05:20:43 +01:00
Code Projects Releases Activity

Merge pull request #4657 from codewithvk/private/codewithvk/pass_ui_theme_to_new

Browse source 
feat(setting): add dark/light iframe CSS vars
This commit is contained in:
Elizabeth Danzberger 2025-05-29 18:45:12 -04:00 • committed by GitHub
commit ee1485ae3b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 31 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/CoolFrame.vue
View file

@ -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 { generateCSSVarTokens, getCollaboraTheme, getUITheme } from '../helpers/coolParameters.js'
import { languageToBCP47 } from '../helpers/index.js'
import PostMessageService from '../services/postMessage.tsx'
@ -58,8 +59,9 @@ export default {
return {
iframeName: 'coolFrameIframe',
formAction: '',
cssVariables: generateCSSVarTokens(),
cssVariables: generateCSSVarTokens(true),
isIframeLoaded: false,
theme: getCollaboraTheme(),
uiTheme: getUITheme(),
postMessage: null,
}

37
src/helpers/coolParameters.js
View file

@ -47,12 +47,13 @@ const createDataThemeDiv = (elementType, theme) => {
document.body.appendChild(element)
return element
}
const generateCSSVarTokens = () => {
const generateCSSVarTokens = (isSettingIframe = false) => {
/* NC versus COOL */
const cssVarMap = {
'--color-primary-element-text': '--co-primary-text',
'--color-primary-element': '--co-primary-element:--co-text-accent',
'--color-primary-element-light': '--co-primary-light:--co-primary-element-light',
'--color-primary-element-text': '--co-primary-text:--co-settings-btn-primary-text',
'--color-primary-element': '--co-primary-element:--co-text-accent:--co-settings-btn-primary',
'--color-primary-element-light': '--co-primary-light:--co-primary-element-light:--co-settings-btn-light',
'--color-error': '--co-color-error',
'--color-warning': '--co-color-warning',
'--color-success': '--co-color-success',
@ -61,18 +62,31 @@ const generateCSSVarTokens = () => {
'--color-loading-light': '--co-loading-light',
'--color-loading-dark': '--co-loading-dark',
'--color-box-shadow': '--co-box-shadow',
'--color-border': '--co-border',
'--color-border-dark': '--co-border-dark',
'--color-border': '--co-border:--co-settings-border',
'--color-border-dark': '--co-border-dark:--co--settings-border-contrast',
'--border-radius-pill': '--co-border-radius-pill',
'--color-primary-element-light-text': '--co-settings-btn-light-text',
'--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',
}
let str = ''
const lightElement = createDataThemeDiv('div', 'light')
const darkElement = createDataThemeDiv('div', 'dark')
let selectedElement = lightElement
// Note: To style the iframe properly, we send appropriate CSS variables based on the current theme.
// For example, if the current theme is dark, we send values corresponding to the dark theme.
if (isSettingIframe) {
selectedElement = getUITheme() === 'dark' ? darkElement : lightElement
}
try {
for (const cssVarKey in cssVarMap) {
let cStyle = window.getComputedStyle(lightElement).getPropertyValue(cssVarKey)
let cStyle = window.getComputedStyle(selectedElement).getPropertyValue(cssVarKey)
if (!cStyle) {
// try suffix -dark instead
cStyle = window.getComputedStyle(lightElement).getPropertyValue(cssVarKey + '-dark')
cStyle = window.getComputedStyle(selectedElement).getPropertyValue(cssVarKey + '-dark')
}
if (!cStyle) continue // skip if it is not set
const varNames = cssVarMap[cssVarKey].split(':')
@ -84,8 +98,11 @@ const generateCSSVarTokens = () => {
// Skip extracting css vars if we cannot access parent
}
// New dark mode compatible way to hand over our Nextcloud variables in both light/dark to Collabora
const darkElement = createDataThemeDiv('div', 'dark')
if (isSettingIframe) {
lightElement.remove()
darkElement.remove()
return str.replace(/["']/g, '\\\'')
}
const handover = [
'--color-main-background',