Customization

Basic use case

If overall nomimono looks good and you only need to change some colors or tweak some components to match your branding, here are the easy steps.

After install nomimono packages, don't include theme file from nomimono-theme but create your theme CSS file in your project and include that file instead.

then copy the content in light.css or dark.css. Use it as a base for your theme.

You can change the CSS properties value to match your project theme.

Config and extend the systems

If you want to add CSS variables, generate a new atomic class or change the class name prefix.

To customize the atomic class, in nomimono-css , after you install the package, in the scss folder, you will find the config file of the atomic class (or use the CDN link here)

Then create your own config file and copy the content into your file.

After updating your config file content, import it before importing all atomic classes.

You can do the same for component or others modules as well.