Mantis Vuetify
  • 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
  • Dependencies
  • How to
    • Skip Auth
  • 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 Set Minsidebar Layout?
  • How to unset Boxed Layout?
  • How to Change Input Text Background?
  • How to Set RTL theme?
  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 = {
    Sidebar_drawer: true,
    Customizer_drawer: false,
    mini_sidebar: false,
    setHorizontalLayout: false, // Horizontal layout
    actTheme: 'light',
    fontTheme: 'Public sans',
    inputBg: false,
    boxed: false,
    isRtl: false
};              

How to Set Dark Theme?

Config.ts
const config: ConfigProps = {
    Sidebar_drawer: true,
    Customizer_drawer: false,
    mini_sidebar: false,
    setHorizontalLayout: false, 
    actTheme: 'dark', // Change Dark theme
    fontTheme: 'Public sans',
    inputBg: false,
    boxed: true,
    isRtl: false
};    

How to Set Horizontal Layout?

Config.ts
const config: ConfigProps = {
    Sidebar_drawer: true,
    Customizer_drawer: false,
    mini_sidebar: false,
    setHorizontalLayout: true, // Change horizontal layout
    actTheme: 'light',
    fontTheme: 'Public sans',
    inputBg: false,
    boxed: true,
    isRtl: false
};       

How to Set Minsidebar Layout?

Config.ts
const config: ConfigProps = {
    Sidebar_drawer: true,
    Customizer_drawer: false,
    mini_sidebar: true, // Change minisidebar layout
    setHorizontalLayout: false,
    actTheme: 'light',
    fontTheme: 'Public sans',
    inputBg: false,
    boxed: true,
    isRtl: false
};       

How to unset Boxed Layout?

Config.ts
const config: ConfigProps = {
    Sidebar_drawer: true,
    Customizer_drawer: false,
    mini_sidebar: false, 
    setHorizontalLayout: false, 
    actTheme: 'DefaultTheme',
    fontTheme: 'Public sans',
    inputBg: false,
    boxed: false, // Set False here
    isRtl: false
};       

How to Change Input Text Background?

Config.ts
const config: ConfigProps = {
    Sidebar_drawer: true,
    Customizer_drawer: false,
    mini_sidebar: false, 
    setHorizontalLayout: false, 
    actTheme: 'DefaultTheme',
    fontTheme: 'Public sans',
    inputBg: true, // Set True here
    boxed: true,
    isRtl: false
};       

How to Set RTL theme?

Config.ts
const config: ConfigProps = {
    Sidebar_drawer: true,
    Customizer_drawer: false,
    mini_sidebar: false,
    setHorizontalLayout: false, // Horizontal layout
    actTheme: 'light',
    fontTheme: 'Public sans',
    inputBg: false,
    boxed: false,
    isRtl: true // Set True here
}
PreviousTheme ColorsNextDevelopment

Last updated 6 months ago

⛱️
⚙️