From: Scott Worley Date: Sun, 22 Oct 2023 11:01:32 +0000 (-0700) Subject: Dark mode X-Git-Url: http://git.scottworley.com/vopamoi/commitdiff_plain/e26a06f9571fb259c93116b67481974bd03c31da Dark mode Using opacity to darken tags isn't great: It grays the text too much. But it's a lot simpler than making the tag color depend on dark-mode state, which would require touching every tag during dark-mode switch, which would require locking to ensure that a dark-mode switch completes before another one is started, because tag color calculations are done asynchronously because crypto's interface forces this. :( --- diff --git a/vopamoi.css b/vopamoi.css index 0a7e678..4b566f1 100644 --- a/vopamoi.css +++ b/vopamoi.css @@ -6,6 +6,9 @@ input { margin-left: 1em; font-size: 80%; } +body.dark .tag { + opacity: 60%; +} span.tag { color: white; padding: 1px .5em; @@ -23,10 +26,16 @@ input.tag { color: #555; white-space: pre; } +body.dark .content, body.dark textarea { + color: #bbb; +} textarea { width: 90%; height: 5em; } +body.dark textarea { + background-color: black; +} .hide { display: none; } @@ -42,11 +51,17 @@ textarea { padding: 0 .2em; border-radius: 1em; } +body.dark .statedate { opacity: 60%; } .task[data-state=cancelled] > .statedate { background-color: #fee; } .task[data-state=deleted] > .statedate { background-color: #ddd; } .task[data-state=done] > .statedate { background-color: #efe; } .task[data-state=someday-maybe] > .statedate { background-color: #eef; } .task[data-state=waiting] > .statedate { background-color: #faf; } +body.dark .task[data-state=cancelled] > .statedate { background-color: #600; } +body.dark .task[data-state=deleted] > .statedate { background-color: #222; } +body.dark .task[data-state=done] > .statedate { background-color: #060; } +body.dark .task[data-state=someday-maybe] > .statedate { background-color: #006; } +body.dark .task[data-state=waiting] > .statedate { background-color: #303; } #ui { padding: 15px 10px; } @@ -70,3 +85,7 @@ body { border-left: 5px solid var(--view-state-indicator-color); border-right: 5px solid var(--view-state-indicator-color); } +body.dark, body.dark input { + color: #eee; + background-color: black; +} diff --git a/vopamoi.ts b/vopamoi.ts index b739747..d5afbec 100644 --- a/vopamoi.ts +++ b/vopamoi.ts @@ -322,7 +322,7 @@ function BrowserUI() { deleted: "Black", done: "LawnGreen", "someday-maybe": "DeepSkyBlue", - todo: "White", + todo: "rgb(0 0 0 / 0)", waiting: "MediumOrchid", }; var currentTagFilter: TagFilter | null = null; @@ -692,6 +692,11 @@ function BrowserUI() { this.setTagFilter({description: "(untagged)", include: task => task.getElementsByClassName("tag").length === 0}); }, + toggleDark: function () { + document.body.classList.toggle("dark"); + this.setView(currentViewState); + }, + undo: function () { const ret = ui.undo(); if (ret && ret instanceof HTMLElement) ret.focus(); @@ -774,6 +779,7 @@ function handleKey(event: any) { if (event.key == "a") return browserUI.setView("all"); if (event.key == "C") return browserUI.setView("cancelled"); if (event.key == "c") return browserUI.setTagView("comp"); + if (event.key == "D") return browserUI.toggleDark(); if (event.key == "d") return browserUI.setView("done"); if (event.key == "e") return browserUI.setTagView("errand"); if (event.key == "h") return browserUI.setTagView("home");