Theme

Change the look and feel of your web app as per your design

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 to customize and extending the theme.

Setting up a New Theme

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

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.

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

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:

"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 config.defaultTheme variable is being used

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:

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:

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

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

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

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

useMainTheme

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

const { mainTheme, setMainTheme } = useMainTheme();

useHeaderTheme

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

const { headerTheme, setHeaderTheme } = useHeaderTheme();

useFooterTheme

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

const { footerTheme, setFooterTheme } = useFooterTheme();

useSideBarTheme

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

const { sidebarTheme, setSidebarTheme } = useSideBarTheme();