# Theming

## Live example

{% hint style="success" %}
[Theming](https://demos.dikesoft.com/dk-grid/theming) live example.
{% endhint %}

## DikeGrid theming

The DikeGrid bases its theming process on the Angular Material's theming system. Therefore, DikeGrid exposes `color`, `typography`, and `theme` mixins.

{% hint style="success" %}
See the official docs for further details on [Angular Material's theming system](https://material.angular.io/guide/theming-your-components).
{% endhint %}

You have to define your theme and include DikeGrid's mixins and Angular Material's mixins in your application.

## Defining a theme

You have to create your primary and accent palettes with an optional warm palette when defining a theme. Once you have the palettes, you can create a **light** or a **dark** theme.

{% hint style="success" %}
See the official docs on [Theming Angular Material](https://material.angular.io/guide/theming).
{% endhint %}

Let us create a theme:

```scss
@use "@angular/material" as mat;
@use "@dikesoft/angular-data-grid" as dkg;

// The core mixin must be included exactly once for your application:
@include mat.core();

// The "warn" palette is optional:
$primary: mat.define-palette(mat.$indigo-palette);
$accent:  mat.define-palette(mat.$pink-palette, A200, A100, A400);

// You can define a dark theme as well:
$theme: mat.define-light-theme((
  color: (
    primary: $primary,
    accent: $accent
  )
));

// Emit styles for all Angular components:
@include mat.all-component-themes($theme);
// Emit style for the DikeGrid component:
@include dkg.theme($theme);
```

### Customizing typography

You can also provide your typography specifications when defining a theme.

```scss
@use "@angular/material" as mat;
@use "@dikesoft/angular-data-grid" as dkg;

// The core mixin must be included exactly once for your application:
@include mat.core();

// Define a custom typography:
$custom-typography: mat.define-typography-config(
  $font-family: Open Sans,
  $title: mat.define-typography-level(1.25rem, 2rem, 600),
  $body-2: mat.define-typography-level(0.875rem, 1.5rem, 600),
  $button: mat.define-typography-level(0.875rem, 0.875rem, 500),
  $input: mat.define-typography-level(0.875rem, 1, 400)
);

// The "warn" palette is optional:
$primary: mat.define-palette(mat.$indigo-palette);
$accent:  mat.define-palette(mat.$pink-palette, A200, A100, A400);

// You can define a dark theme as well:
$theme: mat.define-light-theme((
  color: (
    primary: $primary,
    accent: $accent
  ),
  typography: $custom-typography
));

// Emit styles for all Angular components:
@include mat.all-component-themes($theme);
// Emit style for the DikeGrid component:
@include dkg.theme($theme);
```

{% hint style="success" %}
See the official doc for [customizing typography](https://material.angular.io/guide/typography).
{% endhint %}

## Using a pre-built theme

DikeGrid includes four pre-built themes CSS files. Each of them uses the same palettes as Angular Material pre-built themes.

<table><thead><tr><th width="338.11648644704013">Theme</th><th width="150">Scheme</th><th>Palettes</th></tr></thead><tbody><tr><td><code>deeppurple-amber.css</code></td><td>Light</td><td>deep-purple, amber, red</td></tr><tr><td><code>indigo-pink.css</code></td><td>Light</td><td>indigo, pink, red</td></tr><tr><td><code>pink-bluegrey.css</code></td><td>Dark</td><td>pink, bluegrey, red</td></tr><tr><td><code>purple-green.css</code></td><td>Dark</td><td>purple, green, red</td></tr></tbody></table>

You can add the DikeGrid styles in two ways: **importing the CSS file** directly in the `styles.scss` file or adding the entry in the **styles array** from the `angular.json` file.

### Importing the CSS file

Open the `styles.scss` file and add the following line:

```scss
@import "@dikesoft/angular-data-grid/prebuilt-themes/indigo-pink.css";
```

### Adding the CSS file to the styles array

{% code title="angular.json" %}

```json
"styles": [
   "node_modules/@dikesoft/angular-data-grid/prebuilt-themes/indigo-pink.css",
   "src/styles.scss"
]
```

{% endcode %}

## Custom scrollbars

As you notice, all the live examples show **thin** and **colored** scrollbars.

By default, the DikeGrid applies styles to its scrollbars.

![Custom scrollbars](https://3888584995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpDxfe6pgRLqBLMQgZ0kG%2Fuploads%2FgJfQqjCYtyGkIUfFUEdF%2Ftheming-custom-scrollbars.png?alt=media\&token=0a15dd7f-d682-4332-8d1c-938a7b79badc)

You can unset this scrollbar customization by providing a <mark style="color:red;">`false`</mark> value through an Injection Token called <mark style="color:blue;">`CUSTOM_SCROLLBARS`</mark>.

Let us provide the <mark style="color:blue;">`CUSTOM_SCROLLBARS`</mark> Injection Token:

{% code title="theming.module.ts" %}

```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { DikeDataGridModule, CUSTOM_SCROLLBARS } from '@dikesoft/angular-data-grid';
import { SharedModule } from 'app/shared/shared.module';

import { themingRoutes } from 'app/modules/admin/theming/theming.routing';
import { GridThemingComponent } from './grid-theming/grid-theming.component';

@NgModule({
  declarations: [
    GridThemingComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(themingRoutes),

    SharedModule,
    DikeDataGridModule
  ],
  providers: [
    { provide: CUSTOM_SCROLLBARS, useValue: false }
  ]
})
export class ThemingModule { }

```

{% endcode %}

When providing the mentioned Injection Token, the DikeGrid shows the default scrollbars.

![Default scrollbars](https://3888584995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpDxfe6pgRLqBLMQgZ0kG%2Fuploads%2FAhzUAGbaqxbKV2lRgo37%2Ftheming-no-custom-scrollbars.png?alt=media\&token=b506e554-0d6a-4af4-9add-f3b3b442c79a)

## Summary

Since the DikeGrid bases its theming process on the Angular Material's theming system is very easy to customize your DikeGrid instances because you are familiar with that process.

{% tabs %}
{% tab title="grid-theming.component.html" %}

```markup
<dike-grid id="grid-theming" height="600px"
    [displayRowId]="gridProperties.displayRowId"
    [gridElevation]="gridProperties.matElevation"
    [gridElevationValue]="gridProperties.elevationValue"
    [striped]="gridProperties.stripeRows"
    [verticalRowLines]="gridProperties.verticalRowLines"
    
    [allowColumnDragging]="gridProperties.allowColumnDragging"

    [datasource]="dkgDataSource">

    <dike-grid-column
        fieldName="employeeId"
        headerText="Employee Id"
        dataType="Text"
        width="350">
    </dike-grid-column>

    <dike-grid-column
        fieldName="completeNameGroup"
        headerText="Complete Name">

        <dike-grid-column
            fieldName="firstName"
            headerText="Name"
            dataType="Text"
            width="150">
        </dike-grid-column>

        <dike-grid-column
            fieldName="lastName"
            headerText="Surname"
            dataType="Text"
            width="150">
        </dike-grid-column>
    </dike-grid-column>

    <dike-grid-column
        fieldName="gender"
        headerText="Gender"
        dataType="Binary"
        width="110">
    </dike-grid-column>

    <dike-grid-column
        fieldName="age"
        headerText="Age"
        dataType="Numeric"
        contentAlign="center"
        width="100">
    </dike-grid-column>

    <dike-grid-column
        fieldName="email"
        headerText="Email"
        dataType="Text"
        width="300">
    </dike-grid-column>

    <dike-grid-column
        fieldName="hireDate"
        headerText="Hire Date"
        dataType="Date">
    </dike-grid-column>
</dike-grid>

```

{% endtab %}

{% tab title="grid-theming.component.ts" %}

```typescript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subscription } from 'rxjs';

import { DikeGridDataSourceInput } from '@dikesoft/angular-data-grid';

import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { SampleData } from 'app/services/sample-data.service';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';

@Component({
  selector: 'grid-theming',
  templateUrl: './grid-theming.component.html',
  styleUrls: ['./grid-theming.component.scss'],

  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class GridThemingComponent implements OnInit, OnDestroy {

  dkgDataSource: DikeGridDataSourceInput<Employee>;
  gridProperties: DikeGridProperties;

  private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;

  constructor(
    private cdr: ChangeDetectorRef,
    private gridConfig: DikeGridConfig,
    private sampleData: SampleData) { }

  ngOnInit(): void {
    // Get 1000 entries from the REST API:
    this.dkgDataSource = this.sampleData.getEmployees(1000);
    // Listening to any config property change:
    this.setChangeGridPropertiesSubscription();
  }

  ngOnDestroy(): void {
    this.changeGridPropertiesSubscription.unsubscribe();
  }

  private setChangeGridPropertiesSubscription(): void {
    this.changeGridPropertiesSubscription.unsubscribe();
    this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
      this.gridProperties = props;
      this.cdr.markForCheck();
    });
  }
}

```

{% endtab %}

{% tab title="theming.module.ts" %}

```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { DikeDataGridModule, CUSTOM_SCROLLBARS } from '@dikesoft/angular-data-grid';
import { SharedModule } from 'app/shared/shared.module';

import { themingRoutes } from 'app/modules/admin/theming/theming.routing';
import { GridThemingComponent } from './grid-theming/grid-theming.component';

@NgModule({
  declarations: [
    GridThemingComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(themingRoutes),

    SharedModule,
    DikeDataGridModule
  ],
  providers: [
    { provide: CUSTOM_SCROLLBARS, useValue: false }
  ]
})
export class ThemingModule { }

```

{% endtab %}
{% endtabs %}