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:

...
@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:

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

If the file config/uccello.php does not exist, please launch the command php artisan vendor:publish --tag=uccello-config

3. Customize your theme

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

// 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";

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.