197 guides · updated daily

The Empire UI blog

Practical guides on UI styles and effects — every article ships free, working React & Tailwind code.

All UI Styles Components React Tailwind Animation Tools Comparisons Design Systems Advanced

#react #css #tailwind #animation #glassmorphism #next.js #design #performance #accessibility #dark mode #css variables #framer motion #neumorphism #responsive #dashboard #saas #ecommerce #landing page #button #card #form #navigation #typography #gradient #patterns

8 articles · #dark mode

dark light mode theme toggle React

How to Build a Theme Toggle in React + Tailwind (Dark Mode)

Learn how to build a polished theme toggle in React and Tailwind CSS to add seamless dark mode switching to any modern web application.

theme toggledark mode

Colorful gradient swatches on a dark designer workspace background

Building a Color System: Semantic Tokens, OKLCH and Dark Mode

Learn how to build a scalable color system using semantic design tokens, OKLCH color space, and bulletproof dark mode — without the CSS variable spaghetti.

color systemdesign tokens

Dark code editor screen with React component code on monitor

Implementing Dark Mode in React: CSS Variables, Tailwind, System Preference

Learn how to implement dark mode in React using CSS variables, Tailwind's dark class, and the prefers-color-scheme API — with no flash on reload.

Dark computer monitor with glowing interface and code on screen

Dark Mode UI Design: Principles, Pitfalls and Best Practices

Dark mode isn't just a color swap — done wrong it destroys readability. Here's how to build dark UIs that actually work, with CSS, React, and accessibility covered.

dark modeui design

Dark UI color palette swatches glowing on a screen

Best UI Color Palettes of 2026: 20 Combinations for Dark Themes

20 handpicked dark-mode color palettes for 2026 UI design — with CSS variables, contrast ratios, and real pairings that actually work in production.

color palettesui design

Dark glowing glass panel effect on a deep black background

Dark Glassmorphism: Glass Effects on Black Backgrounds

Dark glassmorphism flips the classic frosted glass look onto black and deep-dark backgrounds — here's how to actually pull it off in CSS without the muddy mess.

glassmorphismdark mode

dark UI card with frosted glass blur effect on black background

Dark Mode Glassmorphism Card: Getting the Blur Right on Black Backgrounds

Dark mode glassmorphism cards break when the background is too dark. Here's exactly how to fix the blur, opacity, and border so they actually look good.

dark modeglassmorphism

Dark frosted glass navigation bar floating over a deep gradient background

Dark Glassmorphism Navbar: Sticky Frosted Header on Dark Backgrounds

Build a sticky dark glassmorphism navbar in React and Tailwind — frosted blur, scroll-aware opacity, and WCAG contrast that actually holds up on dark backgrounds.

glassmorphismnavbar

Free components in 40 visual styles

React & Tailwind, copy-paste ready. Glassmorphism, neobrutalism, Y2K and more.

Browse components →