Please refer Faq's page in documentation itself for queries like customization like color ,rtl ,dark style..etc.
import { FC, Fragment } from 'react';
import { Outlet } from 'react-router-dom';
import Footer from '../Layouts/layoutcomponents/Footer';
import Header from '../Layouts/layoutcomponents/Header';
import Rightside from '../Layouts/layoutcomponents/Rightside';
import Switcher from '../Layouts/layoutcomponents/Switcher';
import * as switcherdata from '../Commondata/switcherdata/switcherdata';
import BacktoTop from '../Layouts/layoutcomponents/Backtotop';
import { Sidebar } from '../Layouts/Sidebar/Sidebar';
import store from '../Redux/store';
import { Provider } from 'react-redux';
interface AppProps { }
const App: FC = () => {
document.querySelector("body")?.classList.remove('login-img', 'landing-page', 'horizontal');
document.querySelector("body")?.classList.add( 'app', 'sidebar-mini', 'ltr','light-mode');
return(
<Fragment>
<Provider store={store}>
<div className='horizontalMenucontainer' >
<Switcher />
<div className="page">
<div className="page-main">
<Header />
<div className="sticky" style={{ paddingTop: "-74px" }}>
<Sidebar />
</div>
<div className="jumps-prevent" style={{ paddingTop: "74px" }}> </div>
<div className="main-content app-content mt-0" onClick={() => switcherdata.responsiveSidebarclose()}>
<div className="side-app">
<div className="main-container container-fluid">
<Outlet />
</div>
</div>
</div>
</div>
<Footer />
</div>
<Rightside />
<BacktoTop />
</div>
</Provider>
</Fragment>
);}
export default App;