Mamix - NextJS Javascript Page-Router React-Bootstrap Admin Template, With these template formats, it's very easy to create a presence and grab someone's attention around the web page
Because the template is built using Nextjs, Javascript, CSS3, React-Bootstrap framework and with Sass. So please before you start working with the template take a quick look on the documentation so that you can easily built your website.
If You Love Our Template Design Please don't forgot to rate it. Thank you so much! 😊
Thank you for showing interest towards our admin template. Feel free to contact us any time. We have a dedicated team to provide you the best support. If you want any queries open support ticket https://support.spruko.com.
Template Description
Mamix is a NextJS Javascript Page-Router React-Bootstrap Admin Template using modern and minimal design. It is fully flexible user-friendly and responsive. Mamix Modern template is powered with Nextjs,Javascript, SASS, & React-Bootstrap which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 230+ NextJs Components.No Need to do hard work for this template customization. We already designed it and you can easily design your website just how you like it.
This template using React-Bootstrap framework. After Purchased this template you will get All Nextjs CSS, Scss and JS Files.
It has super clean flat user interface admin design, easy customizable components and widgets.The Template comes with a awesome unique design also we ensure you can easily design template.
It is a fully responsive layout for all type of devices. Works on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart phone devices
Once you Purchase Mamix NextJS Javascript Page-Router React-Bootstrap Admin Template, you will be able to get free download of all future updates.
This comprehensive guide provides step-by-step instructions on how to set up your development environment Nextjs tool. It covers everything from the necessary prerequisites to installing the tool, creating an initial workspace, and setting up a starter app. You'll also learn how to run the app locally to test and verify your setup. By following this guide, you can ensure that your development environment is properly configured for Nextjs, and you can get started with your project confidently and efficiently. Whether you're a beginner or an experienced developer, this guide is an essential resource for anyone looking to work with Nextjs.
To get started with a Nextjs application, there are three prerequisites that you need to have in place.
Prerequisites
To use the NextJs Javascript Framework, you should be familiar with the following:
NextJs
React Bootstrap
Javascript
Knowledge of Javascript is helpful.
Mamix - File Generate
Creating a Component
The easiest way to create a component is with the React CLI. You can also create
a
component manually.
Creating a component using the React CLI
To create a component using the React CLI:
From a terminal window, navigate to the directory containing your
application
Run the generate-react-cli component <component-name>
command, where
<component-name> is the name of your new component.
generate-react-cli component <component-name>
By default, this command creates the following:
A folder named after the component
A component file, <component-name>.component
A template file, <component-name>.component.js
A CSS file, <component-name>.component.css
A testing specification file,
<component-name>.component.spec.ts
Where <component-name> is the name of your component.
Installation Process
Mamix Next.js Setup
How to Run the Mamix Template:
Step 1:
Download the project, extract it, and navigate to the final template folder named Mamix-Nextjs Page Router JS Final. Open the template to proceed.
Step 2:
Open your terminal or command prompt and run the following command to install the packages:
npm install
Step 2:
After the installation, run the project using the following command:
npm run dev
Once you serve your application by default it will take their
default port using http://localhost:3000/
How to Convert SCSS to CSS:
If you need to change any styles, modify the SCSS files. To convert SCSS to CSS, run the following command:
npm run sass
Staterkit:
StarterKit is a foundational template or boilerplate that provides the basic
structure and essential components needed to build a web application from
scratch. It’s designed to save time by offering pre-configured setups,
allowing developers to focus on building features rather than setting up the
initial project structure.
Folder Structure: Organized directories for components, pages,
assets, styles,
and utilities.
Basic Pages: Such as a dashboard, login/authentication page, and
error pages.
Reusable Components:dashboards, pages, apps, uitilities, ui-elements, advanced-ui, tables, maps, charts, forms ready to be customized.
Styling Setup: CSS, SCSS for quick UI
development.
How to Run the Staterkit:
Step 1:
Navigate to the staterkit folder named Staterkit. Open the
template to proceed.
Step 2:
Open your terminal or command prompt and run the following command to install
the packages:
npm install
(or)
yarn install
Step 2:
After the installation, run the project using the following command:
npm run dev
(or)
yarn run dev
Once you serve your application by default it will take their default port using http://localhost:3000/
How to Convert SCSS to CSS:
If you need to change any styles, modify the SCSS files. To convert SCSS to CSS,
run the following command:
In general, the npm i command is used to install all dependencies or devDependencies from a package.
However, sometimes you may encounter errors while installing certain dependencies. In such cases, the --force argument
can be used to force npm to install those dependencies.
The --force argument overrides any previously installed dependencies and fetches remote resources even
if a local copy exists on disk. It follows a "last-dependency-downloaded-wins" approach, which means that it will
overwrite any previously downloaded dependencies.
Using the --force argument can be helpful when you need to install a specific dependency that is causing
issues during installation. However, it should be used with caution, as it can potentially cause conflicts with other
dependencies or lead to unexpected behavior. It's always a good idea to thoroughly test your application after using
the --force argument to ensure that everything is working as expected.
npm install --force
When installing packages using npm, if there are peer dependency issues, npm will always skip the
installation of peer dependencies, even if there are no issues. Peer dependencies are a specific type of dependency
that a package requires to function properly, but which are not managed by that package's dependency manager.
Skipping the installation of peer dependencies can sometimes lead to issues with the functionality
or compatibility of the package. To ensure that your package functions correctly, it's important to manually install
any missing peer dependencies using the npm install command. When installing peer dependencies, you should also be aware
of the potential for conflicts with other packages or dependencies. It's a good idea to carefully review the peer
dependencies required by each package and ensure that they are compatible with other packages in your project. By taking
these steps, you can avoid potential issues and ensure that your packages are installed and functioning correctly.
npm install--legacy-peer-deps
We have to use only one file example: (for yarn yarn-lock) & (for npm package-lock.json) file
For Build your Template
Build your application for host on server using below command:
yarn run build
(or)
npm run build
Note:
To deploy your project successfully, ensure that your domain is correctly added to the basePath in next.config.mjs path:mamix-js\next.config.mjs
Mamix - NextJs Javascript Page-Router Admin Dashboard Template / : Root template folder contain all js, scss, images
and other files.
pages/ : This is the main directory for the application's routing.
api/: Contains API routes (e.g., hello.ts) for handling backend requests
components/: A grouping folder for four layouts.
advancedui/ : Contains UI components like accordions-collapse.js.
apps/ : Likely contains components for app-related features.
authentication/ :Components related to user authentication (e.g., login, registration).
charts/ : Components for visualizing data via charts.
_app.js :Custom App component in Next.js, wrapping all pages and handling global layout or state.
_document.js : A custom Document component in Next.js used for augmenting the HTML document structure (e.g., adding custom metadata or global scripts).
index.js :Entry point for the homepage of the app.
public/
assets/:Stores static assets like images, accessible via /public/assets
shared/ :Reusable components and Data files that can be used across multiple pages.
eslintrtc.json : ESLint configuration file.
gitignore : Specifies intentionally untracked files to ignore.
jsconfig.json : JavaScript configuration file.
next-config.mjs : Next.js configuration file.
package.json : Contains metadata about the project and its dependencies.
README.md : Project documentation and instructions.
StaterKit Guide
Purpose of a starter kit
Introduction to the NextJS Javascript Starter Kit Template:
The NextJS template starterkit is a resource that helps developers kickstart their NextJS web development projects by providing a preconfigured and ready-to-use template. It aims to simplify the initial setup and provide a foundation for building NextJS-based websites or applications.
Purpose of the NextJS Starter Kit Template:
The purpose of the NextJS Starter Kit Template is to save developers time and effort by offering a set of prebuilt files and configurations commonly used in NextJS projects. Instead of starting from scratch, developers can leverage the starter kit to quickly set up a project structure that adheres to best practices and industry standards.
Benefits of Using the NextJS Starter Kit Template:
The starter kit eliminates the need to set up the basic project structure manually. It provides a well-organized file and folder structure, including commonly used directories for separating code, templates, assets, and configuration files. This allows developers to focus more on implementing business logic rather than spending time on initial setup.
Before using the NextJS Starter Kit Template, developers should have a basic understanding of NextJS and web development concepts.
Starterkit Overview
You can use the Starterkit if you are creating a new project. It will be time-consuming to use the full admin version for a new project as Mamix-nextJs Javascript have more than 200 components.
We have provided all the pre-build layouts like Sidemenu, Header, footer and blank pages etc in the Starterkit.
For further information or support regarding the template, please contact us using the provided link.
In Next.js project, it can be easy to add menus to the sidebar by modifying the MenuItems array in the nav.js(shared\layout-components\sidebar\nav.js) file. The sidebar will dynamically display the menus based on the contents of this array. below are the steps as follows
Steps:
Open nav.js File:
Open the nav.js (shared\layout-components\sidebar\nav.js) file in Next.js project. This file contains the MenuItems array that defines the menus to be displayed in the sidebar.
To add the parent Menu Items:
Inside the MenuItems array, you can add your menu items using the following format:
To add the children to Menu Items:
Inside the MenuItems array, you can add custome nested menu items using the following format:
menutitle: The display name of the menu.
title: The display name of the component.
selected: Set to true if this menu is currently selected.
icon: The icon to display next to the menu.
type: Specify the type of the menu item (link, sub and empty).
path: Specify the route path for link type menu.
active: Set to true to mark this menu as active.
dirchange: change the direction from right to left .
badgeClass (optional): CSS class for the badge.
badgeValue (optional): Text to display in the badge.
children: Define an array of child menu items for sub-menu type.
Save the Changes:
After adding your menu items, save the changes made to the nav.js (shared\layout-components\sidebar\nav.js) file.
View Sidebar Changes:
The sidebar will now automatically display the added menu items based on the modifications you made in the MenuItems array.
To Remove the Menu Items:
To remove menu items that you don't need, you can simply delete the corresponding object from the MenuItems array.
By following these steps, you can easily customize and add menus to the sidebar of your Next.js project. The menus will be dynamically generated based on the content of the MenuItems array in the nav.js file.
Routing
Routing
In a single-page application, you change what the user sees by showing or hiding portions of the display that correspond to particular components, rather than going out to the server to get a new page. As users perform application tasks, they need to move between the different views that you have defined
Suppose you want to create a new module ( For creating a new module refer create
new module )
then you have to add new routes for that modules.
Basic Route
Following are the fundamental building blocks to creating a route.
import React, { Fragment } from "react";
import Link from 'next/link';
import { useRouter } from "next/router";
<ul>
<li>
<Link href="/components/dashboards/sales">Sales
</Link>
</li>
<li>
<Link href="/components/dashboards/analytics">Analytics
</Link>
</li>
<li>
<Link href="/blog/hello-world">Blog Post
</Link>
</li>
</ul>
Configure Link in Menu
To Add new link in Sidemenu
Following are the fundamental building blocks to creating a
new link.
This documentation outlines the process of converting SCSS (Sassy CSS) files to standard CSS (Cascading Style Sheets) in a project's assets directory using the SASS package. SCSS is a preprocessor for CSS, and SASS is a popular choice for transforming SCSS into CSS efficiently. This guide provides step-by-step instructions on installing the SASS package, configuring it in your project, and converting SCSS files to CSS.
Prerequisites
Before proceeding, ensure that you have the following prerequisites:
A project directory with SCSS files that you want to compile into CSS.
Installation :
Install the SASS package using npm (Node Package Manager) by running the following command:
npm install sass
This command will download and install the SASS package and its dependencies into your project.
Configuration :
To configure SASS for your project, follow these steps:
1. Open your project's package.json file. If you don't have one, you can create it by running npm init and following the prompts.
2. Inside the package.json file, locate the "scripts" section. If it doesn't exist, create one:
"scripts": {
// ...existing scripts...
}
3. Add a script that specifies the compilation process from SCSS to CSS. You can name the script as you prefer, but for this example, we'll name it "sass." The script should look like this:
In the script above, replace ./public/assets/scss with the path to your SCSS files and ./public/assets/css with the destination directory for your compiled CSS files.
4. Add a script that specifies the compilation compressed process from SCSS to CSS. You can name the script as you prefer, but for this example, we'll name it "sass-min." The script should look like this:
In the script above, replace ./public/assets/scss with the path to your SCSS files and ./public/assets/css with the destination directory for your compiled CSS files.
5. Save the package.json file.
Compiling SCSS to CSS :
With the SASS package and script configured, you can now compile your SCSS files to CSS with the following steps:
1. Open your terminal or command prompt.
2. Navigate to your project's root directory if you're not already there.
3. Execute the following command to run the "sass" script:
npm run sass
This command will initiate the SCSS to CSS compilation process using the SASS package.
4. Execute the following command to run the "sass-min" script:
npm run sass-min
This command will initiate the SCSS to CSS compilation compressed process using the SASS package.
5. Once the process is complete, the compiled CSS files will be generated in the specified destination directory (e.g., ./public/assets/css).
Conclusion :
You have successfully configured and used the SASS package to convert SCSS files to CSS in your project. This allows you to take advantage of SCSS's powerful features while ensuring that your web application uses standard CSS for styling.
Firebase Authentication Guide
Firebase SetUp
Step-1: Now run below commands inside our nextjs project to install firebase
latest.
step-2: Add firebase API configuration details(create database on
firebase) to the firebase Auth Component refer the path
(/shared/firebase/firebaseapi.js)
Firebase Revocation process
To remove firebase from the project make sure that you have to remove the firebase tab from the (app\page.js).
change the key variable to 'next.js' Example : const [key, setKey] = useState('next.js') in the the (app\page.js).
Firebase installation process
Switcher Theme styles
You can change the Theme Styles by adding the attribute to the html tag in (Rootwrapper.js)(Root:\shared\layout-components\layout\Rootwrapper.js)
To set navigation style to menu click - *Works same for both vertical and horizontal
data-nav-style="menu-hover"
To set navigation style to menu hover - *Works same for both vertical and horizontal
data-nav-style="icon-click"
To set navigation style to icon click - *Works same for both vertical and horizontal
data-nav-style="icon-hover"
To set navigation style to icon hover - *Works same for both vertical and horizontal
data-page-style="regular"
To set page style to Default
data-page-style="classic"
To set page style to Classic
data-width="default"
To set page width to Default Width
data-width="fullwidth"
To set page width to Full Width
data-width="boxed"
To set page width to Boxed
data-menu-position="fixed"
To set menu position Fixed
data-menu-position="scrollable"
To set menu position Scrollable
data-header-position="fixed"
To set header position Fixed
data-header-position="scrollable"
To set header position Scrollable
data-vertical-style="closed"
To set sidemenu layout style Closed - *Does not work for horizontal
data-vertical-style="icontext"
To set sidemenu layout style Icon Text - *Does not work for horizontal
data-vertical-style="overlay"
To set sidemenu layout style Icon Overlay - *Does not work for horizontal
data-vertical-style="detached"
To set sidemenu layout style Detached - *Does not work for horizontal
data-vertical-style="doublemenu"
To set sidemenu layout style Double Menu - *Does not work for horizontal
loader="enable"
To enable loader by default
FAQ'S
General Style
Step 1:
Go To style.scss
(\public\assets\scss\styles.scss )
if you want to change another font-family Go to the site Google Fonts And Select One
font Family and import in to styles.scss file
How to Select font Family
Example:
Step 2:
And paste Your Selected font-family in style.scss
Example:
Step 3:
And add the Your Selected font-family in
_variables.scss(\public\assets\scss\_variables.scss)
Example:
--default-font-family: "Montserrat", sans-serif;
By default menu icons are in the from remix icon if you want to change the icons please follow below steps
Step 1 :
To change Menu icons, open nav.js page
Path: shared\layout-components\sidebar\nav.js and go through app-sidebar section, in that section you will find
icontag, there you can replace previous icon with your icon. Example as shown in below
Go To "src/assets/images/brand-logos" folder and replace
your
logo with Previous Logos within in image size.
note: Please don't increase logo sizes. Replace your logo within
given
image size. otherwise the logo will not fit in particular place it
disturbs the template design.
To change Layout Theme
open reducer.jspath:(shared\redux\reducer.js).
Theme Array Documentation
The theme array provided below is designed to control the layout and styling of a web application. By modifying the values in this array, you can change the visual appearance and behavior of various components in the application. The array includes settings related to color schemes, layout styles, header and menu styles, and more.
Initial State
The initial state of the theme array defines the default values for different aspects of the application's appearance and behavior. These values are used as a starting point and can be dynamically modified using the provided functions.
let initialState = {
lang: "en", // Default language
dir: "ltr", // Default text direction (ltr or rtl)
dataThemeMode: "light", // Default color scheme (light or dark)
dataMenuStyles: "light", // Default menu style (dark, light, color, gradient, transparent)
dataNavLayout: "vertical", // Default navigation layout (vertical or horizontal)
dataHeaderStyles: "transparent", // Default header style (light, dark, color, gradient, transparent)
dataVerticalStyle: "overlay", // Default vertical menu style (overlay, icon-text, detached, doublemenu)
toggled: "", // Default menu toggle state (open or closed)
dataNavStyle: "", // Default navigation style (menu-click, menu-hover, icon-click, icon-hover)
dataPageStyle: "regular", // Default page style (regular or classic)
dataWidth: "default", // Default page width (fullwidth or boxed)
dataMenuPosition: "fixed", // Default menu position (fixed or scrollable)
dataHeaderPosition: "fixed",// Default header position (fixed or scrollable)
loader:"disable", / Default loader (enable or disable)
iconOverlay: "", // Default icon overlay state (empty)
colorPrimaryRgb: "", // Default primary color (RGB format)
colorPrimary: "", // Default primary color (space-separated RGB values)
bodyBg1: "", // Default body background color1 (empty)
bodyBg2: "", // Default body background color2 (empty)
Light: "", // Default body background color (empty)
Formcontrol: "", // Default body background color (empty)
inputBorder: "", // Default dark inputBorder color (empty)
Graycolor: "", // Default dark background color (empty)
bgImg: "", // Default background image (empty)
iconText: "", // Default icon text style (empty)
body: "" // Default body class (empty)
};
Note:
Make sure to clear the localStorage when changing the state to prevent it from affecting the applied state.
Disabling Switcher
Step1:
Open header.js component shared\layout-components\header\header.js
Remove the switcher component from the main layout follow the path Path: \shared\layout-components\layout\contentlayout.js
import Switcher from "@/shared/layout-components/switcher/switcher"
<Switcher isSwitcherOpen={isSwitcherOpen} toggleSwitcher={toggleSwitcher} />
Step3:
Now remove the switcher component and switcherData file from the root folder, follow the path Switcher component shared\layout-components\switcher\switcher.js and
switcherdata file from /shared\data\switcherdata
Step1:
Open ecommerceheader.js component \shared\layout-components\ecommerceheader\ecommerceheader.js
React Swiper is a modern, feature-packed carousel component
for React, offering smooth transitions, touch support, and advanced features like
autoplay and lazy loading. It’s a flexible, performance-driven alternative to
traditional carousels like Bootstrap.
React-ApexCharts is a React wrapper for the popular
ApexCharts library, enabling the easy creation of interactive, responsive charts. It
offers a wide range of chart types and customization options with seamless React
integration.
1. You need to add these files to make react-apexchart work.
React SunEditor is a lightweight, customizable WYSIWYG (What
You See Is What You Get) editor for React, providing rich text editing features. It
supports various formats, plugins, and is highly extensible for smooth integration
into React applications.
1. You need to add these files to make basic react-suneditor work.
React DatePicker is a React wrapper for the DatePicker date
picker library, offering a lightweight and customizable solution for selecting dates
and times. It provides smooth integration, supports various date formats, and
includes features like range selection, time picking, and more.
1. You need to add these files to make basic react-datePicker work.
React Select is a flexible, customizable dropdown/select
input component for React, offering features like multi-select, search, and async
options. It provides an intuitive, user-friendly interface with advanced styling and
accessibility support.
1. You need to add these files to make basic react-select work.
React Grid.js is a React wrapper for the Grid.js table
library, enabling the creation of interactive, customizable, and responsive data
tables. It supports features like sorting, filtering, pagination, and inline
editing, with a focus on performance and easy integration into React projects.
1. You need to add below files to make basic gridjs table work.
React Toastify is a lightweight and easy-to-use notification
library for React that allows you to display customizable, non-blocking toast
messages. It supports various notification types, automatic dismissal, and seamless
integration, enhancing the user experience with minimal setup.
1. You need to add these files to make react toastify work.
React Material-UI Ratings is a component that integrates
Material-UI's design system to create customizable, interactive rating systems in
React applications. It allows users to easily select a rating through stars or other
symbols, with built-in support for customization, accessibility, and styling.
1. You need to add these files to make react rating work.
React Bootstrap Alerts are pre-styled, customizable alert
components that integrate Bootstrap's alert system with React. They provide an easy
way to display important messages or notifications, with built-in support for
different styles (success, error, info, etc.), dismissible functionality, and
seamless React integration.
1. You need to add these files to make alerts work.
React Bootstrap Buttons are pre-styled, responsive button
components that follow Bootstrap’s design system, offering various styles, sizes,
and colors. They provide an easy-to-use and customizable solution for creating
interactive buttons in React applications, with support for icons, loading states,
and more.
1. You need to add these files to make buttons work.
React Bootstrap Badges are small, customizable components
used to display labels, notifications, or counters within your React application.
They integrate seamlessly with Bootstrap’s design system and support various styles,
colors, and positions, making them ideal for highlighting important information or
adding context to UI elements like buttons, links, or navigation items.
1. You need to add these files to make badges work.
React Bootstrap Button Group is a component that allows you
to group multiple buttons together, providing a clean, unified look and facilitating
interactions like toggling or switching between options. It integrates seamlessly
with Bootstrap's button styles and offers customization options for size, alignment,
and behavior within React applications.
1. You need to add these files to make button group work.
React Bootstrap Cards are versatile, customizable components
for displaying content in a flexible, structured layout. They integrate Bootstrap’s
card system with React, allowing you to create various types of content containers
with options for images, headers, footers, and more, making them ideal for building
rich, responsive UI elements.
1. You need to add these files to make cards work.
React Bootstrap Breadcrumb is a navigation component that
displays a series of links to help users understand their location within a
hierarchical structure. It seamlessly integrates with Bootstrap’s breadcrumb
styling, offering customizable options for separators, active links, and responsive
behavior in React applications.
1. You need to add these files to make breadcrumb work.
React Bootstrap Dropdown is a component that provides a
simple way to create dropdown menus in React applications, following Bootstrap's
design conventions. It supports various options like single or multi-level menus,
alignment, and customization of triggers (e.g., buttons or links), making it easy to
build responsive, interactive dropdowns with minimal effort.
1. You need to add these files to make dropdown work.
React Bootstrap Tooltips are small, customizable pop-up
elements that provide additional information when users hover over or focus on an
element. Built on Bootstrap’s tooltip system, they offer easy integration in React
applications, supporting various customization options like positioning, trigger
events, and animations for a better user experience.
1. You need to add these files to make tooltipss work.
React Bootstrap Popovers are interactive components that
display additional content or information when users click or hover over an element.
Built on Bootstrap’s popover system, they offer easy integration in React
applications, with support for customizable content, placement, and triggers,
allowing you to enhance the user interface with rich, contextual overlays.
1. You need to add these files to make yaireo/dragsort work.
React Bootstrap Progress is a component that allows you to
display progress bars in React applications, indicating the completion status of
tasks or operations. It integrates seamlessly with Bootstrap’s progress bar styles,
supporting features like custom labels, striped animations, and varying bar colors
for easy customization and responsiveness.
1. You need to add these files to make Progress work.
React Bootstrap ListGroup is a component for creating lists
of items with consistent styling and behavior, using Bootstrap's list group system.
It supports features like custom item content, active states, badges, and links,
making it easy to build interactive and organized lists in React applications with
full customization options.
1. You need to add these files to make List Group work.
React Bootstrap Toast is a component for displaying
lightweight, non-blocking notifications or messages in React applications. It
integrates with Bootstrap’s toast system, offering features like auto-dismiss,
customizable timing, and different styling options for success, error, or info
messages, making it easy to provide feedback to users in a clean and responsive way.
1. You need to add these files to make toast work.
React Bootstrap Accordion is a component that allows you to
display collapsible content panels in a stack, ideal for organizing large amounts of
content in a compact, interactive layout. It integrates with Bootstrap’s accordion
system, supporting features like multiple or single panel expansion, custom styling,
and smooth animations, making it easy to create dynamic, space-efficient UIs in
React applications.
1. You need to add these files to make accordions work.
React Bootstrap Carousel is a component for creating
responsive, interactive image sliders or carousels in React applications. It
integrates seamlessly with Bootstrap’s carousel system, offering features like slide
transitions, controls, indicators, and automatic cycling, allowing you to display a
series of content in an engaging and user-friendly way.
1. You need to add these files to make carousel work.
Note: After making the changes, run the npm run sass command.
Please follow the below steps to change Dark body Color
Step 1 :
Make sure the theme is set completely to dark mode by adding the following attributes to the html tag
data-theme-mode="dark" data-header-styles="dark" data-menu-styles="dark"
Step 2 :
To change Dark body Color you have to open _variables.scss file and replace what color you want as shown in below
Note: After making the changes, run the