# 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](/files/mw3JTSvAR16wzoh1F9XZ)

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](/files/nFpDkeq9MoqyVAEqPbtq)

## 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dikesoft.com/fundamentals/theming.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.