Merge pull request #24233 from overleaf/dp-dark-breadcrumbs

Add dark mode for breadcrumbs

GitOrigin-RevId: f1425a1da514f74854fd7afe176e27e2b62dae9c

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]
 }