Theme Object

The theme object is the object with which you would define your custom theme.

export interface PrismaneTheme {
  // The theme mode "dark" or "light"
  mode: "light" | "dark";

  // The theme colors
  colors: {
    primary: {
      50: string;
      100: string;
      200: string;
      300: string;
      400: string;
      500: string;
      600: string;
      700: string;
      800: string;
      900: string;
    };
    base: {
      50: string;
      100: string;
      200: string;
      300: string;
      400: string;
      500: string;
      600: string;
      700: string;
      800: string;
      900: string;
    };
  };

  // The theme spacing, changing it will scale up or down the size of your components
  spacing: string;
}

Base Theme Object

By default, Prismane uses it's own default theme object, which looks like this:

const base: PrismaneTheme = {
  mode: "light",
  colors: {
    primary: {
      // Prismane's diamond colors
      50: "#f0f9ff",
      100: "#e0f2fe",
      200: "#bae6fd",
      300: "#7dd3fc",
      400: "#38bdf8",
      500: "#0ea5e9",
      600: "#0284c7",
      700: "#0369a1",
      800: "#075985",
      900: "#0c4a6e",
    },
    base: {
      // Prismane's gray colors
      50: "#f9fafb",
      100: "#f3f4f6",
      200: "#e5e7eb",
      300: "#d1d5db",
      400: "#9ca3af",
      500: "#6b7280",
      600: "#4b5563",
      700: "#374151",
      800: "#1f2937",
      900: "#111827",
    },
  },
  spacing: "4px",
};

export default base;

Up NextPrismaneProvider