---
title: "Light and dark mode image in HTML"
url: https://daily.dev/posts/light-and-dark-mode-image-in-html-fmmv13p8j
source_url: https://h.daily-dev-tips.com/light-and-dark-mode-image-in-html
type: article
source: "Hashnode"
author: "Chris Bongers"
published: 2020-10-29T04:59:36.608Z
updated: 2021-10-07T14:17:10.317Z
tags: ["html"]
reading_time: 2
upvotes: 14
comments: 1
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Light and dark mode image in HTML

**[Hashnode](https://daily.dev/sources/hashnode)** · [@dailydevtips](https://daily.dev/dailydevtips) · 2 min read · 14 upvotes · 1 comments

## Summary

HTML can detect if the user prefers a dark or light colorscheme and show a different image to them based on that. By default, it will show the light image, but it will shows the dark image if the person prefers the dark scheme.Feel free to have a play with this on Codepen.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://h.daily-dev-tips.com/light-and-dark-mode-image-in-html>

## Community discussion

Top comments from developers on daily.dev.

**@dailydevtips** · 3 upvotes

> Super simple addition to your images for light-dark mode

## Similar posts on daily.dev

- [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 0 upvotes · 0 comments
- [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments
- [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments
- [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments
- [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments

---

Tags: [#html](https://daily.dev/tags/html)

[View this post on daily.dev](https://daily.dev/posts/light-and-dark-mode-image-in-html-fmmv13p8j)