> For the complete documentation index, see [llms.txt](https://uccello.gitbook.io/doc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uccello.gitbook.io/doc/customize-your-application/themes.md).

# Themes

## Create a new theme

You can easily create a new theme for Uccello. You can do this in three steps.

### 1. Load css file

Add the following code into the file `resources/views/layouts/uccello.blade.php`:

```markup
...
@section('css')
    {!! Html::style(mix('css/app.css')) !!}
@append
```

### 2. Set the name of your custom theme

Modify the file `config/uccello.php` to set the name of the custom theme you want to use:

```css
...
'theme' => 'orange', // Name of your custom theme
...
```

{% hint style="warning" %}
If the file `config/uccello.php` does not exist, please launch the command `php artisan vendor:publish --tag=uccello-config`
{% endhint %}

### 3. Customize your theme

Add the following code into the file `resources/saas/app.scss` of your project, and configure your own colors:

```css
// Variables
$theme: "orange"; // Set here the name of your custom theme!
$primaryColor: #fd7200;
$accentColor: #51555D;
$accentColor2: #3F434C;

// Body
$backgroundColor: #F3F4F6;
$textColor: #464646;

// Loader
$loaderBackgroundColor: $primaryColor;
$loaderColor: color("orange", "base");

// Header
$headerBackgroundColor: $primaryColor;
$navbarTopBackgroundColor: #fff;

// Breadcrumb
$breadcrumbTextColor: #3F434C;
$breadcrumbSeparatorColor: #CCC;

// Tab
$tabTextColor: #999999;
$tabHoverBackgroundColor: transparent;
$tabActiveTextColor: $primaryColor;
$tabActiveBackgroundColor: transparent;
$tabIndicatorBackgroundColor: $primaryColor;
$tabBorderColor: #E6E6E8;
$tabBadgeColor: #fff;

// Sidenav
$sidenavBackgroundColor: $accentColor;
$sidenavLinkColor: #fff;
$sidenavIconColor: #fff;
$sidenavLinkHoverBackgroundColor: transparent;
$sidenavLinkHoverColor: $primaryColor;
$sidenavIconHoverColor: $primaryColor;
$sidenavUserInfoBackgroundColor: $accentColor2;
$sidenavUserInfoColor: #fff;
$sidenavDividerColor: $accentColor2;
$sidenavSubheaderBackgroundColor: $accentColor2;
$sidenavLinkActiveBackgroundColor: $accentColor2;

// Domains
$domainsTreeLinkColor: $textColor;
$domainsTreeLinkColorCurrent: $primaryColor;
$domainsTreeLinkColorDisabled: #CCC;

// Table
$tableTrHoverBackgroundColor: #f5f5f5;
$tableTrOddBackgroundColor: #f9f9f9;
$tableTdBorderColor: #eee;

// Form
$formInputFocusBorderColor: $primaryColor;
$formInputValidBorderColor: colors('green');
$formInputInvalidBorderColor: colors('red');
$formLabelActiveColor: $primaryColor;
$formIconActiveColor: $primaryColor;
$formSwitchLeverBackgroundColor: #818181;
$formSwitchLeverColor: $primaryColor;

// Card
$cardTitleInfoColor: #999;

// Avatar
$avatarInitialsBackgroundColor: #fff;
$avatarInitialsColor: #999;

// Treeview
$treeviewSearchResultColor: $primaryColor;

@import "../../vendor/uccello/uccello/resources/assets/sass/themes/_global.scss";
```

{% hint style="warning" %}
After modifying, don't forget to compile the SASS code to obtain a new CSS file.\
To do this use the command `npm run prod` .\
If necessary execute the command `npm install` before.
{% endhint %}