Feat: add search params with theme in links of marketplace (#19648)

web/app/components/plugins/marketplace/list/card-wrapper.tsx

@@ -1,4 +1,5 @@
 'use client'
+import { useTheme } from 'next-themes'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import { getPluginLinkInMarketplace } from '../utils'
 import Card from '@/app/components/plugins/card'
@@ -22,6 +23,7 @@ const CardWrapper = ({
   locale,
 }: CardWrapperProps) => {
   const { t } = useMixedTranslation(locale)
+  const { theme } = useTheme()
   const [isShowInstallFromMarketplace, {
     setTrue: showInstallFromMarketplace,
     setFalse: hideInstallFromMarketplace,
@@ -54,7 +56,7 @@ const CardWrapper = ({
             >
               {t('plugin.detailPanel.operation.install')}
             </Button>
-            <a href={`${getPluginLinkInMarketplace(plugin)}?language=${localeFromLocale}`} target='_blank' className='block w-[calc(50%-4px)] flex-1 shrink-0'>
+            <a href={`${getPluginLinkInMarketplace(plugin)}?language=${localeFromLocale}${theme ? `&theme=${theme}` : ''}`} target='_blank' className='block w-[calc(50%-4px)] flex-1 shrink-0'>
               <Button
                 className='w-full gap-0.5'
               >

web/app/components/plugins/plugin-detail-panel/detail-header.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react'
+import { useTheme } from 'next-themes'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import {
@@ -49,6 +50,7 @@ const DetailHeader = ({
   onUpdate,
 }: Props) => {
   const { t } = useTranslation()
+  const { theme } = useTheme()
   const locale = useGetLanguage()
   const { checkForUpdates, fetchReleases } = useGitHubReleases()
   const { setShowUpdatePluginModal } = useModalContext()
@@ -85,9 +87,9 @@ const DetailHeader = ({
     if (isFromGitHub)
       return `https://github.com/${meta!.repo}`
     if (isFromMarketplace)
-      return `${MARKETPLACE_URL_PREFIX}/plugins/${author}/${name}`
+      return `${MARKETPLACE_URL_PREFIX}/plugins/${author}/${name}${theme ? `?theme=${theme}` : ''}`
     return ''
-  }, [author, isFromGitHub, isFromMarketplace, meta, name])
+  }, [author, isFromGitHub, isFromMarketplace, meta, name, theme])
 
   const [isShowUpdateModal, {
     setTrue: showUpdateModal,

web/app/components/plugins/plugin-item/index.tsx

@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React, { useMemo } from 'react'
+import { useTheme } from 'next-themes'
 import {
   RiArrowRightUpLine,
   RiBugLine,
@@ -38,6 +39,7 @@ const PluginItem: FC<Props> = ({
   plugin,
 }) => {
   const { t } = useTranslation()
+  const { theme } = useTheme()
   const { categoriesMap } = useSingleCategories()
   const currentPluginID = usePluginPageContext(v => v.currentPluginID)
   const setCurrentPluginID = usePluginPageContext(v => v.setCurrentPluginID)
@@ -164,7 +166,7 @@ const PluginItem: FC<Props> = ({
           }
           {source === PluginSource.marketplace
             && <>
-              <a href={`${MARKETPLACE_URL_PREFIX}/plugins/${author}/${name}`} target='_blank' className='flex items-center gap-0.5'>
+              <a href={`${MARKETPLACE_URL_PREFIX}/plugins/${author}/${name}${theme ? `?theme=${theme}` : ''}`} target='_blank' className='flex items-center gap-0.5'>
                 <div className='system-2xs-medium-uppercase text-text-tertiary'>{t('plugin.from')} <span className='text-text-secondary'>marketplace</span></div>
                 <RiArrowRightUpLine className='h-3 w-3 text-text-tertiary' />
               </a>

web/app/components/plugins/provider-card.tsx

@@ -1,6 +1,7 @@
 'use client'
 import React from 'react'
 import type { FC } from 'react'
+import { useTheme } from 'next-themes'
 import { useTranslation } from 'react-i18next'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import Badge from '../base/badge'
@@ -28,6 +29,7 @@ const ProviderCard: FC<Props> = ({
 }) => {
   const getValueFromI18nObject = useRenderI18nObject()
   const { t } = useTranslation()
+  const { theme } = useTheme()
   const [isShowInstallFromMarketplace, {
     setTrue: showInstallFromMarketplace,
     setFalse: hideInstallFromMarketplace,
@@ -74,7 +76,7 @@ const ProviderCard: FC<Props> = ({
           className='grow'
           variant='secondary'
         >
-          <a href={`${getPluginLinkInMarketplace(payload)}?language=${locale}`} target='_blank' className='flex items-center gap-0.5'>
+          <a href={`${getPluginLinkInMarketplace(payload)}?language=${locale}${theme ? `&theme=${theme}` : ''}`} target='_blank' className='flex items-center gap-0.5'>
             {t('plugin.detailPanel.operation.detail')}
             <RiArrowRightUpLine className='h-4 w-4' />
           </a>