Oreact uses Material-UI for theming and component styling.


Oreact supports routes based theming. Each page can have different theme.

Adding a New Theme

Oreact allows you to add new themes under app/themes in project root directory. Theme is simply a Material-UI's theme configuration options.

You can change the colors, the typography and much more, Customize Oreact with your theme as shown below:

Consider creating a new theme named blueOcean, Ass blueOcean.js file in app/themes directory.


export default {
    palette: {
        type: 'light',
        primary: {
            light: '#c4d8dd',
            main: '#93a7ab',
            dark: '#65787c',
            contrastText: '#fff'
        secondary: {
            light: '#ffb281',
            main: '#f18153',
            dark: '#ba5228',
            contrastText: '#fff'
     typography: {
        fontFamily: [          
          '"Helvetica Neue"',

Now add this newly created theme into the themes registry: app/themes/index.js

import sunSkin from './blueOcean';
export default {    

Use a Theme

Themes are reusable. In order to use a theme simply go to the page settings and set theme name. For Example: In order to use blueOcean(as we already created it in above example) with a profile page.

Sample Profile page configuration can look like: /app/pages/profile/config.js

import loadable from '@oreact/core/loadable';

export default {
    settings: {
        theme: {
            main: 'blueOcean',
            navbar: 'blueOcean',
            toolbar: 'blueOcean',
            footer: 'blueOcean'
    routes: [
            address: ['/profile'],            
            component: loadable(() => import('./Component'), {ssr: true})            

Note: Don't name the themes directory anything else. The name cannot be changed and is the only directory used to serve themes.

Overriding Component CSS

We are using Material-UI' components, Click here to learn more about how to customize Material-UI components.