Moodle Mobile 2 (Ionic 1) Themes

Note: This page is a work-in-progress. Feedback and suggested improvements are welcome. Please join the discussion on moodle.org or use the page comments.

The Moodle mobile app now allows theming via CSS by adding the CSS URL on the moodle site settings page.

The images below show the elements and properties that can be styled.

The page title that is visible only on mobile at the moment.

The selectors and properties for styling.

body {
 background: #4bcaff;
}
h1 {
 color: #4bcaff;
}
h2 {
 color: #ffffff;
 background-color: #7a8a94;
}
.header-main {
 color: #4b565d;
 background: #4bcaff;
}
#page-title {
 text-shadow: none;
}
.user-menu {
 background: #4bcaff;
}
.user-menu header {
 background: #4b565d url(../img/bg-header2.png);
 border-bottom: 5px solid #ffffff;
 box-shadow: 10px 0 20px rgba(0, 0, 0, 0.3);
}
.user-menu h2 {
 color: #4b565d;
 background: #ffffff;
 box-shadow: none;
}
.user-menu .nav-item > a {
 color: #4b565d;
}
.user-menu .nav-item .plugin-ico,
.user-menu .nav-item .course-ico {
 background-color: #4b565d;
}
.grades .section-name {
 color: #ffffff;
 background-color: #7a8a94;
}