diff --git a/elements/itemfilter/src/style.eox.js b/elements/itemfilter/src/style.eox.js
index 45975f90f..7e285a1b4 100644
--- a/elements/itemfilter/src/style.eox.js
+++ b/elements/itemfilter/src/style.eox.js
@@ -21,11 +21,12 @@ export const styleEOX = `
     #000000 20%,
     transparent
   );
-  --background-color: #fff;
+  --background-color: var(--eox-background-color, transparent);
   --padding: 0.5rem;
   --text-transform: capitalize;
   --form-flex-direction: column;
   --filter-display: block;
+  background-color: var(--background-color);
 }
 * {
   font-family: Roboto, sans-serif;
@@ -517,4 +518,7 @@ eox-itemfilter-results li.highlighted {
   font-size: x-small;
   top: -8px;
 }
+input {
+  background-color: var(--background-color);
+}
 `;
diff --git a/elements/jsonform/src/style.eox.js b/elements/jsonform/src/style.eox.js
index 386e668b1..f920e5a71 100644
--- a/elements/jsonform/src/style.eox.js
+++ b/elements/jsonform/src/style.eox.js
@@ -1,4 +1,14 @@
 export const styleEOX = `
+  :host, :root {
+    --background-color: var(--eox-background-color, transparent);
+    background-color: var(--background-color, transparent);
+  }
+  form {
+    background-color: var(--background-color, transparent);
+  }
+  .CodeMirror {
+    background-color: var(--background-color, transparent);
+  }
   [data-schemaid=root] > .je-header {
     display: none;
   }
diff --git a/elements/layercontrol/src/components/tools-items.js b/elements/layercontrol/src/components/tools-items.js
index cce6263ad..174595aa3 100644
--- a/elements/layercontrol/src/components/tools-items.js
+++ b/elements/layercontrol/src/components/tools-items.js
@@ -179,6 +179,7 @@ export class EOxLayerControlTabs extends LitElement {
       display: flex;
       justify-content: start;
       align-items: center;
+      background: var(--background-color) !important;
     }
     .listed label:not(:first-of-type) {
       margin-top: 10px;
@@ -204,7 +205,7 @@ export class EOxLayerControlTabs extends LitElement {
       cursor: pointer;
     }
     figure {
-      background: #00417011;
+      background: var(--background-color);
       border-top: 1px solid #0041701a;
       padding: 8px var(--padding);
     }
diff --git a/elements/layercontrol/src/main.js b/elements/layercontrol/src/main.js
index 92e1a4150..c88913399 100644
--- a/elements/layercontrol/src/main.js
+++ b/elements/layercontrol/src/main.js
@@ -268,6 +268,11 @@ export class EOxLayerControl extends LitElement {
 
       display: block;
       padding: var(--padding) 0;
+      --background-color: var(--eox-background-color, transparent);
+      background-color: var(--background-color, transparent);
+    }
+    select {
+      background-color: var(--background-color);
     }
   `;
 }
diff --git a/utils/styles/input.css b/utils/styles/input.css
index 8e0cc9469..ab8a34258 100644
--- a/utils/styles/input.css
+++ b/utils/styles/input.css
@@ -10,6 +10,7 @@ textarea {
   background: var(--background-color);
 }
 
+input,
 input[type="text"],
 input[type="url"],
 input[type="email"],
@@ -26,4 +27,5 @@ select {
   padding: 5px 7px;
   border-radius: 4px;
   border: 1px solid #0004;
+  background-color: var(--background-color);
 }
diff --git a/utils/styles/main.css b/utils/styles/main.css
index ec8515018..582c1237a 100644
--- a/utils/styles/main.css
+++ b/utils/styles/main.css
@@ -4,7 +4,7 @@
   --block-spacing-vertical: calc(var(--spacing) * 2);
   --block-spacing-horizontal: var(--spacing);
 
-  --background-color: var(--eox-background-color, white);
+  --background-color: var(--eox-background-color, transparent);
   --color: var(--eox-color, #2c3d49);
   --h-color: var(--eox-h-color, var(--color));