Merge branch 'feat/theme-switch' into deploy/dev

web/app/(commonLayout)/datasets/Doc.tsx

@@ -121,7 +121,7 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
             </button>
           )}
       </div>
-      <article className={cn('prose-xl prose mx-1 rounded-t-xl bg-background-default px-4 pt-16 sm:mx-12', theme === Theme.dark && 'dark:prose-invert')}>
+      <article className={cn('prose-xl prose mx-1 rounded-t-xl bg-background-default px-4 pt-16 sm:mx-12', theme === Theme.dark && 'prose-invert')}>
         {Template}
       </article>
     </div>

web/app/components/app/create-from-dsl-modal/index.tsx

@@ -262,7 +262,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
           {
             currentTab === CreateFromDSLModalTab.FROM_URL && (
               <div>
-                <div className='system-md-semibold leading6 mb-1'>DSL URL</div>
+                <div className='system-md-semibold mb-1 text-text-secondary'>DSL URL</div>
                 <Input
                   placeholder={t('app.importFromDSLUrlPlaceholder') || ''}
                   value={dslUrlValue}

web/app/components/app/create-from-dsl-modal/uploader.tsx

@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
 import {
   RiDeleteBinLine,
+  RiUploadCloud2Line,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -10,8 +11,7 @@ import { formatFileSize } from '@/utils/format'
 import cn from '@/utils/classnames'
 import { Yaml as YamlIcon } from '@/app/components/base/icons/src/public/files'
 import { ToastContext } from '@/app/components/base/toast'
-import { UploadCloud01 } from '@/app/components/base/icons/src/vender/line/general'
+import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 
 export type Props = {
   file: File | undefined
@@ -102,19 +102,19 @@ const Uploader: FC<Props> = ({
       />
       <div ref={dropRef}>
         {!file && (
-          <div className={cn('flex h-12 items-center rounded-xl border border-dashed border-gray-200 bg-gray-50 text-sm font-normal', dragging && 'border border-[#B2CCFF] bg-[#F5F8FF]')}>
+          <div className={cn('flex h-12 items-center rounded-[10px] border border-dashed border-components-dropzone-border bg-components-dropzone-bg text-sm font-normal', dragging && 'border-components-dropzone-border-accent bg-components-dropzone-bg-accent')}>
             <div className='flex w-full items-center justify-center space-x-2'>
-              <UploadCloud01 className='mr-2 h-6 w-6' />
+              <RiUploadCloud2Line className='h-6 w-6 text-text-tertiary' />
-              <div className='text-gray-500'>
+              <div className='text-text-tertiary'>
                 {t('datasetCreation.stepOne.uploader.button')}
-                <span className='cursor-pointer pl-1 text-[#155eef]' onClick={selectHandle}>{t('datasetDocuments.list.batchModal.browse')}</span>
+                <span className='cursor-pointer pl-1 text-text-accent' onClick={selectHandle}>{t('datasetDocuments.list.batchModal.browse')}</span>
               </div>
             </div>
             {dragging && <div ref={dragRef} className='absolute left-0 top-0 h-full w-full' />}
           </div>
         )}
         {file && (
-          <div className={cn('group flex items-center rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs', 'hover:border-[#B2CCFF] hover:bg-[#F5F8FF]')}>
+          <div className={cn('group flex items-center rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs', ' hover:bg-components-panel-on-panel-item-bg-hover')}>
             <div className='flex items-center justify-center p-3'>
               <YamlIcon className="h-6 w-6 shrink-0" />
             </div>
@@ -126,12 +126,10 @@ const Uploader: FC<Props> = ({
                 <span>{formatFileSize(file.size)}</span>
               </div>
             </div>
-            <div className='hidden items-center group-hover:flex'>
+            <div className='hidden items-center pr-3 group-hover:flex'>
-              <Button onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
+              <ActionButton onClick={removeFile}>
-              <div className='mx-2 h-4 w-px bg-gray-200' />
-              <div className='cursor-pointer p-2' onClick={removeFile}>
                 <RiDeleteBinLine className='h-4 w-4 text-text-tertiary' />
-              </div>
+              </ActionButton>
             </div>
           </div>
         )}

web/app/components/base/icons/assets/vender/line/editor/collapse.svg

@@ -0,0 +1,9 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon L">
+<g id="Vector">
+<path d="M2.66602 11.3333H0.666016L3.33268 8.66667L5.99935 11.3333H3.99935L3.99935 14H2.66602L2.66602 11.3333Z" fill="#354052"/>
+<path d="M2.66602 4.66667L2.66602 2L3.99935 2L3.99935 4.66667L5.99935 4.66667L3.33268 7.33333L0.666016 4.66667L2.66602 4.66667Z" fill="#354052"/>
+<path d="M7.33268 2.66667H13.9993V4H7.33268V2.66667ZM7.33268 12H13.9993V13.3333H7.33268V12ZM5.99935 7.33333H13.9993V8.66667H5.99935V7.33333Z" fill="#354052"/>
+</g>
+</g>
+</svg>

web/app/components/base/icons/src/vender/line/editor/Collapse.json

@@ -0,0 +1,62 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "Icon L"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "g",
+						"attributes": {
+							"id": "Vector"
+						},
+						"children": [
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M2.66602 11.3333H0.666016L3.33268 8.66667L5.99935 11.3333H3.99935L3.99935 14H2.66602L2.66602 11.3333Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M2.66602 4.66667L2.66602 2L3.99935 2L3.99935 4.66667L5.99935 4.66667L3.33268 7.33333L0.666016 4.66667L2.66602 4.66667Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M7.33268 2.66667H13.9993V4H7.33268V2.66667ZM7.33268 12H13.9993V13.3333H7.33268V12ZM5.99935 7.33333H13.9993V8.66667H5.99935V7.33333Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							}
+						]
+					}
+				]
+			}
+		]
+	},
+	"name": "Collapse"
+}

web/app/components/base/icons/src/vender/line/editor/Collapse.tsx

@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Collapse.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'Collapse'
+
+export default Icon

web/app/components/base/icons/src/vender/line/editor/index.ts

@@ -1,5 +1,6 @@
 export { default as AlignLeft } from './AlignLeft'
 export { default as BezierCurve03 } from './BezierCurve03'
+export { default as Collapse } from './Collapse'
 export { default as Colors } from './Colors'
 export { default as ImageIndentLeft } from './ImageIndentLeft'
 export { default as LeftIndent02 } from './LeftIndent02'

web/app/components/base/theme-selector.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  RiCheckLine,
+  RiComputerLine,
+  RiMoonLine,
+  RiSunLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useTheme } from 'next-themes'
+import ActionButton from '@/app/components/base/action-button'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+
+export type Theme = 'light' | 'dark' | 'system'
+
+export default function ThemeSelector() {
+  const { t } = useTranslation()
+  const { theme, setTheme } = useTheme()
+  const [open, setOpen] = useState(false)
+
+  const handleThemeChange = (newTheme: Theme) => {
+    setTheme(newTheme)
+    setOpen(false)
+  }
+
+  const getCurrentIcon = () => {
+    switch (theme) {
+      case 'light': return <RiSunLine className='h-4 w-4 text-text-tertiary' />
+      case 'dark': return <RiMoonLine className='h-4 w-4 text-text-tertiary' />
+      default: return <RiComputerLine className='h-4 w-4 text-text-tertiary' />
+    }
+  }
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-end'
+      offset={{ mainAxis: 6 }}
+    >
+      <PortalToFollowElemTrigger
+        onClick={() => setOpen(!open)}
+      >
+        <ActionButton
+          className={`h-8 w-8 p-[6px] ${open && 'bg-state-base-hover'}`}
+        >
+          {getCurrentIcon()}
+        </ActionButton>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[1000]'>
+        <div className='flex w-[144px] flex-col items-start rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
+          <button
+            className='flex w-full items-center gap-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover'
+            onClick={() => handleThemeChange('light')}
+          >
+            <RiSunLine className='h-4 w-4 text-text-tertiary' />
+            <div className='flex grow items-center justify-start px-1'>
+              <span className='system-md-regular'>{t('common.theme.light')}</span>
+            </div>
+            {theme === 'light' && <div className='flex h-4 w-4 shrink-0 items-center justify-center'>
+              <RiCheckLine className='h-4 w-4 text-text-accent' />
+            </div>}
+          </button>
+          <button
+            className='flex w-full items-center gap-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover'
+            onClick={() => handleThemeChange('dark')}
+          >
+            <RiMoonLine className='h-4 w-4 text-text-tertiary' />
+            <div className='flex grow items-center justify-start px-1'>
+              <span className='system-md-regular'>{t('common.theme.dark')}</span>
+            </div>
+            {theme === 'dark' && <div className='flex h-4 w-4 shrink-0 items-center justify-center'>
+              <RiCheckLine className='h-4 w-4 text-text-accent' />
+            </div>}
+          </button>
+          <button
+            className='flex w-full items-center gap-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover'
+            onClick={() => handleThemeChange('system')}
+          >
+            <RiComputerLine className='h-4 w-4 text-text-tertiary' />
+            <div className='flex grow items-center justify-start px-1'>
+              <span className='system-md-regular'>{t('common.theme.auto')}</span>
+            </div>
+            {theme === 'system' && <div className='flex h-4 w-4 shrink-0 items-center justify-center'>
+              <RiCheckLine className='h-4 w-4 text-text-accent' />
+            </div>}
+          </button>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}

web/app/components/base/theme-switcher.tsx

@@ -0,0 +1,58 @@
+'use client'
+import {
+  RiComputerLine,
+  RiMoonLine,
+  RiSunLine,
+} from '@remixicon/react'
+import { useTheme } from 'next-themes'
+import cn from '@/utils/classnames'
+
+export type Theme = 'light' | 'dark' | 'system'
+
+export default function ThemeSwitcher() {
+  const { theme, setTheme } = useTheme()
+
+  const handleThemeChange = (newTheme: Theme) => {
+    setTheme(newTheme)
+  }
+
+  return (
+    <div className='flex items-center rounded-[10px] bg-components-segmented-control-bg-normal p-0.5'>
+      <div
+        className={cn(
+          'rounded-lg px-2 py-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+          theme === 'system' && 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-sm hover:bg-components-segmented-control-item-active-bg hover:text-text-accent-light-mode-only',
+        )}
+        onClick={() => handleThemeChange('system')}
+      >
+        <div className='p-0.5'>
+          <RiComputerLine className='h-4 w-4' />
+        </div>
+      </div>
+      <div className={cn('h-[14px] w-px bg-transparent', theme === 'dark' && 'bg-divider-regular')}></div>
+      <div
+        className={cn(
+          'rounded-lg px-2 py-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+          theme === 'light' && 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-sm hover:bg-components-segmented-control-item-active-bg hover:text-text-accent-light-mode-only',
+        )}
+        onClick={() => handleThemeChange('light')}
+      >
+        <div className='p-0.5'>
+          <RiSunLine className='h-4 w-4' />
+        </div>
+      </div>
+      <div className={cn('h-[14px] w-px bg-transparent', theme === 'system' && 'bg-divider-regular')}></div>
+      <div
+        className={cn(
+          'rounded-lg px-2 py-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+          theme === 'dark' && 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-sm hover:bg-components-segmented-control-item-active-bg hover:text-text-accent-light-mode-only',
+        )}
+        onClick={() => handleThemeChange('dark')}
+      >
+        <div className='p-0.5'>
+          <RiMoonLine className='h-4 w-4' />
+        </div>
+      </div>
+    </div>
+  )
+}

web/app/components/datasets/documents/detail/completed/display-toggle.tsx

@@ -2,7 +2,7 @@ import React, { type FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiLineHeight } from '@remixicon/react'
 import Tooltip from '@/app/components/base/tooltip'
-import { Collapse } from '@/app/components/base/icons/src/public/knowledge'
+import { Collapse } from '@/app/components/base/icons/src/vender/line/editor'
 
 type DisplayToggleProps = {
   isCollapsed: boolean

web/app/components/develop/doc.tsx

@@ -121,7 +121,7 @@ const Doc = ({ appDetail }: IDocProps) => {
             </button>
           )}
       </div>
-      <article className={cn('prose-xl prose', theme === Theme.dark && 'dark:prose-invert')} >
+      <article className={cn('prose-xl prose', theme === Theme.dark && 'prose-invert')} >
         {(appDetail?.mode === 'chat' || appDetail?.mode === 'agent-chat') && (
           (() => {
             switch (locale) {

web/app/components/develop/secret-key/input-copy.tsx

@@ -2,20 +2,18 @@
 import React, { useEffect, useState } from 'react'
 import copy from 'copy-to-clipboard'
 import { t } from 'i18next'
-import s from './style.module.css'
 import Tooltip from '@/app/components/base/tooltip'
+import CopyFeedback from '@/app/components/base/copy-feedback'
 
 type IInputCopyProps = {
   value?: string
   className?: string
-  readOnly?: boolean
   children?: React.ReactNode
 }
 
 const InputCopy = ({
   value = '',
   className,
-  readOnly = true,
   children,
 }: IInputCopyProps) => {
   const [isCopied, setIsCopied] = useState(false)
@@ -45,23 +43,12 @@ const InputCopy = ({
               popupContent={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
               position='bottom'
             >
-              {value}
+              <span className='text-text-secondary'>{value}</span>
             </Tooltip>
           </div>
         </div>
-        <div className="h-4 shrink-0 border bg-divider-regular" />
+        <div className="h-4 w-px shrink-0 bg-divider-regular" />
-        <Tooltip
+        <div className='mx-1'><CopyFeedback content={value} /></div>
-          popupContent={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
-          position='bottom'
-        >
-          <div className="shrink-0 px-0.5">
-            <div className={`box-border flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover ${s.copyIcon} ${isCopied ? s.copied : ''}`} onClick={() => {
-              copy(value)
-              setIsCopied(true)
-            }}>
-            </div>
-          </div>
-        </Tooltip>
       </div>
     </div>
   )

web/app/components/explore/category.tsx

@@ -31,8 +31,8 @@ const Category: FC<ICategoryProps> = ({
   const isAllCategories = !list.includes(value as AppCategory) || value === allCategoriesEn
 
   const itemClassName = (isSelected: boolean) => cn(
-    'flex h-[32px] cursor-pointer items-center rounded-lg border-[0.5px] border-transparent px-3 py-[7px] font-medium leading-[18px] text-gray-700 hover:bg-gray-200',
+    'flex h-[32px] cursor-pointer items-center rounded-lg border-[0.5px] border-transparent px-3 py-[7px] font-medium leading-[18px] text-text-tertiary hover:bg-components-main-nav-nav-button-bg-active',
-    isSelected && 'border-gray-200 bg-white text-primary-600 shadow-xs hover:bg-white',
+    isSelected && 'border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active text-components-main-nav-nav-button-text-active shadow-xs',
   )
 
   return (
@@ -50,7 +50,7 @@ const Category: FC<ICategoryProps> = ({
           className={itemClassName(name === value)}
           onClick={() => onChange(name)}
         >
-          {categoryI18n[name] ? t(`explore.category.${name}`) : name}
+          {(categoryI18n as any)[name] ? t(`explore.category.${name}`) : name}
         </div>
       ))}
     </div>

web/app/components/header/account-dropdown/index.tsx

@@ -14,6 +14,7 @@ import {
   RiMap2Line,
   RiSettings3Line,
   RiStarLine,
+  RiTShirt2Line,
 } from '@remixicon/react'
 import Link from 'next/link'
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
@@ -25,6 +26,7 @@ import Compliance from './compliance'
 import PremiumBadge from '@/app/components/base/premium-badge'
 import { useGetDocLanguage } from '@/context/i18n'
 import Avatar from '@/app/components/base/avatar'
+import ThemeSwitcher from '@/app/components/base/theme-switcher'
 import { logout } from '@/service/common'
 import AppContext, { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
@@ -82,8 +84,8 @@ export default function AppSelector() {
                 <MenuItems
                   className="
                     absolute right-0 mt-1.5 w-60 max-w-80
-                    origin-top-right divide-y divide-divider-subtle rounded-xl bg-components-panel-bg-blur
+                    origin-top-right divide-y divide-divider-subtle rounded-xl bg-components-panel-bg-blur shadow-lg
-                    shadow-lg focus:outline-none
+                    backdrop-blur-sm focus:outline-none
                   "
                 >
                   <MenuItem disabled>
@@ -186,6 +188,15 @@ export default function AppSelector() {
                       )
                     }
                   </div>
+                  <MenuItem disabled>
+                    <div className='p-1'>
+                      <div className={cn(itemClassName, 'hover:bg-transparent')}>
+                        <RiTShirt2Line className='size-4 shrink-0 text-text-tertiary' />
+                        <div className='system-md-regular grow px-1 text-text-secondary'>{t('common.theme.theme')}</div>
+                        <ThemeSwitcher/>
+                      </div>
+                    </div>
+                  </MenuItem>
                   <MenuItem>
                     <div className='p-1' onClick={() => handleLogout()}>
                       <div

web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx

@@ -183,7 +183,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
           <>
             {isString && (
               <Input
-                className={cn(inputsIsFocus[variable] ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'rounded-lg border px-3 py-[6px]')}
+                className={cn(inputsIsFocus[variable] ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'rounded-lg border px-3 py-[6px]')}
                 value={varInput?.value as string || ''}
                 onChange={handleMixedTypeChange(variable)}
                 nodesOutputVars={nodeOutputVars}

web/app/components/share/text-generation/menu-dropdown.tsx

@@ -12,6 +12,8 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import Divider from '@/app/components/base/divider'
+import ThemeSwitcher from '@/app/components/base/theme-switcher'
 import InfoModal from './info-modal'
 import type { SiteInfo } from '@/models/share'
 import cn from '@/utils/classnames'
@@ -59,6 +61,13 @@ const MenuDropdown: FC<Props> = ({
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-50'>
           <div className='w-[224px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm'>
+            <div className='p-1'>
+              <div className={cn('system-md-regular flex cursor-pointer items-center rounded-lg py-1.5 pl-3 pr-2 text-text-secondary')}>
+                <div className='grow'>{t('common.theme.theme')}</div>
+                <ThemeSwitcher/>
+              </div>
+            </div>
+            <Divider type='horizontal' className='my-0' />
             <div className='p-1'>
               {data?.privacy_policy && (
                 <a href={data.privacy_policy} target='_blank' className='system-md-regular flex cursor-pointer items-center rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'>

web/app/components/workflow/nodes/end/node.tsx

@@ -52,7 +52,7 @@ const Node: FC<NodeProps<EndNodeType>> = ({
           isChatMode,
         })
         return (
-          <div key={index} className='flex h-6 items-center justify-between space-x-1 rounded-md  bg-components-badge-white-to-dark px-1 text-xs font-normal text-text-secondary'>
+          <div key={index} className='flex h-6 items-center justify-between space-x-1 rounded-md  bg-workflow-block-parma-bg px-1 text-xs font-normal text-text-secondary'>
             <div className='flex items-center text-xs font-medium text-text-tertiary'>
               {!isEnv && !isChatVar && (
                 <>

web/app/components/workflow/nodes/tool/components/input-var-list.tsx

@@ -179,7 +179,7 @@ const InputVarList: FC<Props> = ({
               </div>
               {isString && (
                 <Input
-                  className={cn(inputsIsFocus[variable] ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'rounded-lg border px-3 py-[6px]')}
+                  className={cn(inputsIsFocus[variable] ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'rounded-lg border px-3 py-[6px]')}
                   value={varInput?.value as string || ''}
                   onChange={handleMixedTypeChange(variable)}
                   readOnly={readOnly}

web/app/layout.tsx

@@ -63,8 +63,7 @@ const LocaleLayout = async ({
             <TanstackQueryIniter>
               <ThemeProvider
                 attribute='data-theme'
-                forcedTheme='light'
+                defaultTheme='system'
-                defaultTheme='light' // TODO: change to 'system' when dark mode ready
                 enableSystem
                 disableTransitionOnChange
               >

web/app/signin/_header.tsx

@@ -2,6 +2,8 @@
 import React from 'react'
 import { useContext } from 'use-context-selector'
 import Select from '@/app/components/base/select/locale'
+import ThemeSelector from '@/app/components/base/theme-selector'
+import Divider from '@/app/components/base/divider'
 import { languages } from '@/i18n/language'
 import type { Locale } from '@/i18n'
 import I18n from '@/context/i18n'
@@ -10,17 +12,22 @@ import LogoSite from '@/app/components/base/logo/logo-site'
 const Header = () => {
   const { locale, setLocaleOnClient } = useContext(I18n)
 
-  return <div className='flex w-full items-center justify-between p-6'>
+  return (
-    <LogoSite />
+    <div className='flex w-full items-center justify-between p-6'>
-    <Select
+      <LogoSite />
-      value={locale}
+      <div className='flex items-center gap-1'>
-      items={languages.filter(item => item.supported)}
+        <Select
-      onChange={(value) => {
+          value={locale}
-        setLocaleOnClient(value as Locale)
+          items={languages.filter(item => item.supported)}
-      }}
+          onChange={(value) => {
-    />
+            setLocaleOnClient(value as Locale)
-
+          }}
-  </div>
+        />
+        <Divider type='vertical' className='mx-0 ml-2 h-4' />
+        <ThemeSelector />
+      </div>
+    </div>
+  )
 }
 
 export default Header

web/i18n/en-US/common.ts

@@ -1,4 +1,10 @@
 const translation = {
+  theme: {
+    theme: 'Theme',
+    light: 'light',
+    dark: 'dark',
+    auto: 'system',
+  },
   api: {
     success: 'Success',
     actionSuccess: 'Action succeeded',

web/i18n/ja-JP/common.ts

@@ -1,4 +1,10 @@
 const translation = {
+  theme: {
+    theme: 'テーマ',
+    light: '明るい',
+    dark: '暗い',
+    auto: 'システム',
+  },
   api: {
     success: '成功',
     actionSuccess: 'アクションが成功しました',

web/i18n/zh-Hans/common.ts

@@ -1,4 +1,10 @@
 const translation = {
+  theme: {
+    theme: '主题',
+    light: '浅色',
+    dark: '深色',
+    auto: '自动',
+  },
   api: {
     success: '成功',
     actionSuccess: '操作成功',