About this set
To-do lists for dark interfaces, with colours checked for contrast on a near-black ground. Dark to-do app is a design studio’s week: the title, a count of tasks left and the All, Active and Done filters share the header, the add field has a plus icon inside it next to a lime Add button, and each task is a raised tile with a round lime checkbox and a delete button. It runs the same vanilla script as the classic set, so it adds, ticks off, deletes, filters, clears finished tasks and saves the list to localStorage under its own key, announcing each change. Top three for today is a focus list for the three tasks that matter most: large lime numbers, a note under each task and a big round checkbox on the right, with finished tiles turning to a dashed outline through :has(). A short Later list sits underneath with smaller boxes. The top three list needs no script. The Bootstrap version runs in Bootstrap’s dark colour mode with data-bs-theme=”dark” and restyles .card, .form-control, .form-check-input and .btn.
What’s included
- Dark to-do app with add, tick, delete, filters, count and localStorage
- Lime accent with dark text on it, checked for contrast
- Top three focus list with numbered tiles and notes, no JavaScript
- Finished tiles switch to a dashed outline through :has()
- Bootstrap version in data-bs-theme="dark"
Accessibility
Every task is a real checkbox with a label, delete buttons are named after their task, and the filters use aria-pressed. The app announces added, ticked and deleted tasks with the number left in a polite status region and moves focus to the next row after a delete. Muted text, checkbox outlines and the lime accent meet WCAG AA contrast on the dark ground, focus outlines are lime, and transitions stop under prefers-reduced-motion.
Customise it
Change --dk-bg, --dk-raise, --dk-accent, --dk-accent-ink and --dk-accent-text on .dk to recolour the whole set. Bootstrap uses the same variables on top of data-bs-theme="dark"; in Tailwind swap the #141821, #1b202b, #a3e635 and #bef264 utilities.
