Style titlebar in QWidgets webassembly
-
Is it possible to style the titlebar in webassembly, without removing the "native" decorator and creating/simulating a custom one?
In a real OS I know that this is not possible, but since webassembly doesn't run in any native window manager, I wonder if this is possible.
Edit:
So I looked deeper into this and seems that window decoration is simple html/css! So it should be easy to change it with a bit of javascript / css / html... I don't have time today but next week I will try to do this and post the solution here. :)
-
-
Here is what I came with:
#ifdef Q_OS_WASM #include <emscripten/emscripten.h> #endif #ifdef Q_OS_WASM const QString updatedCss = R"( .qt-window.has-frame { border: var(--border-width) solid #ebe9e9; border-radius: 10px; } .qt-window { background-color: #ebe9e9; } )"; const QString extendExistingCss = QString(R"( document.getElementById("screen").shadowRoot.querySelector("style").innerHTML += "%1"; )").arg(updatedCss.simplified()); emscripten_run_script(extendExistingCss.toLatin1()); #endif
This one adds rounded corners and changes the border style color to something more pleasable (to me). This one is for the default theme but adjust as necessary for other themes. Seems to work nicely in all browsers.