🔥 New blog post: Dark mode toggles that expose three states (system, light, dark) seem like the best option. Until you think about user goals, that is. Before rushing to disagree, hear me out. lea.verou.me/blog/2026/da... PS: As a data point, @jakearchibald.com was converted after reading this 😅
Dark mode toggles: two states are enough • Lea Verou
Yes, the underlying model must have three states, but one is always irrelevant to the actual user goal. Users do not seek out solutions to problems they don’t currently have. A lot of the hate towards...
lea.verou.me
![class IfDash extends HTMLElement {
static observedAttributes = ["("]
_innerHtml = null
connectedCallback() {
this._innerHtml = this.innerHTML
const condition = this.getAttribute("(")
this._setCondition(eval(condition))
}
attributeChangedCallback(name, oldValue, newValue) {
if (this._innerHtml === null) {
return
}
if (name === "(") {
const a = !!eval(oldValue)
const b = !!eval(newValue)
if (a !== b) {
this._setCondition(b)
}
}
}
_setCondition(value) {
this.innerHTML = value ? this._innerHtml : ""
}
}
class ConsoleDash extends HTMLElement {
connectedCallback() {
const log = this.getAttribute("log(")
console.log(log)
}
}
customElements.define("if-", IfDash)
customElements.define("console-", ConsoleDash)](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:jfmbqiqbtriq3jig6g7el2p7/bafkreicqcw4ugectrcy3kkkvufnigzcm5ann5b6pjgxhlqps2lgzatw56m)
