I'm attempting to build a webpage where the user can change the color palette between customizable darker and lighter themes. I want the page background to be textured like the following images, with roughly the same amount of texturing regardless of the brightness of the base color:

To avoid having the user's browser download very large image files, and to provide greater flexibility around screen sizes and orientations, I want to create that kind of texture procedurally. I've been able to get something close-ish to the effect I want for a specific background color using an SVG filter applied to the HTML element with CSS, but as-currently-implemented I need to create a separate filter with custom parameters and blend modes for each different background color, as the values that look good for one color are either much too strong or much too subtle for another.

Is there a way to recreate those textures in a single way that works for any background color?

Here is the setup I have for a dark color:

body{
  width: 100%; 
  height: 100%;
  background: #1e1e1e;
  filter: url("#texture-bg-light");
}

If the texture isn't rendering in the snippet, it looks like this:

However, if I apply the exact same filter to a lighter color like #d9dde5, I get this, which looks barely different than a solid color:

To get closer to the result I want, I have to modify the end of the SVG filter to

which looks like this: