feat: default theme can load colors, highlighting active router links
MODIFY
src/app/components/navigation/navigation.component.html
src/app/components/navigation/navigation.component.html
<a *ngIf="link.openInNewTab" [href]=link.link target="_blank">
<span>{{link.name}}</span>
</a>
- <a *ngIf="!link.openInNewTab" [routerLink]="link.link">
+ <a *ngIf="!link.openInNewTab" [routerLink]="link.link" routerLinkActive="active-link">
<span>{{link.name}}</span>
</a>
<span *ngIf="!last" class="navigation-separator">{{navigation.separator}}</span>

MODIFY
src/styles.scss
src/styles.scss
+@use '~@angular/material' as mat;
+
@import '~@angular/material/theming';
@import './themes/custom';
@include mat-core();
/***** THEMING *****/
+@mixin app-color($config-or-theme) {
+ // Extract the color configuration in case a theme has been passed.
+ // This allows consumers to either pass a theme object or a color configuration.
+ $config: mat-get-color-config($config-or-theme);
+ // Extract the palettes you need from the theme definition.
+ $primary-palette: map-get($config, primary);
+ $accent-palette: map-get($config, accent);
+ $warn-palette: map-get($config, warn);
+
+ $primary: mat-color($primary-palette);
+
+ // CUSTOM SCSS
+ .active-link{
+ color: $primary;
+ }
+}
+
+@mixin app-theme($theme) {
+ // Extracts the color and typography configurations from the theme.
+ $color: mat-get-color-config($theme);
+ $typography: mat-get-typography-config($theme);
+
+ // Do not generate styles if configurations for individual theming
+ // systems have been explicitly set to `null`.
+ @if $color != null {
+ @include app-color($color);
+ }
+
+ // Include theme styles for core and each component used in your app.
+ // Alternatively, you can import and @include the theme mixins for each component
+ // that you are using.
+ @include angular-material-theme($theme);
+
+ // Include theme styles for components.
+}
+
.theme {
- @include angular-material-theme($theme)
+ @include app-theme($theme);
}
+$config: mat.get-color-config($theme);
+
/***** DEFINITIONS *****/
/** Font **/
$default-font: 'Open Sans', sans-serif;
@@ -75,9 +115,10 @@ h4 {
/** a-tags **/
a {
+ color: black;
text-decoration: none;
&:visited {
- color: $primary;
+ color: black;
}
}

MODIFY
src/themes/custom.scss
src/themes/custom.scss
@@ -150,8 +150,4 @@ $primary-palette: mat-palette($custom-blue);
$accent-palette: mat-palette($custom-grey);
$warn-palette: mat-palette($custom-red);
-$primary: var(--blue);
-$warn: var(--red);
-$accent: var(--grey);
-
$theme: mat-light-theme($primary-palette,$accent-palette, $warn-palette);

MODIFY
src/themes/default.scss
src/themes/default.scss
@@ -5,8 +5,4 @@ $primary-palette: mat-palette($mat-indigo);
$accent-palette: mat-palette($mat-pink);
$warn-palette: mat-palette($mat-lime);
-$primary: map-get($primary-palette, 500);
-$warn: map-get($warn-palette, 500);
-$accent: map-get($accent-palette, 500);
-
$theme: mat-light-theme($primary-palette, $accent-palette, $warn-palette);

feat: default theme can load colors, highlighting active router links