feat(markup): update search match styles

Author: d3m1d0v

src/markup/codemirror/search-plugin/plugin.ts

@@ -19,16 +19,16 @@ import {
     keymap,
 } from '@codemirror/view';
 
+import type {MarkdownEditorMode} from 'src/bundle';
+import type {EventMap} from 'src/bundle/Editor';
+import type {RendererItem} from 'src/extensions';
+import {debounce} from 'src/lodash';
 import {renderSearchPopup} from 'src/search';
+import type {Receiver} from 'src/utils';
 
-import type {MarkdownEditorMode} from '../../../bundle';
-import type {EventMap} from '../../../bundle/Editor';
-import type {RendererItem} from '../../../extensions';
-import {debounce} from '../../../lodash';
-import type {Receiver} from '../../../utils';
 import {ReactRendererFacet} from '../react-facet';
 
-import {renderSearchPopup} from './view/SearchPopup';
+import {searchTheme} from './theme';
 
 type SearchQueryConfig = ConstructorParameters<typeof SearchQuery>[0];
 
@@ -167,6 +167,7 @@ export const SearchPanelPlugin = (params: SearchPanelPluginParams) =>
         {
             provide: () => [
                 keymap.of(searchKeymap),
+                searchTheme,
                 search({
                     createPanel: () => ({
                         // Create an empty search panel

src/markup/codemirror/search-plugin/theme.ts

@@ -0,0 +1,12 @@
+import {EditorView} from '#cm/view';
+
+export const searchTheme = EditorView.baseTheme({
+    '&light, &dark': {
+        '& .cm-searchMatch': {
+            backgroundColor: 'var(--g-color-base-info-light)',
+        },
+        '& .cm-searchMatch-selected': {
+            backgroundColor: 'var(--g-color-base-info-heavy)',
+        },
+    },
+});