Edit global css not inside app iframe

Hi,
I want to create app that would change the background of the text editor used to send email on the CRM.

But, the app is inside an iframe, and I can’t manage to edit the CSS.
I tried all the types of applications.
How can I do it?

wanted css added:

.ql-editor{
  background-color: red;
}

example source code:

import React from "react";
import {createRoot} from "react-dom/client";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

const root = createRoot(document.getElementById("root"));
root.render(<App />);

document.addEventListener('DOMContentLoaded', (event) => {
    const collection = document.getElementsByClassName(".ql-editor");
    for (let i = 0; i < collection.length; i++) {
	  collection[i].style.backgroundColor = "red";
    };
});
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

And please don’t suggest external solutions like browser extensions,
this must be an Monday app I can install and enforce on the entire organization.

thanks for the help.

Hello @helpoutdude and welcome to the community!

I hope you like it here :muscle:

Could you please send a screen recording or screenshot of the screen in which you want the background color of the text field to change?

Hi @Matias.Monday, sure attached

Hello again @helpoutdude!

Thank you for the information.

The CSS of the emails and activities app can not be modified.

Let me know if you have any other questions :slightly_smiling_face:

Cheers,
Matias