Style Customization

Gene fully follows the material design principles. So its too easy to customize gene as per as your requirement.

To complete understanding of material theming , please go to this link.

Gene Theming

We made scss files in assets folder you can check by this root src\assets\scss

The steps of custom theme is clearly mentioned in this doc. So we made custom theme styling for gene.

Material Theming Variables

_material.variables.scss

@import '~@angular/material/theming/';

$primary: mat-palette($mat-blue,800);
$accent:  mat-palette($mat-cyan,700);
$warn: mat-palette($mat-red,600);
$success: mat-palette($mat-green,600);
$theme: mat-light-theme($primary, $accent, $warn);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);

These are some main variables to set the color sceheme for whole theme. These color as we mentioned earlier is follows the Google color system.

You can edit or update it by the standards of google color system.

Gene Theme Variables

This variables file has all the required color to manage the color scheme except material theme. Like if you want to change the color of sidebar,header,typography etc of heading

_app.variables.scss

//
// General
//


//Sidebar

$sidebar-width: 16rem !default;
$sidebar-text-color: #e4e7ef;
$sidebar-bg-color: #37474F;
$compact-sidebar-width: 70px !default;


//  Header 
$header-bg-color: #f0f2f7;
$header-font-color:#000000;
//Md card


$mat-card-padding-top-bottom :0.875rem;
$mat-card-padding-left-right : 1.5rem;
$mat-card-bg-color:#ffffff;
$mat-card-title-font-color:#3A405B;
$mat-card-hover-effect:0 0 10px rgba(0, 0, 0, 0.2);
//mat-icon
$mat-card-icon-color: #868e96;

//Main Container 
$container-bg:#f0f2f7;
//Rounded Icons
$highlight-icons: #ffffff;
$highlight-icon-color:#3A405B;


// Typography
//


$font-color: #3A405B;
//Meta post
$meta-post-color:#9c9fad;
$meta-post-font-weight:bold;
//Breadcrumb
$breadcrumb-font-size:0.875rem;
$breadcrumb-font-color:#3A405B;

//Mat list hover bg
$mat-list-hover-bg-color: rgba(0, 0, 0, 0.2);
$html-font-size: 16px;
$mat-font-family: 'Roboto', sans-serif;
$font-size-base: 1rem !default;
$font-weight-base: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-bold: 600 !default;

//Heading Font Size 

$font-size-h1: 2rem !default;
$font-size-h2: 1.625rem !default;//26px
$font-size-h3: 1.375rem !default;//22px
$font-size-h4: 1.125rem !default;//18px
$font-size-h5: 0.875rem !default;//14px
$font-size-h6: 0.75rem !default;//12px
//Heading Font color

$h1-font-color:inherit;
$h2-font-color:inherit;
$h3-font-color:inherit;
$h4-font-color:inherit;
$h5-font-color:inherit;
$h6-font-color:inherit;

$headings-margin-bottom: (1rem / 2) !default;
$headings-font-family:   inherit !default;
$headings-font-weight:   400 !default;
$headings-line-height:   1.1 !default;
$headings-color:         inherit !default;

//
// Radius
//
//Mat -card
$border-radius-base:8px;

Changing the color of Charts

If you want to change the color value for Charts then you have to go to that specific chart type and make changes inside its .ts file

for Example:If you want to Change the color value for Dashborad Line Chart then go to >src>app>dashborad>dashborad v1 and open its .ts file and search for line chart and change in lineChartColor:

// lineChart
  public lineChartData:Array<any> = [
    {data: [90, 150, 80, 300, 90, 290, 350,200,80,100,220,230,310,230,150,180,120,150], label: 'Series A'},
    {data: [110, 90, 150, 130, 290, 210, 200,80,80,110,320,310,50,170,210,310,150,80,450], label: 'Series B'},
  ];
  public lineChartLabels:Array<any> = ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12','13','14','15','16','17','18'];
  public lineChartOptions:any = {
    responsive: true,
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: true,
          suggestedMax: 450
        }
      }]
    }
  };
  lineChartColors: Array <any> = [{
    backgroundColor: 'rgba(235, 78, 54, 0.2)',
    borderColor: 'rgba(235, 78, 54, 1)',
    pointBackgroundColor: 'rgba(235, 78, 54, 1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(235, 78, 54, 0.8)'
  }, {
    backgroundColor: 'rgba(50, 203, 216, 0.2)',
    borderColor: 'rgba(50, 203, 216, 1)',
    pointBackgroundColor: 'rgba(50, 203, 216, 1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(50, 203, 216, 0.8)'
  }];