Custom topBar Color

Post Reply
maique.rosa
Posts: 1
Joined: 15 Aug 2019, 16:03

16 Aug 2019, 03:07

We have custom color for topBar, but i want put my own color. How i can do that?

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

29 Aug 2019, 13:12

Hi,
You need to create a new class with your colors in _topbar.scss file (src/assets/sass/layout/_topbar.scss) and you need to set topbarColor variable in app.component.ts file. You can see example the below code;
in _topbar.scss

Code: Select all

.layour-wrapper {
&.layout-topbar-bluegrey {
        .layout-topbar {
            background-color: #4f5965;

            .layout-menu-button {
                color: #ffffff;

                &:hover {
                    background-color: #717d8c;
                }
            }

            .layout-topbar-search {
                input {
                    background-color: lighten(#4f5965, 5%);
                    color: #ffffff;
                    @include input-placeholder(#BAC5D2);

                    &:focus {
                        border-color: #ffffff;
                    }
                }

                i {
                    color: #9FAAB6;
                }
            }
        }
    }
    //other colors
}
in app.component.ts(line 26)

Code: Select all

topbarColor = 'layout-topbar-bluegrey';

Post Reply

Return to “Olympia - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest