💄 (textEditor) Fix floating link inputs color in dark mode

baptisteArno · Mar 4, 2024 · 579e407 · 579e407
1 parent 8e20d90
commit 579e407
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/apps/builder/src/features/blocks/bubbles/textBubble/components/plate/LinkFloatingInput.tsx b/apps/builder/src/features/blocks/bubbles/textBubble/components/plate/LinkFloatingInput.tsx
@@ -22,6 +22,7 @@ import {
   InputGroup,
   InputLeftElement,
   Stack,
+  useColorModeValue,
 } from '@chakra-ui/react'
 import { TextInputIcon } from '@/features/blocks/inputs/textInput/components/TextInputIcon'
 
@@ -41,6 +42,7 @@ export interface LinkFloatingToolbarProps {
 }
 
 export function LinkFloatingToolbar({ state }: LinkFloatingToolbarProps) {
+  const bgColor = useColorModeValue('white', 'gray.800')
   const urlInputRef = useRef<HTMLInputElement>(null)
   const insertState = useFloatingLinkInsertState({
     ...state,
@@ -79,12 +81,12 @@ export function LinkFloatingToolbar({ state }: LinkFloatingToolbarProps) {
   const input = (
     <Stack
       w="330px"
-      bgColor="white"
       px="4"
       py="2"
       rounded="md"
       borderWidth={1}
       shadow="md"
+      bgColor={bgColor}
     >
       <InputGroup>
         <InputLeftElement pointerEvents="none">