Custom Theming

React Neumorphism provides a flexible theming system that allows you to customize the appearance of your neumorphic components. The ThemeProvider component enables you to define custom themes for both light and dark modes, along with typography settings.

We recommend to use the default theme configuration "light" and "dark" modes for best rendering results and consistency.

Basic Usage

To use the ThemeProvider, wrap your application with it and provide the required configuration:

import { ThemeProvider } from "react-neumorphism";

function App() {
  return (
    <ThemeProvider mode="light">
      <YourApp />
    </ThemeProvider>
  );
}

Configuration Options

The ThemeProvider accepts the following props:

Required Props

• mode: Specifies the current theme mode

  • Type: "dark" | "light"
  • Example: mode="light"

• children: React nodes to be rendered within the theme context

Optional Props

neumorphismConfig

Controls the neumorphic effect properties:

<ThemeProvider
  mode="light"
  neumorphismConfig={{
    distance: '10px',  // Distance of the shadow
    blur: '20px'       // Blur radius of the shadow
  }}
>

colorsConfig

Customizes the color scheme for the current mode:

<ThemeProvider
  mode="light"
  colorsConfig={{
    backgroundColor: '#e0e5ec',
    lightShadow: '#ffffff',
    darkShadow: '#a3b1c6',
    activeBackgroundColor: '#d1d9e6',
    hoverBackgroundColor: '#e6e9ef'
  }}
>

typographyConfig

Defines text-related styles:

<ThemeProvider
  mode="light"
  typographyConfig={{
    fontFamily: "'Inter', sans-serif",
    fontColor: '#2d3436'
  }}
>

borderConfig

Customizes border properties:

<ThemeProvider
  mode="light"
  borderConfig={{
    borderColor: '#e0e5ec',
    borderRadius: '10px',
    borderWidth: '1px',
    borderStyle: 'solid'
  }}
>

Complete Example

Here's a complete example showing how to use all configuration options:

import { ThemeProvider } from "react-neumorphism";

function App() {
  return (
    <ThemeProvider
      mode="light"
      neumorphismConfig={{
        distance: "10px",
        blur: "20px",
      }}
      colorsConfig={{
        backgroundColor: "#e0e5ec",
        lightShadow: "#ffffff",
        darkShadow: "#a3b1c6",
        activeBackgroundColor: "#d1d9e6",
        hoverBackgroundColor: "#e6e9ef",
      }}
      typographyConfig={{
        fontFamily: "'Inter', sans-serif",
        fontColor: "#2d3436",
      }}
      borderConfig={{
        borderColor: "#e0e5ec",
        borderRadius: "10px",
        borderWidth: "1px",
        borderStyle: "solid",
      }}
    >
      <YourApp />
    </ThemeProvider>
  );
}

Type Definitions

For reference, here are the TypeScript interfaces used by the ThemeProvider:

interface ThemeProviderProps {
  mode: DefaultModeTheme;
  neumorphismConfig?: Partial<NeumorphismConfig>;
  colorsConfig?: Partial<ColorsConfig>;
  typographyConfig?: Partial<TypographyConfig>;
  borderConfig?: Partial<BorderConfig>;
  children: React.ReactNode;
}

type DefaultModeTheme = "dark" | "light";

interface NeumorphismConfig {
  distance: string;
  blur: string;
}

interface ColorsConfig {
  backgroundColor: React.CSSProperties["color"];
  lightShadow: React.CSSProperties["color"];
  darkShadow: React.CSSProperties["color"];
  activeBackgroundColor: React.CSSProperties["color"];
  hoverBackgroundColor: React.CSSProperties["color"];
}

interface BorderConfig {
  borderColor: React.CSSProperties["borderColor"];
  borderRadius: React.CSSProperties["borderRadius"];
  borderWidth: React.CSSProperties["borderWidth"];
  borderStyle: React.CSSProperties["borderStyle"];
}

interface TypographyConfig {
  fontFamily: React.CSSProperties["fontFamily"];
  fontColor: React.CSSProperties["color"];
}

Best Practices

1. Consistent Color Scheme: When customizing colors, ensure that your lightShadow and darkShadow colors create a natural-looking neumorphic effect.

2. Responsive Units: Use relative units (rem, em) for typography and border-radius to ensure consistent scaling across different screen sizes.

3. Mode Switching: Consider implementing a theme switcher to toggle between light and dark modes:

const [mode, setMode] = useState<DefaultModeTheme>("light");

const toggleTheme = () => {
  setMode((prev) => (prev === "light" ? "dark" : "light"));
};

return (
  <ThemeProvider mode={mode}>
    <button onClick={toggleTheme}>Toggle Theme</button>
    <YourApp />
  </ThemeProvider>
);

4. Default Values: You don't need to specify all configuration options. The ThemeProvider comes with sensible defaults that you can override as needed.