raghu/rc-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add angular material with custom font and custom theme

Browse Source
This commit is contained in:
raghu
2025-02-25 22:19:40 -05:00
parent 0c53121568
commit c29a207be5
6 changed files with 216 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/app.config.ts
View File

@@ -2,7 +2,8 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
export const appConfig: ApplicationConfig = {
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)],
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimationsAsync()],
};

8
src/index.html
View File

@@ -6,7 +6,13 @@
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<!-- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- inter font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>

29
src/styles.scss
View File

@@ -1 +1,28 @@
/* You can add global styles to this file, and also import other style files */
// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use "@angular/material" as mat;
@use "../theme-colors" as rc-theme;
html {
@include mat.theme(
(
color: (
theme-type: light,
primary: rc-theme.$primary-palette,
tertiary: rc-theme.$tertiary-palette,
),
typography: Inter,
density: 0,
)
);
} /* You can add global styles to this file, and also import other style files */
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: Inter, sans-serif;
background-color: var(--mat-sys-surface);
}