Theming

Overview

The ui-theming package provides a way to set the theme of your application. This package is used to set the theme of the application and provides a way to customize the theme.

Why use ui-theming?

Consistency: Ensures that the application has a uniform style.
Customization: Provides a way to customize the theme of the application.
Ease of Use: Simplifies the process of setting the theme of the application.

How to use ui-theming

Step 1: Install the package

Ensure that the ui-theming package is installed in your application.

angular.json
{
  "projects": {
    "your-application": {
      "architect": {
        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": [
                "node_modules",
                "node_modules/@celerofinancas/ui-theming/styles"
                //...
              ]
            },
          }
        }
      }
    }
  }
}

Step 2: Change the theme

Set the theme of the application in the startup file of your application.

If you want to change the theme of the application dynamically, you can use the UiThemingService provided by the ui-theming package.

app.component.ts
import { Component, inject } from '@angular/core';
import { UiThemingService } from '@celerofinancas/ui-theming';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  public theming = inject(UiThemingService);

  constructor() {
    super();
    this.theming.setTheme(configs.colorTheme || COLOR_THEME.light, configs.palette);
  }

  public changeTheme(theme: COLOR_THEME, palette: PALETTE): void {
    this.theming.setTheme(theme, palette);
  }
}

Step 3: Generate a new theme

custom-light-palette.scss
$primary: (
  600           : HSL_COLOR,
  500           : HSL_COLOR,
  400           : HSL_COLOR,
  300           : HSL_COLOR,
  200           : HSL_COLOR,
  contrast      : HSL_COLOR,
);

$secondary: (
  500           : HSL_COLOR,
  400           : HSL_COLOR,
  300           : HSL_COLOR,
  200           : HSL_COLOR,
  contrast      : HSL_COLOR,
);

$secondary-background: (
  600           : HSL_COLOR,
  500           : HSL_COLOR,
  400           : HSL_COLOR,
  300           : HSL_COLOR,
  200           : HSL_COLOR,
  contrast      : HSL_COLOR,
);

$foreground: (
  600           : HSL_COLOR,
  500           : HSL_COLOR,
  400           : HSL_COLOR,
  300           : HSL_COLOR,
  200           : HSL_COLOR,
  100           : HSL_COLOR,
  50            : HSL_COLOR,
  40            : HSL_COLOR,
  30            : HSL_COLOR,
  20            : HSL_COLOR,
  10            : HSL_COLOR,
);

$border : (
  default       : HSL_COLOR,
  secondary     : HSL_COLOR,
);

$background: (
  main          : HSL_COLOR,
  elevated      : HSL_COLOR,
  accent        : HSL_COLOR,
  tooltip       : HSL_COLOR,
  header        : HSL_COLOR,
);

$text: (
  secondary     : HSL_COLOR,
  strong        : HSL_COLOR,
  medium        : HSL_COLOR,
  light         : HSL_COLOR,
);

$input: (
  background    : HSL_COLOR,
  foreground    : HSL_COLOR,
  border        : HSL_COLOR,
  disabled: (
    background  : HSL_COLOR,
    foreground  : HSL_COLOR,
  ),
);

$button: (
  disabled: (
    background  : HSL_COLOR,
    foreground  : HSL_COLOR,
  ),
);

$warn: (
  500           : HSL_COLOR,
  400           : HSL_COLOR,
  contrast      : HSL_COLOR,
);

$danger: (
  600           : HSL_COLOR,
  500           : HSL_COLOR,
  400           : HSL_COLOR,
  300           : HSL_COLOR,
  200           : HSL_COLOR,
  contrast      : HSL_COLOR,
);

$info: (
  600           : HSL_COLOR,
  500           : HSL_COLOR,
  400           : HSL_COLOR,
  contrast      : HSL_COLOR,
);

$expense        : HSL_COLOR;

$revenue        : HSL_COLOR;

$shadow: (
  500           : HSL_COLOR,
  400           : HSL_COLOR,
  300           : HSL_COLOR,
  200           : HSL_COLOR,
  100           : HSL_COLOR,
  secondary     : HSL_COLOR,
);

application-theme.scss
@use 'sass:meta';
@use 'cds-base-theme' as *;
@use 'cds-theme-generator' as cds;

// Import your custom palette
@use './custom-light-palette';
@use './custom-dark-palette';

:root body[cds-theme='light'] {
  @include cds.generate-theme(
    $primary: (101, 82%, 35%), // Your custom primary base color
    $secondary: (143, 69%, 12%), // Your custom secondary base color
    $danger: (353, 63%, 50%), // Your custom danger color
    $success: (101, 82%, 35%), // Your custom success color
    $map: meta.module-variables('custom-light-palette') // Use the custom palette
  );
}

:root body[cds-theme='dark'] {
  @include cds.generate-dark-theme(
    $primary: (101, 82%, 35%), // Your custom primary base color
    $secondary: (143, 69%, 12%), // Your custom secondary base color
    $danger: (353, 63%, 50%), // Your custom danger color
    $success: (101, 82%, 35%), // Your custom success color
    $map: meta.module-variables('custom-dark-palette') // Use the custom palette
  );
}

Color explanation

When you provide a color to the generate-theme function, it will be used as the base color for the theme. The function will generate the rest of the colors based on this base color.

For example, if you provide a color to $primary, it will be the primary-500 color of the theme. The function will generate the rest of the colors based on this color.

The colors that you define in $map will override the colors generated by the function. For example, if you provide a color to $primary-600, it will override the color generated by the function.

Keep in mind to only provide the colors that you want to override. The rest of the colors will be generated by the function.

Step 4: Import the theme in your angular.json file

You can import the theme in your angular.json file to apply the theme globally.

angular.json
{
  "projects": {
    "your-application": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.scss",
              "src/app/shared/styles/themes/application-theme.scss"
            ]
          }
        }
      }
    }
  }
}

Explanation

Install the Package: The ui-theming package should be installed in the application to set the theme.
Configure the Theme: Set the theme of the application in the startup file of the application.
Generate a New Theme: You can generate a new theme by defining the color palette in the application-theme.scss file.
Import the Theme: You can import the theme in your angular.json file to apply the theme globally.

Conclusion

By following these steps, you can set the theme of your application using the ui-theming package. This package provides a way to set the theme of the application and customize the theme according to your requirements.

Overview​

Why use ui-theming?​

How to use ui-theming​

Step 1: Install the package​

Step 2: Change the theme​

Step 3: Generate a new theme​

Step 4: Import the theme in your angular.json file​

Explanation​

Conclusion​