Able Pro
Vue
Vue
  • Documentation
  • Pre-requisites
  • Quick Start
  • Directory Structure
  • ⛱️Theme UI
    • 🎛️Icons
    • 👓Change Logo
    • 🆎Change Typography
    • 🔮Theme Colors
    • ⚙️Theme Settings
  • 👨‍💻Development
    • State Management
    • Authentication
    • Axios API Calls
    • Routing
  • How to
    • Skip Auth
  • Dependencies
  • Roadmap
  • Support
  • Changelog
  • FAQ
Powered by GitBook
On this page
  • How to Set Default Settings?
  • How to Set Dark Theme?
  • How to Set Horizontal Layout?
  • How to unset Boxed Layout?
  • How to Change Input Text Background?
  • How to Set RTL theme?
  • How to Change Theme contrast?
  1. Theme UI

Theme Settings

Manage the theme settings for Horizontal, Dark, and Box layout options.

Theme settings lie under config.ts file.

How to Set Default Settings?

// Config.ts
const config: ConfigProps = {
  sidebarDrawer: true,
  customizerDrawer: false,
  miniSidebar: false,
  isHorizontalLayout: false, // Horizontal layout
  actTheme: 'light',
  fontTheme: 'Inter-var',
  inputBg: false,
  themeContrast: false,
  boxed: false,
  isRtl: false
}; 

How to Set Dark Theme?

// Config.ts
const config: ConfigProps = {
    sidebarDrawer: true,
    customizerDrawer: false,
    miniSidebar: false,
    isHorizontalLayout: false, 
    actTheme: 'dark', // Change Dark theme
    fontTheme: 'Inter-var',
    inputBg: false,
    themeContrast: false,
    boxed: true,
    isRtl: false
}; 

How to Set Horizontal Layout?

// Config.ts
const config: ConfigProps = {
    sidebarDrawer: true,
    customizerDrawer: false,
    miniSidebar: false,
    isHorizontalLayout: true, // Change horizontal layout
    actTheme: 'dark',
    fontTheme: 'Inter-var',
    inputBg: false,
    themeContrast: false,
    boxed: true,
    isRtl: false
};

How to unset Boxed Layout?

// Config.ts
const config: ConfigProps = {
    sidebarDrawer: true,
    customizerDrawer: false,
    miniSidebar: false, 
    isHorizontalLayout: false, 
    actTheme: 'light',
    fontTheme: 'Inter-var',
    inputBg: false,
    themeContrast: false,
    boxed: false, // Set False here
    isRtl: false
};

How to Change Input Text Background?

// Config.ts
const config: ConfigProps = {
    sidebarDrawer: true,
    customizerDrawer: false,
    miniSidebar: false, 
    isHorizontalLayout: false, 
    actTheme: 'light',
    fontTheme: 'Inter-var',
    inputBg: true, // Set True here
    themeContrast: false,
    boxed: true,
    isRtl: false
}; 

How to Set RTL theme?

// Config.ts
const config: ConfigProps = {
  sidebarDrawer: true,
  customizerDrawer: false,
  miniSidebar: false,
  isHorizontalLayout: false,
  actTheme: 'light',
  fontTheme: 'Inter-var',
  inputBg: false,
  themeContrast: false,
  boxed: false,
  isRtl: true // Set True here
}; 

How to Change Theme contrast?

// Config.ts
const config: ConfigProps = {
  sidebarDrawer: true,
  customizerDrawer: false,
  miniSidebar: false,
  isHorizontalLayout: false,
  actTheme: 'light',
  fontTheme: 'Inter-var',
  inputBg: false,
  themeContrast: true, // Set True here
  boxed: false,
  isRtl: false
}; 
PreviousTheme ColorsNextDevelopment

Last updated 9 months ago

⛱️
⚙️