fix translation display

apps/app/src/client/components/Me/ColorModeSettings.tsx

@@ -1,5 +1,5 @@
 import React, { type JSX, useCallback } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import { Themes, useNextThemes } from '~/stores-universal/use-next-themes';
 
@@ -81,7 +81,12 @@ export const ColorModeSettings = (): JSX.Element => {
         </div>
 
         <div className="mt-3 text-muted small">
-          <Trans i18nKey="color_mode_settings.description" />
+          <span
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: ignore
+            dangerouslySetInnerHTML={{
+              __html: t('color_mode_settings.description'),
+            }}
+          />
         </div>
       </div>
     </div>

apps/app/src/client/components/Me/DisassociateModal.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { useCallback } from 'react';
 import type { HasObjectId, IExternalAccount } from '@growi/core';
-import { Trans, useTranslation } from 'next-i18next';
+import { useTranslation } from 'next-i18next';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 
 import { toastError, toastSuccess } from '~/client/util/toastr';
@@ -65,12 +65,15 @@ const DisassociateModalSubstance = (
         {t('personal_settings.disassociate_external_account')}
       </ModalHeader>
       <ModalBody>
-        <p>
-          <Trans
-            i18nKey="personal_settings.disassociate_external_account_desc"
-            values={{ providerType, accountId }}
-          />
-        </p>
+        <p
+          // biome-ignore lint/security/noDangerouslySetInnerHtml: ignore
+          dangerouslySetInnerHTML={{
+            __html: t('personal_settings.disassociate_external_account_desc', {
+              providerType,
+              accountId,
+            }),
+          }}
+        />
       </ModalBody>
       <ModalFooter>
         <button