Neumorphic Dark Mode Calculator

This Neumorphic Dark Mode Calculator brings the “Soft UI” trend to life with a fully functional mathematical tool. It features a realistic, extruded plastic look achieved through complex CSS box-shadows. A prominent toggle allows users to switch between a clean light theme and a high-contrast dark mode, instantly updating the shadow physics to maintain the illusion of depth.

Core Technique: Dual-Shadow Neumorphism

The signature “soft” look depends on using two opposing shadows: a light one on the top-left and a dark one on the bottom-right. This simulates a light source hitting a 3D surface.

1. Light Mode Shadows

In the default state, the buttons use soft gray and white shadows to blend with the off-white background.

• Top-Left: White (#FFFFFF) negative offset creates a highlight.
• Bottom-Right: Dark Gray (#CBCBCB) positive offset creates a shadow.

.style {
    box-shadow: 4.5px 4.5px 9px #CBCBCB,  /* Dark Shadow */
                -4.5px -4.5px 9px #FFFFFF; /* Light Highlight */
}

2. Dark Mode Physics

When switching to dark mode via the .nightModeToggleNM class, the background becomes almost black. To maintain visibility, the shadow logic flips:

• The “Highlight” becomes a faint gray (rgba(95, 94, 94, 0.25)).
• The “Shadow” becomes deep black (#0E0E0E). This ensures the buttons still look “raised” rather than flat.

.styleNM {
    background: #191A1E;
    box-shadow: 6px 6px 12px #0E0E0E, 
                -4px -4px 10px rgba(95, 94, 94, 0.25);
}

3. Javascript Logic

The calculator logic is built with vanilla JavaScript, using eval() to process string-based formulas. While eval() is generally discouraged for security, it is acceptable in this isolated, client-side calculator context. The script also handles the “Click to Copy” tooltip functionality, providing instant feedback.

Browser Support

The layout relies on CSS Grid and standard box-shadow properties.

Key Technologies:

• CSS Custom Properties (implied): For theme switching efficiently.
• CSS Grid: Used for the keypad layout.
• Box-Shadow: Essential for the visual style.