apphouse/dist/styles/AppTheme.ts

Component library for React that uses observable state management and theme-able components.

import { makeAutoObservable } from 'mobx';
import { ApphouseTheme } from './defaults/themes.interface';
import { ApphouseDarkTheme } from '../themes/presets/apphouseDark.theme';
import { applyThemeColorsToHtmlBody } from '../utils/dom/applyThemeToHtmlBody';

class AppTheme {
  id: 'light' | 'dark' | 'custom' | string;
  theme: ApphouseTheme;
  createdBy: string | undefined;
  createdAt: Date | undefined;
  updatedAt: Date | undefined;

  constructor() {
    this.id = 'dark';
    this.theme = ApphouseDarkTheme;
    this.createdAt = new Date('07-12-2020');
    this.updatedAt = new Date('07-12-2020');
    this.createdBy = 'Apphouse';

    makeAutoObservable(this);
  }

  setCustomTheme = (theme: ApphouseTheme, id: string) => {
    this.setTheme(theme);
    this.setId(id);
  };

  setUpdatedAt = (updatedAt: Date) => {
    this.updatedAt = updatedAt;
  };

  setCreatedBy = (createdBy: string) => {
    this.createdBy = createdBy;
  };

  setCreatedAt = (createdAt: Date) => {
    this.createdAt = createdAt;
  };

  private setId = (id: string) => {
    this.id = id;
  };

  private setTheme = (theme: ApphouseTheme) => {
    this.theme = theme;
    this.applyThemeColorsToDOM(theme);
  };

  private applyThemeColorsToDOM = (theme: ApphouseTheme) => {
    const themeBodyStyles = theme.styles.body;
    if (themeBodyStyles === undefined) {
      console.warn(
        'Theme body styles are undefined, no background or foreground color being applied'
      );
      return;
    }
    const backgroundColor = themeBodyStyles.backgroundColor;
    const foregroundColor = themeBodyStyles.color;
    applyThemeColorsToHtmlBody(backgroundColor, foregroundColor);
  };
}

export default AppTheme;