From d6621f27f6c38ae900ba810cfb0d2a26323d7581 Mon Sep 17 00:00:00 2001
From: Jeffrey Holland <124393578+jholland-livefront@users.noreply.github.com>
Date: Wed, 30 Jul 2025 18:11:26 +0200
Subject: [PATCH] Update SVG to support dark mode (#15805)

---
 .../credentials/fido2-create.component.html   |  2 +-
 .../fido2-excluded-ciphers.component.html     |  2 +-
 .../credentials/fido2-passkey-exists-icon.ts  | 32 ++++++++++++-------
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html
index 70c6a328f65..d4241679604 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html
@@ -27,7 +27,7 @@
   <bit-section class="tw-bg-background-alt tw-p-4 tw-flex tw-flex-col">
     <div *ngIf="(ciphers$ | async)?.length === 0; else hasCiphers">
       <div class="tw-flex tw-items-center tw-flex-col tw-p-12 tw-gap-4">
-        <bit-icon [icon]="fido2PasskeyExistsIcon"></bit-icon>
+        <bit-icon [icon]="fido2PasskeyExistsIcon" class="tw-text-main"></bit-icon>
         <div class="tw-flex tw-flex-col tw-gap-2">
           {{ "noMatchingLoginsForSite" | i18n }}
         </div>
diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.html b/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.html
index 94bfd7d06d2..4ddf7cc4840 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.html
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.html
@@ -29,7 +29,7 @@
       class="tw-flex tw-bg-background-alt tw-flex-col tw-justify-start tw-items-center tw-gap-2 tw-h-full tw-px-5"
     >
       <div class="tw-flex tw-items-center tw-flex-col tw-p-12 tw-gap-4">
-        <bit-icon [icon]="fido2PasskeyExistsIcon"></bit-icon>
+        <bit-icon [icon]="fido2PasskeyExistsIcon" class="tw-text-main"></bit-icon>
         <div class="tw-flex tw-flex-col tw-gap-2">
           <b>{{ "passkeyAlreadyExists" | i18n }}</b>
           {{ "applicationDoesNotSupportDuplicates" | i18n }}
diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-passkey-exists-icon.ts b/apps/desktop/src/autofill/modal/credentials/fido2-passkey-exists-icon.ts
index 5a179f595fd..66c3ebe0f5b 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-passkey-exists-icon.ts
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-passkey-exists-icon.ts
@@ -1,16 +1,24 @@
 import { svgIcon } from "@bitwarden/components";
 
-export const Fido2PasskeyExistsIcon = svgIcon`<svg width="98" height="95" viewBox="0 0 98 95" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.85443 86.2917L56.99 86.2917C60.232 86.2917 62.8602 83.6635 62.8602 80.4215L62.8602 31.7675C62.8602 30.2469 62.2701 28.7857 61.2143 27.6914L47.5535 13.5343C46.4472 12.3878 44.9224 11.7402 43.3292 11.7402L8.85444 11.7402C5.61243 11.7402 2.98425 14.3684 2.98425 17.6104L2.98425 80.4215C2.98425 83.6635 5.61242 86.2917 8.85443 86.2917Z" stroke="#020F66" stroke-width="1.76106"/>
-<path d="M18.8336 76.3123L66.9691 76.3123C70.2112 76.3123 72.8393 73.6841 72.8393 70.4421L72.8393 21.3268C72.8393 19.8141 72.2554 18.3599 71.2093 17.2672L57.535 2.98447C56.4277 1.82789 54.896 1.17383 53.2948 1.17383L18.8336 1.17383C15.5916 1.17383 12.9634 3.80201 12.9634 7.04402L12.9634 70.4421C12.9634 73.6841 15.5915 76.3123 18.8336 76.3123Z" fill="white" stroke="#020F66" stroke-width="1.76106"/>
-<path d="M54.3485 1.76074L54.3485 13.5011C54.3485 16.7431 56.9767 19.3713 60.2187 19.3713L72.5461 19.3713" stroke="#020F66" stroke-width="1.76106"/>
-<path d="M20.0914 15.4858L43.5722 15.4858" stroke="#15C0CB" stroke-width="0.880529" stroke-linecap="round" stroke-dasharray="11.74 4.7"/>
-<path d="M20.0914 30.394L51.2034 30.394" stroke="#15C0CB" stroke-width="0.880529" stroke-linecap="round" stroke-dasharray="11.74 4.7"/>
-<path d="M20.0914 45.3027L45.9203 45.3027" stroke="#15C0CB" stroke-width="0.880529" stroke-linecap="round" stroke-dasharray="11.74 4.7"/>
-<path d="M20.0914 60.2109L45.9203 60.2109" stroke="#15C0CB" stroke-width="0.880529" stroke-linecap="round" stroke-dasharray="11.74 4.7"/>
-<path d="M85.4233 53.4449C81.9863 66.272 68.6683 73.8484 55.6768 70.3674C42.6852 66.8863 34.9397 53.6659 38.3767 40.8388C41.8137 28.0117 55.1317 20.4353 68.1233 23.9163C81.1148 27.3974 88.8603 40.6178 85.4233 53.4449Z" fill="white" stroke="#020F66" stroke-width="1.76106" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M55.1859 41.0395C55.1859 41.0395 55.2828 38.7314 57.5434 36.773C58.8998 35.584 60.5145 35.2692 61.9678 35.2343C63.2919 35.1993 64.4868 35.4441 65.1649 35.8288C66.3921 36.4583 68.7497 37.962 68.7497 41.2144C68.7497 44.6416 66.6828 46.1804 64.3576 47.894C62.0324 49.6076 62.3667 51.8385 62.3667 53.727" stroke="#15C0CB" stroke-width="1.76106" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M62.2727 58.7015C62.759 58.7015 63.1533 58.3073 63.1533 57.821C63.1533 57.3347 62.759 56.9404 62.2727 56.9404C61.7864 56.9404 61.3922 57.3347 61.3922 57.821C61.3922 58.3073 61.7864 58.7015 62.2727 58.7015Z" fill="#15C0CB"/>
-<path d="M96.0333 88.5621L95.4703 89.0329C94.2269 90.0728 92.3758 89.9078 91.3359 88.6644L78.2766 73.0488L74.79 68.8798C74.4843 68.5105 74.6096 67.9514 75.0271 67.7155C76.7198 66.7592 78.097 65.4974 78.8894 64.6364C79.1502 64.353 79.6089 64.3477 79.856 64.6431L83.3425 68.8121L96.4018 84.4277C97.4418 85.6712 97.2768 87.5222 96.0333 88.5621Z" fill="#F6F7F9" stroke="#020F66" stroke-width="1.76106" stroke-linecap="round" stroke-linejoin="round"/>
+export const Fido2PasskeyExistsIcon = svgIcon`<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .outline { fill: #175DDC; }
+  .handle { fill: #175DDC; }
+
+  @media (prefers-color-scheme: light) {
+    .outline { fill: #020F66; }
+    .handle { fill: #020F66; }
+  }
+</style>
+<path d="M62 12C63.1046 12 64 12.8954 64 14L64 90C64 91.1046 63.1046 92 62 92L6 92C4.89543 92 4 91.1046 4 90L4 14C4 12.8954 4.89544 12 6 12L62 12Z" fill="#99BAF4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M62 90L62 14L6 14L6 90L62 90ZM64 14C64 12.8954 63.1046 12 62 12L6 12C4.89544 12 4 12.8954 4 14L4 90C4 91.1046 4.89543 92 6 92L62 92C63.1046 92 64 91.1046 64 90L64 14Z" class="outline"/>
+<path d="M72 82L72 6C72 4.89543 71.1046 4 70 4L27.3284 4C26.798 4 26.2939 4.2061 25.9188 4.58117L12.5835 17.9165C12.2085 18.2915 12 18.798 12 19.3284L12 82C12 83.1046 12.8954 84 14 84L70 84C71.1046 84 72 83.1046 72 82Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70 82L70 6L27.3284 6L14 19.3284L14 82L70 82ZM27.333 5.99538C27.333 5.99538 27.3329 5.9955 27.3327 5.99572L27.333 5.99538ZM72 6L72 82C72 83.1046 71.1046 84 70 84L14 84C12.8954 84 12 83.1046 12 82L12 19.3284C12 18.798 12.2085 18.2915 12.5835 17.9165L25.9188 4.58117C26.2939 4.2061 26.798 4 27.3284 4L70 4C71.1046 4 72 4.89543 72 6Z" class="outline"/>
+<path d="M84 48C84 59.0457 75.0457 68 64 68C52.9543 68 44 59.0457 44 48C44 36.9543 52.9543 28 64 28C75.0457 28 84 36.9543 84 48Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64 66C73.9411 66 82 57.9411 82 48C82 38.0589 73.9411 30 64 30C54.0589 30 46 38.0589 46 48C46 57.9411 54.0589 66 64 66ZM64 68C75.0457 68 84 59.0457 84 48C84 36.9543 75.0457 28 64 28C52.9543 28 44 36.9543 44 48C44 59.0457 52.9543 68 64 68Z" class="outline"/>
+<path d="M79 48C79 56.2843 72.2843 63 64 63C55.7157 63 49 56.2843 49 48C49 39.7157 55.7157 33 64 33C72.2843 33 79 39.7157 79 48Z" fill="#99BAF4"/>
+<path d="M95.0038 77.087L78.5 61.5L76.5 63.5L92.087 80.0038C92.8607 80.8231 94.1583 80.8417 94.9552 80.0448L95.0448 79.9552C95.8417 79.1583 95.8231 77.8607 95.0038 77.087Z" class="handle"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28 5C28.5523 5 29 5.44772 29 6V21H14C13.4477 21 13 20.5523 13 20C13 19.4477 13.4477 19 14 19H27V6C27 5.44772 27.4477 5 28 5Z" class="outline"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 28C19.4477 28 19 28.4477 19 29C19 29.5523 19.4477 30 20 30H30C30.5523 30 31 29.5523 31 29C31 28.4477 30.5523 28 30 28H20ZM34 28C33.4477 28 33 28.4477 33 29C33 29.5523 33.4477 30 34 30H44C44.5523 30 45 29.5523 45 29C45 28.4477 44.5523 28 44 28H34ZM50.983 32.8154C50.8964 32.3513 50.4892 32 50 32H40C39.4477 32 39 32.4477 39 33C39 33.5523 39.4477 34 40 34H49.7171C50.1218 33.5873 50.5441 33.192 50.983 32.8154ZM44.0246 49C44.0579 49.676 44.1247 50.3432 44.2235 51H40C39.4477 51 39 50.5523 39 50C39 49.4477 39.4477 49 40 49H44.0246ZM44.2235 45C44.1247 45.6568 44.0579 46.324 44.0246 47L37 47C36.4477 47 36 46.5523 36 46C36 45.4477 36.4477 45 37 45L44.2235 45ZM47.9985 36C47.5192 36.6381 47.0772 37.3059 46.6756 38L38 38C37.4477 38 37 37.5523 37 37C37 36.4477 37.4477 36 38 36L47.9985 36ZM64 28C60.8707 28 57.9093 28.7187 55.2717 30L54 30C53.4477 30 53 29.5523 53 29C53 28.4477 53.4477 28 54 28H64ZM48 28C47.4477 28 47 28.4477 47 29C47 29.5523 47.4477 30 48 30H50C50.5523 30 51 29.5523 51 29C51 28.4477 50.5523 28 50 28H48ZM37 33C37 32.4477 36.5523 32 36 32H34C33.4477 32 33 32.4477 33 33C33 33.5523 33.4477 34 34 34H36C36.5523 34 37 33.5523 37 33ZM34 38C34.5523 38 35 37.5523 35 37C35 36.4477 34.5523 36 34 36H30C29.4477 36 29 36.4477 29 37C29 37.5523 29.4477 38 30 38H34ZM34 46C34 46.5523 33.5523 47 33 47H27C26.4477 47 26 46.5523 26 46C26 45.4477 26.4477 45 27 45H33C33.5523 45 34 45.4477 34 46ZM36 51C36.5523 51 37 50.5523 37 50C37 49.4477 36.5523 49 36 49H20C19.4477 49 19 49.4477 19 50C19 50.5523 19.4477 51 20 51H36ZM31 33C31 32.4477 30.5523 32 30 32L20 32C19.4477 32 19 32.4477 19 33C19 33.5523 19.4477 34 20 34L30 34C30.5523 34 31 33.5523 31 33ZM26 38C26.5523 38 27 37.5523 27 37C27 36.4477 26.5523 36 26 36H20C19.4477 36 19 36.4477 19 37C19 37.5523 19.4477 38 20 38H26ZM24 46C24 46.5523 23.5523 47 23 47H20C19.4477 47 19 46.5523 19 46C19 45.4477 19.4477 45 20 45H23C23.5523 45 24 45.4477 24 46Z" fill="#FFBF00"/>
 </svg>
 `;