0

I'm using Angular Material theming for my project. I have created a custom theme, with a primary, accent and warn color. Everything is working fine, and I'm switching to material-dark-theme with a class on the root of the project.

As I am looking at the dark-mode, I am tweaking the scss theme for custom component - some elements should have been colored using background - and things are going smoothly.

The problem is, as I was looking at Material Theming guidelines, I came across this image : Google material dark theme example

Here, it seems obvious that the app bar (where "Analytics" is written) uses the primary (purple) as background for the light theme. Then, for the dark theme... Suddenly, it seems as though the color used is a background color (perhaps card, or any other variant).

I would absolutely love to be able to do the same : less primary/colors in the dark mode for some components (many are custom) of my project. The issue is I have no idea how to best achieve this.

I've followed this awesome guide to apply the theme to my application, so my theme files are separated from my components, and their mixin included in my main.scss file.

Does someone have a suggestion for me ? I would like to do the least code duplication possible. Thank you !

Edit

I'm trying something out to have different colors (background vs primary) on some parts of my components. So far it looks something like this :

component's theme file

@mixin component-light-theme($theme) {
    $primary: map-get($theme, primary);

    .component {

        &__header {
            background: mat-color($primary);
            color: mat-color($primary, default-contrast);
        }
    }
}

@mixin component-light-theme($theme) {
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);

    .component {

        &__header {
            background: mat-color($background, background);
            color: mat-color($foreground, text);
        }
    }
}

main scss file extract

@mixin specific-light-theme($theme) {
    @include component-light-theme($theme);
    ...
}

@mixin specific-dark-theme($theme) {
    @include component-dark-theme($theme);
    ...
}

.light-theme {
    @include angular-material-theme($light-theme);
    @include my-components-theme($light-theme);
    @include specific-light-theme($light-theme);
}

.dark-theme {
    @include angular-material-theme($dark-theme);
    @include my-components-theme($dark-theme);
    @include specific-dark-theme($dark-theme);
}

It creates a bit of duplication, but so far it's the best way I found. Any thoughts ?

4

0 回答 0