DEV Community

Cover image for Save some bytes when using multiple themes in angular material components
Dharmen Shah for Angular Material Dev

Posted on

1

Save some bytes when using multiple themes in angular material components

Let's say you have a theme file called dark.scss like below.

// src/styles/themes/dark.scss

@use "sass:map";
@use "@angular/material" as mat;

@use "../typography/config" as typography;
@use "../components";

$my-app-dark-primary: mat.define-palette(mat.$blue-grey-palette);
$my-app-dark-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
$my-app-dark-warn: mat.define-palette(mat.$deep-orange-palette);
$my-app-dark-theme: mat.define-dark-theme(
  (
    color: (
      primary: $my-app-dark-primary,
      accent: $my-app-dark-accent,
      warn: $my-app-dark-warn,
    ),
  )
);

.dark-theme {
  @include mat.core-color($my-app-dark-theme);
  @include mat.button-color($my-app-dark-theme);
}
Enter fullscreen mode Exit fullscreen mode

}
Now, in your assets array in angular.json, just exclude the dark theme file, see below code for example. With below code, dark theme file will be bundled as dark-theme.css in final output.

"styles": [
              "src/styles.scss",
              {
                "input": "src/styles/themes/dark.scss",
                "bundleName": "dark-theme",
                "inject": false
              }
            ],
Enter fullscreen mode Exit fullscreen mode

Now, in your index.html, load dark-theme.css whenever required:

<link rel="stylesheet" href="dark-theme.css">
Enter fullscreen mode Exit fullscreen mode

That's all! To know more, visit and read the full article now:
https://angular-material.dev/articles/angular-material-theming-system-complete-guide#create-a-dark-theme

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay