Customize

ThemeMode

  • light(default)
  • dark
app.ts
...
export const rabbyKit = createModal({
  ...
  theme: "dark",
});
...

font

Change the font by changing --rk-font-family in the themeVariables.

themeVariables

By default themeVariables is undefined, you can modify themeVariables like this:

app.ts
...
export const rabbyKit = createModal({
  ...
  theme: "dark",
  themeVariables:{
    "--rk-border-radius":"16px"
  }
});
...

The following list shows the theme variables you can override:

VariableDescriptionType
--rk-font-familyfont familystring
--rk-border-radiusborder radiusstring
--rk-primary-button-font-sizebutton text font sizestring
--rk-primary-button-colorbutton text colorstring
--rk-primary-button-bgbutton backgroundstring
--rk-primary-button-borderbutton borderstring
--rk-primary-button-border-radiusbutton border radiusstring
--rk-primary-button-hover-colorbutton hover colorstring
--rk-primary-button-hover-bgbutton hover backgroundstring
--rk-primary-button-hover-borderbutton hover borderstring
ActionsCustom Login Method