Force theme from ‘dark’ to ‘light’ not "same as system" in development tools / javascript sdk

By default in development tools / javascript sdk, when integrating docspace into an integrated framework the default theme is “identical to the system” dark in my case. How to force the white theme in docspace please ?

Hello @Ludovici

Please elaborate on how exactly you are integrating DocSpace into your app. Are you using Javascript SDK for that?

Hello @Constantine
Thanks for your reply,

I want to integrate this into a white website.
The appearance theme of my windows is dark.
I use Javascript SDK for this
I want to force the white theme of docspace in my website

Thanks. Are you integrating DocSpace specifically to allow document editing in your app?

Thanks, No, not specifically.
Maybe it’s this pull request ? Fix/native color theme #2115

Can you share how DocSpace is added to your site for the reference?

In my docspace I add my odoo website in developer-tools/javascript-sdk embedded Docspace in an embedded frame

In my odoo website app
Site This page HTML / CSS Editor
I customize JS in user_custom_javascript with the Javascript code from docspace javascript-sdk/public-room

And add an embedded block code on this odoo web page with the HTML code to be embedded from docspace javascript-sdk/public-room

I see now, thanks. I will take a look at the possibility to set specific theme for the DocSpace frame when integrating it with any site via JavaScript SDK. Please await for my feedback.

An suggestion

Unfortunately, right now there is no way to predefine a theme when embedding DocSpace into a site. I have to note that DocSpace will inherit such property if it exists for the site into which DocSpace gets embedded. However, the suggestion to add an option to select specific theme was registered and will be added in future releases of DocSpace.

UPD: fellow developers shared following approach to set specific theme by adding &theme=<value> to the embedding code. For instance, to set up light theme you must use value Base:

<div id="ds-frame">Fallback text</div>
<script src="https://docspaceaddress/static/scripts/sdk/1.0.1/api.js?src=https%3A%2F%docspaceaddress&mode=file-selector&width=100%25&height=100%25&frameId=ds-frame&init=true&showSelectorCancel=true&showSelectorHeader=true&withSearch=true&acceptButtonLabel=Select&cancelButtonLabel=Cancel&withSubtitle=true&filterParam=ALL&isButtonMode=false&buttonWithLogo=true&theme=Base"></script>

The last parameter specifies the theme.

Thanks Constantine

yes I had seen that before

sorry this doesn’t work odoo change the formatting of the html code this gives us

<div id="ds-frame">Fallback text</div>
<script src="https://X.onlyoffice.com/static/scripts/sdk/1.0.1/api.js?src=https%3A%2F%2FX.onlyoffice.com&amp;mode=manager&amp;width=100%25&amp;height=500px&amp;frameId=ds-frame&amp;showHeader=false&amp;showTitle=true&amp;showMenu=false&amp;showFilter=true&amp;disableActionButton=false&amp;infoPanelVisible=false&amp;init=true&amp;filter=%5Bobject%20Object%5D&amp;id=X&amp;requestToken=X&amp;rootPath=%2Frooms%2Fshare&amp;theme=Base"></script>

Thanks to to add an option to select specific theme was registered and will be added in future releases of DocSpace

1 Like

Odoo seems to be escaping characters. Possibly the setting has cached into the browser, can you try resetting the cache or checking out the incognito mode?