Vscode extension with a contributed activity bar webview is not working in Theia

I tried setting up a project where I can implement VS code extensions within Theia project using monorepos. I used following VS code extension as a sample: https://github.com/microsoft/vscode-extension-samples/tree/main/webview-view-sample
When I start the Theia browser app, the web view does not load and it displays a blank white panel in its place. I have contributed an icon in activity bar and clicking that should open the view containing my VS code webview.
There is not any error during build or in the browser.
Just a warning that appear in browser console

[Violation] Avoid using document.write(). https://developers.google.com/web/updates/2016/08/removing-document-write (anonymous) @ main.js:511

This is the main.js:511 and it seems like some internal code of vscode

newFrame.contentDocument.write(newDocument);

Same behavior is observed on Google Chrome and Microsoft Edge.
Following is github repository for my project: https://github.com/umar-shabbir/theia-vscode-webviewView

Looks like the extension didn’t activate. If you run the Add Colors command before opening the view, it will work as expected. I believe our algorithm to automatically determine the correct view activation events doesn’t work correctly. See Incorrect `onView` activation event generation · Issue #13090 · eclipse-theia/theia · GitHub

As a short term fix, you can just add the onView:colorsView element to the activationEvents entry of your vscode extension.