docs(iframe): remove transparency option and add chapter on how to do transparent iframes (#398)

Meierschlumpf · web-flow · commit dc0aa0d16fec · 2025-09-08T16:09:24.000+02:00
diff --git a/docs/widgets/iframe/img/transparent-iframe.png b/docs/widgets/iframe/img/transparent-iframe.png
diff --git a/docs/widgets/iframe/index.mdx b/docs/widgets/iframe/index.mdx
@@ -53,6 +53,20 @@ If you manage all of your own applications, you can usually change that.
 ### Configuration
 <WidgetConfig configuration={iframeWidget.configuration} />
 
+### Transparent iframes
+
+To create a transparent iframe like below you can use the following html code and load it into your iframe:
+
+```html
+<html style="color-scheme: dark;">
+<body style="background: none; display: flex; justify-content: center; align-items: center;">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/homarr.svg" width="90" height="90" />
+</body>
+</html>
+```
+
+![transparent iframe](./img/transparent-iframe.png)
+
 ### Third party content
 :::warning
 
diff --git a/docs/widgets/iframe/index.ts b/docs/widgets/iframe/index.ts
@@ -20,12 +20,6 @@ export const iframeWidget: WidgetDefinition = {
         values: { type: 'boolean' },
         defaultValue: 'no',
       },
-      {
-        name: 'Allow transparency',
-        description: 'Whether to allow the embedded content to have a transparent background.',
-        values: { type: 'boolean' },
-        defaultValue: 'no',
-      },
       {
         name: 'Allow scrolling',
         description: 'Whether to allow the embedded content to be scrolled.',
