Dark Mode Design: Tips and Tricks
HTML5 & CSS3
SCSS
JavaScript
TypeScript
React
Next.js
Tailwind CSS
Bootstrap
ShadCN UI
Styled Components
GSAP
Framer Motion
Vite
Shopify themes
i18next & RTL
Recharts
Chart.js
SaaS dashboards
Figma to UI
Dark / light mode
4+ years
Vistothemes
Freelance UI
NFT & crypto UI
eCommerce UI
WordPress CSS
Remote-ready
Muhammad Shahzaib
Pixel-perfect
Component architecture
Live demos
HTML5 & CSS3
SCSS
JavaScript
TypeScript
React
Next.js
Tailwind CSS
Bootstrap
ShadCN UI
Styled Components
GSAP
Framer Motion
Vite
Shopify themes
i18next & RTL
Recharts
Chart.js
SaaS dashboards
Figma to UI
Dark / light mode
4+ years
Vistothemes
Freelance UI
NFT & crypto UI
eCommerce UI
WordPress CSS
Remote-ready
Muhammad Shahzaib
Pixel-perfect
Component architecture
Live demos
Dark mode is more than inverting colors. A palette that passes contrast checks in light mode can fail badly on a dark background, and the most common technical bug — a flash of the wrong theme on page load — has a well-known fix that a lot of sites still skip.
Don't just invert — recheck contrast
Pure white text on pure black background is harsher than most people expect; an off-white ink on a near-black background (roughly what this site uses) is easier to read for long stretches. Check contrast ratios independently for each theme rather than assuming light-mode values carry over.
Avoid the flash of wrong theme
If the theme is applied by a React effect after hydration, the page briefly renders in the default theme before switching — a visible flash. The fix is a small inline <script> in <head>, before any content paints, that reads the stored preference and sets the theme class immediately.
Respect the system preference
prefers-color-scheme: dark should be the default when a user hasn't made an explicit choice yet — pair it with a manual toggle that overrides it and persists to localStorage for repeat visits.
<script>
(function () {
var theme = localStorage.getItem('theme') ||
(matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.classList.toggle('dark', theme === 'dark');
})();
</script>Get the inline script and the contrast pass right, and dark mode stops being a bolted-on feature and starts feeling like a first-class part of the design.
← back to all writingMuhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
Figma to UI
Muhammad Shahzaib
4+ years
Vistothemes
Freelance UI
Muhammad Shahzaib
Remote work
pixel-perfect
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
UI-only scope
Muhammad Shahzaib
your mockups
production UI
Muhammad Shahzaib
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
Figma to UI
Muhammad Shahzaib
4+ years
Vistothemes
Freelance UI
Muhammad Shahzaib
Remote work
pixel-perfect
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
UI-only scope
Muhammad Shahzaib
your mockups
production UI
Muhammad Shahzaib
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
Figma to UI
Muhammad Shahzaib
4+ years
Vistothemes
Freelance UI
Muhammad Shahzaib
Remote work
pixel-perfect
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
UI-only scope
Muhammad Shahzaib
your mockups
production UI
Muhammad Shahzaib
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
Figma to UI
Muhammad Shahzaib
4+ years
Vistothemes
Freelance UI
Muhammad Shahzaib
Remote work
pixel-perfect
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
UI-only scope
Muhammad Shahzaib
your mockups
production UI
Muhammad Shahzaib
