Customizable search button

[LookRain]

I'm very satisfied with this plugin so far, however, the default search button does not really fit my docsite. So is there any way to customize the UI for the button? If not, is it a planned feature for future versions? thanks

[marcusnewton]

You can target it using the global stylesheet under src/css/custom.css

[LookRain]

got it. It works for me for now, but it would be great if we can replace the default button with a React component if the design deviates from the default one too much and customizing CSS is not enough.

[gentledepp]

Could you please give me a hint what I am doing wrong?

1) I installed the plugin just as described in your wiki and a normal docusaurus v2 configuration using presets classic:

2) when adding the following lines to my custom css, they do not have any effect:

So I fired up chrome dev tools and it seems, that my custom.css is inserted into the html BEFORE the searchbar css is added:

So

1. is there a way to change the order of the css definitions, so that my custom.css can actually override the existing variables?
2. or am I doing something fundamentally wrong here?

[ItsJustMiaouss]

Hey @gentledepp,

If you want to change the color using the root variables you have to:

1. Use the RGB colors instead of the default CSS shortcut or HEX (e.g 255, 0, 0 instead of red or #ff1100).
2. Make sure you have set the priority !important after defining the color to override the previous styling rules.

Example:

:root {
  --aa-primary-color-rgb: 255, 0, 0 !important;
  --aa-muted-color-rgb: 255, 0, 0 !important;
  /* ... */
}

If you use the dark theme, then replace :root { ... } by [data-theme='dark'] { ... }.

[gentledepp]

This totally worked. Thank you so much!!

[cmfcmf]

Thanks @ItsJustMiaouss! I linked your comment from the README :)