diff --git a/packages/dm-gui-components/src/Communication.tsx b/packages/dm-gui-components/src/Communication.tsx
index 3644b56d2..474948b1a 100644
--- a/packages/dm-gui-components/src/Communication.tsx
+++ b/packages/dm-gui-components/src/Communication.tsx
@@ -13,19 +13,24 @@ import {
     Snackbar,
 } from '@mui/material';
 
-import { Connection } from '@iobroker/adapter-react-v5';
+import { AdminConnection } from '@iobroker/adapter-react-v5';
 import type { ActionBase, ControlBase, ControlState } from '@iobroker/dm-utils/build/types/base';
 import type { DeviceRefresh } from '@iobroker/dm-utils/build/types';
 
 import { getTranslation } from './Utils';
 import JsonConfig from './JsonConfig';
+import type { ThemeName, ThemeType } from '@iobroker/adapter-react-v5/types';
 
 export type CommunicationProps = {
     /* socket object */
-    socket: Connection;
+    socket: AdminConnection;
     /* Instance to communicate with device-manager backend, like `adapterName.X` */
     selectedInstance: string; // adapterName.X
     registerHandler?: (handler: null | ((command: string) => void)) => void;
+    themeName: ThemeName;
+    themeType: ThemeType;
+    isFloatComma: boolean;
+    dateFormat: string;
 }
 
 interface CommunicationForm {
@@ -358,7 +363,7 @@ class Communication<P extends CommunicationProps, S extends CommunicationState>
                     schema={this.state.form.schema}
                     data={this.state.form.data}
                     socket={this.props.socket}
-                    onChange={(data: any) => {
+                    onChange={(data: Record<string, any>) => {
                         console.log('handleFormChange', { data });
                         const form: CommunicationForm | null | undefined = { ...this.state.form };
                         if (form) {
@@ -366,6 +371,10 @@ class Communication<P extends CommunicationProps, S extends CommunicationState>
                             this.setState({ form });
                         }
                     }}
+                    themeName={this.props.themeName}
+                    themeType={this.props.themeType}
+                    isFloatComma={this.props.isFloatComma}
+                    dateFormat={this.props.dateFormat}
                 />
             </DialogContent>
             <DialogActions>
diff --git a/packages/dm-gui-components/src/DeviceCard.tsx b/packages/dm-gui-components/src/DeviceCard.tsx
index 5d86dcc78..565246f4c 100644
--- a/packages/dm-gui-components/src/DeviceCard.tsx
+++ b/packages/dm-gui-components/src/DeviceCard.tsx
@@ -13,9 +13,10 @@ import {
     Close as CloseIcon,
 } from '@mui/icons-material';
 
-import { Utils, Icon, Connection, I18n } from '@iobroker/adapter-react-v5';
+import { Utils, Icon, AdminConnection, I18n } from '@iobroker/adapter-react-v5';
 import type { DeviceDetails, DeviceInfo } from '@iobroker/dm-utils';
 import type { ActionBase, ControlBase, ControlState } from '@iobroker/dm-utils/build/types/base';
+import type { ThemeName, ThemeType } from '@iobroker/adapter-react-v5/types';
 
 import DeviceActionButton from './DeviceActionButton';
 import DeviceControlComponent from './DeviceControl';
@@ -37,7 +38,7 @@ interface DeviceCardProps {
     id: string;
     device: DeviceInfo;
     instanceId: string;
-    socket: Connection;
+    socket: AdminConnection;
     /* Instance, where the images should be uploaded to */
     uploadImagesToInstance?: string;
     deviceHandler: (deviceId: string, action: ActionBase<'api'>, refresh: () => void) => () => void;
@@ -45,6 +46,10 @@ interface DeviceCardProps {
     controlStateHandler: (deviceId: string, control: ControlBase) => () => Promise<ioBroker.State | null>;
     smallCards?: boolean;
     alive: boolean;
+    themeName: ThemeName;
+    themeType: ThemeType;
+    isFloatComma: boolean;
+    dateFormat: string;
 }
 
 function getText(text: ioBroker.StringOrTranslated | undefined): string | undefined {
@@ -156,6 +161,10 @@ class DeviceCard extends Component<DeviceCardProps, DeviceCardState> {
                     schema={this.state.details.schema}
                     data={this.state.data}
                     onChange={(data: Record<string, any>) => this.setState({ data })}
+                    themeName={this.props.themeName}
+                    themeType={this.props.themeType}
+                    isFloatComma={this.props.isFloatComma}
+                    dateFormat={this.props.dateFormat}
                 />
             </DialogContent>
             <DialogActions>
diff --git a/packages/dm-gui-components/src/DeviceList.tsx b/packages/dm-gui-components/src/DeviceList.tsx
index f112132d8..ed143af01 100644
--- a/packages/dm-gui-components/src/DeviceList.tsx
+++ b/packages/dm-gui-components/src/DeviceList.tsx
@@ -258,6 +258,10 @@ export default class DeviceList extends Communication<DeviceListProps, DeviceLis
                 controlHandler={this.controlHandler}
                 controlStateHandler={this.controlStateHandler}
                 socket={this.props.socket}
+                themeName={this.props.themeName}
+                themeType={this.props.themeType}
+                isFloatComma={this.props.isFloatComma}
+                dateFormat={this.props.dateFormat}
             />);
         }
 
diff --git a/packages/dm-gui-components/src/JsonConfig.tsx b/packages/dm-gui-components/src/JsonConfig.tsx
index e25c75aa3..b18caf041 100644
--- a/packages/dm-gui-components/src/JsonConfig.tsx
+++ b/packages/dm-gui-components/src/JsonConfig.tsx
@@ -1,12 +1,17 @@
 import React, { useState } from 'react';
-import { Connection, JsonConfigComponent } from '@iobroker/adapter-react-v5';
+import { AdminConnection, JsonConfigComponent } from '@iobroker/adapter-react-v5';
+import type { ThemeName, ThemeType } from '@iobroker/adapter-react-v5/types';
 
 interface JsonConfigProps {
     instanceId: string;
-    socket: Connection;
+    socket: AdminConnection;
     schema: Record<string, any>;
     data: Record<string, any>;
     onChange: (data: Record<string, any>) => void;
+    themeName: ThemeName;
+    themeType: ThemeType;
+    isFloatComma?: boolean;
+    dateFormat?: string;
 }
 
 export default function JsonConfig(props: JsonConfigProps): React.JSX.Element | null {
@@ -14,7 +19,7 @@ export default function JsonConfig(props: JsonConfigProps): React.JSX.Element |
         instanceId, socket, schema, data, onChange,
     } = props;
     console.log('JsonConfig', props);
-    const [error, setError] = useState();
+    const [error, setError] = useState(false);
 
     if (schema === undefined) {
         return null;
@@ -31,9 +36,12 @@ export default function JsonConfig(props: JsonConfigProps): React.JSX.Element |
             schema={schema}
             data={data}
             onError={setError}
-            // @ts-expect-error types needed
             onChange={_data => onChange(_data)}
             embedded
+            themeName={props.themeName}
+            themeType={props.themeType}
+            isFloatComma={props.isFloatComma === undefined ? this.props.socket.systemConfig.common.isFloatComma : props.isFloatComma}
+            dateFormat={props.dateFormat === undefined ? this.props.socket.systemConfig.common.dateFormat : props.dateFormat}
         />
     </>;