ApiServer Apps -> Styles with variables.scss

I have created my Development Environment for the new Web Gui v8.2.1 and I understand how to compile one of the Apps.

For Files in the root folder like variables.scss that is located in shared\assets, how can I change the colors of all apps in this file and commit this in to the database?

Top Replies

René Zimmerli over 2 years ago in reply to René Zimmerli +3 verified

Solution: I have added the following in: ..\projects\qbm-app-landingpage\src\styles.scss

.eui-masthead {

background-color: #333;

}

.mat-toolbar.mat-primary {

background: #333;

color: white;

}

…
Hanno Bunjes over 2 years ago +1 verified

Hello René,

The variables.scss only manages a small set of components. We are working on broader support for Angular Theming ( https://material.angular.io/guide/theming ).

In 8.2.1 we do not support…

+1 Hanno Bunjes over 2 years ago

Hello René,

The variables.scss only manages a small set of components. We are working on broader support for Angular Theming ( https://material.angular.io/guide/theming ).

In 8.2.1 we do not support theming the apps yet.

Hope this helps

Hanno
Cancel
Up +1 Down

Reply

Verify Answer

Reject Answer

Cancel
0 René Zimmerli over 2 years ago in reply to Hanno Bunjes

Hello Hanno

Thanks, this sounds good, if theming will be implemented.

If I understand right, the file variables.scss does'nt have any effect to the applications.

What I have tested so far:

1. I have changed this variables as followed:

$QBM_Primary_Black: #22282b;

...
$Imx_Checkbox: rgb(130, 213, 237);

2. Then I recompiled in the workspace with ng build qbm-app-landingpage.

3. If I run ng serve qbm-app-landingpage, the styles does not change anything.

So my final question

If I want to change the main colors on all app, where exactly should I change the styles in v8.2.1 for a certain app to have them also in the next release?
Cancel
Up 0 Down

Reply

Verify Answer

Cancel
+1 René Zimmerli over 2 years ago in reply to René Zimmerli

Solution: I have added the following in: ..\projects\qbm-app-landingpage\src\styles.scss

.eui-masthead {

background-color: #333;

}

.mat-toolbar.mat-primary {

background: #333;

color: white;

}

a {

color: #9b8453;

}

This solved my issue
Cancel
Up +3 Down

Reply

Verify Answer

Reject Answer

Cancel
0 Markus Weiss-Ehlers over 2 years ago in reply to René Zimmerli

Thanks for posting the solution.
Cancel
Up 0 Down

Reply

Verify Answer

Cancel