Neumo UI - CSS Library

Lightweight Pure CSS Themes Light/Dark

Use .nui-neuromorphic for raised and .nui-neuromorphic-inset for inset. Add .nui-clickable to enable press feedback.

Features

Light/Dark mode

Automatic via light-dark() or forced with [data-nui-theme].

Light direction

Precise control of the relief direction (top/bottom + left/right).

Utilities

Raised and inset ready to use. Optional press feedback.

<div class="nui-neuromorphic"></div>
                            <button class="nui-neuromorphic nui-clickable">OK</button>

Themes

One CSS file per theme. Load it after styles.css.

Native styles

Applies styling to inputs, selects and buttons.

Quick customization

Load native.css

Toggle the switch in the header, or add this <link>:

Light/Dark mode

Defaults to light-dark(). To force:

<html data-nui-theme="dark">
                            ...
                            </html>

Change theme

Include the theme CSS after styles.css:

<link rel="stylesheet" href="/styles.css">
                            <link rel="stylesheet" href="/themes/ocean.css">

Light direction

Control via <html> attribute:

Styles for native elements

Buttons

Inputs

State:

These styles appear when you load native.css.

Checkbox & Radio

Native (via native.css)

Option A Option B Yes No

Load native.css to style native inputs automatically.

Modular classes

Option A Option B Yes No

Use classes without relying on native.css.

<input type="checkbox" class="nui-checkbox" />
                            <input type="radio" class="nui-radio" />

Checked state fills the inner shape using background-color: var(--nui-text-color).

Neumorphism utilities

Raised

Inset

Active state

Add .nui-clickable to enable press feedback.

Create a theme

Define per-mode variables and publish them as a CSS file. Minimal example:

:root { 

                    --nui-light-bg-color: #ebecf0;

                    --nui-dark-bg-color: #14130f;

                    --nui-light-text-color: #8993a2;

                    --nui-dark-text-color: #a0aec0;

                    --nui-light-lights: #ffffff;

                    --nui-dark-lights: #000000;

                    --nui-light-shadows: #bebebe;

                    --nui-dark-shadows: #414141;

                    }