diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js index 1a71244119..d801226cc9 100644 --- a/packages/backend/src/server/web/boot.js +++ b/packages/backend/src/server/web/boot.js @@ -34,6 +34,16 @@ const isEmbedPage = document.documentElement.classList.contains('embed'); + if (isEmbedPage) { + const params = new URLSearchParams(location.search); + if (params.has('rounded') && params.get('rounded') === 'false') { + document.documentElement.classList.add('norounded'); + } + if (params.has('border') && params.get('border') === 'false') { + document.documentElement.classList.add('noborder'); + } + } + //#region Detect language & fetch translations if (!localStorage.hasOwnProperty('locale')) { const supportedLangs = LANGS; diff --git a/packages/backend/src/server/web/style.css b/packages/backend/src/server/web/style.css index 70a6da694e..d339ba4bb6 100644 --- a/packages/backend/src/server/web/style.css +++ b/packages/backend/src/server/web/style.css @@ -12,6 +12,7 @@ html { html.embed { box-sizing: border-box; background-color: transparent; + color-scheme: light dark; max-width: 500px; } @@ -32,7 +33,15 @@ html.embed #splash { box-sizing: border-box; min-height: 300px; border-radius: var(--radius, 12px); - border: 1px solid var(--divider); + border: 1px solid var(--divider, #e8e8e8); +} + +html.embed.norounded #splash { + border-radius: 0; +} + +html.embed.noborder #splash { + border: none; } #splashIcon {