Advanced Customization

Prismane offers a set of tools that can help you customize your app even more. Dynamic theme mode toggling, dynamic theme changing, theme hooks and more.

usePrismaneTheme Hook

Prismane exports a usePrismaneTheme hook from the hooks entry of the package, meaning @prismane/core/hooks. The hook exports a set of helper functions that can manipulate the context's value as well as direct access to the context's value

Access The Theme Object:

import { Box } from "@prismane/core";
// Hooks
import { usePrismaneTheme } from "@prismane/core";

const Page = () => {
  const { theme } = usePrismaneTheme();

  console.log(theme); // Will output the latest theme value in the first <PrismaneProvider/>.

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

export default Page;

Toggle The Theme Mode:

import { Button } from "@prismane/core";
// Hooks
import { usePrismaneTheme } from "@prismane/core";

const Page = () => {
  const { toggleThemeMode } = usePrismaneTheme();

  return (
    <Button
      onClick={() => {
        toggleThemeMode();
      }}
    >
      Hello, world
    </Button>
  );
};

export default Page;

Update The Theme Value:

import { Button, PRISMANE_COLORS } from "@prismane/core";
// Hooks
import { usePrismaneTheme } from "@prismane/core";

const Page = () => {
  const { setTheme } = usePrismaneTheme();

  const theme = {
    colors: {
      primary: { ...PRISMANE_COLORS.red },
      base: { ...PRISMANE_COLORS.sepia },
    },
  };

  return (
    <Button
      onClick={() => {
        setTheme(theme);
      }}
    >
      Hello, world
    </Button>
  );
};

export default Page;

Go BackPrismaneProvider

Up NextTheming Utils