ThemeManager.ts

ThemeManager.ts

export enum TeamsTheme {
  default,
  dark,
  contrast
}
export class ThemeManager {
  public static applyTeamsTheme(teamsTheme: TeamsTheme) {
    let theme = {
      name: "Teams",
      palette: {}
    };
    switch (teamsTheme) {
      case TeamsTheme.dark: {
        theme.palette = {
          "themePrimary": "#464775",
          "themeLighterAlt": "#030305",
          "themeLighter": "#0b0b13",
          "themeLight": "#151523",
          "themeTertiary": "#2a2b46",
          "themeSecondary": "#3e3f67",
          "themeDarkAlt": "#545583",
          "themeDark": "#696996",
          "themeDarker": "#8a8bb2",
          "neutralLighterAlt": "#2b2929",
          "neutralLighter": "#333232",
          "neutralLight": "#414040",
          "neutralQuaternaryAlt": "#4a4848",
          "neutralQuaternary": "#514f4f",
          "neutralTertiaryAlt": "#6f6c6c",
          "neutralTertiary": "#313242",
          "neutralSecondary": "#636384",
          "neutralPrimaryAlt": "#9192c1",
          "neutralPrimary": "#a6a7dc",
          "neutralDark": "#b9b9e4",
          "black": "#cacbeb",
          "white": "#201f1f",
          "primaryBackground": "#201f1f",
          "primaryText": "#a6a7dc",
          "disabledBackground": "#333232",
          "disabledText": "#6f6c6c"
        };
        break;
      }
      case TeamsTheme.contrast: {
        theme.palette = {
          "themePrimary": "#1aebff",
          "themeLighterAlt": "#01090a",
          "themeLighter": "#042629",
          "themeLight": "#08474d",
          "themeTertiary": "#0f8e99",
          "themeSecondary": "#16d0e0",
          "themeDarkAlt": "#30eeff",
          "themeDark": "#51f0ff",
          "themeDarker": "#7ef4ff",
          "neutralLighterAlt": "#000000",
          "neutralLighter": "#000000",
          "neutralLight": "#000000",
          "neutralQuaternaryAlt": "#000000",
          "neutralQuaternary": "#000000",
          "neutralTertiaryAlt": "#000000",
          "neutralTertiary": "#4d4d00",
          "neutralSecondary": "#999900",
          "neutralPrimaryAlt": "#e0e000",
          "neutralPrimary": "#ffff01",
          "neutralDark": "#ffff3d",
          "black": "#ffff70",
          "white": "#000000",
          "primaryBackground": "#000000",
          "primaryText": "#ffff01",
          "disabledBackground": "#000000",
          "disabledText": "#000000"
        };
        break;
      }
      default: {
        theme.palette = {
          neutralPrimary: "#333333",
          themeDarker: "#413977",
          bodyBackground: "#ffffff",
          themeDark: "#584da1",
          neutralLighter: "#e8e8e8",
          primaryText: "#333333",
          themeDarkAlt: "#695bbe",
          disabledText: "#bebebe",
          neutralLighterAlt: "#ececec",
          themeLight: "#d1ccf2",
          themeLighterAlt: "#f9f8fd",
          neutralQuaternaryAlt: "#cfcfcf",
          neutralDark: "#272727",
          neutralLight: "#dedede",
          neutralSecondary: "#858585",
          themeSecondary: "#8376d9",
          disabledBackground: "#e8e8e8",
          neutralTertiaryAlt: "#bebebe",
          neutralPrimaryAlt: "#4b4b4b",
          bodyText: "#333333",
          neutralTertiary: "#c2c2c2",
          themeTertiary: "#a79ee5",
          primaryBackground: "#f1f1f1",
          neutralQuaternary: "#c6c6c6",
          white: "#f1f1f1",
          themePrimary: "#7465d3",
          themeLighter: "#e6e3f8",
          black: "#1d1d1d"
        };
        break;
      }
    }
    (window as any).__loadTheme(theme);
  }
}