diff --git a/packages/react-sdk-components/src/components/designSystemExtension/RichTextEditor/RichTextEditor.tsx b/packages/react-sdk-components/src/components/designSystemExtension/RichTextEditor/RichTextEditor.tsx index 0e9d187f..17855ff2 100644 --- a/packages/react-sdk-components/src/components/designSystemExtension/RichTextEditor/RichTextEditor.tsx +++ b/packages/react-sdk-components/src/components/designSystemExtension/RichTextEditor/RichTextEditor.tsx @@ -2,7 +2,6 @@ import React, { forwardRef } from 'react'; import { Editor } from '@tinymce/tinymce-react'; import { FormControl, FormHelperText, InputLabel, useTheme } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; - import { useAfterInitialEffect, useConsolidatedRef, useUID } from '../../../hooks'; const useStyles = makeStyles(theme => ({ @@ -88,7 +87,7 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP initialValue={defaultValue} disabled={disabled} init={{ - skin: 'oxide-dark', // or 'oxide' for light theme + skin: theme.palette.mode === 'dark' ? 'oxide-dark' : 'oxide', // ...other TinyMCE config... content_style: ` body { @@ -110,6 +109,10 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP font-size: 1em; font-family: inherit; } + .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before { + color: ${theme.palette.text.secondary}; + opacity: 0.7; + } /* Add more styles as needed */ `, placeholder, diff --git a/packages/react-sdk-components/src/theme.ts b/packages/react-sdk-components/src/theme.ts index 8159b327..957c5c6d 100644 --- a/packages/react-sdk-components/src/theme.ts +++ b/packages/react-sdk-components/src/theme.ts @@ -247,7 +247,7 @@ const darkTheme = createTheme({ }, background: { // default: 'radial-gradient(178.62% 112% at 50% -12%, #0B0F2A 69.96%, #111951 89.19%)', - paper: 'rgba(255, 255, 255, 0.1)' // card-bg + paper: '#18132c' }, text: { primary: '#e0e0e0', // text-light