Sonic

A dark-sidebar dashboard with a violet glow — the most atmospheric workspace theme in the set.

Sonic takes a distinctive position: the side panel stays near-black in both light and dark mode, so the navigation reads as a fixed piece of hardware while the content area shifts with the user's preference. A #6E45FE violet primary, translucent card surfaces and a purpose-built ambient glow layer give the interface depth without clutter. Light and dark tokens are defined as two complete sets rather than one palette with overrides, which keeps both modes deliberate.

Key features

• Permanently dark side panel — near-black navigation in both light and dark mode for a consistent anchor.
• Two full token sets — light and dark are designed independently, not derived from each other.
• Ambient glow layer — a dedicated background glow element adds depth behind the content.
• Translucent cards — semi-opaque surfaces that let the canvas read through.
• Violet accent — a #6E45FE primary with light variants for states and emphasis.
• Complete dashboard coverage — full admin back office, every user tool area and its own auth screens.
• Persistent mode preference — the user's light or dark choice is remembered.

Built with

Bootstrap 5, SCSS via Vite, Tippy tooltips, Toastr, SimpleBar and perfect-scrollbar. Inter is loaded from Google Fonts.