Angular One Identity Theming

[mru-ipg]

There is a issue with theming the Portal:

In the console showing an error of refused to apply style from the create theme link. If you click also on the generated link, there is nothing.

[Mathnstein]

Posting images from #90

[Mathnstein]

@mru-ipg could you also provide me your .scss source file? I suspect something went wrong in the setup for the server to be acting like this.

[mru-ipg]

@Mathnstein which file from the root Angular project or this which are responsible to create the theme. from the /custom-theme directory?

[mru-ipg]

`$theme_font_family: 'Source Sans Pro, "Helvetica Neue", sans-serif' !default;

@use 'sass:math'; @use '@angular/material' as mat;

@import '@elemental-ui/core/src/styles/functions/to_number';

@import '@elemental-ui/core/src/styles/reset'; @import '@elemental-ui/core/src/styles/billboard'; @import '@elemental-ui/core/src/styles/cadence'; @import '@elemental-ui/core/src/styles/material_icons'; @import '@elemental-ui/core/src/styles/source_sans_pro'; @import '@elemental-ui/core/src/styles/palette'; @import '@elemental-ui/core/src/styles/typography'; @import '@elemental-ui/core/src/styles/material_fixes'; @import '@elemental-ui/core/src/styles/inputs'; @import '@elemental-ui/core/src/styles/clickables'; @import '@elemental-ui/core/src/styles/common';

$custom-typography: mat.define-typography-config( $font-family: $theme_font_family, $button: mat.define-typography-level(14px, 14px, 400), ); @include mat.core($custom-typography);

// Define the custom theme. $primary: mat.define-palette($gunmetal-palette); $accent: mat.define-palette($corbin-orange-palette); $warn: mat.define-palette($phoenix-red-palette);

$theme: mat.define-light-theme( ( color: ( primary: $primary, accent: $accent, warn: $warn, ), ) );

.space-theme { @include mat.all-component-themes($theme); }`

[mru-ipg]

@Mathnstein i did all like you have mention on the README file

[Mathnstein]

@mru-ipg That .scss file is defining a "space-theme" which is what the readme says to do - but it is important the configuration matches as you have defined something as "my-theme" from your pictures.

I suspect the url isn't being found and thats resulting in your error.

{ "Themes": [ { "Name": "space-theme", "Display Name": "Space Theme", "Class": "space-theme", "Urls": [ "../space-theme/custom-theme.css" ] } ] }

@hannoquest would you agree?

[mru-ipg]

And where should it be in the root of the angular Project? I did it several times, every time shows me up this error.

Kind Regards @Mathnstein @hannoquest

[Mathnstein]

@mru-ipg once you have built the custom theme via the npm build script as specified in the readme, zipped and created the corresponding configuration .json

Then within your assemblies distribution: assemblies -- imxweb ---- Html_<name of theme>.zip <-- contains the .css code ---- Html_<name of theme> ------ imx-theme-config.json <-- Tells the API server how to load this theme and apply it's contents

So the content of this does not live within the angular project itself, but within the API server

[mru-ipg]

@Mathnstein

I have still the issues with the custom theme.

[Mathnstein]

@mru-ipg I'm seeing the api call refer to 4200 -> the file look up should be on 8182 within the api server.

These files don't live within imxweb but within the imxclient/api server.