Backend-Powered Styles for Your User Interface

In certain scenarios, there is a need to fetch styles from the backend. This could be particularly relevant when dealing with private themes or implementing white-label solutions. The backend, in this context, acts as the source of style settings, drawing them either from a database or a YAML file. The specific data source may vary, but the process remains consistent.

In this article, I'm going to demystify the art of setting styles for our UI.

Let's assume that the UI is constructed with Angular, although the principles we're about to delve into are versatile and can be applied regardless of the framework you choose, or even if you opt for a framework-less approach.

To start, let's create a service:

@Injectable()
export class StylesService {

  defaultStyles: Record<string, string> = {
    primary: 'green',
    secondary: 'blue',
  };

  constructor(
    private readonly http: HttpClient,
    @Inject(DOCUMENT) private readonly document: Document,
  ) {}

  ...
}

We've established default styles for both primary and secondary colors. To achieve our goals, we'll be making use of HttpClient and Document. Let's proceed by implementing some essential methods.

The initial method's purpose is to retrieve styles from the backend and seamlessly integrate them into the Document Object Model (DOM):

setStyles(): void {
   this.http.get('/styles').subscribe((styles: Record<string, string>) => {
     styles = {...this.defaultStyles, ...styles};

     localStorage.setItem('currentStyles', JSON.stringify(styles));

     this.document.documentElement.style.setProperty('--primary-color', styles.primary || '');
     this.document.documentElement.style.setProperty('--secondary-color', styles.secondary || '');
   });
  }

Initially, we begin by redefining the default styles according to our specific requirements. Subsequently, we save the existing styles in Local Storage, making them accessible for use within our JavaScript code. Concurrently, we establish CSS variables for the Document element, which can be harnessed within our CSS code.

The second method in our arsenal retrieves styles from Local Storage, allowing us to easily access and return them when needed:

  getStyles(): Record<string, string> {
    const styles = localStorage.getItem('currentStyles');

    if (styles) {
      return JSON.parse(styles) as Record<string, string>;
    }

    return null;
  }

This method becomes a valuable tool that we can employ across various components of our project, ensuring consistency in style management throughout.

If your project uses SCSS, this code performs translating CSS variables into SCSS variables:

$primary-color: var(--primary-color, orange);
$default-secondary: var(--secondary-color, purple);

Alternatively, if it better suits your project's needs, you can choose to use these styles as they are, without the need for translation into SCSS variables:

a {
  color: var(--primary-color, #F69C00);
}

The second parameter of the var() function comes into play when the variable --primary-color doesn't exist. It acts as a fallback value, ensuring that your code remains robust even if the primary color variable is not defined.

In this article, we've explored the art of harnessing backend-powered styles for your user interface, using Angular as our framework of reference. We've learned how to retrieve and integrate styles from the backend into the DOM, ensuring dynamic and flexible styling for our applications. Additionally, we've discussed storing and utilizing these styles efficiently, both in JavaScript and SCSS environments.