Use Dynamic Styling In LWC Salesforce

<template>
	<div class="app slds-p-around_x-large">
		<article class={divBackground}>
			<div class="slds-card__header slds-grid">
				<header class="slds-media slds-media_center slds-has-flexi-truncate">
					<div class="slds-media__body">
						<h2 class="slds-card__header-title">
							<a href="#" class="slds-card__header-link slds-truncate" title="Accounts">
								<span>Accounts</span>
							</a>
						</h2>
					</div>
					<div class="slds-no-flex">
						<button class="slds-button slds-button_neutral" onclick={handleClick}>Change Background</button>
					</div>
				</header>
			</div>
		</article>
	</div>
</template>

import { LightningElement } from "lwc";

export default class LWCDynamicCSS extends LightningElement {
  isColorfull = false;

  /**
   * Getter for the css property
   */
  get divBackground() {
     return this.isColorfull ? "slds-card backgroundColor" : "slds-card backgroundNoColor";
  }

  handleClick(){
    this.isColorfull = !this.isColorfull; 
  }
}

.backgroundColor {
    background-color: rgb(0, 112, 210);
    color:white;
}

.backgroundNoColor{
    background-color: rgb(247, 247, 247)
}