[Feature Request] Allow addind custom checkboxes

[jvanz]

Feature Description I would like to define custom checkboxes with different icons. I'm not interesting in customizing the current checkbox icons. I would like to create complete new custom checkbox. For example, create a checkbox that when used - [h] the icon used is a heart.

Additional context It would be nice to allow users to define additional icon for custom check boxes. This would allow user adopters of rapid logging to creating they own icons for their own meaning.

[AnubisNekhet]

Adding custom checkboxes via a theme is simply impossible because of how CSS and the style settings plugins work in general. I'd recommend using this code as a starting point to add more checkboxes via custom CSS:

.anp-custom-checkboxes [data-task=c] > input[type=checkbox]:checked:after,
.anp-custom-checkboxes [data-task=c] > p > input[type=checkbox]:checked:after,
.anp-custom-checkboxes [data-task=c][type=checkbox]:checked:after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M313.4 479.1c26-5.2 42.9-30.5 37.7-56.5l-2.3-11.4c-5.3-26.7-15.1-52.1-28.8-75.2H464c26.5 0 48-21.5 48-48c0-25.3-19.5-46-44.3-47.9c7.7-8.5 12.3-19.8 12.3-32.1c0-23.4-16.8-42.9-38.9-47.1c4.4-7.3 6.9-15.8 6.9-24.9c0-21.3-13.9-39.4-33.1-45.6c.7-3.3 1.1-6.8 1.1-10.4c0-26.5-21.5-48-48-48H294.5c-19 0-37.5 5.6-53.3 16.1L202.7 73.8C176 91.6 160 121.6 160 153.7V192v48 24.9c0 29.2 13.3 56.7 36 75l7.4 5.9c26.5 21.2 44.6 51 51.2 84.2l2.3 11.4c5.2 26 30.5 42.9 56.5 37.7zM32 320H96c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32H32C14.3 32 0 46.3 0 64V288c0 17.7 14.3 32 32 32z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100%;
  background-color: rgb(var(--ctp-red));
  left: 0px;
}
.anp-custom-checkboxes [data-task=c] > input[type=checkbox]:checked:before,
.anp-custom-checkboxes [data-task=c] > p > input[type=checkbox]:checked:before,
.anp-custom-checkboxes [data-task=c][type=checkbox]:checked:before {
  color: var(--checkbox-color);
  margin: 0 3px;
  position: absolute;
  left: calc(var(--checkbox-size) * 1);
  font-weight: bold;
}
.anp-custom-checkboxes [data-task=c] > input[type=checkbox]:checked, 
anp-custom-checkboxes [data-task=c] > p > input[type=checkbox]:checked,
.anp-custom-checkboxes [data-task=c][type=checkbox]:checked {
  --checkbox-color: transparent;
  --checkbox-color-hover: transparent;
  border-width: 0;
}

1. Replace the task value (c in this case) with the value you desire
2. Replace the -webkit-mask-image value with a url for an encoded SVG
3. If you have an SVG but you don't know how to encode it, use this website
4. Replace --ctp-red with whatever color you want

Please do note that this will take some knowledge of CSS and how SVGs work when embedded in CSS.