Dynamic Theme Without A Library

The idea of theming has been around for as far back as I can recollect. Enabling clients to pick the look and feel of your item has extraordinary value?—?it makes a progressively restricted encounter and diminishes designer maintenance time.

 

How might we make something like this in our Angular applications?

 

Why Sass Alone Won't Work

 

In spite of the fact that Sass factors may work to make a preset themed involvement, the greatest downside is that it can't be controlled by JavaScript. We need JavaScript to progressively change the estimation of our variable!

 

Why Material Alone Won't Work

 

As far back as Angular Material was discharged, engineers have been rushing to this library to use their reusable parts (also implicit availability)

 

Material accompanies worked in theming, yet this may not work for two reasons:

 

• Of course, Material accompanies it's own shading palette that is upgraded for availability. On the off chance that you need to produce more hues, you'll have to pass it into their tangle palette mixin or make another topic record, utilizing outsider tooling. This makes an outside reliance and confines the capacity to switch subjects without contacting code.

 

• In spite of the fact that it is an extraordinary alternative, not every person needs to utilize Material! Numerous engineers don't wish to import a whole library to use parts and pick to make their own.

 

Solution -  Backtalk + CSS Variables!

 

In the event that you have never utilized local CSS Custom Properties (I call them factors), there is an extraordinary article (here) to enable you to begin. The reason this methodology works is on the grounds that CSS factors can be controlled by JavaScript! With this blend, you can utilize a structure to pass CSS factors to a Sass map, which can be utilized all through the application.

 

Implementation

 

The center guideline behind this strategy is consolidating Sass maps and CSS Variables.

 

In our theme.scss document, the default esteems are set and go into a Sass map

 

Theme.scss

// default colors
.theme-wrapper {
  --cardColor: #CCC;
  --cardBackground: #FFF;
  --buttonColor: #FFF;
  --buttonBackground: #FFF;
  --navColor: #FFF;
  --navBackground: #FFF;
  --footerColor: #FFF;
  --footerBackground: #FFF;
  --footerAlignment: left;
}
// pass variables into a sass map
$variables: (
  --cardColor: var(--cardColor),
  --cardBackground: var(--cardBackground),
  --buttonColor: var(--buttonColor),
  --buttonBackground: var(--buttonBackground),
  --navColor: var(--navColor),
  --navBackground: var(--navBackground),
  --footerColor: var(--footerColor),
  --footerBackground: var(--footerBackground),
  --footerAlignment: var(--footerAlignment)
);

 

A capacity is made to restore the local css variable from the worldwide saas map

 

Function.scss

 

@function var($variable) {
  @return map-get($variables, $variable);
}

 

The parts would now be able to peruse these two records to have a dynamic variable that changes upon structure resubmit

 

Card.component.scss

 

@import '../../theme';
@import '../../functions';
.card {
  background-color: var(--cardBackground);
  color: var(--cardColor);
}

 

The card's experience shading is presently #FFFFFF and content shading is #CCCCCC

 

Changing Values

 

Through the topic picker part!

 

In our topic picker.component.html document, we are utilizing format frames with ngModel to make an item with a one of a kind key (style) and esteem (input). The item at that point gets go to the TypeScript record which powerfully overwrites the variable.

 

subject picker.component.ts

// searching the entire page for css variables
private themeWrapper = document.querySelector('body');
onSubmit(form) {
  this.globalOverride(form.value);
}
globalOverride(stylesheet) {
  if (stylesheet.globalNavColor) {
      this.themeWrapper.style.setProperty('--navColor',     stylesheet.globalNavColor);
  }
...
  if (stylesheet.globalButtonColor) {
      this.themeWrapper.style.setProperty('--buttonColor',     stylesheet.globalButtonColor);
  }
}

 

 

The globalOverride work verifies whether an value exists for that particular variable, at that point replaces each CSS Variable with the new inputted one.