4. Theming

Global theme

Sometimes you just want to declare a lot of windows or components and don't write the Theme & Variant option for each one. You can use OsConfigService for that, declare the service in the constructor of a component. It can be done from any component that loads.

import { OsConfigService } from './os-window/os-config.service';

export class AppComponent {
  constructor(private osConfigService: OsConfigService) {}
}

Declare a variable with the theme you want to use i'm using win98 classic here and finally in the OnInit hook, set that as the global theme using osConfigService:

import { OsConfigService } from './os-window/os-config.service';
import { Theme } from '@santinobch/os-window-angular';

export class AppComponent implements OnInit {
  constructor(private osConfigService: OsConfigService) {}

  globalTheme: Theme = {
    name: 'win98',
    variant: 'classic',
  };

  ngOnInit(): void {
    this.osConfigService.setGlobalTheme(this.globalTheme);
  }
}

This will set all components to the Win98 Classic theme.

Theme individual components

In the case you want to have a specific theme for one component, yo can do in the following way. This will also ignore the global theme if set.

<!-- Sets window to Arc Dark theme -->
<os-window theme="arc" variant="dark"> ... </os-window>

<!-- Both use global theme -->
<os-window> ... </os-window>
<os-window> ... </os-window>

Theme list

Check Theme list for all the available themes.