Theme
Change the look and feel of your web app as per your design
Was this helpful?
Change the look and feel of your web app as per your design
Was this helpful?
In Wieldy, The theme is divided in four main sections as given below:
Main Theme
Header Theme
Sidebar Theme
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 to customize and extending the theme.
To setup a new theme (let's say themex), you need to create following four files:
/src/app/_themes/themex/main.ts
/src/app/_themes/themex/header.ts
/src/app/_themes/themex/footer.ts
/src/app/_themes/themex/sidebar.ts
In each file above, you can export a theme variable as in the below sample code snippet
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.
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.
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:
and when this object is provided to the WiedlyTheme component then WieldyTheme manages the theme for the four sections individually.
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:
In the root layout (/src/app/layout.tsx), you can see that the AppProvider component set as follows:
This is all you need to do to setup a default theme for your web app.
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: