feat: add theme support to AUIApplication and bridge components

Author: marosvolgyiz

apps/sensenet/docs/auiapplications.md

@@ -76,6 +76,7 @@ window.sensenetAdminApp = {
     hash: string
     params: Record<string, string>
   }
+  theme: 'light' | 'dark'
   fetch(input: string, init?: {
     method?: string
     headers?: Record<string, string>
@@ -130,6 +131,21 @@ window.sensenetAdminApp.location.params.userId
 
 The `params` object is built from the parent route query string with `Object.fromEntries(new URLSearchParams(location.search))`.
 
+## Admin UI Theme
+
+The bridge also exposes the current Admin UI theme mode. Use this instead of trying to inspect parent styles from the sandboxed iframe:
+
+```js
+const theme = window.sensenetAdminApp.theme
+document.documentElement.dataset.theme = theme
+
+if (theme === 'dark') {
+  // Render dark-friendly colors.
+}
+```
+
+The value is always either `"light"` or `"dark"`, matching the Admin UI view option.
+
 ## URL Rules
 
 Use repository-relative URLs when possible:

apps/sensenet/src/components/content/AUIApplicationView.tsx

@@ -1,10 +1,15 @@
-import { CircularProgress, createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
+import { CircularProgress, createStyles, makeStyles, Theme, Typography, useTheme } from '@material-ui/core'
 import { ODataFieldParameter } from '@sensenet/client-core'
 import { GenericContent } from '@sensenet/default-content-types'
 import { CurrentContentContext, useLogger, useRepository } from '@sensenet/hooks-react'
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'
-import { AUIApplicationBridgeLocation, createBridgeLocation } from './auiapplication-bridge'
+import {
+  AUIApplicationBridgeLocation,
+  AUIApplicationBridgeTheme,
+  createBridgeLocation,
+  createBridgeTheme,
+} from './auiapplication-bridge'
 
 export const AUI_APPLICATION_CONTENT_TYPE = 'AUIApplication'
 
@@ -67,6 +72,7 @@ const createApplicationDocument = (
   adminUiUrl: string,
   content: AUIApplicationContent | undefined,
   location: AUIApplicationBridgeLocation,
+  theme: AUIApplicationBridgeTheme,
 ) => {
   const baseUrl = getApplicationBaseUrl(repositoryUrl, content?.Path ?? '')
   const bootstrap = `<base href="${escapeAttribute(baseUrl)}">
@@ -145,6 +151,7 @@ const createApplicationDocument = (
       Type: content?.Type,
     })},
     location: ${makeSafeScriptJson(location)},
+    theme: ${makeSafeScriptJson(theme)},
     fetch: (input, init = {}) => {
       const requestId = \`\${Date.now()}-\${Math.random().toString(36).slice(2)}\`;
 
@@ -222,6 +229,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export const AUIApplicationView: React.FC = () => {
   const classes = useStyles()
+  const theme = useTheme<Theme>()
   const frameRef = useRef<HTMLIFrameElement>(null)
   const repository = useRepository()
   const logger = useLogger('AUIApplicationView')
@@ -335,6 +343,7 @@ export const AUIApplicationView: React.FC = () => {
     () => createBridgeLocation(adminUiUrl, routerLocation),
     [adminUiUrl, routerLocation.hash, routerLocation.pathname, routerLocation.search],
   )
+  const bridgeTheme = useMemo(() => createBridgeTheme(theme.palette.type), [theme.palette.type])
   const srcDoc = useMemo(
     () =>
       createApplicationDocument(
@@ -343,8 +352,9 @@ export const AUIApplicationView: React.FC = () => {
         adminUiUrl,
         content,
         bridgeLocation,
+        bridgeTheme,
       ),
-    [adminUiUrl, applicationHtml, bridgeLocation, content, repository.configuration.repositoryUrl],
+    [adminUiUrl, applicationHtml, bridgeLocation, bridgeTheme, content, repository.configuration.repositoryUrl],
   )
 
   if (isLoading) {

apps/sensenet/src/components/content/auiapplication-bridge.ts

@@ -6,6 +6,8 @@ export type AUIApplicationBridgeLocation = {
   params: Record<string, string>
 }
 
+export type AUIApplicationBridgeTheme = 'light' | 'dark'
+
 export const createBridgeLocation = (
   adminUiUrl: string,
   location: Pick<Location, 'pathname' | 'search' | 'hash'>,
@@ -23,3 +25,6 @@ export const createBridgeLocation = (
     params,
   }
 }
+
+export const createBridgeTheme = (theme: string | undefined): AUIApplicationBridgeTheme =>
+  theme === 'dark' ? 'dark' : 'light'