Customizing Magny
Magny search bar can be customized according to the color and brand of your application. Each customization is unique to one project, hence you can create several projects with different customization options.
You can customize Magny search bar theme by clicking on Settings --> Theme.
There are 2 basic themes you can select from, depending on the theme of your application. Each theme colors can be customized here, including search text color, command color, category color, default icon color, background color and more.
Selecting the "System default" option on a project's theme section means that the search bar theme will automatically change based on the user's browser theme. For example, if the user's browser theme is set to "dark mode" then the search bar theme will switch to a dark mode theme.
Similarly, if the user's browser theme is set to "light mod" then the search bar theme will switch to a light mode theme. This option provides a seamless user experience, as the website will automatically match the user's preferred theme. It also saves users time and effort from manually switching the website theme.
The "App theme" option refers to a feature the Magny listens to a specific key-value pair in the local storage of the user's browser and sets the theme of the search bar based on the value of that key. The good thing is that you can set both the "key" and the "value" as you wish on the Magny dashboard.
This option will be very useful if you want to match the theme of your application with the theme of the search bar. If you choose the "App Theme" option, 3 different inputs will appear below. Magny listens for the values of these fields. Enter the local storage key you use for your application's theme in the "local storage them key" field (e.g. theme).
Likewise, enter the value you use for the light mode of your application in the "Light theme value" field (e.g. light), and the value you use for the dark mode of your application in the "Dark theme value" field (e.g. dark).
Warning: We highly recommend dispatch new storage event while changing the theme of your application (while saving something related to the theme in local storage) so that Magny can detect the application theme dynamicly in all browsers.
window.dispatchEvent(new Event("storage"));
The icon color in this section is the default color, meaning that you can always override icon colors separately as you set up a particular command.
Font colors can be selected for each theme (e.g light and dark).
You can customize Magny search bar theme by clicking on Settings --> Look & feel.
Under Look & feel, you'll see the following customization options:
- Font face: You can select the default <body> font of your app, or use a font you choose here.
- Font size: You can select one of small, medium (default) or large.
- Prompt: You can change the prompt string here, that will be shown right under the cursor when the popup is shown.
- Magny logo: Whether Magny logo will be visible or not. This is available in Pro plan where you have the option to select. Under Starters plan, the logo will always be shown.
Under Settings --> Positioning can also change where the Magny popup will be shown, specifically speaking, how much Y offset is applied to the top of the Magny command palette.
Magny search bar positioning settings
We are human and we make mistakes too. Magny benefits from fuzzy search where user doesn't have to type in the keyword in full. For example, with the fuzzy search feature, when user enters "Setings" instead of "Settings", the command related to settings will also show up.
You can also define the fuzziness score under Settings --> Fuzziness. The smart search algorithm will match the level of fuzziness you define here (from 0 to 100).
The higher the level, the more similar the strings are. A score of 100 means the strings should be identical. A good fuzziness level is between 20-40.