Super JSS: How to override a theme

SuperJSS offers a powerful theming system that can be customized to fit any project’s needs. In this article, we will explore how to override a theme in SuperJSS and what types of problems this feature can solve.

What is a theme?

In SuperJSS, a theme is a collection of pre-defined CSS properties that are applied to components. By using themes, we can ensure consistency and a uniform look-and-feel throughout the application.

Overriding a theme

To override a theme in SuperJSS, we need to use the SJssThemeService. The first step is to subscribe to theme changes in any component we want to use it:

import { Component } from '@angular/core';
import { SJssTheme, SJssThemeService } from 'superjss';

@Component({
  selector: 'app-any',
  templateUrl: './any.component.html',
  styleUrls: ['./any.component.css']
})
export class AnyComponent {
  theme: SJssTheme;

  constructor(private themeService: SJssThemeService) {
    this.theme = themeService.defaultTheme();
    themeService.themeChanges().subscribe((t) => {this.theme = t});
    this.modifyTheme();
  }
}

In the modifyTheme method, we can change any of the theme's properties as needed:

modifyTheme() {
  const th: SJssTheme | null = { ...this.theme };
  th.palette.primary.main = '#003366';
  th.palette.secondary.main = '#663300';
  th.breakpoints.md = '750';
  th.spacing = (factor) => `${0.3 * factor}rem`;
  th.typography.H1.fontSize = {xs: '2em', md: '2.5em'};
  this.themeService.setTheme(th);
}

The setTheme method is used to update the theme with our modified version. Once we call this method, all components that use the theme will be updated with the new property values.

What types of problems can overriding a theme solve?

There are many scenarios where overriding a theme can be useful, for example:

• Customizing the color scheme to match a company’s branding
• Changing spacing and font size for accessibility purposes
• Adjusting breakpoints for a more responsive layout

Default theme properties

The default theme properties in SuperJSS can be found on the npm package page. By default, the following properties are included:

• palette: A collection of colors to be used throughout the application
• typography: Font size, weight, and line height
• breakpoints: Media query breakpoints for responsive design
• spacing: Spacing units used throughout the application

External Examples

Theme handler: https://stackblitz.com/edit/angular-ivy-atzazr

Conclusion

In this article, we learned how to override a theme in SuperJSS. By using this feature, we can modify any of the pre-defined CSS properties in the theme to create a customized look-and-feel that matches our application’s needs. Overriding themes can solve many problems, such as customizing the color scheme, adjusting spacing and font size, and making our layouts more responsive.

Note: If you do not have the basics of Super-Jss you can reffer to: https://medium.com/@viejorichard/super-jss-a-library-for-responsive-css-styles-85691b210450