Skip to main content

Customization

Mango's UI is fully customizable. Since it is built entirely on HTML, CSS, and AngularJS, you have complete control over the look and feel of every page. From simple color changes to complete visual overhauls with custom themes and SVG-based interactive graphics, the customization options range from no-code configuration to advanced front-end development.

In This Section​

  • Introduction to HTML5 Web Apps -- Overview of Mango's HTML5 and AngularJS-based UI framework, how the component architecture works, and how the Dashboard Designer integrates with custom page development.
  • Custom CSS Styles -- Apply global or per-page CSS to customize fonts, colors, spacing, and component appearance. Includes methods for using the User stylesheet, Chrome DevTools for debugging, and inline styles on custom pages.
  • Creating a Custom Theme -- Select from Material Design color palettes or create your own custom color palette and apply it as the Mango theme for primary, accent, and warning colors.
  • Custom Menus -- Build reusable menu components and embed them across multiple pages. Covers simple button-based menus and advanced approaches using userModule.js with nested UI-Router states.
  • Interactive SVG Graphics -- Embed SVG graphics on custom pages using the <ma-svg> component, with interactive elements bound to live data point values for dynamic visualizations.
  • SVG Development in Mango -- A detailed guide to designing SVG graphics in Adobe Illustrator for use in Mango, covering vector drawing, layer organization, and preparing SVGs for animation.