By using svg wallpapers, I can directly inject different colors into their code, making them match with the system’s colorscheme.
<svg id="visual" viewBox="0 0 1920 1080" width="1920" height="1080" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<rect x="0" y="0" width="1920" height="1080" fill="#<<base(i="00")>>"></rect>
<defs>
<linearGradient id="grad1_0" x1="43.8%" y1="100%" x2="100%" y2="0%">
<stop offset="14.444444444444446%" stop-color="#<<base(i="0D")>>" stop-opacity="1"></stop>
<stop offset="85.55555555555554%" stop-color="#<<base(i="0D")>>" stop-opacity="1"></stop>
</linearGradient>
</defs>
<defs>
<linearGradient id="grad1_1" x1="43.8%" y1="100%" x2="100%" y2="0%">
<stop offset="14.444444444444446%" stop-color="#<<base(i="0D")>>" stop-opacity="1"></stop>
<stop offset="85.55555555555554%" stop-color="#cc5867" stop-opacity="1"></stop>
</linearGradient>
</defs>
<defs>
<linearGradient id="grad1_2" x1="43.8%" y1="100%" x2="100%" y2="0%">
<stop offset="14.444444444444446%" stop-color="#593762" stop-opacity="1"></stop>
<stop offset="85.55555555555554%" stop-color="#cc5867" stop-opacity="1"></stop>
</linearGradient>
</defs>
<defs>
<linearGradient id="grad1_3" x1="43.8%" y1="100%" x2="100%" y2="0%">
<stop offset="14.444444444444446%" stop-color="#593762" stop-opacity="1"></stop>
<stop offset="85.55555555555554%" stop-color="#<<base(i="00")>>" stop-opacity="1"></stop>
</linearGradient>
</defs>
<defs>
<linearGradient id="grad2_0" x1="0%" y1="100%" x2="56.3%" y2="0%">
<stop offset="14.444444444444446%" stop-color="#<<base(i="0D")>>" stop-opacity="1"></stop>
<stop offset="85.55555555555554%" stop-color="#<<base(i="0D")>>" stop-opacity="1"></stop>
</linearGradient>
</defs>
<defs>
<linearGradient id="grad2_1" x1="0%" y1="100%" x2="56.3%" y2="0%">
<stop offset="14.444444444444446%" stop-color="#cc5867" stop-opacity="1"></stop>
<stop offset="85.55555555555554%" stop-color="#<<base(i="0D")>>" stop-opacity="1"></stop>
</linearGradient>
</defs>
<defs>
<linearGradient id="grad2_2" x1="0%" y1="100%" x2="56.3%" y2="0%">
<stop offset="14.444444444444446%" stop-color="#cc5867" stop-opacity="1"></stop>
<stop offset="85.55555555555554%" stop-color="#593762" stop-opacity="1"></stop>
</linearGradient>
</defs>
<defs>
<linearGradient id="grad2_3" x1="0%" y1="100%" x2="56.3%" y2="0%">
<stop offset="14.444444444444446%" stop-color="#<<base(i="00")>>" stop-opacity="1"></stop>
<stop offset="85.55555555555554%" stop-color="#593762" stop-opacity="1"></stop>
</linearGradient>
</defs>
<g transform="translate(1920, 1080)">
<path d="M-1026 0C-962.7 -157.4 -899.4 -314.8 -821.9 -474.5C-744.3 -634.2 -652.4 -796.2 -513 -888.5C-373.6 -980.8 -186.8 -1003.4 0 -1026L0 0Z" fill="#<<base(i="0A")>>"></path>
<path d="M-769.5 0C-722 -118 -674.6 -236.1 -616.4 -355.9C-558.2 -475.7 -489.3 -597.2 -384.8 -666.4C-280.2 -735.6 -140.1 -752.6 0 -769.5L0 0Z" fill="#<<base(i="0B")>>"></path>
<path d="M-513 0C-481.4 -78.7 -449.7 -157.4 -410.9 -237.3C-372.1 -317.1 -326.2 -398.1 -256.5 -444.3C-186.8 -490.4 -93.4 -501.7 0 -513L0 0Z" fill="#<<base(i="0C")>>"></path>
<path d="M-256.5 0C-240.7 -39.3 -224.9 -78.7 -205.5 -118.6C-186.1 -158.6 -163.1 -199.1 -128.3 -222.1C-93.4 -245.2 -46.7 -250.9 0 -256.5L0 0Z" fill="#<<base(i="0D")>>"></path>
</g>
<g transform="translate(0, 0)">
<path d="M1026 0C983 169.1 940.1 338.3 860 496.5C779.8 654.7 662.5 802.1 513 888.5C363.5 975 181.7 1000.5 0 1026L0 0Z" fill="#<<base(i="0A")>>"></path>
<path d="M769.5 0C737.3 126.8 705.1 253.7 645 372.4C584.9 491.1 496.9 601.6 384.8 666.4C272.6 731.2 136.3 750.4 0 769.5L0 0Z" fill="#<<base(i="0B")>>"></path>
<path d="M513 0C491.5 84.6 470 169.1 430 248.2C389.9 327.4 331.3 401.1 256.5 444.3C181.7 487.5 90.9 500.2 0 513L0 0Z" fill="#<<base(i="0C")>>"></path>
<path d="M256.5 0C245.8 42.3 235 84.6 215 124.1C195 163.7 165.6 200.5 128.3 222.1C90.9 243.7 45.4 250.1 0 256.5L0 0Z" fill="#<<base(i="0D")>>"></path>
</g>
</svg>
<svg id="visual" viewBox="0 0 1920 1080" width="1920" height="1080" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<rect x="0" y="0" width="1920" height="1080" fill="#<<base(i="01")>>"></rect>
<path d="M473 1080L480.5 1054.3C488 1028.7 503 977.3 485.8 925.8C468.7 874.3 419.3 822.7 381.5 771.2C343.7 719.7 317.3 668.3 363.2 617C409 565.7 527 514.3 544.8 463C562.7 411.7 480.3 360.3 471.2 308.8C462 257.3 526 205.7 573.7 154.2C621.3 102.7 652.7 51.3 668.3 25.7L684 0L1920 0L1920 25.7C1920 51.3 1920 102.7 1920 154.2C1920 205.7 1920 257.3 1920 308.8C1920 360.3 1920 411.7 1920 463C1920 514.3 1920 565.7 1920 617C1920 668.3 1920 719.7 1920 771.2C1920 822.7 1920 874.3 1920 925.8C1920 977.3 1920 1028.7 1920 1054.3L1920 1080Z" fill="#<<base(i="0A")>>"></path>
<path d="M842 1080L849.8 1054.3C857.7 1028.7 873.3 977.3 861 925.8C848.7 874.3 808.3 822.7 783.2 771.2C758 719.7 748 668.3 729.5 617C711 565.7 684 514.3 705.8 463C727.7 411.7 798.3 360.3 764.2 308.8C730 257.3 591 205.7 598 154.2C605 102.7 758 51.3 834.5 25.7L911 0L1920 0L1920 25.7C1920 51.3 1920 102.7 1920 154.2C1920 205.7 1920 257.3 1920 308.8C1920 360.3 1920 411.7 1920 463C1920 514.3 1920 565.7 1920 617C1920 668.3 1920 719.7 1920 771.2C1920 822.7 1920 874.3 1920 925.8C1920 977.3 1920 1028.7 1920 1054.3L1920 1080Z" fill="#<<base(i="0B")>>"></path>
<path d="M933 1080L889.2 1054.3C845.3 1028.7 757.7 977.3 742.7 925.8C727.7 874.3 785.3 822.7 816.8 771.2C848.3 719.7 853.7 668.3 864.3 617C875 565.7 891 514.3 921.5 463C952 411.7 997 360.3 962.2 308.8C927.3 257.3 812.7 205.7 773.8 154.2C735 102.7 772 51.3 790.5 25.7L809 0L1920 0L1920 25.7C1920 51.3 1920 102.7 1920 154.2C1920 205.7 1920 257.3 1920 308.8C1920 360.3 1920 411.7 1920 463C1920 514.3 1920 565.7 1920 617C1920 668.3 1920 719.7 1920 771.2C1920 822.7 1920 874.3 1920 925.8C1920 977.3 1920 1028.7 1920 1054.3L1920 1080Z" fill="#<<base(i="0C")>>"></path>
<path d="M1138 1080L1117.7 1054.3C1097.3 1028.7 1056.7 977.3 1012.3 925.8C968 874.3 920 822.7 951.7 771.2C983.3 719.7 1094.7 668.3 1119.7 617C1144.7 565.7 1083.3 514.3 1081.2 463C1079 411.7 1136 360.3 1140.3 308.8C1144.7 257.3 1096.3 205.7 1059.7 154.2C1023 102.7 998 51.3 985.5 25.7L973 0L1920 0L1920 25.7C1920 51.3 1920 102.7 1920 154.2C1920 205.7 1920 257.3 1920 308.8C1920 360.3 1920 411.7 1920 463C1920 514.3 1920 565.7 1920 617C1920 668.3 1920 719.7 1920 771.2C1920 822.7 1920 874.3 1920 925.8C1920 977.3 1920 1028.7 1920 1054.3L1920 1080Z" fill="#<<base(i="0D")>>"></path>
<path d="M1400 1080L1382.8 1054.3C1365.7 1028.7 1331.3 977.3 1334.7 925.8C1338 874.3 1379 822.7 1402.8 771.2C1426.7 719.7 1433.3 668.3 1400.3 617C1367.3 565.7 1294.7 514.3 1262.2 463C1229.7 411.7 1237.3 360.3 1239.3 308.8C1241.3 257.3 1237.7 205.7 1262.7 154.2C1287.7 102.7 1341.3 51.3 1368.2 25.7L1395 0L1920 0L1920 25.7C1920 51.3 1920 102.7 1920 154.2C1920 205.7 1920 257.3 1920 308.8C1920 360.3 1920 411.7 1920 463C1920 514.3 1920 565.7 1920 617C1920 668.3 1920 719.7 1920 771.2C1920 822.7 1920 874.3 1920 925.8C1920 977.3 1920 1028.7 1920 1054.3L1920 1080Z" fill="#<<base(i="0E")>>"></path>
<path d="M1419 1080L1465.3 1054.3C1511.7 1028.7 1604.3 977.3 1608.5 925.8C1612.7 874.3 1528.3 822.7 1522.3 771.2C1516.3 719.7 1588.7 668.3 1578.3 617C1568 565.7 1475 514.3 1446.2 463C1417.3 411.7 1452.7 360.3 1476.2 308.8C1499.7 257.3 1511.3 205.7 1493.7 154.2C1476 102.7 1429 51.3 1405.5 25.7L1382 0L1920 0L1920 25.7C1920 51.3 1920 102.7 1920 154.2C1920 205.7 1920 257.3 1920 308.8C1920 360.3 1920 411.7 1920 463C1920 514.3 1920 565.7 1920 617C1920 668.3 1920 719.7 1920 771.2C1920 822.7 1920 874.3 1920 925.8C1920 977.3 1920 1028.7 1920 1054.3L1920 1080Z" fill="#<<base(i="0F")>>"></path>
<path d="M1802 1080L1758 1054.3C1714 1028.7 1626 977.3 1621.2 925.8C1616.3 874.3 1694.7 822.7 1730.5 771.2C1766.3 719.7 1759.7 668.3 1729.8 617C1700 565.7 1647 514.3 1653.7 463C1660.3 411.7 1726.7 360.3 1719.5 308.8C1712.3 257.3 1631.7 205.7 1639.8 154.2C1648 102.7 1745 51.3 1793.5 25.7L1842 0L1920 0L1920 25.7C1920 51.3 1920 102.7 1920 154.2C1920 205.7 1920 257.3 1920 308.8C1920 360.3 1920 411.7 1920 463C1920 514.3 1920 565.7 1920 617C1920 668.3 1920 719.7 1920 771.2C1920 822.7 1920 874.3 1920 925.8C1920 977.3 1920 1028.7 1920 1054.3L1920 1080Z" fill="#<<base(i="09")>>"></path>
</svg>
<svg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'>
<defs>
<filter id="darkenFilter">
<feComponentTransfer>
<feFuncR type="linear" slope="0.8" />
<feFuncG type="linear" slope="0.8" />
<feFuncB type="linear" slope="0.8" />
</feComponentTransfer>
</filter>
<filter id="superDarkenFilter">
<feComponentTransfer>
<feFuncR type="linear" slope="0.6" />
<feFuncG type="linear" slope="0.6" />
<feFuncB type="linear" slope="0.6" />
</feComponentTransfer>
</filter>
<pattern id='myPattern' width='200' height='200' patternUnits='userSpaceOnUse'>
<rect fill='#<<base(i="00")>>' width='200' height='200'/>
<g fill-opacity='1'>
<polygon fill='#<<base(i="0A")>>' filter="url(#superDarkenFilter)" points='100 57.1 64 93.1 71.5 100.6 100 72.1'/>
<polygon fill='#<<base(i="0A")>>' filter="url(#darkenFilter)" points='100 57.1 100 72.1 128.6 100.6 136.1 93.1'/>
<polygon fill='#<<base(i="0A")>>' filter="url(#superDarkenFilter)" points='100 163.2 100 178.2 170.7 107.5 170.8 92.4'/>
<polygon fill='#<<base(i="0A")>>' filter="url(#darkenFilter)" points='100 163.2 29.2 92.5 29.2 107.5 100 178.2'/>
<path fill='#<<base(i="0A")>>' d='M100 21.8L29.2 92.5l70.7 70.7l70.7-70.7L100 21.8z M100 127.9L64.6 92.5L100 57.1l35.4 35.4L100 127.9z'/>
<polygon fill='#<<base(i="09")>>' filter="url(#darkenFilter)" points='0 157.1 0 172.1 28.6 200.6 36.1 193.1'/>
<polygon fill='#<<base(i="09")>>' filter="url(#superDarkenFilter)" points='70.7 200 70.8 192.4 63.2 200'/>
<polygon fill='#<<base(i="09")>>' points='27.8 200 63.2 200 70.7 192.5 0 121.8 0 157.2 35.3 192.5'/>
<polygon fill='#<<base(i="09")>>' filter="url(#superDarkenFilter)" points='200 157.1 164 193.1 171.5 200.6 200 172.1'/>
<polygon fill='#<<base(i="09")>>' filter="url(#darkenFilter)" points='136.7 200 129.2 192.5 129.2 200'/>
<polygon fill='#<<base(i="09")>>' points='172.1 200 164.6 192.5 200 157.1 200 157.2 200 121.8 200 121.8 129.2 192.5 136.7 200'/>
<polygon fill='#<<base(i="09")>>' filter="url(#darkenFilter)" points='129.2 0 129.2 7.5 200 78.2 200 63.2 136.7 0'/>
<polygon fill='#<<base(i="09")>>' points='200 27.8 200 27.9 172.1 0 136.7 0 200 63.2 200 63.2'/>
<polygon fill='#<<base(i="09")>>' filter="url(#superDarkenFilter)" points='63.2 0 0 63.2 0 78.2 70.7 7.5 70.7 0'/>
<polygon fill='#<<base(i="09")>>' points='0 63.2 63.2 0 27.8 0 0 27.8'/>
</g>
</pattern>
</defs>
<rect x='0' y='0' width='1920' height='1080' fill='url(#myPattern)' />
</svg>
<svg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' viewBox='0 0 1920 1080'>
<pattern id='myPattern' width='200' height='200' patternUnits='userSpaceOnUse'>
<rect fill='#<<base(i="00")>>' width='200' height='200'/>
<polygon fill='#<<base(i="01")>>' fill-opacity='1' points='100 0 0 100 100 100 100 200 200 100 200 0'/>
</pattern>
<rect x='0' y='0' width='1920' height='1080' fill='url(#myPattern)' />
</svg>
<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.1" viewBox="0 0 1920 1080" width="1920" height="1080" xmlns="http://www.w3.org/2000/svg">
<rect fill="#<<base(i="00")>>" height="100%" width="100%" />
<defs>
<filter id="shadow">
<feDropShadow dx="-10" dy="10" stdDeviation="10" flood-opacity="0.4" flood-color="#000000" />
</filter>
<rect id="square" x="0" y="0" height="2000" width="2000" filter="url(#shadow)" transform="rotate(10 960 540)" />
</defs>
<use href="#square" fill='#<<base(i="01")>>' transform="translate(400 -100)" />
<use href="#square" fill='#<<base(i="02")>>' transform="translate(800 -100)" />
<use href="#square" fill='#<<base(i="03")>>' transform="translate(1200 -100)" />
<use href="#square" fill='#<<base(i="04")>>' transform="translate(1600 -100)" />
</svg>
<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.1" viewBox="0 0 1920 1080" width="1920" height="1080" xmlns="http://www.w3.org/2000/svg">
<rect fill='#<<base(i="00")>>' height="100%" width="100%" />
<defs>
<filter id="shadow">
<feDropShadow dx="-10" dy="10" stdDeviation="10" flood-opacity="0.5" flood-color="#000000" />
</filter>
<rect id="square" x="0" y="0" height="2000" width="2000" filter="url(#shadow)" />
</defs>
<use href="#square" fill='#<<base(i="08")>>' transform="translate(150 -900) rotate(-30 960 540)" />
<use href="#square" fill='#<<base(i="00")>>' transform="translate(200 -900) rotate(-40 960 540)" />
<use href="#square" fill='#<<base(i="00")>>' transform="translate(-500 -1200) rotate(290 960 540)" />
<use href="#square" fill='#<<base(i="00")>>' transform="translate(-500 1800) rotate(200 960 540)" />
<use href="#square" fill='#<<base(i="08")>>' transform="translate(1280 0) rotate(35 960 540)" />
<use href="#square" fill='#<<base(i="00")>>' transform="translate(1300 0) rotate(30 960 540)" />
</svg>