$ show colineckert/obsidian-things
This repository is a CSS theme for the Obsidian note-taking application, designed to replicate the visual aesthetic of the Things 3 task manager. The codebase consists of a single `theme.css` file that overrides Obsidian's default styling using CSS custom properties, class overrides, and media queries. It provides both light and dark color schemes, custom checkbox icons via CSS mask images, progress bar coloring based on percentage, and extensive integration with community plugins like Kanban, Calendar, Todoist, and Checklist. The theme also includes a comprehensive set of user-customizable settings exposed through the Style Settings plugin. This is a pure presentation layer with no application logic, data processing, or dependencies beyond Obsidian itself.
The LLM identified 2 files worth highlighting for reuse:
A large block of CSS that replaces standard checkbox icons with custom SVG-based icons using `-webkit-mask-image`. It uses attribute selectors like `input[data-task='!']:checked` to apply distinct icons for different task types (important, question, bookmark, etc.). This pattern is self-contained, uses no external dependencies, and could be extracted for any web project requiring custom checkbox styling with minimal adaptation.
A CSS block that changes progress bar color based on the percentage value using attribute selectors on the `progress` element's value (e.g., `[value^='1']`, `[value^='2']`). It defines five distinct colors for different ranges (2-39%, 40-59%, etc.) and is activated via a `.progress-color` class. This is a reusable technique for progress bar theming without JavaScript, applicable to any project using HTML5 progress elements.