Change backgroundcolor of Modal

Siemens iX
1

Hello

I want to change the background-color of my Modal using the IX library, but struggle to see how.

On the IxModalContent component, i can apply a custom style, like below, but this is not allowed on the Modal component. Why? This is not sufficient as I want the entire modal to have a specific color

I’ve tried different ways, including wrapping the modal in a div, but I cannot get it to work.

Any suggestions would be awesome!

 <Modal ref={modalRef}>
            <div className='flex flex-row'>
                <IxTypography className="ml-2 w-1/4" format="display-xl" >Add Datasource</IxTypography>
            </div>
            <IxModalContent className="mt-4 h-screen " style={{ backgroundColor: 'var(--theme-color-secondary--hover)' }}>
                <div className='flex flex-col h-full'>
                    <div className='flex flex-row h-full '>
                    </div>
// REST OF MODAL //

                </div>
            </IxModalContent>
            <IxModalFooter>
                <IxButton outline onClick={close}>
                    Cancel
                </IxButton>
                <IxButton onClick={handleOkClick}>Add datasource</IxButton>
            </IxModalFooter>
        </Modal >
2

(moved topic to Siemens iX category)

3

Hi @torgeir.tislevoll, the modal background color is aligned to brandville/Siemens guidelines. A change of the color is not intended for the sake of a consistent look. What’s your usecase behind? Which color do you want to apply?