Jumbo React
Jumbo 6.x
Jumbo 6.x
  • Overview
  • Package Content
  • Installation and Setup
    • Environment Setup
    • Project Setup
  • Structure
    • Folder Structure
  • Layouts
    • Understanding Layouts
    • Pre-built Layouts
    • Create Custom Layout
  • Content Layout
    • Understanding Content Layout
  • Routes
    • Understanding Routes
    • Setup a New Route
    • Route Middleware
    • Create Route Middleware
  • Style Customization
    • Understanding Theme
    • Customize Theme
    • Dark Theme
    • Font Changes
  • How To
    • Apply RTL as default
    • Set RTL direction dynamically
    • Make sidebar menus dynamic
  • Auth Implementation
    • Auth Setting
    • Implement Login Form
Powered by GitBook
On this page
  1. Style Customization

Understanding Theme

This is an introductory section for themes to help you in understanding how the Jumbo Theme can easily be used and managed.

Jumbo Theme is divided as per four available sections in layout:

  • Main Theme (Responsible to provide the main theme for the content section of the layout)

  • Header Theme (Responsible to provide the theme for the header section of the layout)

  • Sidebar Theme (Responsible to provide the theme for sidebar section of the layout)

  • Layout Theme (Responsible to provide the theme for footer section of the layout)

The reason theme has been divided in these four parts is to make the theme customization easy and flexible. So that each section can be themed specifically.

Theme in Jumbo is provided by the <JumboTheme /> provider component. You can see its use in App.js.

Theme Files Location

All theme files are located in the src/app/themes/ folder. You can clearly see that theme files are organized in four sub-folders here as per the specification given in above section.

src/app/themes/

  • /footer

  • /header

  • /sidebar

  • /main

PreviousCreate Route MiddlewareNextCustomize Theme

Last updated 2 years ago