Able Pro
Angular
Angular
  • ✨Introduction
  • 🚀Quick Installation
  • 📂Directory Structure
  • 📄Page Structure
  • 🛠️Theme Configuration
  • 🎨Theme Layout
  • 📦Dependencies
  • 🎭Theme Structure
  • 📚How to
    • Dashboard as First Page
    • Login as First Page
    • Remove Authentication
    • Guard Children Routes
    • 🚫Remove Role Base Authentication
    • Role Base Authentication
  • 📅Changelog
  • 🆘Support
Powered by GitBook
On this page

Theme Configuration

Theme Customization options

../src/app/app-config.ts

app-config.ts
export class AbleProConfig {
  static layout = 'vertical'; // vertical, horizontal, compact
  static isDarkMode = 'light'; // light, dark, auto
  static theme_color = 'blue-theme'; // blue-theme, indigo-theme, purple-theme, pink-theme, red-theme, orange-theme, yellow-theme, green-theme, teal-theme, cyan-theme
  static isRtlLayout = false; // false true
  static isBox_container = false; // false true
  static theme_contrast = false; //true false
  static menu_caption = false; // true false
  static isLanding = true;
  static i18n = 'en'; // en, fr, ro, cn
}

You can edit this file at [ ../src/app/app-config.ts ]

Option
Default
Data Type
Description

layout

vertical

String

vertical, horizontal, compact

isDarkMode

light

String

light, dark, auto

theme_color

blue-theme

String

blue-theme, indigo-theme, purple-theme,

pink-theme,red-theme,orange-theme, yellow-theme, green-theme, teal-theme,cyan-theme

isRtlLayout

false

Boolean

true, false

isBox_container

false

Boolean

true, false

theme_contrast

false

Boolean

true, false

menu_caption

false

Boolean

true, false

isLanding

true

Boolean

true, false

i18n

en

String

en, fr, ro, cn

PreviousPage StructureNextTheme Layout

Last updated 9 months ago

🛠️