WieldyTheme

The WieldyTheme component is the core theming utility for the Wieldy template. It uses React context to provide a centralized theme management system, enabling dynamic theming and theme customization across the application. The component is built on Next.js and Ant Design.

---

Import Path

import { WieldyTheme } from "@wieldy/component/WieldyTheme";

Props

The WieldyTheme component accepts the following props:

Prop	Type	Required	Default Value	Description
children	React.ReactNode	Yes	undefined	The child components wrapped by the WieldyTheme.
theme	WieldyThemeType	No	defaultWieldyTheme	The initial light theme configuration.
darkTheme	WieldyThemeType	No	Generated dark theme	The dark theme configuration, which can be toggled using the switchMode.

Example Usage

import React from "react";
import { WieldyTheme } from "@wieldy/components/WieldyTheme";
import { theme1 } from "_themes/theme1";

export default function App() {
  return (
    <WieldyTheme theme={theme1}>
      <div>Your app content goes here</div>
    </WieldyTheme>
  );
}

---

Context API

The WieldyThemeContext provides access to theme management methods and the current theme state.

Available Methods and State

Method/State	Type	Description
mainTheme	ThemeConfig	The configuration for the main theme.
headerTheme	ThemeConfig (optional)	The configuration for the header theme.
sidebarTheme	ThemeConfig (optional)	The configuration for the sidebar theme.
footerTheme	ThemeConfig (optional)	The configuration for the footer theme.
rightSidebarTheme	ThemeConfig (optional)	The configuration for the right sidebar theme.
setMainTheme	(value: ThemeConfig) => void	Updates the main theme configuration.
setHeaderTheme	(value: ThemeConfig) => void	Updates the header theme configuration.
setFooterTheme	(value: ThemeConfig) => void	Updates the footer theme configuration.
setSidebarTheme	(value: ThemeConfig) => void	Updates the sidebar theme configuration.
setRightSidebarTheme	(value: ThemeConfig) => void	Updates the right sidebar theme configuration.
setTheme	(value: WieldyThemeType) => void	Updates the entire theme configuration.
switchMode	`(mode: "light" | "dark) => void	Update the theme dark or light

Example: Using Context

import React from "react";
import { useWieldyTheme } from "@wieldy/component/WieldyTheme/hooks";

function ThemeSwitcher() {
  const { switchMode } = useWieldyTheme();

  return (
    <button onClick={() => switchMode("dark")}>Switch to Dark Mode</button>
  );
}

---

Theme Configuration

The WieldyTheme accepts a WieldyThemeType object that defines configurations for different parts of the application:

Key	Type	Required	Description
mainTheme	ThemeConfig	Yes	Main application theme.
headerTheme	ThemeConfig	No	Header-specific theme configuration.
sidebarTheme	ThemeConfig	No	Sidebar-specific theme configuration.
footerTheme	ThemeConfig	No	Footer-specific theme configuration.
rightSidebarTheme	ThemeConfig	No	Right sidebar theme configuration.

Example Configuration

import { WieldyThemeType } from "@wieldy/component/WieldyTheme/types";

export const theme1: WieldyThemeType = {
  mainTheme: {
    token: {
      colorPrimary: "#1890ff",
    },
  },
  headerTheme: {
    token: {
      colorBgHeader: "#001529",
    },
  },
  sidebarTheme: {
    token: {
      colorBgMenuItemSelected: "#1890ff",
    },
  },
  footerTheme: {
    token: {
      colorTextFooter: "#999999",
    },
  },
};

---

Hooks

The WieldyTheme provides several custom hooks to access and modify theme configurations dynamically:

1. useWieldyTheme

Access the full context for managing themes.

import { useWieldyTheme } from "@wieldy/component/WieldyTheme/hooks";

Example

function App() {
  const { mainTheme, setMainTheme } = useWieldyTheme();

  return (
    <button
      onClick={() =>
        setMainTheme({
          token: {
            colorPrimary: "#ff5733",
          },
        })
      }
    >
      Change Main Theme
    </button>
  );
}

2. Other Hooks

Hook	Description
useHeaderTheme	Access and modify the header theme.
useSidebarTheme	Access and modify the sidebar theme.
useFooterTheme	Access and modify the footer theme.
useRightSidebarTheme	Access and modify the right sidebar theme.

Integration in Next.js

The WieldyTheme can be used as part of the root layout in a Next.js application to ensure theming is available globally.

Summary

The WieldyTheme component is a powerful theming solution designed for seamless integration with the Wieldy admin template. It enables developers to create highly customizable themes with granular control over individual application sections. Built on top of Ant Design and Next.js, it provides dynamic theming capabilities, React context for efficient state management, and hooks for convenient access and updates. With its ability to toggle light and dark modes and its modular approach to theme configuration, WieldyTheme ensures flexibility and ease of use in any modern web application.