Add css styling

packages/core/src/plugins/pageFind.ts

@@ -7,6 +7,7 @@ const DEFAULT_UI = 'https://cdn.jsdelivr.net/npm/@pagefind/default-ui@1.0.4/+esm
 
 const JS_FILE_NAME = 'pageFindAssets/pagefind-ui.min.js';
 const CSS_FILE_NAME = 'pageFindAssets/pagefind-ui.min.css';
+const ADDTIONAL_CSS_FILE_NAME = 'pageFindAssets/pagefind-ui-additional.css';
 const PAGEFIND_INPUT_SELECTOR = '#pagefind-search-input';
 
 function genScript() {
@@ -35,20 +36,6 @@ export = {
  },
  },
  getScripts: () => [`<script src="${JS_FILE_NAME}"></script>`, genScript()],
- getLinks: () => [`<link rel="stylesheet" href="${CSS_FILE_NAME}">`],
-
-
- // Another option is to directly replace it during the processing.
-
- // Called after the page is rendered
- // postRender: (_pluginContext: PluginContext, _frontmatter: FrontMatter, content: string) => {
- // const $ = cheerio.load(content);
-
- // // const $pagefind = $('.pagefind');
- // // $pagefind.append(addPagefindUI());
- // $('#my-div').append(addPagefindUI());
-
- // // How should I add it in
- // return $.html();
- // },
+ getLinks: () => [`<link rel="stylesheet" href="${CSS_FILE_NAME}">`,
+ `<link rel="stylesheet" href="${ADDTIONAL_CSS_FILE_NAME}">`],
 };

packages/core/src/plugins/pageFindAssets/pagefind-ui-additional.css

@@ -0,0 +1,14 @@
+/* custom-pagefind-ui.css */
+
+/* General Pagefind UI styling */
+:root {
+ --pagefind-ui-border: #000000; /* Black border color */
+ --pagefind-ui-border-width: 2px; /* Border width */
+ --pagefind-ui-border-radius: 8px; /* Border radius */
+ --pagefind-ui-image-border-radius: 8px; /* Image border radius */
+ }
+
+/* Additional custom styles for dark mode if needed */
+body.dark {
+--pagefind-ui-border: #000000; /* Black border color for dark mode */
+}