Color Palette with SJSS

Super JavaScript Stylesheets (SJSS) provides a flexible and powerful system for managing color palettes in Angular applications. Utilizing the SJSS color palette, you can define and apply a consistent color scheme throughout your app.

Table of Contents

1. Using the Color Palette
2. Personalizing the Color Palette
3. Color Palette Default Reference

Using the Color Palette

In SJSS, colors can be accessed and used within components, either through direct styling or as part of responsive and shorthand styles. Here's an example of how to use the color palette in a component:

import { Component } from "@angular/core";
import { SjDirective } from "super-jss";

  @Component({
    standalone: true,
    selector: 'app-colorful-component',
    template: `
      <div [sj]="{ m: '2rem', p: '1rem', bg: 'blue' }">
       <div [sj]="{ bg: 'orange.300', color: 'orange.contrast' }">
        This is a colorful component!
       </div>        
      </div>
    `
  })
  export class ColorfulComponent {}

in this example, we're using the color palette to apply a background color to a div. We're also using the color palette to apply a background color and text color to a nested div.

Personalize the Color Palette

The color palette can be accessed and modified through the SjThemeService. This service provides a powerful and user-friendly way to customize the color palette in your Angular application. Once set, these colors are automatically recognized across the application through the sjDirective, ensuring a seamless and consistent experience.

any palette item is defined as

  {
    50: string,
    100: string,
    200: string,
    300: string,
    400: string,
    500: string, // Default shade
    600: string,
    700: string,
    800: string,
    900: string,
    contrast: string
  } 

to update a color, please use the updatePalette method from the SjThemeService as follows:

import { Component } from "@angular/core";
import { SjDirective } from "super-jss";

@Component({
  standalone: true,
  selector: 'app-colorful-component',
  template: `
    <div (click)="updateColor()" [sj]="{ m: '2rem', p: '1rem', bg: 'blue' }">
     <div [sj]="{ bg: 'orange.300', color: 'orange.contrast' }">
      This is a colorful component!
     </div>        
    </div>
  `
})

export class PaletteDemoComponent {
  //not recommended to change xs: unless your specifications does not care about mini devices, covered by xs
  constructor(private sjTheme: SjThemeService) {}
  updateColor(): void {
    this.sjTheme.setColors(
      pink: {
        50: '#dc3545',
        100: '#d8bbd0',
        200: '#d48fb1',
        300: '#fd06292',
        400: '#fc407a',
        500: '#f91e63',
        600: '#a81b60',
        700: '#82185b',
        800: '#8d1457',
        900: '#680e4f',
        contrast: '#d59242'
      }
    )
  }
}

Color Palette Default Reference

⬅️ Previous: Styling Shortcuts | Next: Spacing ➡️