Theme colors

To use a color theme, you just have to choose between the themes colors, and set the neu-{color} class.
The default theme colors are dark and light but you can create your own theme colors using our builder.

Using a theme color, you can use any of our shadows, and they will work with any color theme.
Note that you need to add your neumorphism theme color class to an element before adding the shadow classes to the children.

Detailed steps

Choose a theme color, neu-{light} or neu-{dark}.
More colors using the builder page.

I'm a dark theme empty item.

Choose a shadow type, and apply it to any child of the themed parent.
We will use the concave shadow for this example.

I'm a dark theme concave item.

Nesting theme colors

You may want to change the color of your theme anywhere in your page.
You can do that adding another neu-{color} class even if you have set another theme color on a parent element.

I'm a light theme flat item.

I'm a dark theme part inside a light theme element.

I'm a dark theme concave item.

Lighten & darken theme colors

You may want to lighten or darken your theme colors.
Just add the neu-bg-lighten or neu-bg-darken class on your neu-{color} element.

My background is lighten.

I'm a flat shadow inside a lighten light theme.

My background is darken.

I'm a flat shadow inside a darken light theme.

Background theme colors

You may want to use the theme colors simply as background colors.
To make it, use the neu-bg-{color} class on an element.
The neu-bg-lighten & neu-bg-darken classes are available too.

I'm a dark element.
I'm a dark darken element.