• TEMPLATE
  • public
    • assets
    • favicon.png
  • src
    • app
    • assets
    • index.html
    • main.ts
    • style.scss
  • .editorconfig
  • angular.json
  • browserslistrc
  • karma.conf.js
  • package.json
  • package-lock.json
  • README.md
  • tsconfig.app.json
  • tsconfig.json
  • tsconfig.spec.json
  • tsconfig.json

You can change the logo or replace it from img folder or you can edit it from HTML file.

<div class="header">
	<a [routerLink]="routes.index" class="logo">
		<img src="assets/img/logo.svg alt="logo">
	<a>
</div> 

You can add custom fonts in the assets/scss/theme-variables.scss file.

	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

You can update the font family by modifying the assets/scss/variables.scss file.

	$font-family-sans-serif:      "Golos Text", sans-serif;
		

You can change the header background color in variables.scss as per your wish

	$body-bg:                   $light;
		

The theme mode can be set through data-theme="dark" attribute on the page's root.

Dark mode variables can be customized in the assets/scss/theme-variables.scss file.

You can configure dark mode settings in the assets/scss/structure/theme.scss file.

	[data-theme="dark"] {
		 .header { 
			.header-left {
				.logo {
					display: none;
				}
				.dark-logo {
					display: block;
				}
			}        
		}
	}
		

You can set the Default Theme to dark by adding 'dark' instead of 'light' in settings.service.ts file

    public themeColor: BehaviorSubject = new BehaviorSubject(
      localStorage.getItem('themeColor') || 'light'
    );