Berry 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
  • 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 RTL theme
  • How to Set Horizontal Layout?
  • How to Set Minsidebar Layout?
  • How to unset Boxed Layout?
  • How to Change Input Text Background?
  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: null,
    Customizer_drawer: false,
    mini_sidebar: false,
    setHorizontalLayout: false, // Horizontal layout
    actTheme: 'PurpleTheme',
    fontTheme: 'Roboto',
    inputBg: false,
    boxed: true,
    isRtl: false
};              

How to Set Dark Theme?

Config.ts
const config: ConfigProps = {
    Sidebar_drawer: null,
    Customizer_drawer: false,
    mini_sidebar: false,
    setHorizontalLayout: false, 
    actTheme: 'DarkPurpleTheme', // Change Dark theme as per your requirement
    fontTheme: 'Roboto',
    inputBg: false,
    boxed: true,
    isRtl: false
};    

How to Set RTL theme

Config.ts
const config: ConfigProps = {
    Sidebar_drawer: null,
    Customizer_drawer: false,
    mini_sidebar: false,
    setHorizontalLayout: true,
    actTheme: 'PurpleTheme',
    fontTheme: 'Roboto',
    inputBg: false,
    boxed: true,
    isRtl: true // Set true here
};       

How to Set Horizontal Layout?

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

How to Set Minsidebar Layout?

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

How to unset Boxed Layout?

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

How to Change Input Text Background?

Config.ts
const config: ConfigProps = {
    Sidebar_drawer: null,
    Customizer_drawer: false,
    mini_sidebar: false, 
    setHorizontalLayout: true, 
    actTheme: 'PurpleTheme',
    fontTheme: 'Roboto',
    inputBg: true, // Set True here
    boxed: true,
    isRtl: false
};       
PreviousTheme ColorsNextDevelopment

Last updated 4 months ago

⛱️
⚙️