diff --git a/src/lib/layout/logs.svelte b/src/lib/layout/logs.svelte
index 9569c092c..a7abce0c4 100644
--- a/src/lib/layout/logs.svelte
+++ b/src/lib/layout/logs.svelte
@@ -18,6 +18,7 @@
     import { wizard } from '$lib/stores/wizard';
     import { getServiceLimit, tierToPlan } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
+    import { app } from '$lib/stores/app';
 
     let selectedRequest = 'parameters';
     let selectedResponse = 'logs';
@@ -162,7 +163,9 @@
                         </div>
                     </header>
                     <div class="code-panel-content grid-1-2" style="u-grid">
-                        <div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16">
+                        <div
+                            class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16"
+                            class:theme-dark={$app.themeInUse === 'light'}>
                             <Heading tag="h3" size="6">Request</Heading>
                             <div class="u-sep-block-end">
                                 <Tabs>
@@ -273,7 +276,9 @@
                                 </p>
                             {/if}
                         </div>
-                        <div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0">
+                        <div
+                            class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0"
+                            class:theme-dark={$app.themeInUse === 'light'}>
                             <Heading tag="h3" size="6">Response</Heading>
                             <div class="u-sep-block-end">
                                 <Tabs>