I saw your vault tour video and was instantly hooked on your page-blueprint class!
I love the way you managed to recolor images to fit the theme as well, but noticed this could use some improvement.
Your current recolor-images class only works for images like diagrams, where the background is transparent. If there is no transparency in the image, the entire image becomes a single color.

Proposed Solution

To fix this, we thus need a way to transform the brightness of an image to an opacity. We then need to merge the original alpha values of the image with this newly computed alpha mask (to retain the original transparency of the image). Finally, we can colorize the image.

flowchart LR
  A[IMAGE] --> B[LUMINANCE TO ALPHA]
  A --> C[COMPOSITE ALPHA]
  B --> C
  C --> D[COLORIZE]

One decision that is important in this pipeline, is whether you want white or black pixels to show fully drawn after the recolor operation. Most images out there are made with darker "ink" on a white background, so I think it is more useful to show black pixels fully. This means we need to add an invert(1) operation before the pipeline.

CSS Implementation

This image pipeline is not trivial, but such a pipeline is possible with SVG filters:

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="luminance-to-alpha">
    <!-- STEP1: Convert luminance to alpha -->
    <!-- https://stackoverflow.com/a/596243 -->
    <feColorMatrix type="matrix" result="lumalpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.213 0.715 0.072 0 0"/>

    <!-- STEP2: Multiply original alpha mask with luminance -->
    <feComposite in="SourceGraphic" in2="lumalpha" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
  </filter>
</svg>

If this SVG is available somewhere in the HTML file, you can use this filter in the CSS.
Even better, you can embed this entire SVG string entirely in CSS:

img {
  --svg-luminance-alpha: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="f"><feColorMatrix type="matrix" result="lumalpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.213 0.715 0.072 0 0"/><feComposite in="SourceGraphic" in2="lumalpha" operator="arithmetic" k1="1" /></filter></svg>#f');
  --image-effect: invert(52%) sepia(60%) saturate(2521%) hue-rotate(105deg) brightness(96%) contrast(84%);
  filter: invert(1) var(--svg-luminance-alpha) var(--image-effect);
}

A final "improvement" here is that I removed the first brightness(0) saturate(100%) steps of all of your --image-effect variables. The SVG pipeline already transforms the image to a pure black+alpha version and thus these 2 steps are not needed anymore.

You can find a little demo of this effect here.
In this demo you will see the need to composite the original alpha mask in the first example (jittered borders).
The other examples show the difference of the effect with and without invert(1). Some look better without the inversion, but all are legible with it so that's what I decided to use (see rationale above).

Thanks for sharing your setup and inspiring me to make my notes nicer!
Feel free to do whatever you want with this effect and to discard this issue if it does not fit your needs.

I'll end this issue with a small example of the effect working on one of my notes. The original images are black/white without any transparency, but thanks to the SVG filter everything still looks awesome!

Hi, I noticed in your daily note template you have a rather lengthy if statement for getting the day of the week in lowercase.

I think you could replace that with <% tp.date.now("dddd").toLowerCase() %>

Additionally, you should be able to get the date from the title of your daily note, rather than just the current date, by using the reference and reference_format arguments:
<% tp.date.now("dddd", 0, tp.file.title, "YYYYMMDD").toLowerCase() %>

The templater docs might explain it better than I can.

I'd be more than happy to do all of the leg work, however, I don't exactly want to do all of the work for it for it to be seldomly used, if at all.

Reason why I'm opening this as an issue is I wanna be able to gauge what kinds of themes would be wanted, outside of Minecraft and OSRS.

Was thinking maybe some JRPGs (FF/DQ/CT/FE) to help with the gamification of note taking! Hecc, maybe some ARPGs too, if there is pull for something like that too.

AS said in the issue:

Im getting this message:

Templater Error: Invalid reference date format, try specifying one with the argument 'reference_format'

I am trying to set up a template for daily notes, and found this from your video. Currently, I have my template set up and it is using the properties section.

When I create a new daily note, the properties section turns into YAML, unless i am in reading view:

In your video on your daily notes, you are able to edit the properties without seeing it in yaml or in reading view. How are you doing this?.

My current setting for properties in document is set to visible instead of source. Any advice?