# Theme

In Wieldy, The theme is divided in four main sections as given below:

1. Main Theme
2. Header Theme
3. Sidebar Theme
4. Footer Theme

Using these four themes, the theme for the whole application can easily be setup as per the requirement.

The **Main Theme** is applied throughout the web app but **Header Theme**, **Sidebar Theme** and **Footer Theme** can be used to overwrite the theme style for these three sections respectively.

These ten themes are managed in the /src/app/\_themes folder. Here, in this folder, you can see there are ten separate folders to organise the theme object for individual four sections as mentioned above.

This theme object is an extension to the Ant Design's theme object. So, you can follow all the theme related documentation available at [ant.design ](https://ant.design/docs/react/customize-theme)to customize and extending the theme.

### Setting up a New Theme <a href="#setting-up-a-new-theme" id="setting-up-a-new-theme"></a>

To setup a new theme (let's say **themex**), you need to create following four files:

1. /src/app/\_themes/themex/main.ts
2. /src/app/\_themes/themex/header.ts
3. /src/app/\_themes/themex/footer.ts
4. /src/app/\_themes/themex/sidebar.ts

In each file above, you can export a theme variable as in the below sample code snippet

```javascript
import { theme, ThemeConfig } from "antd";

export const mainTheme: ThemeConfig = {
  algorithm: theme.defaultAlgorithm,
  token: {
    colorPrimary: "#038FDE",
    colorBgLayout: "#F5F5F5",
    colorText: "#545454",
    colorTextSecondary: "#8C8C8C",
    colorTextHeading: "#262626",
    colorLink: "#038FDE",
    colorLinkHover: "#037dca",
    colorLinkActive: "#037dca",
    colorError: "#F5222D",
    colorWarning: "#FA8C16",
    colorInfo: "#1890FF",
    controlHeight: 36,
    boxShadowTertiary: "0 0 5px 5px rgba(0,0,0,0.03)",
    fontFamily: "NoirPro, Arial, Helvetica, sans-serif",
  },
  components: {
    Card: {
      borderRadiusLG: 10,
      colorTextHeading: "#262626",
      fontSizeLG: 14,
      headerFontSize: 16,
      fontWeightStrong: 400,
      headerHeight: 65,
    },

    Typography: {
      fontWeightStrong: 400,
    },
    Alert: {
      borderRadiusLG: 6,
    },
    Button: {
      controlHeightLG: 42,
      borderRadiusLG: 6,
      colorLink: "#038FDE",
      colorLinkHover: "#037dca",
      colorLinkActive: "#037dca",
    },
    Modal: {
      colorTextHeading: "#262626",
      fontWeightStrong: 500,
    },
    Steps: {
      controlHeight: 32,
      controlHeightLG: 40,
    },
    Menu: {
      iconSize: 20,
      collapsedIconSize: 20,
      groupTitleFontSize: 16,
    },
  },
};

```

In the Header, Footer and Sidebar Themes, as mentioned previously, you can only specify those properties (theme variables) which need be overridden. Rest of the properties will be inherited from Main Theme.

### Export Theme Configuration

The file `/src/app/_themes/themex/index.ts` serves as the main entry point for configuring and exporting the combined theme for the application. It imports individual theme configurations (`footerTheme`, `headerTheme`, `mainTheme`, and `sidebarTheme`) and assembles them into a single `themex` object of the `WieldyThemeType` type. This allows the entire application's UI to be themed consistently by applying the `themex` object wherever necessary.

```javascript
import { WieldyThemeType } from "@wieldy/components/WieldyTheme/types";
import { footerTheme } from "./footer";
import { headerTheme } from "./header";
import { mainTheme } from "./main";
import { sidebarTheme } from "./sidebar";

export const themex: WieldyThemeType = {
  mainTheme,
  headerTheme,
  sidebarTheme,
  footerTheme,
};
```

### Setting Up the Default Theme <a href="#setting-up-the-default-theme" id="setting-up-the-default-theme"></a>

To set a theme as default theme, you can make the changes in /src/app/\_config/index.ts file. In this file, you can set the THEME property of the **config** variable as mentioned below:

````javascript
"use client";
import { themex } from "@/_themes/themex";

export const config = {
  defaultTheme: themex,
};

```
````

and when this object is provided to the **WiedlyTheme** component then WieldyTheme manages the theme for the four sections individually.

#### Understanding how this <mark style="color:blue;">config.defaultTheme</mark> variable is being used <a href="#understanding-how-this-config.theme-variable-is-being-used" id="understanding-how-this-config.theme-variable-is-being-used"></a>

In the component AppProvider (/src/components/AppProvider/AppProvider.ts) file, you can see that the **config.defaultTheme** property we have set we have set above is being passed in the theme prop of the WidelyTheme as follows:

````javascript
import { config } from "@/_config";
import { WieldyTheme } from "@wieldy/components";

export function AppProvider({ children, translation }: AppProviderProps) {
  //........
  return (
    <AppContext.Provider value={contextValue}>
      <WieldyTheme theme={config.defaultTheme}>{children}</WieldyTheme>
    </AppContext.Provider>
  );
}

```

````

In the root layout (/src/app/layout.tsx), you can see that the AppProvider component set as follows:

```javascript
export default async function RootLayout({
  children,
  params: { lang },
}: Readonly<{
  children: React.ReactNode;
  params: Params;
}>) {
  //.....
  return (
    <html lang={lang}>
      <body>
        <AntdRegistry>
          <AppProvider translation={translation}>
            <App>{children}</App>
          </AppProvider>
        </AntdRegistry>
      </body>
    </html>
  );
}
```

This is all you need to do to setup a default theme for your web app.

### Dynamically Changing Theme <a href="#dynamically-changing-theme" id="dynamically-changing-theme"></a>

Wieldy usages Context API to manage the active theme state of the web app. You can leverage the custom hooks offered by Wieldy to make the theme changes dynamically.

Following are some of the custom hooks you can utilise:

#### useWieldyTheme <a href="#usejumbotheme" id="usejumbotheme"></a>

```javascript
import { useWieldyTheme } from '@wieldy/components/WieldyTheme/hooks';

const { theme, setTheme, switchMode } = useWieldyTheme();
```

#### useMainTheme <a href="#usejumboheadertheme" id="usejumboheadertheme"></a>

```javascript
import { useMainTheme } from '@wieldy/components/WieldyTheme/hooks';

const { mainTheme, setMainTheme } = useMainTheme();
```

#### useHeaderTheme <a href="#usejumbosidebartheme" id="usejumbosidebartheme"></a>

```javascript
import { useHeaderTheme } from '@wieldy/components/WieldyTheme/hooks';

const { headerTheme, setHeaderTheme } = useHeaderTheme();
```

#### useFooterTheme <a href="#usejumbofootertheme" id="usejumbofootertheme"></a>

```javascript
import { useFooterTheme } from '@wieldy/components/WieldyTheme/hooks';

const { footerTheme, setFooterTheme } = useFooterTheme();
```

#### useSideBarTheme <a href="#usejumbofootertheme" id="usejumbofootertheme"></a>

```javascript
import { useSideBarTheme } from '@wieldy/components/WieldyTheme/hooks';

const { sidebarTheme, setSidebarTheme } = useSideBarTheme();
```