Theme customization
OneCompiler provides theme customization for your LMS platform. Following are the different UX features that you can customize.
Light mode
| Color | Default Value |
|---|---|
| primary.light | #b9c0f9 |
| primary.main | #5063f0 |
| primary.dark | #3845a8 |
| primary.contrastText | #fff |
| secondary.light | #e8eaf6 |
| secondary.main | #b9c0f9 |
| secondary.dark | #8086d1 |
| secondary.contrastText | #fff |
| alternate.main | #f7f9fa |
| alternate.dark | #e8eaf6 |
| error.light | #e57373 |
| error.main | #f44336 |
| error.dark | #d32f2f |
| error.contrastText | #fff |
| warning.light | #ffb74d |
| warning.main | #ff9800 |
| warning.dark | #f57c00 |
| warning.contrastText | rgba(0, 0, 0, 0.87) |
| info.light | #64b5f6 |
| info.main | #2196f3 |
| info.dark | #1976d2 |
| info.contrastText | #fff |
| success.light | #81c784 |
| success.main | #4caf50 |
| success.dark | #388e3c |
| success.contrastText | rgba(0, 0, 0, 0.87) |
| text.primary | rgba(0, 0, 0, 0.87) |
| text.secondary | rgba(0, 0, 0, 0.54) |
| text.disabled | rgba(0, 0, 0, 0.38) |
| text.hint | rgba(0, 0, 0, 0.38) |
Dark mode
| Color | Default Value |
|---|---|
| primary.light | #7382f3 |
| primary.main | #fff |
| primary.dark | #3845a8 |
| primary.contrastText | rgba(0, 0, 0, 0.87) |
| secondary.light | rgba(239, 97, 145, 1) |
| secondary.main | rgba(233, 30, 99, 1) |
| secondary.dark | rgba(163, 21, 69, 1) |
| secondary.contrastText | rgba(0, 0, 0, 0.87) |
| alternate.main | #212121 |
| alternate.dark | #24242b |
| error.light | #e57373 |
| error.main | #f44336 |
| error.dark | #d32f2f |
| error.contrastText | #fff |
| warning.light | #ffb74d |
| warning.main | #ff9800 |
| warning.dark | #f57c00 |
| warning.contrastText | rgba(0, 0, 0, 0.87) |
| info.light | #64b5f6 |
| info.main | #2196f3 |
| info.dark | #1976d2 |
| info.contrastText | #fff |
| success.light | #81c784 |
| success.main | #4caf50 |
| success.dark | #388e3c |
| success.contrastText | rgba(0, 0, 0, 0.87) |
| text.primary | #fff |
| text.secondary | rgba(255, 255, 255, 0.7) |
| text.disabled | rgba(255, 255, 255, 0.5) |
| text.hint | rgba(255, 255, 255, 0.5) |
| text.icon | rgba(255, 255, 255, 0.5) |
Note: Theme creation is a manual process. Please contact [email protected] to create a theme for your LMS platform.