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

web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useState } from 'react'
+import { useTheme } from 'next-themes'
 import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
 import {
@@ -29,6 +30,7 @@ const InstallFromMarketplace = ({
   searchText,
 }: InstallFromMarketplaceProps) => {
   const { t } = useTranslation()
+  const { theme } = useTheme()
   const [collapse, setCollapse] = useState(false)
   const locale = getLocaleOnClient()
   const {
@@ -53,7 +55,7 @@ const InstallFromMarketplace = ({
         </div>
         <div className='mb-2 flex items-center pt-2'>
           <span className='system-sm-regular pr-1 text-text-tertiary'>{t('common.modelProvider.discoverMore')}</span>
-          <Link target="_blank" href={`${MARKETPLACE_URL_PREFIX}`} className='system-sm-medium inline-flex items-center text-text-accent'>
+          <Link target="_blank" href={`${MARKETPLACE_URL_PREFIX}${theme ? `?theme=${theme}` : ''}`} className='system-sm-medium inline-flex items-center text-text-accent'>
             {t('plugin.marketplace.difyMarketplace')}
             <RiArrowRightUpLine className='h-4 w-4' />
           </Link>

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>

web/app/components/tools/marketplace/index.tsx

@@ -2,6 +2,7 @@ import {
   useEffect,
   useRef,
 } from 'react'
+import { useTheme } from 'next-themes'
 import {
   RiArrowRightUpLine,
   RiArrowUpDoubleLine,
@@ -25,7 +26,7 @@ const Marketplace = ({
 }: MarketplaceProps) => {
   const locale = getLocaleOnClient()
   const { t } = useTranslation()
-
+  const { theme } = useTheme()
   const {
     isLoading,
     marketplaceCollections,
@@ -83,7 +84,7 @@ const Marketplace = ({
           </span>
           {t('common.operation.in')}
           <a
-            href={`${MARKETPLACE_URL_PREFIX}?language=${locale}&q=${searchPluginText}&tags=${filterPluginTags.join(',')}`}
+            href={`${MARKETPLACE_URL_PREFIX}?language=${locale}&q=${searchPluginText}&tags=${filterPluginTags.join(',')}${theme ? `&theme=${theme}` : ''}`}
             className='system-sm-medium ml-1 flex items-center text-text-accent'
             target='_blank'
           >

web/app/components/workflow/block-selector/market-place-plugin/action.tsx

@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { useTheme } from 'next-themes'
 import { useTranslation } from 'react-i18next'
 import { RiMoreFill } from '@remixicon/react'
 import ActionButton from '@/app/components/base/action-button'
@@ -31,6 +32,7 @@ const OperationDropdown: FC<Props> = ({
   version,
 }) => {
   const { t } = useTranslation()
+  const { theme } = useTheme()
   const openRef = useRef(open)
   const setOpen = useCallback((v: boolean) => {
     onOpenChange(v)
@@ -78,7 +80,7 @@ const OperationDropdown: FC<Props> = ({
       <PortalToFollowElemContent className='z-[9999]'>
         <div className='w-[112px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
           <div onClick={handleDownload} className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'>{t('common.operation.download')}</div>
-          <a href={`${MARKETPLACE_URL_PREFIX}/plugins/${author}/${name}`} target='_blank' className='system-md-regular block cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'>{t('common.operation.viewDetails')}</a>
+          <a href={`${MARKETPLACE_URL_PREFIX}/plugins/${author}/${name}${theme ? `?theme=${theme}` : ''}`} target='_blank' className='system-md-regular block cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'>{t('common.operation.viewDetails')}</a>
         </div>
       </PortalToFollowElemContent>
     </PortalToFollowElem>