diff --git a/services/web/frontend/js/features/source-editor/extensions/breadcrumbs-panel.ts b/services/web/frontend/js/features/source-editor/extensions/breadcrumbs-panel.ts
index a6756987ec..61afc9a947 100644
--- a/services/web/frontend/js/features/source-editor/extensions/breadcrumbs-panel.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/breadcrumbs-panel.ts
@@ -1,5 +1,5 @@
 import { isSplitTestEnabled } from '@/utils/splitTestUtils'
-import { showPanel } from '@codemirror/view'
+import { EditorView, showPanel } from '@codemirror/view'
 
 export function createBreadcrumbsPanel() {
   const dom = document.createElement('div')
@@ -7,6 +7,36 @@ export function createBreadcrumbsPanel() {
   return { dom, top: true }
 }
 
+const breadcrumbsTheme = EditorView.baseTheme({
+  '.ol-cm-breadcrumbs': {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 'var(--spacing-01)',
+    fontSize: 'var(--font-size-01)',
+    padding: 'var(--spacing-02)',
+    overflow: 'auto',
+    scrollbarWidth: 'thin',
+    '& > *': {
+      flexShrink: '0',
+    },
+  },
+  '&light .ol-cm-breadcrumbs': {
+    color: 'var(--content-secondary)',
+    backgroundColor: 'var(--bg-light-primary)',
+    borderBottom: '1px solid #ddd',
+  },
+  '&light .ol-cm-breadcrumb-chevron': {
+    color: 'var(--neutral-30)',
+  },
+  '&dark .ol-cm-breadcrumbs': {
+    color: 'var(--content-secondary-dark)',
+    backgroundColor: 'var(--bg-dark-primary)',
+  },
+  '&dark .ol-cm-breadcrumb-chevron': {
+    color: 'var(--neutral-50)',
+  },
+})
+
 /**
  * A panel which contains the editor breadcrumbs
  */
@@ -15,5 +45,5 @@ export const breadcrumbPanel = () => {
     return []
   }
 
-  return [showPanel.of(createBreadcrumbsPanel)]
+  return [showPanel.of(createBreadcrumbsPanel), breadcrumbsTheme]
 }
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
index e4f4b6193c..57c823fd52 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
@@ -44,4 +44,3 @@
 @import 'upgrade-prompt';
 @import 'integrations-panel';
 @import 'group-members';
-@import 'breadcrumbs';
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/breadcrumbs.scss b/services/web/frontend/stylesheets/bootstrap-5/components/breadcrumbs.scss
deleted file mode 100644
index 5df335d7de..0000000000
--- a/services/web/frontend/stylesheets/bootstrap-5/components/breadcrumbs.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-:root {
-  --breadcrumb-bg-color: var(--white);
-  --breadcrumb-color: var(--content-secondary);
-  --breadcrumb-chevron-color: var(--neutral-30);
-}
-
-.ol-cm-breadcrumbs {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-01);
-  color: var(--breadcrumb-color);
-  background-color: var(--breadcrumb-bg-color);
-  font-size: var(--font-size-01);
-  padding: var(--spacing-02);
-  overflow: auto;
-  scrollbar-width: thin;
-
-  & > * {
-    flex-shrink: 0;
-  }
-}
-
-.ol-cm-breadcrumb-chevron {
-  color: var(--breadcrumb-chevron-color);
-}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss
index 4eed3c633f..0e7aaaeca9 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss
@@ -32,7 +32,7 @@
   --editor-toolbar-bg: var(--bg-dark-primary);
   --toolbar-filetree-bg-color: var(--neutral-80);
 
-  .toolbar {
+  .cm-panels-top {
     border-bottom: none;
   }
 }
@@ -64,10 +64,6 @@
     --toolbar-btn-hover-color: var(--white);
     --editor-toolbar-bg: var(--white);
     --toolbar-filetree-bg-color: var(--white);
-  }
-
-  .cm-panels-top {
-    border-bottom: none;
 
     .ol-cm-toolbar-portal {
       border-bottom: 1px solid #ddd;