@iobroker/gui-components 8.0.2 → 10.0.2

package/build/Components/UploadImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadImage.js","sourceRoot":"./src/","sources":["Components/UploadImage.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { Component, createRef, type JSX } from 'react';\r\nimport Dropzone, { type FileRejection } from 'react-dropzone';\r\nimport { Cropper, type ReactCropperElement } from 'react-cropper';\r\n\r\nimport { Menu, MenuItem, Tooltip, IconButton } from '@mui/material';\r\n\r\nimport { Close as IconClose, Crop as CropIcon, UploadFileOutlined as UploadIcon } from '@mui/icons-material';\r\n\r\nimport { I18n } from '../i18n';\r\nimport { Icon } from './Icon';\r\n\r\n// import 'cropperjs/dist/cropper.css';\r\nconst cropperStyles = `\r\n/*!\r\n * Cropper.js v1.5.12\r\n * https://fengyuanchen.github.io/cropperjs\r\n *\r\n * Copyright 2015-present Chen Fengyuan\r\n * Released under the MIT license\r\n *\r\n * Date: 2021-06-12T08:00:11.623Z\r\n */\r\n\r\n.cropper-container {\r\n  direction: ltr;\r\n  font-size: 0;\r\n  line-height: 0;\r\n  position: relative;\r\n  -ms-touch-action: none;\r\n  touch-action: none;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n\r\n.cropper-container img {\r\n  display: block;\r\n  height: 100%;\r\n  image-orientation: 0deg;\r\n  max-height: none !important;\r\n  max-width: none !important;\r\n  min-height: 0 !important;\r\n  min-width: 0 !important;\r\n  width: 100%;\r\n}\r\n\r\n.cropper-wrap-box,\r\n.cropper-canvas,\r\n.cropper-drag-box,\r\n.cropper-crop-box,\r\n.cropper-modal {\r\n  bottom: 0;\r\n  left: 0;\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0;\r\n}\r\n\r\n.cropper-wrap-box,\r\n.cropper-canvas {\r\n  overflow: hidden;\r\n}\r\n\r\n.cropper-drag-box {\r\n  background-color: #fff;\r\n  opacity: 0;\r\n}\r\n\r\n.cropper-modal {\r\n  background-color: #000;\r\n  opacity: 0.5;\r\n}\r\n\r\n.cropper-view-box {\r\n  display: block;\r\n  height: 100%;\r\n  outline: 1px solid #39f;\r\n  outline-color: rgba(51, 153, 255, 0.75);\r\n  overflow: hidden;\r\n  width: 100%;\r\n}\r\n\r\n.cropper-dashed {\r\n  border: 0 dashed #eee;\r\n  display: block;\r\n  opacity: 0.5;\r\n  position: absolute;\r\n}\r\n\r\n.cropper-dashed.dashed-h {\r\n  border-bottom-width: 1px;\r\n  border-top-width: 1px;\r\n  height: calc(100% / 3);\r\n  left: 0;\r\n  top: calc(100% / 3);\r\n  width: 100%;\r\n}\r\n\r\n.cropper-dashed.dashed-v {\r\n  border-left-width: 1px;\r\n  border-right-width: 1px;\r\n  height: 100%;\r\n  left: calc(100% / 3);\r\n  top: 0;\r\n  width: calc(100% / 3);\r\n}\r\n\r\n.cropper-center {\r\n  display: block;\r\n  height: 0;\r\n  left: 50%;\r\n  opacity: 0.75;\r\n  position: absolute;\r\n  top: 50%;\r\n  width: 0;\r\n}\r\n\r\n.cropper-center::before,\r\n.cropper-center::after {\r\n  background-color: #eee;\r\n  content: ' ';\r\n  display: block;\r\n  position: absolute;\r\n}\r\n\r\n.cropper-center::before {\r\n  height: 1px;\r\n  left: -3px;\r\n  top: 0;\r\n  width: 7px;\r\n}\r\n\r\n.cropper-center::after {\r\n  height: 7px;\r\n  left: 0;\r\n  top: -3px;\r\n  width: 1px;\r\n}\r\n\r\n.cropper-face,\r\n.cropper-line,\r\n.cropper-point {\r\n  display: block;\r\n  height: 100%;\r\n  opacity: 0.1;\r\n  position: absolute;\r\n  width: 100%;\r\n}\r\n\r\n.cropper-face {\r\n  background-color: #fff;\r\n  left: 0;\r\n  top: 0;\r\n}\r\n\r\n.cropper-line {\r\n  background-color: #39f;\r\n}\r\n\r\n.cropper-line.line-e {\r\n  cursor: ew-resize;\r\n  right: -3px;\r\n  top: 0;\r\n  width: 5px;\r\n}\r\n\r\n.cropper-line.line-n {\r\n  cursor: ns-resize;\r\n  height: 5px;\r\n  left: 0;\r\n  top: -3px;\r\n}\r\n\r\n.cropper-line.line-w {\r\n  cursor: ew-resize;\r\n  left: -3px;\r\n  top: 0;\r\n  width: 5px;\r\n}\r\n\r\n.cropper-line.line-s {\r\n  bottom: -3px;\r\n  cursor: ns-resize;\r\n  height: 5px;\r\n  left: 0;\r\n}\r\n\r\n.cropper-point {\r\n  background-color: #39f;\r\n  height: 5px;\r\n  opacity: 0.75;\r\n  width: 5px;\r\n}\r\n\r\n.cropper-point.point-e {\r\n  cursor: ew-resize;\r\n  margin-top: -3px;\r\n  right: -3px;\r\n  top: 50%;\r\n}\r\n\r\n.cropper-point.point-n {\r\n  cursor: ns-resize;\r\n  left: 50%;\r\n  margin-left: -3px;\r\n  top: -3px;\r\n}\r\n\r\n.cropper-point.point-w {\r\n  cursor: ew-resize;\r\n  left: -3px;\r\n  margin-top: -3px;\r\n  top: 50%;\r\n}\r\n\r\n.cropper-point.point-s {\r\n  bottom: -3px;\r\n  cursor: s-resize;\r\n  left: 50%;\r\n  margin-left: -3px;\r\n}\r\n\r\n.cropper-point.point-ne {\r\n  cursor: nesw-resize;\r\n  right: -3px;\r\n  top: -3px;\r\n}\r\n\r\n.cropper-point.point-nw {\r\n  cursor: nwse-resize;\r\n  left: -3px;\r\n  top: -3px;\r\n}\r\n\r\n.cropper-point.point-sw {\r\n  bottom: -3px;\r\n  cursor: nesw-resize;\r\n  left: -3px;\r\n}\r\n\r\n.cropper-point.point-se {\r\n  bottom: -3px;\r\n  cursor: nwse-resize;\r\n  height: 20px;\r\n  opacity: 1;\r\n  right: -3px;\r\n  width: 20px;\r\n}\r\n\r\n@media (min-width: 768px) {\r\n  .cropper-point.point-se {\r\n    height: 15px;\r\n    width: 15px;\r\n  }\r\n}\r\n\r\n@media (min-width: 992px) {\r\n  .cropper-point.point-se {\r\n    height: 10px;\r\n    width: 10px;\r\n  }\r\n}\r\n\r\n@media (min-width: 1200px) {\r\n  .cropper-point.point-se {\r\n    height: 5px;\r\n    opacity: 0.75;\r\n    width: 5px;\r\n  }\r\n}\r\n\r\n.cropper-point.point-se::before {\r\n  background-color: #39f;\r\n  bottom: -50%;\r\n  content: ' ';\r\n  display: block;\r\n  height: 200%;\r\n  opacity: 0;\r\n  position: absolute;\r\n  right: -50%;\r\n  width: 200%;\r\n}\r\n\r\n.cropper-invisible {\r\n  opacity: 0;\r\n}\r\n\r\n.cropper-bg {\r\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');\r\n}\r\n\r\n.cropper-hide {\r\n  display: block;\r\n  height: 0;\r\n  position: absolute;\r\n  width: 0;\r\n}\r\n\r\n.cropper-hidden {\r\n  display: none !important;\r\n}\r\n\r\n.cropper-move {\r\n  cursor: move;\r\n}\r\n\r\n.cropper-crop {\r\n  cursor: crosshair;\r\n}\r\n\r\n.cropper-disabled .cropper-drag-box,\r\n.cropper-disabled .cropper-face,\r\n.cropper-disabled .cropper-line,\r\n.cropper-disabled .cropper-point {\r\n  cursor: not-allowed;\r\n}\r\n`;\r\n\r\nconst styles: Record<string, React.CSSProperties> = {\r\n    dropZone: {\r\n        width: '100%',\r\n        height: 100,\r\n        position: 'relative',\r\n    },\r\n    dropZoneEmpty: {},\r\n    image: {\r\n        objectFit: 'contain',\r\n        margin: 'auto',\r\n        display: 'flex',\r\n        width: '100%',\r\n        height: '100%',\r\n    },\r\n\r\n    uploadDiv: {\r\n        position: 'relative',\r\n        width: '100%',\r\n        height: 300,\r\n        opacity: 0.9,\r\n        marginTop: 30,\r\n        cursor: 'pointer',\r\n        outline: 'none',\r\n    },\r\n    uploadDivDragging: {\r\n        opacity: 1,\r\n        background: 'rgba(128,255,128,0.1)',\r\n    },\r\n\r\n    uploadCenterDiv: {\r\n        margin: 5,\r\n        border: '3px dashed grey',\r\n        borderRadius: 5,\r\n        width: 'calc(100% - 10px)',\r\n        height: 'calc(100% - 10px)',\r\n        position: 'relative',\r\n        display: 'flex',\r\n    },\r\n    uploadCenterIcon: {\r\n        paddingTop: 10,\r\n        width: 48,\r\n        height: 48,\r\n    },\r\n    uploadCenterText: {\r\n        fontSize: 16,\r\n    },\r\n    uploadCenterTextAndIcon: {\r\n        textAlign: 'center',\r\n        position: 'absolute',\r\n        top: 0,\r\n        bottom: 0,\r\n        left: 0,\r\n        right: 0,\r\n        display: 'flex',\r\n        flexDirection: 'column',\r\n        alignItems: 'center',\r\n        justifyContent: 'center',\r\n    },\r\n    disabledOpacity: {\r\n        opacity: 0.3,\r\n        cursor: 'default',\r\n    },\r\n    buttonRemoveWrapper: {\r\n        position: 'absolute',\r\n        zIndex: 222,\r\n        right: 0,\r\n    },\r\n    buttonCropWrapper: {\r\n        position: 'absolute',\r\n        zIndex: 222,\r\n        right: 0,\r\n        top: 50,\r\n    },\r\n    error: {\r\n        border: '2px solid red',\r\n        boxSizing: 'border-box',\r\n    },\r\n};\r\n\r\ninterface UploadImageProps {\r\n    maxSize?: number;\r\n    disabled?: boolean;\r\n    crop?: boolean;\r\n    error?: boolean;\r\n    onChange: (base64: string) => void | undefined;\r\n    icon: string | null;\r\n    removeIconFunc: () => void | null;\r\n    accept?: Record<string, string[]>;\r\n}\r\n\r\ninterface UploadImageState {\r\n    uploadFile: boolean | 'dragging';\r\n    anchorEl: HTMLElement | null;\r\n    cropHandler: boolean;\r\n}\r\n\r\nexport class UploadImage extends Component<UploadImageProps, UploadImageState> {\r\n    private readonly cropperRef: React.RefObject<ReactCropperElement>;\r\n\r\n    constructor(props: UploadImageProps) {\r\n        super(props);\r\n\r\n        this.state = {\r\n            uploadFile: false,\r\n            anchorEl: null,\r\n            cropHandler: false,\r\n        };\r\n        this.cropperRef = createRef();\r\n\r\n        if (!window.document.getElementById('cropper-style-json-component')) {\r\n            const style = window.document.createElement('style');\r\n            style.setAttribute('id', 'cropper-style-json-component');\r\n            style.innerHTML = cropperStyles;\r\n            window.document.head.appendChild(style);\r\n        }\r\n    }\r\n\r\n    onDrop(acceptedFiles: File[]): void {\r\n        const onChange = this.props.onChange;\r\n        const maxSize = this.props.maxSize || 10 * 1024;\r\n\r\n        const file = acceptedFiles[0];\r\n        const reader = new FileReader();\r\n\r\n        reader.onabort = () => console.log('file reading was aborted');\r\n        reader.onerror = () => console.log('file reading has failed');\r\n        reader.onload = () => {\r\n            if (!file || !file.name) {\r\n                return;\r\n            }\r\n            const parts = file.name?.split('.');\r\n            let ext = parts?.length ? `image/${parts.pop()?.toLowerCase()}` : 'image/jpeg';\r\n            if (ext === 'image/jpg') {\r\n                ext = 'image/jpeg';\r\n            } else if (ext.includes('svg')) {\r\n                ext = 'image/svg+xml';\r\n            }\r\n            if (file.size > maxSize) {\r\n                window.alert(I18n.t('ra_File is too big. Max %sk allowed. Try use SVG.', Math.round(maxSize / 1024)));\r\n            } else {\r\n                const base64 = `data:${ext};base64,${btoa(\r\n                    new Uint8Array(reader.result as ArrayBufferLike).reduce(\r\n                        (data, byte) => data + String.fromCharCode(byte),\r\n                        '',\r\n                    ),\r\n                )}`;\r\n\r\n                if (onChange) {\r\n                    onChange(base64);\r\n                } else {\r\n                    console.log(base64);\r\n                }\r\n            }\r\n        };\r\n        reader.readAsArrayBuffer(file);\r\n    }\r\n\r\n    render(): JSX.Element {\r\n        const { disabled, icon, removeIconFunc, error, crop, onChange } = this.props;\r\n        const maxSize = this.props.maxSize || 10 * 1024;\r\n        let accept = this.props.accept || { 'image/*': [] };\r\n        const { uploadFile, anchorEl, cropHandler } = this.state;\r\n\r\n        // covert '\"image/png\"' to { 'image/*': [] }\r\n        if (typeof accept === 'string') {\r\n            accept = { [accept]: [] };\r\n        } else if (Array.isArray(accept)) {\r\n            const result: Record<string, string[]> = {};\r\n            accept.forEach(item => {\r\n                result[item] = [];\r\n            });\r\n            accept = result;\r\n        }\r\n\r\n        return (\r\n            <Dropzone\r\n                disabled={!!disabled || cropHandler}\r\n                key=\"dropzone\"\r\n                multiple={false}\r\n                accept={accept}\r\n                maxSize={maxSize}\r\n                onDragEnter={() => this.setState({ uploadFile: 'dragging' })}\r\n                onDragLeave={() => this.setState({ uploadFile: true })}\r\n                onDrop={(acceptedFiles: File[], errors: FileRejection[]) => {\r\n                    this.setState({ uploadFile: false });\r\n                    if (!acceptedFiles.length) {\r\n                        window.alert(errors?.[0]?.errors?.[0]?.message || I18n.t('ra_Cannot upload'));\r\n                    } else {\r\n                        this.onDrop(acceptedFiles);\r\n                    }\r\n                }}\r\n            >\r\n                {({ getRootProps, getInputProps }) => (\r\n                    <div\r\n                        style={{\r\n                            ...styles.uploadDiv,\r\n                            ...(uploadFile === 'dragging' ? styles.uploadDivDragging : undefined),\r\n                            ...styles.dropZone,\r\n                            ...(disabled ? styles.disabledOpacity : undefined),\r\n                            ...(!icon ? styles.dropZoneEmpty : undefined),\r\n                        }}\r\n                        {...getRootProps()}\r\n                    >\r\n                        <input {...getInputProps()} />\r\n                        <div style={{ ...styles.uploadCenterDiv, ...(error ? styles.error : undefined) }}>\r\n                            {!icon ? (\r\n                                <div style={styles.uploadCenterTextAndIcon}>\r\n                                    <UploadIcon style={styles.uploadCenterIcon} />\r\n                                    <div style={styles.uploadCenterText}>\r\n                                        {uploadFile === 'dragging'\r\n                                            ? I18n.t('ra_Drop file here')\r\n                                            : I18n.t(\r\n                                                  'ra_Place your files here or click here to open the browse dialog',\r\n                                              )}\r\n                                    </div>\r\n                                </div>\r\n                            ) : (\r\n                                removeIconFunc &&\r\n                                !cropHandler && (\r\n                                    <div style={styles.buttonRemoveWrapper}>\r\n                                        <Tooltip\r\n                                            title={I18n.t('ra_Clear')}\r\n                                            slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}\r\n                                        >\r\n                                            <IconButton\r\n                                                size=\"large\"\r\n                                                onClick={e => {\r\n                                                    removeIconFunc && removeIconFunc();\r\n                                                    e.stopPropagation();\r\n                                                }}\r\n                                            >\r\n                                                <IconClose />\r\n                                            </IconButton>\r\n                                        </Tooltip>\r\n                                    </div>\r\n                                )\r\n                            )}\r\n                            {icon && crop && (\r\n                                <div style={styles.buttonCropWrapper}>\r\n                                    <Tooltip\r\n                                        title={I18n.t('ra_Crop')}\r\n                                        slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}\r\n                                    >\r\n                                        <IconButton\r\n                                            size=\"large\"\r\n                                            onClick={e => {\r\n                                                if (!cropHandler) {\r\n                                                    this.setState({ cropHandler: true });\r\n                                                } else {\r\n                                                    this.setState({ anchorEl: e.currentTarget });\r\n                                                }\r\n                                                e.stopPropagation();\r\n                                            }}\r\n                                        >\r\n                                            <CropIcon color={cropHandler ? 'primary' : 'inherit'} />\r\n                                        </IconButton>\r\n                                    </Tooltip>\r\n                                    <Menu\r\n                                        anchorEl={anchorEl}\r\n                                        keepMounted\r\n                                        open={Boolean(anchorEl)}\r\n                                        onClose={() => this.setState({ anchorEl: null })}\r\n                                    >\r\n                                        <MenuItem\r\n                                            onClick={() =>\r\n                                                this.setState({ anchorEl: null, cropHandler: false }, () => {\r\n                                                    const imageElement = this.cropperRef?.current?.cropper;\r\n                                                    if (imageElement) {\r\n                                                        if (onChange) {\r\n                                                            onChange(imageElement.getCroppedCanvas().toDataURL());\r\n                                                        } else {\r\n                                                            console.log(imageElement.getCroppedCanvas().toDataURL());\r\n                                                        }\r\n                                                    }\r\n                                                })\r\n                                            }\r\n                                        >\r\n                                            {I18n.t('ra_Save')}\r\n                                        </MenuItem>\r\n                                        <MenuItem onClick={() => this.setState({ anchorEl: null, cropHandler: false })}>\r\n                                            {I18n.t('ra_Close')}\r\n                                        </MenuItem>\r\n                                    </Menu>\r\n                                </div>\r\n                            )}\r\n                            {icon && !cropHandler ? (\r\n                                <Icon\r\n                                    src={icon}\r\n                                    style={styles.image}\r\n                                    alt=\"icon\"\r\n                                />\r\n                            ) : null}\r\n\r\n                            {icon && crop && cropHandler ? (\r\n                                <Cropper\r\n                                    ref={this.cropperRef}\r\n                                    style={styles.image}\r\n                                    src={icon}\r\n                                    initialAspectRatio={1}\r\n                                    viewMode={1}\r\n                                    guides={false}\r\n                                    minCropBoxHeight={10}\r\n                                    minCropBoxWidth={10}\r\n                                    background={false}\r\n                                    checkOrientation={false}\r\n                                />\r\n                            ) : null}\r\n                        </div>\r\n                    </div>\r\n                )}\r\n            </Dropzone>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"UploadImage.js","sourceRoot":"./src/","sources":["Components/UploadImage.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { Component, createRef, type JSX } from 'react';\nimport Dropzone, { type FileRejection } from 'react-dropzone';\nimport { Cropper, type ReactCropperElement } from 'react-cropper';\n\nimport { Menu, MenuItem, Tooltip, IconButton } from '@mui/material';\n\nimport { Close as IconClose, Crop as CropIcon, UploadFileOutlined as UploadIcon } from '@mui/icons-material';\n\nimport { I18n } from '../i18n';\nimport { Icon } from './Icon';\n\n// import 'cropperjs/dist/cropper.css';\nconst cropperStyles = `\n/*!\n * Cropper.js v1.5.12\n * https://fengyuanchen.github.io/cropperjs\n *\n * Copyright 2015-present Chen Fengyuan\n * Released under the MIT license\n *\n * Date: 2021-06-12T08:00:11.623Z\n */\n\n.cropper-container {\n  direction: ltr;\n  font-size: 0;\n  line-height: 0;\n  position: relative;\n  -ms-touch-action: none;\n  touch-action: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.cropper-container img {\n  display: block;\n  height: 100%;\n  image-orientation: 0deg;\n  max-height: none !important;\n  max-width: none !important;\n  min-height: 0 !important;\n  min-width: 0 !important;\n  width: 100%;\n}\n\n.cropper-wrap-box,\n.cropper-canvas,\n.cropper-drag-box,\n.cropper-crop-box,\n.cropper-modal {\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.cropper-wrap-box,\n.cropper-canvas {\n  overflow: hidden;\n}\n\n.cropper-drag-box {\n  background-color: #fff;\n  opacity: 0;\n}\n\n.cropper-modal {\n  background-color: #000;\n  opacity: 0.5;\n}\n\n.cropper-view-box {\n  display: block;\n  height: 100%;\n  outline: 1px solid #39f;\n  outline-color: rgba(51, 153, 255, 0.75);\n  overflow: hidden;\n  width: 100%;\n}\n\n.cropper-dashed {\n  border: 0 dashed #eee;\n  display: block;\n  opacity: 0.5;\n  position: absolute;\n}\n\n.cropper-dashed.dashed-h {\n  border-bottom-width: 1px;\n  border-top-width: 1px;\n  height: calc(100% / 3);\n  left: 0;\n  top: calc(100% / 3);\n  width: 100%;\n}\n\n.cropper-dashed.dashed-v {\n  border-left-width: 1px;\n  border-right-width: 1px;\n  height: 100%;\n  left: calc(100% / 3);\n  top: 0;\n  width: calc(100% / 3);\n}\n\n.cropper-center {\n  display: block;\n  height: 0;\n  left: 50%;\n  opacity: 0.75;\n  position: absolute;\n  top: 50%;\n  width: 0;\n}\n\n.cropper-center::before,\n.cropper-center::after {\n  background-color: #eee;\n  content: ' ';\n  display: block;\n  position: absolute;\n}\n\n.cropper-center::before {\n  height: 1px;\n  left: -3px;\n  top: 0;\n  width: 7px;\n}\n\n.cropper-center::after {\n  height: 7px;\n  left: 0;\n  top: -3px;\n  width: 1px;\n}\n\n.cropper-face,\n.cropper-line,\n.cropper-point {\n  display: block;\n  height: 100%;\n  opacity: 0.1;\n  position: absolute;\n  width: 100%;\n}\n\n.cropper-face {\n  background-color: #fff;\n  left: 0;\n  top: 0;\n}\n\n.cropper-line {\n  background-color: #39f;\n}\n\n.cropper-line.line-e {\n  cursor: ew-resize;\n  right: -3px;\n  top: 0;\n  width: 5px;\n}\n\n.cropper-line.line-n {\n  cursor: ns-resize;\n  height: 5px;\n  left: 0;\n  top: -3px;\n}\n\n.cropper-line.line-w {\n  cursor: ew-resize;\n  left: -3px;\n  top: 0;\n  width: 5px;\n}\n\n.cropper-line.line-s {\n  bottom: -3px;\n  cursor: ns-resize;\n  height: 5px;\n  left: 0;\n}\n\n.cropper-point {\n  background-color: #39f;\n  height: 5px;\n  opacity: 0.75;\n  width: 5px;\n}\n\n.cropper-point.point-e {\n  cursor: ew-resize;\n  margin-top: -3px;\n  right: -3px;\n  top: 50%;\n}\n\n.cropper-point.point-n {\n  cursor: ns-resize;\n  left: 50%;\n  margin-left: -3px;\n  top: -3px;\n}\n\n.cropper-point.point-w {\n  cursor: ew-resize;\n  left: -3px;\n  margin-top: -3px;\n  top: 50%;\n}\n\n.cropper-point.point-s {\n  bottom: -3px;\n  cursor: s-resize;\n  left: 50%;\n  margin-left: -3px;\n}\n\n.cropper-point.point-ne {\n  cursor: nesw-resize;\n  right: -3px;\n  top: -3px;\n}\n\n.cropper-point.point-nw {\n  cursor: nwse-resize;\n  left: -3px;\n  top: -3px;\n}\n\n.cropper-point.point-sw {\n  bottom: -3px;\n  cursor: nesw-resize;\n  left: -3px;\n}\n\n.cropper-point.point-se {\n  bottom: -3px;\n  cursor: nwse-resize;\n  height: 20px;\n  opacity: 1;\n  right: -3px;\n  width: 20px;\n}\n\n@media (min-width: 768px) {\n  .cropper-point.point-se {\n    height: 15px;\n    width: 15px;\n  }\n}\n\n@media (min-width: 992px) {\n  .cropper-point.point-se {\n    height: 10px;\n    width: 10px;\n  }\n}\n\n@media (min-width: 1200px) {\n  .cropper-point.point-se {\n    height: 5px;\n    opacity: 0.75;\n    width: 5px;\n  }\n}\n\n.cropper-point.point-se::before {\n  background-color: #39f;\n  bottom: -50%;\n  content: ' ';\n  display: block;\n  height: 200%;\n  opacity: 0;\n  position: absolute;\n  right: -50%;\n  width: 200%;\n}\n\n.cropper-invisible {\n  opacity: 0;\n}\n\n.cropper-bg {\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');\n}\n\n.cropper-hide {\n  display: block;\n  height: 0;\n  position: absolute;\n  width: 0;\n}\n\n.cropper-hidden {\n  display: none !important;\n}\n\n.cropper-move {\n  cursor: move;\n}\n\n.cropper-crop {\n  cursor: crosshair;\n}\n\n.cropper-disabled .cropper-drag-box,\n.cropper-disabled .cropper-face,\n.cropper-disabled .cropper-line,\n.cropper-disabled .cropper-point {\n  cursor: not-allowed;\n}\n`;\n\nconst styles: Record<string, React.CSSProperties> = {\n    dropZone: {\n        width: '100%',\n        height: 100,\n        position: 'relative',\n    },\n    dropZoneEmpty: {},\n    image: {\n        objectFit: 'contain',\n        margin: 'auto',\n        display: 'flex',\n        width: '100%',\n        height: '100%',\n    },\n\n    uploadDiv: {\n        position: 'relative',\n        width: '100%',\n        height: 300,\n        opacity: 0.9,\n        marginTop: 30,\n        cursor: 'pointer',\n        outline: 'none',\n    },\n    uploadDivDragging: {\n        opacity: 1,\n        background: 'rgba(128,255,128,0.1)',\n    },\n\n    uploadCenterDiv: {\n        margin: 5,\n        border: '3px dashed grey',\n        borderRadius: 5,\n        width: 'calc(100% - 10px)',\n        height: 'calc(100% - 10px)',\n        position: 'relative',\n        display: 'flex',\n    },\n    uploadCenterIcon: {\n        paddingTop: 10,\n        width: 48,\n        height: 48,\n    },\n    uploadCenterText: {\n        fontSize: 16,\n    },\n    uploadCenterTextAndIcon: {\n        textAlign: 'center',\n        position: 'absolute',\n        top: 0,\n        bottom: 0,\n        left: 0,\n        right: 0,\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n    disabledOpacity: {\n        opacity: 0.3,\n        cursor: 'default',\n    },\n    buttonRemoveWrapper: {\n        position: 'absolute',\n        zIndex: 222,\n        right: 0,\n    },\n    buttonCropWrapper: {\n        position: 'absolute',\n        zIndex: 222,\n        right: 0,\n        top: 50,\n    },\n    error: {\n        border: '2px solid red',\n        boxSizing: 'border-box',\n    },\n};\n\ninterface UploadImageProps {\n    maxSize?: number;\n    disabled?: boolean;\n    crop?: boolean;\n    error?: boolean;\n    onChange: (base64: string) => void | undefined;\n    icon: string | null;\n    removeIconFunc: () => void | null;\n    accept?: Record<string, string[]>;\n}\n\ninterface UploadImageState {\n    uploadFile: boolean | 'dragging';\n    anchorEl: HTMLElement | null;\n    cropHandler: boolean;\n}\n\nexport class UploadImage extends Component<UploadImageProps, UploadImageState> {\n    private readonly cropperRef: React.RefObject<ReactCropperElement | null>;\n\n    constructor(props: UploadImageProps) {\n        super(props);\n\n        this.state = {\n            uploadFile: false,\n            anchorEl: null,\n            cropHandler: false,\n        };\n        this.cropperRef = createRef();\n\n        if (!window.document.getElementById('cropper-style-json-component')) {\n            const style = window.document.createElement('style');\n            style.setAttribute('id', 'cropper-style-json-component');\n            style.innerHTML = cropperStyles;\n            window.document.head.appendChild(style);\n        }\n    }\n\n    onDrop(acceptedFiles: File[]): void {\n        const onChange = this.props.onChange;\n        const maxSize = this.props.maxSize || 10 * 1024;\n\n        const file = acceptedFiles[0];\n        const reader = new FileReader();\n\n        reader.onabort = () => console.log('file reading was aborted');\n        reader.onerror = () => console.log('file reading has failed');\n        reader.onload = () => {\n            if (!file || !file.name) {\n                return;\n            }\n            const parts = file.name?.split('.');\n            let ext = parts?.length ? `image/${parts.pop()?.toLowerCase()}` : 'image/jpeg';\n            if (ext === 'image/jpg') {\n                ext = 'image/jpeg';\n            } else if (ext.includes('svg')) {\n                ext = 'image/svg+xml';\n            }\n            if (file.size > maxSize) {\n                window.alert(I18n.t('ra_File is too big. Max %sk allowed. Try use SVG.', Math.round(maxSize / 1024)));\n            } else {\n                const base64 = `data:${ext};base64,${btoa(\n                    new Uint8Array(reader.result as ArrayBufferLike).reduce(\n                        (data, byte) => data + String.fromCharCode(byte),\n                        '',\n                    ),\n                )}`;\n\n                if (onChange) {\n                    onChange(base64);\n                } else {\n                    console.log(base64);\n                }\n            }\n        };\n        reader.readAsArrayBuffer(file);\n    }\n\n    render(): JSX.Element {\n        const { disabled, icon, removeIconFunc, error, crop, onChange } = this.props;\n        const maxSize = this.props.maxSize || 10 * 1024;\n        let accept = this.props.accept || { 'image/*': [] };\n        const { uploadFile, anchorEl, cropHandler } = this.state;\n\n        // covert '\"image/png\"' to { 'image/*': [] }\n        if (typeof accept === 'string') {\n            accept = { [accept]: [] };\n        } else if (Array.isArray(accept)) {\n            const result: Record<string, string[]> = {};\n            accept.forEach(item => {\n                result[item] = [];\n            });\n            accept = result;\n        }\n\n        return (\n            <Dropzone\n                disabled={!!disabled || cropHandler}\n                key=\"dropzone\"\n                multiple={false}\n                accept={accept}\n                maxSize={maxSize}\n                onDragEnter={() => this.setState({ uploadFile: 'dragging' })}\n                onDragLeave={() => this.setState({ uploadFile: true })}\n                onDrop={(acceptedFiles: File[], errors: FileRejection[]) => {\n                    this.setState({ uploadFile: false });\n                    if (!acceptedFiles.length) {\n                        window.alert(errors?.[0]?.errors?.[0]?.message || I18n.t('ra_Cannot upload'));\n                    } else {\n                        this.onDrop(acceptedFiles);\n                    }\n                }}\n            >\n                {({ getRootProps, getInputProps }) => (\n                    <div\n                        style={{\n                            ...styles.uploadDiv,\n                            ...(uploadFile === 'dragging' ? styles.uploadDivDragging : undefined),\n                            ...styles.dropZone,\n                            ...(disabled ? styles.disabledOpacity : undefined),\n                            ...(!icon ? styles.dropZoneEmpty : undefined),\n                        }}\n                        {...getRootProps()}\n                    >\n                        <input {...getInputProps()} />\n                        <div style={{ ...styles.uploadCenterDiv, ...(error ? styles.error : undefined) }}>\n                            {!icon ? (\n                                <div style={styles.uploadCenterTextAndIcon}>\n                                    <UploadIcon style={styles.uploadCenterIcon} />\n                                    <div style={styles.uploadCenterText}>\n                                        {uploadFile === 'dragging'\n                                            ? I18n.t('ra_Drop file here')\n                                            : I18n.t(\n                                                  'ra_Place your files here or click here to open the browse dialog',\n                                              )}\n                                    </div>\n                                </div>\n                            ) : (\n                                removeIconFunc &&\n                                !cropHandler && (\n                                    <div style={styles.buttonRemoveWrapper}>\n                                        <Tooltip\n                                            title={I18n.t('ra_Clear')}\n                                            slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}\n                                        >\n                                            <IconButton\n                                                size=\"large\"\n                                                onClick={e => {\n                                                    removeIconFunc && removeIconFunc();\n                                                    e.stopPropagation();\n                                                }}\n                                            >\n                                                <IconClose />\n                                            </IconButton>\n                                        </Tooltip>\n                                    </div>\n                                )\n                            )}\n                            {icon && crop && (\n                                <div style={styles.buttonCropWrapper}>\n                                    <Tooltip\n                                        title={I18n.t('ra_Crop')}\n                                        slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}\n                                    >\n                                        <IconButton\n                                            size=\"large\"\n                                            onClick={e => {\n                                                if (!cropHandler) {\n                                                    this.setState({ cropHandler: true });\n                                                } else {\n                                                    this.setState({ anchorEl: e.currentTarget });\n                                                }\n                                                e.stopPropagation();\n                                            }}\n                                        >\n                                            <CropIcon color={cropHandler ? 'primary' : 'inherit'} />\n                                        </IconButton>\n                                    </Tooltip>\n                                    <Menu\n                                        anchorEl={anchorEl}\n                                        keepMounted\n                                        open={Boolean(anchorEl)}\n                                        onClose={() => this.setState({ anchorEl: null })}\n                                    >\n                                        <MenuItem\n                                            onClick={() =>\n                                                this.setState({ anchorEl: null, cropHandler: false }, () => {\n                                                    const imageElement = this.cropperRef?.current?.cropper;\n                                                    if (imageElement) {\n                                                        if (onChange) {\n                                                            onChange(imageElement.getCroppedCanvas().toDataURL());\n                                                        } else {\n                                                            console.log(imageElement.getCroppedCanvas().toDataURL());\n                                                        }\n                                                    }\n                                                })\n                                            }\n                                        >\n                                            {I18n.t('ra_Save')}\n                                        </MenuItem>\n                                        <MenuItem onClick={() => this.setState({ anchorEl: null, cropHandler: false })}>\n                                            {I18n.t('ra_Close')}\n                                        </MenuItem>\n                                    </Menu>\n                                </div>\n                            )}\n                            {icon && !cropHandler ? (\n                                <Icon\n                                    src={icon}\n                                    style={styles.image}\n                                    alt=\"icon\"\n                                />\n                            ) : null}\n\n                            {icon && crop && cropHandler ? (\n                                <Cropper\n                                    ref={this.cropperRef}\n                                    style={styles.image}\n                                    src={icon}\n                                    initialAspectRatio={1}\n                                    viewMode={1}\n                                    guides={false}\n                                    minCropBoxHeight={10}\n                                    minCropBoxWidth={10}\n                                    background={false}\n                                    checkOrientation={false}\n                                />\n                            ) : null}\n                        </div>\n                    </div>\n                )}\n            </Dropzone>\n        );\n    }\n}\n"]}

package/build/Components/Utils.d.ts

@@ -5,6 +5,7 @@
  *
  */
 import React from 'react';
+import type { Types } from '@iobroker/type-detector';
 import type { IobTheme, ThemeName, ThemeType } from '../types';
 type SmartNameObject = {
     [lang in ioBroker.Languages]?: string;
@@ -157,8 +158,21 @@ export declare class Utils {
     static removeSmartName(obj: ioBroker.StateObject | ioBroker.EnumObject, instanceId: string, noCommon?: boolean): void;
     /**
      * Update the smart name of a state.
+     *
+     * @deprecated Use updateSmartNameEx instead
      */
     static updateSmartName(obj: ioBroker.StateObject | ioBroker.EnumObject, newSmartName: ioBroker.StringOrTranslated | undefined, byON: string | null | undefined, smartType: string | null | undefined, instanceId: string, noCommon?: boolean): void;
+    /**
+     * Update the smart name of a state.
+     */
+    static updateSmartNameEx(obj: ioBroker.StateObject | ioBroker.EnumObject, options: {
+        smartName?: ioBroker.StringOrTranslated;
+        byON?: string | null;
+        smartType?: Types | null;
+        instanceId: string;
+        noCommon?: boolean;
+        noAutoDetect?: boolean;
+    }): void;
     /**
      * Disable the smart name of a state.
      */
@@ -189,7 +203,7 @@ export declare class Utils {
      * @param themeType 'light' or 'dark'
      * @param invert If true, the dark theme has a light color in the control, or the dark theme has a light color in the control
      */
-    static getInvertedColor(color: string, themeType: ThemeType, invert?: boolean): string | undefined;
+    static getInvertedColor(color: string | undefined | null, themeType: ThemeType, invert?: boolean): string | undefined;
     /**
      * Invert the given color
      *
@@ -228,7 +242,7 @@ export declare class Utils {
     /**
      * Get the current theme name (either from local storage or the browser settings).
      */
-    static getThemeName(themeName?: ThemeName | null): ThemeName;
+    static getThemeName(themeName?: ThemeName | 'auto' | null): ThemeName;
     /**
      * Get the type of theme.
      */
@@ -326,6 +340,6 @@ export declare class Utils {
      * Check if the date is valid
      */
     static isValidDate(date: any): boolean;
-    static getStyle(theme: IobTheme, ...args: (((_theme: IobTheme) => Record<string, any>) | undefined | Record<string, any>)[]): Record<string, any>;
+    static getStyle(theme: IobTheme, ...args: (((_theme: IobTheme) => Record<string, any>) | undefined | Record<string, any> | null | false)[]): Record<string, any>;
 }
 export {};

package/build/Components/Utils.js

@@ -374,9 +374,9 @@ export class Utils {
      */
     static getObjectIcon(id, obj) {
         // If id is Object
-        if (typeof id === 'object') {
+        if (typeof id === 'object' && obj) {
             obj = id;
-            id = obj?._id;
+            id = obj._id;
         }
         if (obj?.common?.icon) {
             let icon = obj.common.icon;
@@ -452,7 +452,7 @@ export class Utils {
      */
     static isUseBright(color, defaultValue) {
         if (!color) {
-            return defaultValue === undefined ? true : defaultValue;
+            return defaultValue ?? true;
         }
         color = color.toString();
         if (color.startsWith('#')) {
@@ -462,7 +462,7 @@ export class Utils {
         let g;
         let b;
         const rgb = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
-        if (rgb && rgb.length === 4) {
+        if (rgb?.length === 4) {
             r = parseInt(rgb[1], 10);
             g = parseInt(rgb[2], 10);
             b = parseInt(rgb[3], 10);
@@ -670,9 +670,7 @@ export class Utils {
                     const target = m[0].match(/target="([^"]+)"/) || m[0].match(/target='([^']+)'/);
                     const rel = m[0].match(/rel="([^"]+)"/) || m[0].match(/rel='([^']+)'/);
                     const title = m[0].match(/>([^<]*)</);
-                    result.push(
-                    // eslint-disable-next-line react/jsx-no-target-blank
-                    React.createElement("a", { key: `a${key++}`, href: href ? href[1] : '', target: target ? target[1] : '_blank', rel: rel ? rel[1] : 'noreferrer', style: { color: 'inherit' } }, title ? title[1] : ''));
+                    result.push(React.createElement("a", { key: `a${key++}`, href: href ? href[1] : '', target: target ? target[1] : '_blank', rel: rel ? rel[1] : 'noreferrer', style: { color: 'inherit' } }, title ? title[1] : ''));
                 }
                 m = text ? text.match(/<a [^<]+<\/a>|<br\s?\/?>|<b>[^<]+<\/b>|<i>[^<]+<\/i>/) : null;
                 if (!m && text) {
@@ -765,6 +763,8 @@ export class Utils {
     }
     /**
      * Update the smart name of a state.
+     *
+     * @deprecated Use updateSmartNameEx instead
      */
     static updateSmartName(obj, newSmartName, byON, smartType, instanceId, noCommon) {
         const language = I18n.getLanguage();
@@ -891,6 +891,158 @@ export class Utils {
             }
         }
     }
+    /**
+     * Update the smart name of a state.
+     */
+    static updateSmartNameEx(obj, options) {
+        const language = I18n.getLanguage();
+        // Typing must be fixed in js-controller
+        const sureStateObject = obj;
+        // convert the old format
+        if (typeof sureStateObject.common.smartName === 'string') {
+            const nnn = sureStateObject.common.smartName;
+            sureStateObject.common.smartName = {};
+            sureStateObject.common.smartName[language] = nnn;
+        }
+        // convert the old settings
+        if (sureStateObject.native?.byON) {
+            delete sureStateObject.native.byON;
+            let _smartName = sureStateObject.common.smartName;
+            if (_smartName && typeof _smartName !== 'object') {
+                _smartName = {
+                    en: _smartName,
+                    [language]: _smartName,
+                };
+            }
+            sureStateObject.common.smartName = _smartName;
+        }
+        if (options.smartType !== undefined) {
+            if (options.noCommon) {
+                sureStateObject.common.custom ||= {};
+                sureStateObject.common.custom[options.instanceId] ||= {};
+                sureStateObject.common.custom[options.instanceId].smartName ||= {};
+                if (!options.smartType) {
+                    delete sureStateObject.common.custom[options.instanceId].smartName.smartType;
+                }
+                else {
+                    sureStateObject.common.custom[options.instanceId].smartName.smartType = options.smartType;
+                }
+            }
+            else {
+                sureStateObject.common.smartName ||= {};
+                if (!options.smartType) {
+                    delete sureStateObject.common.smartName.smartType;
+                }
+                else {
+                    sureStateObject.common.smartName.smartType = options.smartType;
+                }
+            }
+        }
+        if (options.byON !== undefined) {
+            if (options.noCommon) {
+                sureStateObject.common.custom ||= {};
+                sureStateObject.common.custom[options.instanceId] ||= {};
+                sureStateObject.common.custom[options.instanceId].smartName ||= {};
+                sureStateObject.common.custom[options.instanceId].smartName.byON = options.byON;
+            }
+            else {
+                sureStateObject.common.smartName ||= {};
+                sureStateObject.common.smartName.byON = options.byON;
+            }
+        }
+        if (options.noAutoDetect !== undefined) {
+            if (options.noCommon) {
+                if (options.noAutoDetect) {
+                    sureStateObject.common.custom ||= {};
+                    sureStateObject.common.custom[options.instanceId] ||= {};
+                    sureStateObject.common.custom[options.instanceId].smartName ||= {};
+                    sureStateObject.common.custom[options.instanceId].smartName.noAutoDetect = options.noAutoDetect;
+                }
+                else if (sureStateObject.common.custom?.[options.instanceId]?.smartName) {
+                    delete sureStateObject.common.custom[options.instanceId].smartName.noAutoDetect;
+                }
+            }
+            else {
+                if (!options.noAutoDetect && sureStateObject.common.smartName) {
+                    // @ts-expect-error must be fixed in js-controller
+                    delete sureStateObject.common.smartName.noAutoDetect;
+                }
+                else {
+                    sureStateObject.common.smartName ||= {};
+                    // @ts-expect-error must be fixed in js-controller
+                    sureStateObject.common.smartName.noAutoDetect = options.noAutoDetect;
+                }
+            }
+        }
+        if (options.smartName !== undefined) {
+            let smartName;
+            if (options.noCommon) {
+                sureStateObject.common.custom ||= {};
+                sureStateObject.common.custom[options.instanceId] ||= {};
+                sureStateObject.common.custom[options.instanceId].smartName ||= {};
+                smartName = sureStateObject.common.custom[options.instanceId].smartName;
+            }
+            else {
+                sureStateObject.common.smartName ||= {};
+                smartName = sureStateObject.common.smartName;
+            }
+            smartName[language] = options.smartName;
+            // If smart name deleted
+            if (smartName &&
+                (!smartName[language] ||
+                    (smartName[language] === sureStateObject.common.name && !sureStateObject.common.role))) {
+                delete smartName[language];
+                let empty = true;
+                // Check if the structure has any definitions
+                for (const key in smartName) {
+                    if (Object.prototype.hasOwnProperty.call(smartName, key)) {
+                        empty = false;
+                        break;
+                    }
+                }
+                // If empty => delete smartName completely
+                if (empty) {
+                    if (options.noCommon && sureStateObject.common.custom?.[options.instanceId]) {
+                        if (sureStateObject.common.custom[options.instanceId].smartName.byON === undefined) {
+                            delete sureStateObject.common.custom[options.instanceId];
+                        }
+                        else {
+                            delete sureStateObject.common.custom[options.instanceId].en;
+                            delete sureStateObject.common.custom[options.instanceId].de;
+                            delete sureStateObject.common.custom[options.instanceId].ru;
+                            delete sureStateObject.common.custom[options.instanceId].nl;
+                            delete sureStateObject.common.custom[options.instanceId].pl;
+                            delete sureStateObject.common.custom[options.instanceId].it;
+                            delete sureStateObject.common.custom[options.instanceId].fr;
+                            delete sureStateObject.common.custom[options.instanceId].pt;
+                            delete sureStateObject.common.custom[options.instanceId].es;
+                            delete sureStateObject.common.custom[options.instanceId].uk;
+                            delete sureStateObject.common.custom[options.instanceId]['zh-cn'];
+                        }
+                    }
+                    else if (sureStateObject.common.smartName &&
+                        sureStateObject.common.smartName.byON !== undefined) {
+                        const _smartName = sureStateObject.common
+                            .smartName;
+                        delete _smartName.en;
+                        delete _smartName.de;
+                        delete _smartName.ru;
+                        delete _smartName.nl;
+                        delete _smartName.pl;
+                        delete _smartName.it;
+                        delete _smartName.fr;
+                        delete _smartName.pt;
+                        delete _smartName.es;
+                        delete _smartName.uk;
+                        delete _smartName['zh-cn'];
+                    }
+                    else {
+                        sureStateObject.common.smartName = null;
+                    }
+                }
+            }
+        }
+    }
     /**
      * Disable the smart name of a state.
      */
@@ -1187,8 +1339,11 @@ export class Utils {
             window.vendorPrefix !== 'MV') {
             return window.vendorPrefix;
         }
-        themeName = (window._localStorage || window.localStorage).getItem('App.themeName');
-        if (themeName) {
+        if (themeName === 'auto') {
+            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        themeName ||= (window._localStorage || window.localStorage).getItem('App.themeName');
+        if (themeName && themeName !== 'auto') {
             return themeName;
         }
         return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
@@ -1197,6 +1352,9 @@ export class Utils {
      * Get the type of theme.
      */
     static getThemeType(themeName) {
+        if (window.vendorPrefix === 'HA' || window.vendorPrefix === 'NW') {
+            return 'dark';
+        }
         if (window.vendorPrefix && window.vendorPrefix !== '@@vendorPrefix@@') {
             return 'light';
         }