我有一个为我创建的应用程序 https://stackblitz.com/edit/angular-gjkbqm-schlk9?file=index.html
这个应用程序展示了如何正确使用主题，这里给出了解释
我的问题是现在的正文是一个与正文完全不同的主题和版式。
我正在寻找实现这一目标的最佳方法。 我知道你可以覆盖现有的主题，这看起来 CSS 非常密集，让我质疑为什么我首先要启动主题。 或者选项 2 是为工具栏实现一个完整的主题。
任何有关实施的建议和帮助将不胜感激
stackblitz 与我的代码略有不同，但想法是相同的
navbar.component.html
<mat-toolbar color="tertiary">
<mat-toolbar-row>
<span class="highlighted-word">{{title}}</span>
<mat-button *ngFor="let item of navbarItems" mat-icon-button [routerLink]="item.route">
<mat-icon>{{ item.icon }}</mat-icon>
<span>{{ item.title }}</span>
</mat-button>
</mat-toolbar-row>
</mat-toolbar>
nav.component.ts
import { MatToolbarModule } from '@angular/material/toolbar';
import { RouterLink } from '@angular/router';
import { navbarRoutes } from './navbar-routes';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-navbar',
standalone: true,
imports: [MatToolbarModule, MatIconModule, MatButtonModule, RouterLink,CommonModule],
templateUrl: './navbar.component.html',
styleUrl: './navbar.component.scss'
})
export class NavbarComponent {
title: string;
navbarItems = navbarRoutes;
constructor() {
this.title = "State Line Rodz NFP";
}
}
nabvar.routes.ts -- custom file from ideas on the web
export const navbarRoutes = [
{
icon: 'about',title: 'About Us',route: 'about'
},
{
icon: 'ourteam',title: 'Our Team',route: 'ourteam'
},
{
icon: 'support',title: 'Support',route: 'supportus'
},
{
icon: 'news',title: 'News',route: 'news'
},
{
icon: 'event',title: 'Events',route: 'event'
},
{
icon: 'membershipinfo',title: 'Membership Info',route: 'membershipinfo'
},
{
icon: 'home',title: 'Home',route: 'home'
},
]
styles.scss
@use '@angular/material' as mat;
@use './m3-theme.scss' as m3-theme;
@include mat.core();
html {
@include mat.all-component-themes(m3-theme.$dark-theme);
}
.title{
min-width: 100%;
text-align: center;
}
.bodytext{
width: 80%;
text-align: center;
}
.flex-container {
display: flex;
flex-direction: column;
align-items: center;
width: 80%;
margin: 0 auto;
}
.flex-body {
flex-grow:1;
width: 100%;
padding: 10px;
margin-bottom: 10px;;
text-align: center;
}
m3-theme.scss
// This file was generated by running 'ng generate @angular/material:m3-theme'.
// Proceed with caution if making changes to this file.
@use 'sass:map';
@use '@angular/material' as mat;
@include mat.core();
$typography-config: (
// <- notice!
plain-family: 'Oswald',
// <- notice!
brand-family: 'Merriweather',
// <- notice!
); // <- notice!
// Note: Color palettes are generated from primary: #000000, secondary: #D28036, tertiary: #E81F27, neutral: #622737
$_palettes: (
primary: (
0: #000000,
10: #1b1b1b,
20: #303030,
25: #3b3b3b,
30: #474747,
35: #525252,
40: #5e5e5e,
50: #777777,
60: #919191,
70: #ababab,
80: #c6c6c6,
90: #e2e2e2,
95: #f1f1f1,
98: #f9f9f9,
99: #fcfcfc,
100: #ffffff,
),
secondary: (
0: #000000,
10: #2f1500,
20: #4d2600,
25: #5d2f00,
30: #6e3900,
35: #7f4300,
40: #914d00,
50: #af641b,
60: #ce7d33,
70: #ee974b,
80: #ffb77e,
90: #ffdcc3,
95: #ffede3,
98: #fff8f5,
99: #fffbff,
100: #ffffff,
),
tertiary: (
0: #000000,
10: #410003,
20: #690007,
25: #7d000a,
30: #93000e,
35: #a90012,
40: #c00016,
50: #e92027,
60: #ff544d,
70: #ff897f,
80: #ffb4ac,
90: #ffdad6,
95: #ffedea,
98: #fff8f7,
99: #fffbff,
100: #ffffff,
),
neutral: (
0: #000000,
4: #17030a,
6: #23040e,
10: #3a0718,
12: #3f0b1c,
17: #4d1627,
20: #551d2d,
22: #5b2131,
24: #602636,
25: #632838,
30: #713343,
35: #7f3e4e,
40: #8d4a5a,
50: #aa6272,
60: #c77a8c,
70: #e694a6,
80: #ffb1c1,
87: #ffcdd6,
90: #ffd9df,
92: #ffe1e5,
94: #ffe8eb,
95: #ffecee,
96: #fff0f1,
98: #fff8f7,
99: #fffbff,
100: #ffffff,
),
neutral-variant: (
0: #000000,
10: #201a1b,
20: #352f30,
25: #413a3b,
30: #4c4546,
35: #585052,
40: #645c5e,
50: #7e7576,
60: #988e90,
70: #b3a9aa,
80: #cfc4c5,
90: #ebe0e1,
95: #faeeef,
98: #fff8f8,
99: #fffbff,
100: #ffffff,
),
error: (
0: #000000,
10: #410002,
20: #690005,
25: #7e0007,
30: #93000a,
35: #a80710,
40: #ba1a1a,
50: #de3730,
60: #ff5449,
70: #ff897d,
80: #ffb4ab,
90: #ffdad6,
95: #ffedea,
98: #fff8f7,
99: #fffbff,
100: #ffffff,
),
);
$_rest: (
secondary: map.get($_palettes, secondary),
neutral: map.get($_palettes, neutral),
neutral-variant: map.get($_palettes, neutral-variant),
error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
$light-theme: mat.define-theme((
color: (
theme-type: light,
primary: $_primary,
tertiary: $_tertiary,
),
typography: $typography-config, // <- notice!
));
$dark-theme: mat.define-theme((
color: (
theme-type: dark,
primary: $_primary,
tertiary: $_tertiary,
),
typography: $typography-config, // <- notice!
));
如果我一周前看到这个，我就不知道发生了什么，所以我学得很慢，感谢帮助
定义次要主题和版式可能会更容易，如下所示。
$typography-config-secondary: (
plain-family: Roboto,
brand-family: Open Sans,
bold-weight: 900,
medium-weight: 500,
regular-weight: 300,
);
...
...
$theme-secondary: mat.define-theme(
(
color: (
primary: mat.$violet-palette,
tertiary: mat.$magenta-palette,
),
typography: $typography-config-secondary,
)
);
@mixin all-component-themes($theme) {由于我们只想使用这个新主题对
toolbartoolbar-theme... 身体 { 字体系列：Roboto、“Helvetica Neue”、无衬线字体； 保证金：0； 内边距：30px； 高度：100%；
@include mat.all-component-themes($theme); @include mat.toolbar-theme($theme-secondary); } ...
@use '@angular/material' as mat;
$typography-config: (
// <- notice!
plain-family: 'Edu AU VIC WA NT Pre',
// <- notice!
brand-family: 'Edu AU VIC WA NT Pre',
// <- notice!
); // <- notice!
$typography-config-secondary: (
plain-family: Roboto,
brand-family: Open Sans,
bold-weight: 900,
medium-weight: 500,
regular-weight: 300,
);
$theme: mat.define-theme(
(
color: (
theme-type: light,
primary: mat.$azure-palette,
tertiary: mat.$blue-palette,
),
typography: $typography-config,
)
);
$theme-secondary: mat.define-theme(
(
color: (
primary: mat.$violet-palette,
tertiary: mat.$magenta-palette,
),
typography: $typography-config-secondary,
)
);
body {
font-family: Roboto, 'Helvetica Neue', sans-serif;
margin: 0;
padding: 30px;
height: 100%;
@include mat.all-component-themes($theme);
@include mat.toolbar-theme($theme-secondary);
}
html {
height: 100%;
}
@include mat.core();
@include mat.color-variants-backwards-compatibility($theme);
@include mat.typography-hierarchy($theme); // <- notice!