Angular新手求助：切换主题按钮点击时添加图片的SCSS配置

Hey there! Let's get this theme-specific image setup working smoothly for you. Here's a step-by-step breakdown:

1. Update Angular CLI Asset Configuration #

First, we need to make sure your images folder is recognized as a static resource by Angular CLI. Right now, your .angular-cli.json only includes assets and favicon.ico in the assets array. Let's add your images folder here so the CLI copies its contents to the dist folder during build:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "dynamic-material-theming"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "images" // Add this line to include your images folder
      ],
      // ... rest of your config remains the same
    }
  ],
  // ... rest of the file
}

2. Configure Theme-Specific Images in SCSS #

Now you can reference your images in your SCSS file, targeting the theme classes to switch between them. Let's assume you have two images: light-theme-banner.png and dark-theme-banner.png stored in src/images/.

Example 1: Background Image for a Container #

Add a container in your HTML first:

<div [class.dark-theme]="isDarkTheme">
  <button (click)="toggleTheme()">Toggle theme</button>
  <div class="theme-banner"></div> <!-- This will show the theme-specific image -->
</div>

Then update your SCSS to set background images based on the theme:

@import '~@angular/material/core/theming/all-theme';
@include md-core();
$primary: md-palette($md-deep-purple);
$accent: md-palette($md-amber);
$theme: md-light-theme($primary, $accent);
@include angular-material-theme($theme);

// Default light theme image
.theme-banner {
  width: 200px;
  height: 100px;
  background-size: cover;
  background-image: url('../images/light-theme-banner.png');
  // Adjust the path based on your SCSS file's location relative to src/images
}

.dark-theme {
  $dark-p: md-palette($md-deep-purple, 700);
  $dark-a: md-palette($md-amber);
  $dark-t: md-dark-theme($dark-p, $dark-a);
  @include angular-material-theme($dark-t);

  // Override for dark theme
  .theme-banner {
    background-image: url('../images/dark-theme-banner.png');
  }
}

Example 2: Inline Image (Alternative Approach) #

If you prefer using an <img> tag instead of a background image, you can bind the src attribute directly in your HTML (a handy alternative even though you asked about SCSS):

<div [class.dark-theme]="isDarkTheme">
  <button (click)="toggleTheme()">Toggle theme</button>
  <img [src]="isDarkTheme ? 'images/dark-theme-banner.png' : 'images/light-theme-banner.png'" alt="Theme Banner">
</div>

3. Verify Paths #

Double-check the relative path in your SCSS:

• If your SCSS file is in src/app/your-component/, the path to src/images/ will be ../images/ (two levels up)
• Adjust the path based on your actual folder structure to ensure the image loads correctly

4. Test It Out #

Run ng serve again after updating the config, and clicking the toggle button should switch both the theme and the corresponding image!

内容的提问来源于stack exchange，提问作者FDFDGSFG DJDBM