@ -47,7 +47,8 @@ Before starting to customize the theme, you can consider downloading the source
---
---
### Appearance
### Appearance
You can set a default theme, add or remove appearance styles by using **LeptonXThemeOptions** .
You can set a default theme, add or remove appearance styles and layout background styles by using **LeptonXThemeOptions** .
- `DefaultStyle` : Defines the default fallback theme. The default value is **Dim**
- `DefaultStyle` : Defines the default fallback theme. The default value is **Dim**
@ -133,15 +134,26 @@ Layout options of the MVC Razor Pages UI can be manageable by using **LeptonXThe
- `MobileMenuSelector` : Defines items to be displayed at the mobile menu. The default value is the first 2 items from the main menu items.
- `MobileMenuSelector` : Defines items to be displayed at the mobile menu. The default value is the first 2 items from the main menu items.
```csharp
Configure< LeptonXThemeMvcOptions > (options =>
{
options.MobileMenuSelector = items => items.Where(x => x.MenuItem.Name == "MyProjectName.Home" || x.MenuItem.Name == "MyProjectName.Dashboard");
});
```


- `AccountLayoutBackgroundStyle` : Defines the background style of the account layout.
```csharp
```csharp
Configure< LeptonXThemeMvcOptions > (options =>
Configure< LeptonXThemeMvcOptions > (options =>
{
{
options.MobileMenuSelector = items => items.Where(x => x.MenuItem.Name == "MyProjectName.Home" || x.MenuItem.Name == "MyProjectName.Dashboard");
options.AccountLayoutBackgroundStyle = "background-image: url('/images/login-background-image.svg') !important;" ;
});
});
```
```

### Layouts
### Layouts
**LeptonX** offers two **ready-made layouts** for your web application. One of them is **placed** with the **menu items** on the **top** and the other with the **menu items** on the **sides** .
**LeptonX** offers two **ready-made layouts** for your web application. One of them is **placed** with the **menu items** on the **top** and the other with the **menu items** on the **sides** .