405 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

11 articles · #dark mode · showing 1-11

Code editor displaying dark mode CSS component variants on screen

2026-09-02 · 9 min read

Dark Mode Component Variants in Tailwind: Every Pattern Covered

Stop patching dark mode in after the fact. Here's every Tailwind pattern for building components that switch cleanly, from class strategy to CSS variables.

tailwinddark mode

Dark code editor screen displaying CSS color variables on black background

2026-07-26 · 8 min read

Dark Mode Color Tokens: Building a Theme That Doesn't Break Everything

Stop shipping dark mode as an afterthought. Here's how to build a real color token system with CSS variables that survives theming, components, and third-party libraries.

dark modetokens

Colorful design tokens palette organized on a developer workspace screen

2026-07-25 · 8 min read

Semantic Color Tokens: From Raw Palette to Intent-Based Design System

Stop naming colors after hex values. Semantic color tokens map intent to palette - here's how to build a token system that actually survives dark mode and rebrands.

design tokenssemantic

Dark frosted glass navigation bar floating over a deep gradient background

2026-07-13 · 8 min read

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

dark UI card with frosted glass blur effect on black background

2026-07-10 · 8 min read

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 glowing glass panel effect on a deep black background

2026-07-07 · 7 min read

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 color palette swatches glowing on a screen

2026-07-05 · 8 min read

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 computer monitor with glowing interface and code on screen

2026-07-03 · 8 min read

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 code editor screen with React component code on monitor

2026-06-23 · 8 min read

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.

Colorful gradient swatches on a dark designer workspace background

2026-06-19 · 8 min read

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 light mode theme toggle React

2026-06-13 · 6 min read

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

Free components in 41 visual styles

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

Browse components →