# My Custom Checkboxes
Inspired by a friendly (but fierce) rivalry I had with [Koleir](https://github.com/madx "Github") over the age-old debate—whether custom checkboxes should be built purely with CSS or if using a pre-processor like SASS is the superior choice—I finally caved and made my own checkboxes.
\#OMGCheckboxGang
> [!quote] Credits
> The original CSS belongs to Koleir. I have heavily edited it to my purpose, but he still gets credit. Un petit peu. ;)
>
> Most of the icons I used are from [Lucide](https://lucide.dev) (with a chance of lab icons making a sneaky appearance), all of which are covered under their [ISC License](https://lucide.dev/license). Any non-Lucide icons will be declared in [[#The Checkboxes]] below.
>
## Tenebrous Dragon
_These are the checkboxes used for my main vault and this website._
> [!summary] Feature
> By default, these checkboxes pull your theme's extended [color variables](<https://docs.obsidian.md/Reference/CSS+variables/Foundations/Colors#Extended+colors>). If your theme uses custom variables like `--color-2` and you want those colors used, you'll need to tweak the snippet accordingly.
>
> Since I'm leveraging the extended color variables, there's a cap of `8` checkbox items. The goal here is to resist the urge to over-customize and instead let each checkbox pull its own weight. I've used other custom checkboxes before, and I always found myself going back to the same styles, so this approach keeps things streamlined.
### The Checkboxes
- [B] `- [B]` Fix a bug or non-UI improvement. Also used for chores.
- [C] `- [C]` Communicate or meet with someone.
- [F] `- [F]` This is something fun, and should have a high priority. Do it dragon, you've earned it.
- [G] `- [G]` G for gaming, such as TTRPGs or video games.
- [I] `- [I]` Drop what you are doing, and get this done!
- [O] `- [O]` O for Obsidian related items, such as my work tasks.
_This uses a slightly altered [Obsidian Logo](https://obsidian.md/blog/new-obsidian-icon/) from here_
- [S] `- [S]` S for Style, as in making something look prettier. UI things. Art. Drawing. Minipainting.
- [W] `- [W]` Write something. Documentation, story-writing, notes. This page. _o_o;;_
```md
- [B] `- [B]` Fix a bug or non-UI improvement. Also used for chores.
- [C] `- [C]` Communicate or meet with someone.
- [F] `- [F]` This is something fun, and should have a high priority. Do it dragon, you've earned it.
- [G] `- [G]` G for gaming, such as TTRPGs or video games.
- [I] `- [I]` Drop what you are doing, and get this done!
- [O] `- [O]` O for Obsidian related items, such as my work tasks.
_This uses a slightly altered [Obsidian Logo](https://obsidian.md/blog/new-obsidian-icon/) from here_
- [S] `- [S]` S for Style, as in making something look prettier. UI things. Art. Drawing. Minipainting.
- [W] `- [W]` Write something. Documentation, story-writing, notes. This page. _o_o;;_
```
**Icons used**
Bug: <https://lucide.dev/icons/bug-off>
Communication: <https://lucide.dev/icons/lab/at-sign-square>
Fun: <https://lucide.dev/icons/scroll-text>
Gaming: <https://lucide.dev/icons/scroll-text>
Important: <https://lucide.dev/icons/bug-off>
Obsidian: <https://obsidian.md/blog/new-obsidian-icon/>
Style: <https://lucide.dev/icons/scroll-text>
Write: <https://lucide.dev/icons/scroll-text>
**Speeding things up—some thoughts:**
- I _wish_ we could access the Lucide icons already bundled in Obsidian without needing a plugin to handle it.
- I'll probably need to clean up the Obsidian icon's SVG next, removing any bits that CSS can handle directly.
- If possible, one should consider minifying the CSS for better performance. I have included a minified file here, but it is a practice I need to get more into the habit of doing.
**Download**: View and download the [Tenebrous Checkboxes from Gist](https://gist.github.com/sigrunixia/f2397fc9530b4e978f4d9111911fa210).
### Extras
- [L] `- [L]` Feed the mind. Seek ideas, skills, or knowledge.
- [M] `- [M]` Move with purpose.
- [P] `- [P]` Offered energy to others with care.
- [T] `- [T]` Touch the natural world.
## Arbiters of Fate
_These are the checkboxes used for the [Arbiters of Fate](https://arbiters.tenebrousdragon.com/start-here) campaign vault and website._
> [!summary] Feature
> These checkboxes are opinionated, as they are meant to work with Halcyon theme. However, the colours are hardcoded in case you are not using Halcyon, so on dark mode this will will look relatively consistent, as far as the icons go.
![[Custom Checkboxes-20250709.png]]
```md
- [B] `- [B]` Combat: Engage in a battle or encounter.
- [T] `- [T]` Treasure: Find or receive loot, rewards, or valuable items.
- [Q] `- [Q]` Quest: Represents an ongoing quest or important task to complete.
- [D] `- [D]` Discovery/Clue: Find a significant clue or piece of information.
- [P] `- [P]` Pass: Success, passed a skill check or overcame a challenge.
- [F] `- [F]` Fail: Failure, missed opportunities, or failed challenges.
- [O] `- [O]` Obstacle/Trap: Encounter a trap or environmental hazard.
- [Z] `- [Z]` Puzzle: Encounter a puzzle, riddle, or intellectual challenge.
- [C] `- [C]` Communication: Likely important info conveyed, like a rumor.
- [R] `- [R]` Roleplay/Interaction: Significant NPC interactions or roleplaying moments.
- [E] `- [E]` Environmental Hazard: Deal with dangerous environmental conditions.
```
**Download**: View and download the [Arbiters Checkboxes from Gist](https://gist.github.com/sigrunixia/837673d3ebcd55d87c98a5841eb13349).
Not found
This page does not exist