# 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

```javascript
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

```javascript
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

<table data-header-hidden><thead><tr><th width="263"></th><th></th><th></th></tr></thead><tbody><tr><td>Method/State</td><td>Type</td><td>Description</td></tr><tr><td><code>mainTheme</code></td><td><code>ThemeConfig</code></td><td>The configuration for the main theme.</td></tr><tr><td><code>headerTheme</code></td><td><code>ThemeConfig</code> (optional)</td><td>The configuration for the header theme.</td></tr><tr><td><code>sidebarTheme</code></td><td><code>ThemeConfig</code> (optional)</td><td>The configuration for the sidebar theme.</td></tr><tr><td><code>footerTheme</code></td><td><code>ThemeConfig</code> (optional)</td><td>The configuration for the footer theme.</td></tr><tr><td><code>rightSidebarTheme</code></td><td><code>ThemeConfig</code> (optional)</td><td>The configuration for the right sidebar theme.</td></tr><tr><td><code>setMainTheme</code></td><td><code>(value: ThemeConfig) => void</code></td><td>Updates the main theme configuration.</td></tr><tr><td><code>setHeaderTheme</code></td><td><code>(value: ThemeConfig) => void</code></td><td>Updates the header theme configuration.</td></tr><tr><td><code>setFooterTheme</code></td><td><code>(value: ThemeConfig) => void</code></td><td>Updates the footer theme configuration.</td></tr><tr><td><code>setSidebarTheme</code></td><td><code>(value: ThemeConfig) => void</code></td><td>Updates the sidebar theme configuration.</td></tr><tr><td><code>setRightSidebarTheme</code></td><td><code>(value: ThemeConfig) => void</code></td><td>Updates the right sidebar theme configuration.</td></tr><tr><td><code>setTheme</code></td><td><code>(value: WieldyThemeType) => void</code></td><td>Updates the entire theme configuration.</td></tr><tr><td><code>switchMode</code></td><td>`(mode: "light" | "dark) <code>=></code> void</td><td>Update the theme dark or light</td></tr></tbody></table>

#### Example: Using Context

```javascript
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

```javascript
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.

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

**Example**

```javascript
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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-wieldy.g-axon.work/components/wieldytheme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.