41 lines
892 B
Markdown
41 lines
892 B
Markdown
---
|
|
title: "Making a platonically ideal light/dark theme toggle on the web"
|
|
|
|
description: ""
|
|
|
|
date: "2025-08-20"
|
|
|
|
draft: true
|
|
|
|
tags: []
|
|
---
|
|
|
|
Many blogs and other sites have a way to toggle between their light and dark themes.
|
|
However many of these toggles are... not ideal, making various tradeoffs.
|
|
So I thought it'd be interesting to explore these tradeoffs and throw my own hat into the ring with a potentially better solution.
|
|
|
|
<a href="https://xkcd.com/927/"><img src="https://imgs.xkcd.com/comics/standards_2x.png"></a>
|
|
|
|
## What Does it Mean to be Ideal?
|
|
|
|
|
|
## The Obvious Way
|
|
|
|
[demo](/static/demos/light-dark-demo-1)
|
|
|
|
The obvious way to attempt a toggle between light and dark mode is
|
|
|
|
## A Suboptimal Solution
|
|
|
|
A trick from from [](https://www.joshwcomeau.com/react/dark-mode/)
|
|
|
|
[demo](/static/demos/light-dark-demo-2)
|
|
|
|
|
|
## An Ideal Stateless Toggle
|
|
|
|
[demo]()
|
|
|
|
## An ideal solution
|
|
|
|
|