Issue
I follow the documentation of angular material to make theme.
I have this:
And even if it seems to works fine, you can see that some items didn't change: background, icons...
In my themes.scss (which is well imported), I have this:
$themes-map: (
indigo-pink: (
primary-base: $mat-indigo,
accent-base: $mat-pink,
),
deeppurple-amber: (
primary-base: $mat-deep-purple,
accent-base: $mat-amber,
),
pink-bluegrey: (
primary-base: $mat-pink,
accent-base: $mat-blue-gray,
),
purple-green: (
primary-base: $mat-purple,
accent-base: $mat-green,
)
);
I tried to add a dark theme, for example deeppurple-amber-dark:
deeppurple-amber-dark: (
primary-base: $mat-deep-purple,
accent-base: $mat-amber,
),
But the background of the menu to change theme always stay white, so I think I replace the basic theme. I tried to remove the deeppurple-amber theme to get the default one, but now I don't have anything on the theme selector...
I found that I should add class="mat-app-background", so I have this:
<body class="mat-app-background mat-typography">
<app-root></app-root>
</body>
But nothing change.
I'm not using the mat-sidenav-container such as other question refer. I'm using mat-toolbar but only for the header, so I don't know if it change something.
How can I make all of those be compatible with dark theme ?
Here you can find an example of working project, without outdated versions.
You can check on stackblitz. Warn: this can't work because stackblitz don't import repo from files.
Solution
The problem as i see it in your code is that you are not using Material as expected, you need to use the layout components it offers and the styles will be applied.
For example if i wrap the router outlet with mat-card like so:
<div class="content" role="main">
<mat-card>
<router-outlet></router-outlet>
</mat-card>
</div>
I think Material is not a good option if you just want to use the styles without using the components, maybe try some CSS frameworks like bootstrap or tailwind.
Answered By - Boban Stojanovski
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.