Settings: Add new illustrations with light and dark mode

Add new light/dark illustrations to the cookies page, security page, and permissions page

Bug: 1032584
Change-Id: Ibe2b9e9de215581129d24eb7ee5789291e7ebf0c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2120425
Commit-Queue: Sean Harrison <harrisonsean@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#755300}

chrome/browser/resources/settings/images/cookies_banner_dark.svg

+<svg fill="none" height="226" viewBox="0 0 680 226" width="680" xmlns="http://www.w3.org/2000/svg"><clipPath id="a"><path d="M0 0h680v226H0z"/></clipPath><g clip-path="url(#a)"><path d="M0 0h680v226H0z" fill="#3c4043"/><path clip-rule="evenodd" d="M574.893 68.838c9.073-5.478 20.98-2.523 26.463 6.545s2.537 20.971-6.52 26.461c-.614.408-1.221.716-1.885 1.007a1.114 1.114 0 0 1-.592.243h-.006c-.414.116-1.426.453-2.158.726-.439.209-.955.331-1.291.411l-.145.035-6.58 1.894-.001.001c-5.249 1.527-9.732 5.057-12.402 9.822l-3.067 5.64c-.733 1.866-1.766 3.717-2.992 5.454l-.003.004c-2.09 2.926-4.792 5.308-7.972 7.359l-.014.01-.015.009c-13.393 7.994-30.833 3.114-38.099-10.796-6.13-11.741-2.701-26.378 7.992-34.268l.005-.003c3.834-2.798 8.089-4.46 12.448-5.082 2.17-.31 4.234-.312 6.283-.11l6.45-.1h.008c5.416 0 10.757-2.38 14.475-6.29l.005-.004 4.713-4.813.9-.9c.315-.315.703-.678 1.04-.99.061-.056.121-.11.177-.163.267-.246.474-.438.583-.547l.239-.24.043-.034a15.065 15.065 0 0 1 1.918-1.281zm24.751 7.58c-4.915-8.13-15.6-10.776-23.727-5.862l-.01.006-.011.006c-.645.369-1.186.73-1.629 1.08l-.16.16c-.139.139-.387.367-.652.613l-.163.15c-.338.314-.7.652-.985.936l-.892.893-.008.007-4.687 4.787c-4.08 4.286-9.933 6.904-15.912 6.906l-6.55.1-.057-.005c-1.932-.193-3.851-.192-5.86.095-4.04.577-7.985 2.116-11.549 4.716-9.906 7.31-13.075 20.873-7.406 31.731 6.731 12.885 22.881 17.407 35.287 10.013 3.013-1.946 5.505-4.16 7.412-6.829 1.16-1.644 2.117-3.371 2.783-5.083l.023-.06 3.136-5.767c2.93-5.232 7.845-9.099 13.594-10.771l.002-.001 6.617-1.905.017-.004.246-.06c.354-.086.626-.152.85-.264l.047-.024.049-.018a37.263 37.263 0 0 1 2.37-.797l.01-.01.177-.076c.667-.286 1.207-.558 1.739-.913l.019-.012.019-.012c8.128-4.915 10.775-15.6 5.861-23.727z" fill="#81c995" fill-rule="evenodd"/><path d="M563 177.5c0 58.6-46.6 105.5-104.9 105.5-59.5 1.3-106.1-46.9-106.1-105.5S398.6 72 456.9 72C515.1 72 563 118.9 563 177.5z" fill="#5f6368"/><path clip-rule="evenodd" d="M517.555 123.658c-5.092-9.873-3.426-21.911 3.631-30.11l1.516 1.304c-6.542 7.601-8.076 18.763-3.369 27.89 6.44 12.494 21.829 17.024 33.953 10.769l.917 1.778c-13.076 6.745-29.687 1.875-36.647-11.631" fill="#feefc3" fill-rule="evenodd"/><path d="M496.6 170.8c4 0 7.3-3.3 7.3-7.3s-3.3-7.3-7.3-7.3-7.3 3.3-7.3 7.3 3.3 7.3 7.3 7.3z" fill="#a8dab5"/><path d="M477 180.2l-11.6 20.2c-1 1.6.2 3.6 2.1 3.6h23.2c1.8 0 3-2 2.1-3.6L481 180.2c-.8-1.6-3.1-1.6-4 0z" fill="#8ab4f8"/><path clip-rule="evenodd" d="M459.4 116.5c-12.482 0-22.6 10.118-22.6 22.6s10.118 22.6 22.6 22.6 22.6-10.118 22.6-22.6-10.118-22.6-22.6-22.6zm-24.6 22.6c0-13.586 11.014-24.6 24.6-24.6s24.6 11.014 24.6 24.6-11.014 24.6-24.6 24.6-24.6-11.014-24.6-24.6z" fill="#ffb2fe" fill-rule="evenodd"/><path d="M213.8 126.4l-28.2-10.5c-7.3-2.8-15.6 1-18.4 8.3s1 15.6 8.3 18.4l28.2 10.5c7.3 2.8 15.6-1 18.4-8.3 2.9-7.5-1-15.6-8.3-18.4z" fill="#5f6368"/><path d="M344.3 39c-41.7.4-75.3 34.2-75.3 76 0 42 34 76 76 76 41 0 74.4-32.4 76-73h-21.6c-6.6 0-11.9-5.3-11.9-11.9v-9.7h-8.9c-6.6 0-11.9-5.3-11.9-11.9v-8.9h-10.4c-6.6 0-11.9-5.3-11.9-11.9V39z" fill="#fdd663"/><g clip-rule="evenodd" fill-rule="evenodd" fill="#fff"><path d="M303 98.6c-4.048 0-7.4 3.352-7.4 7.4s3.352 7.4 7.4 7.4 7.4-3.352 7.4-7.4-3.352-7.4-7.4-7.4zm-9.4 7.4c0-5.152 4.248-9.4 9.4-9.4s9.4 4.248 9.4 9.4-4.248 9.4-9.4 9.4-9.4-4.248-9.4-9.4zM343 98.6c-4.048 0-7.4 3.352-7.4 7.4s3.352 7.4 7.4 7.4 7.4-3.352 7.4-7.4-3.352-7.4-7.4-7.4zm-9.4 7.4c0-5.152 4.248-9.4 9.4-9.4s9.4 4.248 9.4 9.4-4.248 9.4-9.4 9.4-9.4-4.248-9.4-9.4zM325 136.6c-4.048 0-7.4 3.352-7.4 7.4s3.352 7.4 7.4 7.4 7.4-3.352 7.4-7.4-3.352-7.4-7.4-7.4zm-9.4 7.4c0-5.152 4.248-9.4 9.4-9.4s9.4 4.248 9.4 9.4-4.248 9.4-9.4 9.4-9.4-4.248-9.4-9.4zM366 136.6c-4.048 0-7.4 3.352-7.4 7.4s3.352 7.4 7.4 7.4 7.4-3.352 7.4-7.4-3.352-7.4-7.4-7.4zm-9.4 7.4c0-5.152 4.248-9.4 9.4-9.4s9.4 4.248 9.4 9.4-4.248 9.4-9.4 9.4-9.4-4.248-9.4-9.4z"/></g><path d="M111.931 113.158c-1.7 2.1-5 2-6.6-.1-4.6-6.5-4.5-15.5.7-22 5.3-6.7 14-8.7 21.5-5.7 2.5 1.1 3.3 4.2 1.7 6.3z" fill="#fde293"/><path d="M146 54c0 2.8-2.2 5-5 5-2.8.1-5-2.2-5-5s2.2-5 5-5c2.7 0 5 2.2 5 5z" fill="#669df6"/><path d="M439 207.7L419.3 193c-1.2-.9-1.5-2.7-.6-4l14.7-19.7c.9-1.2 2.7-1.5 4-.6l19.7 14.7c1.2.9 1.5 2.7.6 4L443 207.1c-1 1.2-2.8 1.5-4 .6z" fill="#fdd663"/><path clip-rule="evenodd" d="M80.807 149.196c-.572-.051-1.063.368-1.111.894v.005l-2.5 26.095v.002c-.051.573.368 1.064.894 1.112h.005l26.096 2.5h.001c.573.051 1.064-.368 1.112-.895l.001-.004 2.499-26.096v-.002c.051-.572-.368-1.063-.895-1.111l-.004-.001-26.096-2.499h-.002zm-3.103.711c.154-1.672 1.66-2.851 3.287-2.703h.004l26.096 2.5h.002c1.672.154 2.851 1.661 2.703 3.286l-.001.005-2.499 26.095v.003c-.154 1.672-1.661 2.851-3.287 2.703l-.004-.001-26.096-2.499h-.002c-1.672-.154-2.85-1.661-2.703-3.287v-.004l2.5-26.096v-.002z" fill="#81c995" fill-rule="evenodd"/></g></svg>
\ No newline at end of file

chrome/browser/resources/settings/images/permissions_banner_dark.svg

+<svg fill="none" height="226" viewBox="0 0 680 226" width="680" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h680v226H0z" fill="#3c4043"/><path clip-rule="evenodd" d="M205.2 157.6c0-8.221 6.664-15 15-15 8.221 0 15 6.664 15 15 0 8.221-6.664 15-15 15s-15-6.779-15-15zm15-12c-6.664 0-12 5.421-12 12s5.336 12 12 12 12-5.421 12-12c0-6.664-5.421-12-12-12z" fill="#8ab4f8" fill-rule="evenodd"/><path d="M252.4 115.2c-1.8 3.6-4.2 7.6-7.4 11.8l-22.7 29.5c-1 1.4-3.2 1.4-4.2 0L195.4 127c-3.2-4.2-5.6-8.2-7.4-11.8-8.8-17.6-2.6-39.1 14.5-48.6 5.1-2.8 10.9-4.5 17.2-4.6h1.1c6.2.1 12 1.8 17.1 4.6 17.1 9.5 23.3 31.1 14.5 48.6z" fill="#fde293"/><path d="M231.2 92.2c0 6.1-4.9 11-11 11s-11-4.9-11-11 4.9-11 11-11c6.1.1 11 4.9 11 11z" fill="#8ab4f8"/><path d="M339.7 148.3c-12.5 0-22.6-10.1-22.6-22.6V68.6c0-12.5 10.1-22.6 22.6-22.6s22.6 10.1 22.6 22.6v57.2c0 12.4-10.1 22.5-22.6 22.5z" fill="#d2e3fc"/><path clip-rule="evenodd" d="M307.1 108.8a1.5 1.5 0 0 1 1.5 1.5v15.5c0 17.172 14.028 31.2 31.2 31.2s31.2-14.028 31.2-31.2v-15.5a1.5 1.5 0 0 1 3 0v15.5c0 18.828-15.372 34.2-34.2 34.2s-34.2-15.372-34.2-34.2v-15.5a1.5 1.5 0 0 1 1.5-1.5z" fill="#8ab4f8" fill-rule="evenodd"/><path d="M339.7 148.3c-12.5 0-22.6-10.1-22.6-22.6V68.6c0-12.5 10.1-22.6 22.6-22.6s22.6 10.1 22.6 22.6v57.2c0 12.4-10.1 22.5-22.6 22.5z" fill="#fde293"/><path clip-rule="evenodd" d="M315.6 97.2a1.5 1.5 0 0 1 1.5-1.5h45.4a1.5 1.5 0 0 1 0 3h-45.4a1.5 1.5 0 0 1-1.5-1.5z" fill="#fff" fill-rule="evenodd"/><g fill="#8ab4f8"><path clip-rule="evenodd" d="M339.7 156.9a1.5 1.5 0 0 1 1.5 1.5V181a1.5 1.5 0 0 1-3 0v-22.6a1.5 1.5 0 0 1 1.5-1.5z" fill-rule="evenodd"/><path d="M351 119.5c0 6.4-5.1 11.5-11.5 11.5-6.4-.1-11.5-5.2-11.5-11.5 0-6.4 5.1-11.5 11.5-11.5s11.5 5.1 11.5 11.5z"/><path clip-rule="evenodd" d="M331.7 180.9a1.5 1.5 0 0 1 1.5-1.5H346a1.5 1.5 0 0 1 0 3h-12.8a1.5 1.5 0 0 1-1.5-1.5z" fill-rule="evenodd"/><path d="M465.8 68.5c0 3.1-2.5 5.6-5.6 5.6s-5.6-2.5-5.6-5.6 2.5-5.6 5.6-5.6 5.6 2.5 5.6 5.6z"/></g><path d="M493.3 108.1c0-17.4-14.6-31.5-32.5-31.5-18 0-32.5 14.1-32.5 31.5v28.1c0 1.4 1.2 2.5 2.6 2.5h59.8c1.4 0 2.6-1.1 2.6-2.5z" fill="#fde293"/><path clip-rule="evenodd" d="M420.7 145.2a1.5 1.5 0 0 1 1.5-1.5h77a1.5 1.5 0 0 1 0 3h-77a1.5 1.5 0 0 1-1.5-1.5z" fill="#8ab4f8" fill-rule="evenodd"/><path d="M460.8 162.7c5.5 0 10-4.5 10-10h-20c0 5.5 4.5 10 10 10z" fill="#8ab4f8"/><path clip-rule="evenodd" d="M637.997 169.005l12.076 1.098c2.282.127 4.293 1.566 5.238 3.683l5.1 11.001.003.007a6.49 6.49 0 0 1-.59 6.373l-.007.01-6.997 9.895c-1.3 1.887-3.545 2.96-5.817 2.723l-12.075-1.097c-2.283-.128-4.294-1.567-5.238-3.684l-5.101-11.001-.003-.007a6.49 6.49 0 0 1 .59-6.372l.007-.011 6.997-9.895c1.3-1.886 3.545-2.96 5.817-2.723zm-.202 1.99c-1.523-.161-3.072.563-3.971 1.872l-.007.01-6.996 9.895a4.488 4.488 0 0 0-.41 4.415l5.1 11 .003.007c.654 1.473 2.032 2.428 3.539 2.507l.019.001 12.126 1.103.007.001c1.523.16 3.072-.564 3.971-1.872l.007-.011 6.997-9.895a4.49 4.49 0 0 0 .409-4.415l-5.1-11-.003-.007c-.654-1.473-2.032-2.428-3.539-2.507l-.019-.001-12.126-1.103z" fill="#a8dab5" fill-rule="evenodd"/><path clip-rule="evenodd" d="M616.907 57.496c-.572-.051-1.063.368-1.111.894l-.001.005-2.499 26.096v.001c-.051.573.368 1.064.894 1.112h.005l26.095 2.5h.002c.573.051 1.064-.368 1.112-.895v-.004l2.5-26.096v-.002c.051-.572-.368-1.063-.895-1.111h-.004l-26.096-2.5h-.002zm-3.103.71c.154-1.671 1.661-2.85 3.286-2.702h.005l26.095 2.5h.003c1.672.154 2.851 1.66 2.703 3.287l-.001.004-2.499 26.096v.002c-.154 1.672-1.661 2.85-3.287 2.703h-.004l-26.096-2.5h-.002c-1.672-.154-2.851-1.66-2.703-3.287v-.004l2.5-26.096v-.002z" fill="#f28b82" fill-rule="evenodd"/><path d="M598.1 114.6l-30.9-11.2c-8.1-3-17 1.3-20 9.3-3 8.1 1.3 17 9.3 20l30.9 11.2c8.1 3 17-1.3 20-9.3 3.1-8.2-1.2-17-9.3-20z" fill="#80868b"/><path clip-rule="evenodd" d="M210.212 146.271c2.656-2.323 6.101-3.771 9.988-3.771 3.784 0 7.343 1.446 10.014 3.894a1.501 1.501 0 0 1-2.028 2.212 11.833 11.833 0 0 0-7.986-3.106c-3.113 0-5.868 1.152-8.012 3.029a1.501 1.501 0 0 1-1.976-2.258z" fill="#fff" fill-rule="evenodd"/><path d="M87 91.97c0 2.76-2.209 4.969-4.97 4.969C79.21 97 77 94.73 77 91.969 77 89.21 79.209 87 81.97 87c2.76 0 5.03 2.209 5.03 4.97z" fill="#5f6368"/><path d="M41.327 161.675c-1.562 2.01-4.7 1.9-6.164-.134-4.294-6.113-4.248-14.585.625-20.739a17.327 17.327 0 0 1 20.19-5.353c2.345 1.016 3.115 3.943 1.553 5.953z" fill="#fde293"/><path clip-rule="evenodd" d="M45.638 39.41l23.073 2.696a3.38 3.38 0 0 1 2.395 5.385l-.003.005L57.306 66.09l-.001.003c-1.566 2.13-4.828 1.7-5.826-.704l-9.3-21.4-.004-.01c-.958-2.326.809-4.994 3.463-4.57zm-1.617 3.801l9.3 21.4.004.008a1.368 1.368 0 0 0 2.369.29l.003-.005L69.494 46.31l.001-.002c.644-.881.128-2.094-1-2.213h-.011L45.36 41.39l-.024-.004c-.93-.154-1.746.763-1.315 1.825z" fill="#81c995" fill-rule="evenodd"/></svg>
\ No newline at end of file

chrome/browser/resources/settings/images/safe_browsing_banner_dark.svg

+<svg fill="none" height="226" viewBox="0 0 680 226" width="680" xmlns="http://www.w3.org/2000/svg"><clipPath id="a"><path d="M0 0h680v226H0z"/></clipPath><g clip-path="url(#a)"><path d="M0 0h680v226H0z" fill="#3c4043"/><path d="M421 175.462c0 55.271-43.951 99.488-98.89 99.488C265.951 276.178 222 230.733 222 175.462s43.951-99.488 98.89-99.488c54.938 0 100.11 44.217 100.11 99.488z" fill="#5f6368"/><path d="M427.031 182.974h-82.062c-6.033 0-10.969-4.925-10.969-10.945V90.148c0-6.02 4.936-10.945 10.969-10.945h82.062c6.033 0 10.969 4.925 10.969 10.945v81.881c0 6.02-4.936 10.945-10.969 10.945z" fill="#d2e3fc"/><path d="M389.394 148.361h-6.788c-2.81 0-4.867-2.6-4.319-5.268l3.771-17.443h7.747l3.77 17.443c.686 2.737-1.439 5.268-4.181 5.268z" fill="#4285f4"/><path d="M395.838 118.057c0 5.473-4.388 9.85-9.872 9.85-5.485 0-9.872-4.377-9.872-9.85 0-5.472 4.387-9.85 9.872-9.85 5.484 0 9.872 4.378 9.872 9.85z" fill="#4285f4"/><path clip-rule="evenodd" d="M385.966 46.5c-12.955 0-23.455 10.482-23.455 23.4v9.303a1.5 1.5 0 1 1-3 0V69.9c0-14.581 11.85-26.4 26.455-26.4s26.454 11.819 26.454 26.4a1.5 1.5 0 1 1-3 0c0-12.918-10.5-23.4-23.454-23.4z" fill="#8ab4f8" fill-rule="evenodd"/><path clip-rule="evenodd" d="M361.011 77.703a1.5 1.5 0 0 1 1.5 1.5v65.122c0 12.918 10.5 23.399 23.455 23.399 12.954 0 23.454-10.481 23.454-23.399V79.203a1.5 1.5 0 0 1 3 0v65.122c0 14.581-11.849 26.399-26.454 26.399s-26.455-11.818-26.455-26.399V79.203a1.5 1.5 0 0 1 1.5-1.5z" fill="#fff" fill-rule="evenodd"/><path d="M138.425 173.925l-3.9-3.9c-.7-.7-.7-1.9 0-2.6l3.9-3.9c.7-.7 1.9-.7 2.6 0l3.9 3.9c.7.7.7 1.9 0 2.6l-3.9 3.9c-.7.8-1.9.8-2.6 0z" fill="#5f6368"/><path d="M100.323 42.8c0 4.3-3.5 7.8-7.8 7.8s-7.8-3.5-7.8-7.8 3.5-7.8 7.8-7.8 7.8 3.5 7.8 7.8z" fill="#fde293"/><path d="M543 141c0 2.8-2.2 5-5 5s-5-2.2-5-5 2.2-5 5-5 5 2.3 5 5z" fill="#f28b82"/><path clip-rule="evenodd" d="M594.346 158.207l12.063 1.097c2.474.142 4.64 1.7 5.657 3.975l5.095 10.99.01.022a6.989 6.989 0 0 1-.635 6.859l-.011.016-6.995 9.892c-1.399 2.03-3.818 3.189-6.276 2.935l-12.063-1.097c-2.473-.142-4.64-1.7-5.657-3.975l-5.095-10.99-.01-.022a6.989 6.989 0 0 1 .635-6.859l.011-.016 6.995-9.893c1.4-2.029 3.818-3.188 6.276-2.934zm-.303 2.985c-1.335-.141-2.708.495-3.507 1.658l-.011.016-6.994 9.891a3.992 3.992 0 0 0-.365 3.924l5.095 10.988.01.022c.582 1.309 1.798 2.142 3.108 2.211l.057.004 12.1 1.1.021.002c1.335.141 2.708-.496 3.507-1.658l.011-.016 6.994-9.892a3.99 3.99 0 0 0 .365-3.923l-5.095-10.988-.01-.022c-.581-1.309-1.798-2.142-3.108-2.211l-.057-.004-12.1-1.1z" fill="#80868b" fill-rule="evenodd"/><path d="M311.957 157.18l-11.617 20.177c-.962 1.607.24 3.617 2.083 3.617h23.154c1.843 0 3.045-2.01 2.083-3.617l-11.617-20.177c-.881-1.608-3.125-1.608-4.086 0z" fill="#8ab4f8"/><path clip-rule="evenodd" d="M304 145.974c8.284 0 15-6.716 15-15s-6.716-15-15-15-15 6.716-15 15 6.716 15 15 15zm0 2c9.389 0 17-7.611 17-17s-7.611-17-17-17-17 7.611-17 17 7.611 17 17 17z" fill="#f0a3f8" fill-rule="evenodd"/><path d="M274.012 182.634l-19.723-14.669c-1.238-.941-1.534-2.741-.594-3.98l14.67-19.722c.94-1.239 2.74-1.534 3.979-.594l19.722 14.669c1.239.941 1.535 2.741.594 3.98l-14.669 19.722c-.941 1.239-2.741 1.534-3.979.594z" fill="#fdd663"/><g clip-rule="evenodd" fill="#81c995" fill-rule="evenodd"><path d="M606.658 51.327c-2.626-.355-4.479 2.262-3.486 4.656l.004.007 9.274 21.356c1.032 2.472 4.33 2.763 5.869.69l13.804-18.591c1.539-2.074.307-5.146-2.357-5.42zm-1.641 3.883l9.274 21.354.003.008c.407.982 1.764 1.154 2.419.27l13.804-18.59c.656-.883.098-2.132-.959-2.237l-.009-.001-23.143-2.703-.011-.002c-.999-.137-1.813.84-1.378 1.9zM30.737 119.894a3 3 0 0 1 3.276-2.696l26.12 2.539a3 3 0 0 1 2.696 3.276l-2.538 26.121a2.999 2.999 0 0 1-3.276 2.695l-26.121-2.538a3.001 3.001 0 0 1-2.696-3.277zm3.083-.705a1 1 0 0 0-1.092.898l-2.54 26.121a1 1 0 0 0 .9 1.092l26.12 2.539a1 1 0 0 0 1.092-.899l2.539-26.12a1 1 0 0 0-.899-1.092z"/></g></g></svg>
\ No newline at end of file

chrome/browser/resources/settings/privacy_page/cookies_page.html

@@ -43,7 +43,13 @@
         padding-inline-start: var(--cr-button-edge-spacing);
       }
     </style>
-    <img src="chrome://settings/images/cookies_banner.svg">
+    <picture>
+      <source
+          srcset="chrome://settings/images/cookies_banner_dark.svg"
+          media="(prefers-color-scheme: dark">
+      <img id="banner" alt=""
+          src="chrome://settings/images/cookies_banner.svg">
+    </picture>
     <div class="settings-box block first">
       <h2>$i18n{cookiePageGeneralControls}</h2>
       <cr-radio-group selected="[[cookiesControlRadioSelected_]]"

chrome/browser/resources/settings/privacy_page/security_page.html

@@ -44,9 +44,15 @@
         padding-inline-start: var(--cr-button-edge-spacing);
       }
     </style>
-    <img src="chrome://settings/images/safe_browsing_banner.svg">
+    <picture>
+      <source
+          srcset="chrome://settings/images/safe_browsing_banner_dark.svg"
+          media="(prefers-color-scheme: dark">
+      <img id="banner" alt=""
+          src="chrome://settings/images/safe_browsing_banner.svg">
+    </picture>
     <div class="settings-box block first">
-      <h2 class="first">$i18n{safeBrowsingSectionLabel}</h2>
+      <h2>$i18n{safeBrowsingSectionLabel}</h2>
       <cr-radio-group id="safeBrowsingRadio"
           selected="[[selectSafeBrowsingRadio_]]"
           selectable-elements="cr-radio-button, settings-collapse-radio-button"

chrome/browser/resources/settings/settings_resources.grd

@@ -503,9 +503,21 @@
       <structure name="IDR_SETTINGS_IMAGES_COOKIES_BANNER_SVG"
                  file="images/cookies_banner.svg"
                  type="chrome_html" />
+      <structure name="IDR_SETTINGS_IMAGES_COOKIES_BANNER_DARK_SVG"
+                 file="images/cookies_banner_dark.svg"
+                 type="chrome_html" />
+      <structure name="IDR_SETTINGS_IMAGES_PERMISSIONS_BANNER_SVG"
+                 file="images/permissions_banner.svg"
+                 type="chrome_html" />
+      <structure name="IDR_SETTINGS_IMAGES_PERMISSIONS_BANNER_DARK_SVG"
+                 file="images/permissions_banner_dark.svg"
+                 type="chrome_html" />
       <structure name="IDR_SETTINGS_IMAGES_SAFE_BROWSING_BANNER_SVG"
                  file="images/safe_browsing_banner.svg"
                  type="chrome_html" />
+      <structure name="IDR_SETTINGS_IMAGES_SAFE_BROWSING_BANNER_DARK_SVG"
+                 file="images/safe_browsing_banner_dark.svg"
+                 type="chrome_html" />
       <structure name="IDR_SETTINGS_IMAGES_SYNC_BANNER_SVG"
                  file="images/sync_banner.svg"
                  type="chrome_html" />

chrome/browser/resources/settings/settings_resources_vulcanized.grd

@@ -40,10 +40,26 @@
                file="images/cookies_banner.svg"
                type="BINDATA"
                compress="gzip" />
+      <include name="IDR_SETTINGS_IMAGES_COOKIES_BANNER_DARK_SVG"
+               file="images/cookies_banner_dark.svg"
+               type="BINDATA"
+               compress="gzip" />
+      <include name="IDR_SETTINGS_IMAGES_PERMISSIONS_BANNER_SVG"
+               file="images/permissions_banner.svg"
+               type="BINDATA"
+               compress="gzip" />
+      <include name="IDR_SETTINGS_IMAGES_PERMISSIONS_BANNER_DARK_SVG"
+               file="images/permissions_banner_dark.svg"
+               type="BINDATA"
+               compress="gzip" />
       <include name="IDR_SETTINGS_IMAGES_SAFE_BROWSING_BANNER_SVG"
                file="images/safe_browsing_banner.svg"
                type="BINDATA"
                compress="gzip" />
+      <include name="IDR_SETTINGS_IMAGES_SAFE_BROWSING_BANNER_DARK_SVG"
+               file="images/safe_browsing_banner_dark.svg"
+               type="BINDATA"
+               compress="gzip" />
       <include name="IDR_SETTINGS_IMAGES_SYNC_BANNER_SVG"
                file="images/sync_banner.svg"
                type="BINDATA"

chrome/browser/resources/settings/site_settings_page/site_settings_page.html

@@ -23,8 +23,15 @@
     </template>
 
     <template is="dom-if" if="[[privacySettingsRedesignEnabled_]]">
+      <picture>
+        <source
+            srcset="chrome://settings/images/permissions_banner_dark.svg"
+            media="(prefers-color-scheme: dark">
+        <img id="banner" alt=""
+            src="chrome://settings/images/permissions_banner.svg">
+      </picture>
       <div class="settings-box first line-only">
-        <h2 class="first">$i18n{siteSettingsRecentPermissionsSectionLabel}</h2>
+        <h2>$i18n{siteSettingsRecentPermissionsSectionLabel}</h2>
       </div>
       <settings-recent-site-permissions id="recentSitePermissions"
           no-recent-permissions="{{noRecentSitePermissions_}}"

chrome/browser/ui/webui/settings/settings_ui.cc

@@ -324,8 +324,17 @@ SettingsUI::SettingsUI(content::WebUI* web_ui)
   // above.
   html_source->AddResourcePath("images/cookies_banner.svg",
                                IDR_SETTINGS_IMAGES_COOKIES_BANNER_SVG);
+  html_source->AddResourcePath("images/cookies_banner_dark.svg",
+                               IDR_SETTINGS_IMAGES_COOKIES_BANNER_DARK_SVG);
+  html_source->AddResourcePath("images/permissions_banner.svg",
+                               IDR_SETTINGS_IMAGES_PERMISSIONS_BANNER_SVG);
+  html_source->AddResourcePath("images/permissions_banner_dark.svg",
+                               IDR_SETTINGS_IMAGES_PERMISSIONS_BANNER_DARK_SVG);
   html_source->AddResourcePath("images/safe_browsing_banner.svg",
                                IDR_SETTINGS_IMAGES_SAFE_BROWSING_BANNER_SVG);
+  html_source->AddResourcePath(
+      "images/safe_browsing_banner_dark.svg",
+      IDR_SETTINGS_IMAGES_SAFE_BROWSING_BANNER_DARK_SVG);
   html_source->AddResourcePath("images/sync_banner.svg",
                                IDR_SETTINGS_IMAGES_SYNC_BANNER_SVG);
   html_source->AddResourcePath("images/sync_banner_dark.svg",