Home Builder Documentation Axentix
Getting started General
Components
Forms Utilities Check changelog.
1.0.1

Neumorphic colors

The neumorphic colors allows you to change the theme color of your page.

Theme colors

To use a theme color, 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 neumorphic theme color class to an element before adding the shadow classes to the children.

I'm a light theme concave.
I'm a dark theme concave.

Nesting theme colors

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

I'm a flat shadow inside a light theme.

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

I'm a dark theme concave.

Lighten & darken theme colors

You may want to lighten or darken your theme colors.
To make it, you just have to add the .neu-bg-lighten or .neu-bg-darken classes 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, you just have to add the .neu-bg-{color} class on an element.
The .neu-bg-lighten and .neu-bg-darken classes are working well too with the background colors.

I'm a dark part.