Styling

Oreact uses Material-UI for theming and component styling.

Theming

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.

app/themes/blueOcean.js

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"',
          'Arial',
          'sans-serif',          
        ].join(',')
      },
};

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

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

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.