It sounds like you’ve spent a lot of time trying to solve an issue without using CKEditor’s built-in props, and after some frustration, you found an alternative approach. Based on the CKEditor React guide here, you may want to share the method you found or any specific problem you’re encountering. I’d be happy to help you refine your solution or suggest alternatives if needed

// eslint-disable-next-line import/no-extraneous-dependencies
import 'ckeditor5/ckeditor5.css';

// eslint-disable-next-line import/no-extraneous-dependencies
import { CKEditor } from '@ckeditor/ckeditor5-react';
// eslint-disable-next-line import/no-extraneous-dependencies
import {
  Alignment,
  AutoLink,
  BlockQuote,
  Bold,
  ClassicEditor,
  Essentials,
  FontColor,
  FontSize,
  Heading,
  Highlight,
  Image,
  ImageCaption,
  ImageStyle,
  ImageToolbar,
  ImageUpload,
  Indent,
  Italic,
  Link,
  List,
  MediaEmbed,
  Mention,
  Paragraph,
  PasteFromOffice,
  RemoveFormat,
  Strikethrough,
  Table,
  TableToolbar,
  TextTransformation,
  Underline,
  Undo,
} from 'ckeditor5';
import React, { useEffect } from 'react';

interface CustomEditorInterface {
  value: string;
  onValueChange: (e: any) => void;
  toolbarItems: any;
  theme?: string;
  isDisable?: boolean;
  editorKey?: string;
}

const CustomEditor = ({
  toolbarItems,
  value,
  onValueChange,
  theme,
  isDisable = false,
  editorKey = 'defaultKey',
}: CustomEditorInterface) => {
  useEffect(() => {
    // Delay to ensure CKEditor is fully mounted before selecting DOM elements

    setTimeout(() => {
      const editorElementtoolbar: any =
        document.getElementsByClassName('ck-toolbar');
      const editorElement: any =
        document.getElementsByClassName('ck-editor__main');

      if (editorElement && editorElementtoolbar) {
        if (theme === 'dark') {
          // Apply dark mode classes
          Array.from(editorElementtoolbar).forEach((element: any) => {
            element.classList.add('ck-editor__editable_bg_color_darkmode');
          });

          Array.from(editorElement).forEach((element: any) => {
            element.classList.add('ck-editor__editable_bg_color_darkmode');
          });
        } else {
          // Apply light mode classes
          Array.from(editorElementtoolbar).forEach((element: any) => {
            element.classList.add('ck-editor__editable_bg_color_lightmode');
          });

          Array.from(editorElement).forEach((element: any) => {
            element.classList.add('ck-editor__editable_bg_color_lightmode');
          });
        }
      }
    }, 500);
  }, [theme, editorKey]); // Only run when the theme changes

  return (
    <CKEditor
      editor={ClassicEditor}
      key={editorKey}
      data={value}
      disabled={isDisable}
      config={{
        toolbar: {
          items: toolbarItems,
        },
        plugins: [
          Alignment,
          AutoLink,
          BlockQuote,
          Bold,
          Essentials,
          FontColor,
          FontSize,
          Heading,
          Highlight,
          Image,
          ImageCaption,
          ImageStyle,
          ImageToolbar,
          ImageUpload,
          Indent,
          Italic,
          Link,
          List,
          MediaEmbed,
          Mention,
          Paragraph,
          PasteFromOffice,
          RemoveFormat,
          Strikethrough,
          Table,
          TableToolbar,
          TextTransformation,
          Underline,
          Undo,
        ],
        list: {
          properties: {
            styles: true,
            startIndex: true,
            reversed: true,
          },
        },
        image: {
          toolbar: [
            'imageStyle:inline',
            'imageStyle:block',
            'imageStyle:side',
            '|',
            'toggleImageCaption',
            'imageTextAlternative',
          ],
        },
        table: {
          contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'],
        },
      }}
      onChange={(_: any, editor: any) => {
        const data = editor.getData();
        onValueChange(data);
      }}
    />
  );
};

export default CustomEditor;
```;

const editorToolbar = [
  "undo",
  "redo",
  "|",
  "heading",
  "|",
  "bold",
  "italic",
  "underline",
  "strikethrough",
  "|",
  "fontSize",
  // 'fontColor',
  // 'highlight',
  "|",
  "alignment",
  "|",
  "numberedList",
  "bulletedList",
  "|",
  "indent",
  "outdent",
  "|",
  "link",
  "blockQuote",
  // 'insertTable',
  // 'imageUpload',
  // 'mediaEmbed',
  "|",
  "removeFormat",
];

    <CustomEditor
            value={
              questionInstructions.current !== ''
                ? questionInstructions.current
                : activeDetailsQuestion[0]?.optionalQuestionsInstruction
            }
            toolbarItems={editorToolbar}
            onValueChange={(e: any) => {
              // eslint-disable-next-line no-param-reassign
              questionInstructions.current = e;
            }}
            theme={currentTheme === 'dark' ? 'dark' : 'light'}
          />

this is css 

.ck-editor__editable_bg_color_darkmode .ck-editor__editable {
background-color: rgb(20, 20, 20) !important;
color: rgb(255, 255, 255) !important;
}
.ck-editor__editable_bg_color_darkmode, .ck-editor__editable_bg_color_darkmode .ck-toolbar__items button {
background-color: rgb(20, 20, 20) !important;
color: rgb(255, 255, 255) !important;
}
.ck.ck-button.ck-on
{
color: blue !important;
}
.ck-editor__editable_bg_color_lightmode .ck-editor__editable {
background-color: rgb(255, 255, 255) !important;
color: rgb(0, 0, 0) !important;
}
.ck-sticky-panel__content
{
border-radius: 6px 6px 0px 0px !important;
padding: 1px !important;
}

.ck-editor__editable
{
border-radius: 0px 0px 6px 6px !important;
}

dark mode 
[enter image description here](https://i.sstatic.net/UhI5YsED.png)
light mode 
[enter image description here](https://i.sstatic.net/tRvU5tyf.png)