Alpha Fusion

Appearance

Theming ​

Alpha Fusion utilizes the modern Angular Material 3 (M3) shorthand API. This architecture is built on Design Tokens, allowing for a highly customizable and scalable SCSS-based theming system.

🧩 Theme Entry Point ​

All themes are registered and mapped to CSS classes in the main theme file.

📁 File Path

src/themes/theme.scss

This file binds the theme configurations to specific classes on the <html> element.

scss
@use '@angular/material' as mat;
@use './create-theme' as createTheme;
@use './skins/indigo_theme' as indigoTheme;
@use './theme-reset';

html {
    // Default fallback theme
    @include createTheme.custom-theme(light, 'indigo-light', indigoTheme.$primary-palette, 0);

    &.indigo-light {
        @include createTheme.custom-theme(light, 'indigo-light', indigoTheme.$primary-palette, 0);
    }
    &.indigo-dark {
        @include createTheme.custom-theme(dark, 'indigo-dark', indigoTheme.$primary-palette, 0);
    }

    &.green-light {
        @include createTheme.custom-theme(light, 'green-light', mat.$green-palette, 0);
    }
    &.green-dark {
        @include createTheme.custom-theme(dark, 'green-dark', mat.$green-palette, 0);
    }
    ....
}

🌗 Theme Switching Logic ​

Themes are toggled dynamically by applying a class to the <html> tag via the application's Theme Service.

html
<!-- Example: Rose Dark Mode -->
<html class="rose-dark"></html>

Supported Pattern

The system follows the {color}-{mode} naming convention. Available colors: indigo, green, red, yellow, cyan, orange, azure, violet, rose.

🛠️ Theme Generator ​

The core logic for theme generation uses the Material 3 mat.theme mixin.

📁 File Path

src/themes/create-theme.scss

scss
@use "@angular/material" as mat;
@use "../variables";

// Generates helper classes for M3 elevation levels
@include mat.elevation-classes();

@mixin custom-theme($mode, $type, $primary, $density) {
  // Sets the browser's color scheme (scrollbars, system UI)
  color-scheme: $mode;

  // Applies the core M3 theme
  @include mat.theme((
    color: (
      theme-type: $mode,
      primary: $primary,
    ),
    typography: variables.$font-family,
    density: $density,
  ));

  // Fine-tuning design tokens
  @include mat.theme-overrides((
    body-large-tracking: 0.012rem,
  ));
}

🧭 Component Overrides ​

While mat.theme handles colors and fonts automatically, UI-specific tweaks are managed via Design Tokens or custom SCSS.

📁 Folder Path

src/scss/overrides/

Example (overrides/menu.scss):

scss
@include mat.menu-overrides(
  (
    container-color: var(--bg-card),
  )
);

🧠 Best Practices ​

Guidelines

  1. Never Modify Core Files: Do not edit files inside @angular/material.
  2. Prefer Tokens: Use mat.theme-overrides for system-wide changes before writing raw CSS.
  3. Consistency: Ensure that any new palette added to theme.scss is correctly imported from the skins/ folder.

🎯 Summary ​

  • Modern API: Fully compliant with Angular Material 3 Shorthand API.
  • Token-Driven: Easy to customize via standard Design Tokens.
  • Performance: CSS Class-based switching ensures zero-latency theme updates.
  • Scalable: Adding a new color variant takes only a few lines of code.