Custom Theme Documentation - Topbar

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
primeng-hst
Posts: 3
Joined: 14 Jun 2021, 10:06

30 Aug 2021, 09:43

Hi

I've purchased the extended license for ULTIMA. I would like to ask for more detailed instructions as to setting up a custom theme.

I followed the instructions in the documentation and ended up with these generated files under assets/theme/custom-theme-folder
theme-light.scss
theme-light.css
theme-light.css.map

The variables in my theme-light.scss were are follows and I ran the sass command:

Code: Select all

$primaryColor:#1565C0;
$primaryLightestColor: #E3F2FD;
$primaryMenuTextColor: $primaryColor;
$primaryTextColor:#ffffff;
$accentColor:#2baf4c;
$accentTextColor:#212121;

@import '../../sass/theme/theme_light';
sass src\assets\theme\custom-theme-folder\theme-light.scss src\assets\theme\custom-theme-folder\theme-light.css

I pointed my app to the new theme under index.html

<link id="theme-css" rel="stylesheet" type="text/css" href="assets/theme/custom-theme-folder/theme-light.css">

and in app.component.ts
topbarTheme = 'custom-theme'

The theme applies to the body, which I assume is what the documentation instructions provide, but does not seem to be applying, specifically the topbar theme.

Could you please provide more instructions as to how to setup the custom topbar theme? I attempted to create a _topbar_customtheme.scss and imported it however it does not want to apply. I am not sure if I need to run a command similar to the sass one above to execute this or how to go about implementing a custom topbar theme?

The main body theme seems to be applying, so I'm specifically asking on instructions as to how to setup the topbar and menu themes?

Thank you

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

08 Sep 2021, 14:33

Hi,

Firstly, theme and layout are separated parts therefore if you want to customize topbar and menu, you need to use 'topbarTheme' and 'menuTheme' props and you need changes in layout folder.
Steps to custom menu;
1. Create _menu_custom.scss file in (sass/layout/menu/themes)
2. Add your color in the _menu_custom file. Like;

Code: Select all

.layout-menu-custom {
    $menuBgColor:red;

    $rootMenuTextColor:#ffffff;

    $menuItemTextColor:rgba(255,255,255,.6);
    $menuItemHoverBgColor:rgba(255,255,255,.12);
    $activeMenuItemTextColor:#ffffff;
    $activeMenuItemBgColor: rgba(255,255,255,.24);

    $inlineMenuBorderColor: rgba(255,255,255,.24);

    @import '../_menu_exports';
    @import '../_menu_theme';
}
3. Import your custom file in _menu.scss file(sass/layout/menu)

Code: Select all

@import './themes/_menu_custom';
4. Set 'custom' to 'menuTheme' prop in app.component.ts file

Code: Select all

menuTheme = 'custom';

Steps to custom topbar;
1. Create _topbar_custom.scss file in (sass/layout/topbar/themes)
2. Add your color in the _topbar_custom file. Like;

Code: Select all

.layout-topbar-custom {
    $topbarBgColor: red;
    $topbarLeftBgColor: red;

    $topbarMenuButtonBgColor:#F9A825;
    $topbarMenuButtonTextColor:#212121;

    $topbarItemTextColor: #ffffff;
    $topbarItemTextHoverBgColor: rgba(255,255,255,.12);

    @import '../_topbar_exports';
    @import '../_topbar_theme';
}
3. Import your custom file in _topbar.scss file(sass/layout/topbar)

Code: Select all

@import './themes/_topbar_custom';
4. Set 'custom' to 'topbarTheme' prop in app.component.ts file

Code: Select all

topbarTheme = 'custom';
And run sass command; sass --watch src/assets:src/assets --no-source-map

Image

Best regards,
Merve Özçifçi

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest