fuse-angular/src/app/app.theme.scss

// -----------------------------------------------------------------------------------------------------
// @ Custom color maps for Fuse
// -----------------------------------------------------------------------------------------------------
$fuse-white: (
    500: white,
    contrast: (
        500: $dark-primary-text
    )
);

$fuse-black: (
    500: black,
    contrast: (
        500: $light-primary-text,
    )
);

$fuse-navy: (
    50: #ECECEE,
    100: #C5C6CB,
    200: #9EA1A9,
    300: #7D818C,
    400: #5C616F,
    500: #3C4252,
    600: #353A48,
    700: #2D323E,
    800: #262933,
    900: #1E2129,
    A100: #C5C6CB,
    A200: #9EA1A9,
    A400: #5C616F,
    A700: #2D323E,
    contrast: (
        50: $dark-primary-text,
        100: $dark-primary-text,
        200: $dark-primary-text,
        300: $light-primary-text,
        400: $light-primary-text,
        500: $light-primary-text,
        600: $light-primary-text,
        700: $light-primary-text,
        800: $light-primary-text,
        900: $light-primary-text,
        A100: $dark-primary-text,
        A200: $light-primary-text,
        A400: $light-primary-text,
        A700: $light-primary-text,
    )
);

// Generate Fuse color classes for custom palettes
$custom_palettes: (
    fuse-white: $fuse-white,
    fuse-black: $fuse-black,
    fuse-navy: $fuse-navy
);

@include fuse-color-classes($custom_palettes);

// -----------------------------------------------------------------------------------------------------
// @ Typography
// -----------------------------------------------------------------------------------------------------

// Force the input field font sizes to 16px
$typography: mat-typography-config(
    $input: mat-typography-level(16px, 1.125, 400)
);

// Setup the typography
@include angular-material-typography($typography);

// -----------------------------------------------------------------------------------------------------
// @ Component theming
// -----------------------------------------------------------------------------------------------------

// Import app and page component themes here to enable theming for them
@import "src/app/layout/components/chat-panel/chat-panel.theme";
@import "src/app/layout/components/toolbar/toolbar.theme";

@import "src/app/main/apps/academy/academy.theme";
@import "src/app/main/apps/calendar/calendar.theme";
@import "src/app/main/apps/chat/chat.theme";
@import "src/app/main/apps/contacts/contacts.theme";
@import "src/app/main/apps/dashboards/project/project.theme";
@import "src/app/main/apps/file-manager/file-manager.theme";
@import "src/app/main/apps/mail/mail.theme";
@import "src/app/main/apps/mail-ngrx/mail.theme";
@import "src/app/main/apps/scrumboard/scrumboard.theme";
@import "src/app/main/apps/todo/todo.theme";

@import "src/app/main/pages/authentication/login/login.theme";
@import "src/app/main/pages/authentication/login-2/login-2.theme";
@import "src/app/main/pages/authentication/register/register.theme";
@import "src/app/main/pages/authentication/register-2/register-2.theme";
@import "src/app/main/pages/authentication/reset-password/reset-password.theme";
@import "src/app/main/pages/authentication/reset-password-2/reset-password-2.theme";
@import "src/app/main/pages/authentication/forgot-password/forgot-password.theme";
@import "src/app/main/pages/authentication/forgot-password-2/forgot-password-2.theme";
@import "src/app/main/pages/authentication/lock/lock.theme";
@import "src/app/main/pages/authentication/mail-confirm/mail-confirm.theme";
@import "src/app/main/pages/coming-soon/coming-soon.theme";
@import "src/app/main/pages/errors/404/error-404.theme";
@import "src/app/main/pages/errors/500/error-500.theme";
@import "src/app/main/pages/maintenance/maintenance.theme";
@import "src/app/main/pages/pricing/style-1/style-1.theme";
@import "src/app/main/pages/pricing/style-2/style-2.theme";
@import "src/app/main/pages/pricing/style-3/style-3.theme";
@import "src/app/main/pages/profile/tabs/about/about.theme";
@import "src/app/main/pages/profile/tabs/photos-videos/photos-videos.theme";
@import "src/app/main/pages/profile/tabs/timeline/timeline.theme";
@import "src/app/main/pages/faq/faq.theme";
@import "src/app/main/pages/knowledge-base/knowledge-base.theme";

@import "src/app/main/documentation/components/cards/cards.theme";

@import "src/app/main/angular-material-elements/example-viewer/example-viewer.theme";

// Define a mixin for easier access
@mixin components-theme($theme) {

    // Layout components
    @include chat-panel-theme($theme);
    @include toolbar-theme($theme);

    // Apps
    @include academy-theme($theme);
    @include calendar-theme($theme);
    @include chat-theme($theme);
    @include contacts-theme($theme);
    @include dashboards-project-theme($theme);
    @include file-manager-theme($theme);
    @include mail-theme($theme);
    @include mail-ngrx-theme($theme);
    @include scrumboard-theme($theme);
    @include todo-theme($theme);

    // Pages
    @include login-theme($theme);
    @include login-2-theme($theme);
    @include register-theme($theme);
    @include register-2-theme($theme);
    @include reset-password-theme($theme);
    @include reset-password-2-theme($theme);
    @include forgot-password-theme($theme);
    @include forgot-password-2-theme($theme);
    @include lock-theme($theme);
    @include mail-confirm-theme($theme);
    @include coming-soon-theme($theme);
    @include error-404-theme($theme);
    @include error-500-theme($theme);
    @include maintenance-theme($theme);
    @include pricing-style-1-theme($theme);
    @include pricing-style-2-theme($theme);
    @include pricing-style-3-theme($theme);
    @include profile-about-theme($theme);
    @include profile-photos-videos-theme($theme);
    @include profile-timeline-theme($theme);
    @include faq-theme($theme);
    @include knowledge-base-theme($theme);

    // Docs
    @include docs-components-cards-theme($theme);

    // Example Viewer
    @include example-viewer-theme($theme);
}

// -----------------------------------------------------------------------------------------------------
// @ Define the default theme
// -----------------------------------------------------------------------------------------------------

// Define the primary, accent and warn palettes
$default-primary-palette: mat-palette($fuse-navy);
$default-accent-palette: mat-palette($mat-light-blue, 600, 400, 700);
$default-warn-palette: mat-palette($mat-red);

// Create the Material theme object
$theme: mat-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette);

// Add ".theme-default" class to the body to activate this theme.
// Class name must start with "theme-" !!!
body.theme-default {

    // Create an Angular Material theme from the $theme map
    @include angular-material-theme($theme);

    // Apply the theme to the Fuse Core
    @include fuse-core-theme($theme);

    // Apply the theme to the user components
    @include components-theme($theme);

    // Generate Fuse color classes for primary, accent and warn colors
    $palettes: (
        primary: $default-primary-palette,
        accent: $default-accent-palette,
        warn: $default-warn-palette
    );

    @include fuse-color-classes($palettes);
}

// -----------------------------------------------------------------------------------------------------
// @ Define a yellow light theme
// -----------------------------------------------------------------------------------------------------

// Define the primary, accent and warn palettes
$yellow-light-theme-primary-palette: mat-palette($fuse-navy, 600, 400, 700);
$yellow-light-theme-accent-palette: mat-palette($mat-yellow, 600, 400, 700);
$yellow-light-theme-warn-palette: mat-palette($mat-red);

// Create the Material theme object
$yellow-light-theme: mat-light-theme($yellow-light-theme-primary-palette, $yellow-light-theme-accent-palette, $yellow-light-theme-warn-palette);

// Add ".theme-yellow-light" class to the body to activate this theme.
// Class name must start with "theme-" !!!
body.theme-yellow-light {

    // Generate the Angular Material theme
    @include angular-material-theme($yellow-light-theme);

    // Apply the theme to the Fuse Core
    @include fuse-core-theme($yellow-light-theme);

    // Apply the theme to the user components
    @include components-theme($yellow-light-theme);

    // Generate Fuse color classes for primary, accent and warn colors
    $palettes: (
        primary: $yellow-light-theme-primary-palette,
        accent: $yellow-light-theme-accent-palette,
        warn: $yellow-light-theme-warn-palette
    );

    @include fuse-color-classes($palettes);
}

// -----------------------------------------------------------------------------------------------------
// @ Define a blue-gray dark theme
// -----------------------------------------------------------------------------------------------------

// Define the primary, accent and warn palettes
$blue-gray-dark-theme-primary-palette: mat-palette($mat-blue);
$blue-gray-dark-theme-accent-palette: mat-palette($mat-blue-gray);
$blue-gray-dark-theme-warn-palette: mat-palette($mat-red);

// Create the Material theme object
$blue-gray-dark-theme: mat-dark-theme($blue-gray-dark-theme-primary-palette, $blue-gray-dark-theme-accent-palette, $blue-gray-dark-theme-warn-palette);

// Add ".theme-blue-gray-dark" class to the body to activate this theme.
// Class name must start with "theme-" !!!
body.theme-blue-gray-dark {

    // Generate the Angular Material theme
    @include angular-material-theme($blue-gray-dark-theme);

    // Apply the theme to the Fuse Core
    @include fuse-core-theme($blue-gray-dark-theme);

    // Apply the theme to the user components
    @include components-theme($blue-gray-dark-theme);

    // Generate Fuse color classes for primary, accent and warn colors
    $palettes: (
        primary: $blue-gray-dark-theme-primary-palette,
        accent: $blue-gray-dark-theme-accent-palette,
        warn: $blue-gray-dark-theme-warn-palette
    );

    @include fuse-color-classes($palettes);
}

// -----------------------------------------------------------------------------------------------------
// @ Define a pink dark theme
// -----------------------------------------------------------------------------------------------------

// Define the primary, accent and warn palettes
$pink-dark-theme-primary-palette: mat-palette($mat-pink);
$pink-dark-theme-accent-palette: mat-palette($mat-pink);
$pink-dark-theme-warn-palette: mat-palette($mat-red);

// Create the Material theme object
$pink-dark-theme: mat-dark-theme($pink-dark-theme-primary-palette, $pink-dark-theme-accent-palette, $pink-dark-theme-warn-palette);

// Add ".theme-pink-dark" class to the body to activate this theme.
// Class name must start with "theme-" !!!
body.theme-pink-dark {

    // Generate the Angular Material theme
    @include angular-material-theme($pink-dark-theme);

    // Apply the theme to the Fuse Core
    @include fuse-core-theme($pink-dark-theme);

    // Apply the theme to the user components
    @include components-theme($pink-dark-theme);

    // Generate Fuse color classes for primary, accent and warn colors
    $palettes: (
        primary: $pink-dark-theme-primary-palette,
        accent: $pink-dark-theme-accent-palette,
        warn: $pink-dark-theme-warn-palette
    );

    @include fuse-color-classes($palettes);
}