Theming Utils

Prismane offers a set of helper functions that help in the creation of themes

createTheme Function

The createTheme functions gets a theme overwriting object and overwrites the base theme.

import { Box } from "@prismane/core";
import { createTheme } from "@prismane/core/themes";

const Page = () => {
  const theme = createTheme({
    colors: {
      primary: {
        100: "#ffffff",
      },
    },
  });

  console.log(theme); // Will output a theme that is deeply merged with base theme.

  return <Box>Hello, world</Box>;
};

export default Page;

applyTheme Function

The applyTheme functions maps a theme into CSS variables and sets them to the root element.

import { Box } from "@prismane/core";
import { applyTheme, createTheme } from "@prismane/core/themes";

const Page = () => {
  const theme = createTheme({
    colors: {
      primary: {
        100: "#ffffff",
      },
    },
  });

  applyTheme(theme);

  return <Box>Hello, world</Box>;
};

export default Page;

extendTheme Function

The extendTheme functions deeply merges two themes.

import { Box } from "@prismane/core";
import { extendTheme, createTheme } from "@prismane/core/themes";

const Page = () => {
  const first = createTheme({
    colors: {
      primary: {
        100: "#ffffff",
      },
    },
  });

  const second = createTheme({
    colors: {
      primary: {
        200: "#000000",
      },
    },
  });

  const merged = extendTheme(first, second); //  Will result in a deeply merged theme

  return <Box>Hello, world</Box>;
};

export default Page;

Base Theme Object

The base theme object represents the base Prismane theme.

import { Box } from "@prismane/core";
import { base, applyTheme } from "@prismane/core/themes";

const Page = () => {
  applyTheme(base); // This will apply the base theme to the root element

  return <Box>Hello, world</Box>;
};

export default Page;

Important

This functionality is all handled by PrismaneProvider component, but if needed for some edge case, these utility functions and objects are available for use!

Go BackAdvanced Customization