Colors

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.

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

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.

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.

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.