Able Pro
NextJS
NextJS
  • ✨Overview
  • 🌴Pre-requisites
  • 🚀Quick Start
  • 📂Folder Structure
  • 🌀State Management
  • 🔒Authentication
  • 📡Axios API Calls
  • 🌐Internationalization
  • 🛠️Project Configuration
  • 🎨Color Presets
  • 🎭Theme/Style Configuration
  • 📚How to
    • Login as First Page
    • Dashboard as First Page
    • Remove menu render from Backend
    • Render Menu from the backend
    • Remove Auth
  • 🖌️Figma
  • 🤝Integration
    • Seed
    • Comparison
  • 📦Dependencies
  • 🗓️Roadmap
  • 🆘Support
  • 📅Changelog
Powered by GitBook
On this page

Color Presets

How to change available color presets

Able Pro comes up with 6+ theme color presets. You can now change the available color presets by doing the following steps:

Color Preset files are available in src\themes\theme\ directory.

...
├── default.ts
├── theme1.ts
├── ..
├── ..
├── ..
├── theme8.ts
..
├── default.js
├── theme1.js
├── ..
├── ..
├── ..
├── theme8.js

Edit & Choose your desired preset color setting in src\config the file. Change the presetColor value to theme1, theme2 to theme6

// types
import { DefaultConfigProps } from 'types/config';

// ==============================|| THEME CONSTANT ||============================== //
...
...
// ==============================|| THEME CONFIG ||============================== //

const config: DefaultConfigProps = {
  ...
  presetColor: 'default',
  ...
};

export default config;
// ==============================|| THEME CONSTANT ||============================== //
...
...
// ==============================|| THEME CONFIG ||============================== //

const config = {
  ...
  presetColor: 'default',
  ...
};

export default config;
PreviousProject ConfigurationNextTheme/Style Configuration

Last updated 2 months ago

🎨