Theme (Dark / Light Mode)

The app supports dark/light mode

  1. Background (0dp elevation surface overlay)

  2. Surface (with 1dp elevation surface overlay)

  3. Primary

  4. Secondary

  5. On background

  6. On Surface

  7. On Primary

  8. On Secondary

to update your colors, go to src/theme/theme.colors.ts and update the dark and light colors of your choice:


export const themes: ThemeColors = {
  light: {
    background: "#f7f7f7",
    surface: "#ffffff",
    primary: "#6002ee",
    secondary: "#6002ee",
    onBackground: "#101010",
    onSurface: "#1c1c1c",
    onPrimary: "#ffffff",
    onSecondary: "#ffffff",
    // extras
    type: "light",
    font: "Avenir Next"
  },
  dark: {
    background: "#101010",
    surface: "#1c1c1c",
    primary: "#bb86fb",
    secondary: "#59dbc6",
    onBackground: "#cecece",
    onSurface: "#e1e1e1",
    onPrimary: "#000000",
    onSecondary: "#000000",
    // extras
    type: "dark",
    font: "Avenir Next"
  }
};

Last updated