Customization

The core library provides various ways to customize its components to fit your project's design and functionality requirements:

Theming

Customize the appearance and behavior of core components using a theming system from@modjs/utils.

Light Theme

lightTheme.js
Execute Code
Copy to clipbaord
import { ModLightTheme } from '@modjs/utils'

    mode: '#ffffff',

    typography: {
        ff: {
            primary: 'KoHo',
        },
        fw: {
            medium: 400,
            semibold: 600,
            bold: 700,
        },
        fs: {
            xsm: '0.75rem',
            sm: '0.875rem',
            md: '1rem',
            lg: '1.5rem',
            xl: '2rem',
        },
        color: {
            primary: '#474747',
            main: '#474747',
            light: '#8e8e8e',
            secondary: '#c2c2c2',
            white: '#ffffff',
            success: '#5a6b31',
            error: '#ca3c1f',
        },
    },
    color: {
        primary: '#1f8eff',
        secondary: '#474747',
        main: '#c2c2c2',
        success: '#5a6b31',
        error: '#ca3c1f',
        light: '#f2f2f2',
        dark: '#c2c2c2',
        transparent: 'transparent',
    },
    border: {
        primary: '1px solid #1f8eff',
        success: '1px solid #5a6b31',
        error: '1px solid #ca3c1f',
        light: '1px solid #f2f2f2',
        dark: '1px solid #c2c2c2',
        none: 'none',
    },
    borderRadius: '2px',
    avatar: {
        height: {
            sm: '32px',
            md: '64px',
            lg: '96px',
        },
        width: {
            sm: '32px',
            md: '64px',
            lg: '96px',
        },
        brightness: {
            light: 'brightness(60%)',
            normal: 'brightness(40%)',
            dark: 'brightness(20%)',
        },
    },
    image: {
        height: {
            sm: '96px',
            md: '240px',
            lg: '320px',
        },
        width: {
            sm: '96px',
            md: '240px',
            lg: '320px',
        },
        brightness: {
            light: 'brightness(60%)',
            normal: 'brightness(40%)',
            dark: 'brightness(20%)',
        },
    },
    icons: {
        height: {
            sm: '16px',
            md: '32px',
            lg: '64px',
        },
        width: {
            sm: '24px',
            md: '32px',
            lg: '64px',
        },
    },
    elevation: {
        light: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.1))',
        normal: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.3))',
        heavy: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.6))',
        none: 'none',
    },
    opacity: {
        high: 0.95,
        medium: 0.85,
        low: 0.5,
    },
    scrollbarColor: '#c2c2c2 #f2f2f2',
    tooltipBg: '#474747',
}
export default lightTheme

Dark Theme

darkTheme.js
Execute Code
Copy to clipbaord
import { ModDarkTheme } from '@modjs/utils'

    ...ModDarkTheme.mode,
    mode: '#121111',
    typography: {
        ...ModDarkTheme.typography,
        ff: {
            primary: 'KoHo',
        },
        fw: {
            medium: 400,
            semibold: 600,
            bold: 700,
        },
        fs: {
            xsm: '0.75rem',
            sm: '0.875rem',
            md: '1rem',
            lg: '1.5rem',
            xl: '2rem',
        },
        color: {
            primary: '#ffffff',
            main: '#c2c2c2',
            light: '#8e8e8e',
            secondary: '#474747',
            white: '#ffffff',
            success: '#5a6b31',
            error: '#ca3c1f',
        },
    },
    color: {
        primary: '#1f8eff',
        secondary: '#ffffff',
        main: '#c2c2c2',
        success: '#5a6b31',
        error: '#ca3c1f',
        light: '#1f1d1d',
        dark: '#474747',
        transparent: 'transparent',
    },
    border: {
        primary: '1px solid #1f8eff',
        success: '1px solid #5a6b31',
        error: '1px solid #ca3c1f',
        light: '1px solid #1f1d1d',
        dark: '1px solid #474747',
        none: 'none',
    },
    borderRadius: '2px',
    avatar: {
        height: {
            sm: '32px',
            md: '64px',
            lg: '96px',
        },
        width: {
            sm: '32px',
            md: '64px',
            lg: '96px',
        },
        brightness: {
            light: 'brightness(60%)',
            normal: 'brightness(40%)',
            dark: 'brightness(20%)',
        },
    },
    image: {
        height: {
            sm: '96px',
            md: '240px',
            lg: '320px',
        },
        width: {
            sm: '96px',
            md: '240px',
            lg: '320px',
        },
        brightness: {
            light: 'brightness(60%)',
            normal: 'brightness(40%)',
            dark: 'brightness(20%)',
        },
    },
    icons: {
        height: {
            sm: '1rem',
            md: '2rem',
            lg: '4rem',
        },
        width: {
            sm: '1.5rem',
            md: '2rem',
            lg: '4rem',
        },
    },
    elevation: {
        light: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.1))',
        normal: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.3))',
        heavy: 'drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.6))',
        none: 'none',
    },
    opacity: {
        high: 0.95,
        medium: 0.85,
        low: 0.5,
    },
    scrollbarColor: '#474747 #1f1d1d',
    tooltipBg: '#8e8e8e',
}
export default darkTheme

Override Styles

To override default styles of the components, you have several options. Note that the following options are listed in accending order based on the precedence. For example: the default styles have lowest precedence followed by the styles from System Props while the inline styles have the highest precedence.

System Props

Each component under @modjs/core is wrapped with awithSystemProps HOC. All props provided by withModSystemProps can be applied to the component to override default styles.

App.jsx
Execute Code
Copy to clipbaord
import { CodeEditor, Layout, Typography } from '@modjs/core' 
import {ModThemeProvider, ModLightTheme} from '@modjs/utils'

export const App = () => {
    <ModThemeProvider theme={ModLightTheme}>
        <Layout>
            <CodeEditor
                m={32}
                p={32}
            >
                {codeEditorContent}
            </CodeEditor>
        </Layout>
    </ModThemeProvider>  
}

Styled Components

All core components from @modjs/core are styled using thestyled-components library. The default styles can be overridden using styled-components.

App.jsx
Execute Code
Copy to clipbaord
import { Layout, Typography } from '@modjs/core' 
import {ModThemeProvider, ModDarkTheme} from '@modjs/utils'

const StyledTypography = styled(Typography)`
    color: #5a6b31;
    font-size: 1rem;
`
export const App = () => {
    <ModThemeProvider theme={ModDarkTheme}>
        <Layout>
            <StyledTypography>
                Typography component styled using styled() from styled-components
            </StyledTypography>
        </Layout>
    </ModThemeProvider>

Custom classNames

Each core components are designed to accept all valid HTML attributes. Therefore, the core components can be styled using the class attribute.

App.jsx
Execute Code
Copy to clipbaord
import { Layout, Link } from '@modjs/core' 
import {ModThemeProvider, ModDarkTheme} from '@modjs/utils'

export const App = () => {
    <ModThemeProvider theme={ModDarkTheme}>
        <Layout>
            <Link className = "link-class">
                Link component styled using custom className
            </Link>
        </Layout>
    </ModThemeProvider>

Inline Styles

Since all core components accept valid HTML attributes, the component can also be styled using the style HTML attribute.

App.jsx
Execute Code
Copy to clipbaord
import { Layout, Button } from '@modjs/core' 
import {ModThemeProvider, ModDarkTheme} from '@modjs/utils'

export const App = () => {
    <ModThemeProvider theme={ModDarkTheme}>
        <Layout>
            <Button style = {{padding: "8px" margin: "8px"}}>
                Button component styled using style HTML attribute.
            </Button>
        </Layout>
    </ModThemeProvider>

Installation Accordion API

What are you looking for?

Common Searches:

Settings