Theme Configurations

Template Theme Configuration Documentation

The Theme Configuration in the AMRO admin template allows you to customize various aspects of the application's layout, styling, and behavior. By modifying the settings in the theme.settings.tsx file, you can tailor the appearance and functionality of your admin dashboard to suit your specific requirements.

Basic Usage

To configure the theme settings in your AMRO admin template, follow these steps:

Open the theme.settings.tsx File: Locate and open the theme.settings.tsx file in the root directory of your project.
Modify the Settings: Update the values of the settings object according to your preferences. You can customize options such as language, layout, navigation, routing, and more.
Save the Changes: Save the file after making your modifications. The changes will be reflected in the application's appearance and behavior.

ℹ️

Don't forgot to clear the cookies and localStorage. If you don't use the SettingsConsumer or SettingsContext no need to clear the cookies and local storage settings will be automatically reflected in the application.

Property Options

The theme.settings.tsx file includes the following property options for configuring the theme settings:

Property	Values	Description
appTitle	`AMRO`	The title of the application.
appSettings		An object containing various configuration options for the application.
lang	`en`	The default language of the application.
footer	`fixed`, `static`, `hidden`	Determines the behavior of the footer.
direction	`ltr` or `rtl`	The text direction of the application. Options: `ltr` (left-to-right), `rtl` (right-to-left).
navLayout	`vertical`	The layout of the navigation menu.
navCollapsed	`false`	Specifies whether the navigation menu is collapsed.
navHidden	`false`	Specifies whether the navigation menu is hidden.
contentWidth	`boxed`, `full`	Specifies the width of the content area.
appBar	`fixed`, `static`, `hidden`	Determines the behavior of the app bar.
appBarBlur	`true`	Specifies whether the app bar has a blur effect.
routingLoader	`true`	Specifies whether to show a loading indicator during route transitions.
SettingsConsumer	`true`	Specifies whether to include the settings consumer component.
toastPosition	`top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`	The position of toast notifications.

Example Usage

Here's an example of how you can configure the theme settings in the theme.settings.tsx file:

const themeSettings: ThemeSettings = {
  // *** App Title
  appTitle: "AMRO",
 
  // *** App Settings
  appSettings: {
    // *** Language Configs
    lang: i18n.defaultLocale, // en, ar, es
 
    // *** Layout Configs
    footer: "fixed", // fixed, static, hidden
    direction: "ltr", // ltr or rtl
    navLayout: "vertical", // vertical
    navCollapsed: false, // true or false
    navHidden: false, // true or false
    contentWidth: "boxed", // full or boxed
 
    // *** AppBar Configs
    appBar: "fixed", // fixed, static, hidden
    appBarBlur: true, // true or false
 
    // *** Routing Configs
    routingLoader: true, // true or false
 
    // *** Other Configs
    SettingsConsumer: true, // true or false
    toastPosition: "top-center", // top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
  },
};
 
export default themeSettings;

Conclusion

The Theme Configuration in the AMRO admin template provides a simple yet powerful way to customize the appearance and behavior of your Next.js admin dashboard. By adjusting the settings in the theme.settings.tsx file, you can create a tailored user experience that meets your specific needs and preferences.

For more advanced customization options and integration examples, refer to the documentation and code snippets provided in the AMRO admin template repository.

VSCode Configurations Settings Context