chore: add dark and light images for hotkey card

app/javascript/dashboard/routes/dashboard/settings/personal/ChangePassword.vue

@@ -52,7 +52,7 @@
         color-scheme="primary"
         variant="solid"
         size="large"
-        :is-disabled="
+        :disabled="
           !currentPassword ||
           !passwordConfirmation ||
           !$v.passwordConfirmation.isEqPassword

app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue

@@ -23,10 +23,11 @@
       </span>
     </div>
 
-    <div v-if="src">
-      <img :src="src" class="object-cover w-full" />
+    <div>
+      <img :src="lightImage" class="block object-cover w-full dark:hidden" />
+      <img :src="darkImage" class="hidden object-cover w-full dark:block" />
     </div>
-    <slot v-else />
+    <slot />
   </div>
 </template>
 
@@ -44,7 +45,11 @@ defineProps({
     type: String,
     default: '',
   },
-  src: {
+  lightImage: {
+    type: String,
+    default: '',
+  },
+  darkImage: {
     type: String,
     default: '',
   },

app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue

@@ -54,7 +54,8 @@
                 <hot-key-card
                   :title="hotKey.title"
                   :description="hotKey.description"
-                  :src="hotKey.src"
+                  :light-image="hotKey.lightImage"
+                  :dark-image="hotKey.darkImage"
                   :active="isEditorHotKeyEnabled(uiSettings, hotKey.key)"
                   @click="toggleHotKey(hotKey.key)"
                 />
@@ -161,7 +162,8 @@ export default {
           description: this.$t(
             'PROFILE_SETTINGS.FORM.SEND_MESSAGE.CARD.ENTER_KEY.CONTENT'
           ),
-          src: '/assets/images/dashboard/profile/hot-key-enter.svg',
+          lightImage: '/assets/images/dashboard/profile/hot-key-enter.svg',
+          darkImage: '/assets/images/dashboard/profile/hot-key-enter-dark.svg',
         },
         {
           key: 'cmd_enter',
@@ -171,7 +173,9 @@ export default {
           description: this.$t(
             'PROFILE_SETTINGS.FORM.SEND_MESSAGE.CARD.CMD_ENTER_KEY.CONTENT'
           ),
-          src: '/assets/images/dashboard/profile/hot-key-ctrl-enter.svg',
+          lightImage: '/assets/images/dashboard/profile/hot-key-ctrl-enter.svg',
+          darkImage:
+            '/assets/images/dashboard/profile/hot-key-ctrl-enter-dark.svg',
         },
       ],
     };