Themes

PThemeProvider

PThemeProvider is the component to pass your theme colors and state. Maintains own theme state with boolean state : darkTheme and handler:handleTheme and defaults to light theme. Access darkTheme, handleTheme via useTheme()

//for providing darkTheme state and handler globally
import { PThemeProvider } from "react-khatra-placeholder";

return (
  <PThemeProvider
    lightModeBackground="orange"
    lightModeColor="brown"
    darkModeBackground="lightgreen"
    darkModeColor="green"
    darkModeShine="lightblue"
  >
    <YourTopParentComponentPage />
  </PThemeProvider>
);

Property	Type	Required	Default value	Description
lightModeColor	String	no	DEFAULT_LIGHTMODE_LINE_COLOR	light mode color of placeholder lines and blocks.
darkModeColor	String	no	DEFAULT_DARKMODE_LINE_COLOR	dark mode color of placeholder lines and blocks.
lightModeBackground	String	no	DEFAULT_LIGHTMODE_BG_COLOR	light mode background color of placeholder cards.
darkModeBackground	String	no	DEFAULT_DARKMODE_BG_COLOR	light mode background color of placeholder cards.
lightModeShine	String	no	DEFAULT_LIGTHMODE_SHINE	light mode shine color of placeholder lines and blocks.
darkModeShine	String	no	DEFAULT_DARKMODE_SHINE	light mode shine color of placeholder lines and blocks.

DEFAULT_LIGHTMODE_LINE_COLOR = "#d7d7d7"
DEFAULT_DARKMODE_LINE_COLOR = "#383838"
DEFAULT_LIGHTMODE_BG_COLOR = "#ffffff"
DEFAULT_DARKMODE_BG_COLOR = "#121212"
DEFAULT_LIGTHMODE_SHINE = "#eeeeee"
DEFAULT_DARKMODE_SHINE = "#6d6c6c"

useTheme()

For accessing useTheme() hook:

import { useTheme } from "react-khatra-placeholder";

//example for toggle theme button
const ToggleTheme = () => {
  const { darkTheme, handleTheme } = useTheme();
  return <button onClick={() => handleTheme(!darkTheme)}>Toggle Theme</button>;
};

Theming in action:

Here is quick example of how you can use theming options on your projects.

//for providing darkTheme state and handler globally
import { PThemeProvider } from "react-khatra-placeholder";

return (
  <PThemeProvider
    lightModeBackground="orange"
    lightModeColor="brown"
    darkModeBackground="lightgreen"
    darkModeColor="green"
    darkModeShine="lightblue"
  >
    <KhatraPlaceholder
      isLoading={true}
      type="ProductPlaceholder"
      animateWave
      style={{
        border: "1px solid brown",
        padding: "0.75rem",
        borderRadius: "0.75rem",
      }}
    >
      <div>Your Real Product</div>
    </KhatraPlaceholder>
    <ToggleTheme />
  </PThemeProvider>
);