Theming

@mks2508/mks-ui implements the Synthwave Dark design system — a dark-first aesthetic with glassmorphism effects, neon accents, and industrial/technical aesthetics.

Design Principles

• Dark-first — Designed primarily for dark mode with light mode as secondary
• OKLch color space — Perceptually uniform colors for precise control
• Glassmorphism — Frosted glass effects with backdrop-blur
• Neon accents — Cyan and magenta highlights
• Industrial feel — Monospace labels and corner bracket decorations

OKLch Color Space

All colors use the OKLch color model for perceptual uniformity:

/* OKLch format: oklch(Lightness Chroma Hue) */
--background: oklch(0.145 0 0);     /* Near-black */
--primary: oklch(0.922 0 0);        /* Near-white */
--destructive: oklch(0.704 0.191 22.216); /* Error red */

OKLch advantages over HSL:

• Equal perceptual lightness across hues
• More predictable chroma (saturation) control
• Better for programmatic color manipulation

CSS Variable Tokens

Dark Mode (Primary)

Glassmorphism

The signature glass effect recipe for floating UI elements:

<div className="isolate rounded-xl bg-white/20 backdrop-blur-lg border border-white/30 shadow-xl shadow-black/10">
  {/* Content */}
</div>

When to Use

• Headers and floating navigation
• Modal dialogs and popovers
• Sidebars and floating panels
• Featured/highlight cards (like DataCard)

When to Avoid

• Dense data tables
• Long forms with many fields
• Extended text content
• Long scrollable lists

Corner Brackets

The CornerBracket component adds industrial corner decorations to featured elements:

import { CornerBracket } from '@mks2508/mks-ui/react';

<div className="relative p-6">
  <CornerBracket />
  {/* Content inside corner brackets */}
</div>

This is used internally by components like DataCard to create the technical/industrial aesthetic.

Customizing Tokens

Override CSS variables in your global stylesheet to customize the theme:

.dark {
  --background: oklch(0.12 0.01 260);  /* Slightly blue-tinted dark */
  --primary: oklch(0.7 0.15 195);       /* Cyan primary */
  --accent: oklch(0.6 0.2 330);         /* Magenta accent */
}