support for django ckeditor 5

[tushortz]

At the moment Django CK Editor 5 isn't following the colour scheme

[lukasvinclav]

For third party application integration you can contact us here https://unfoldadmin.com/

[Jascha57]

const htmlElement = document.querySelector("html");

// Variable to store default (light mode) CKEditor color variables
let defaultCKEditorColors = {};

// Function to save the current CKEditor color variables as the default (light mode)
function saveDefaultCKEditorColors() {
    defaultCKEditorColors = {
        background: getComputedStyle(document.documentElement).getPropertyValue('--ck-color-base-background'),
        text: getComputedStyle(document.documentElement).getPropertyValue('--ck-color-text'),
        border: getComputedStyle(document.documentElement).getPropertyValue('--ck-color-base-border'),
        tooltipText: getComputedStyle(document.documentElement).getPropertyValue('--ck-color-tooltip-text'),
        buttonHoverBackground: getComputedStyle(document.documentElement).getPropertyValue('--ck-color-button-default-hover-background'),
        splitButtonHoverBackground: getComputedStyle(document.documentElement).getPropertyValue('--ck-color-split-button-hover-background'),
        buttonOnBackground: getComputedStyle(document.documentElement).getPropertyValue('--ck-color-button-on-background'),
        buttonOnHoverBackground: getComputedStyle(document.documentElement).getPropertyValue('--ck-color-button-on-hover-background'),
        listButtonOnBackground: getComputedStyle(document.documentElement).getPropertyValue('--ck-color-list-button-on-background'),
        listButtonOnText: getComputedStyle(document.documentElement).getPropertyValue('--ck-color-list-button-on-text')
    };
}

// Function to set CKEditor color variables based on the current mode
function setCKEditorColors() {
    if (htmlElement.classList.contains("dark")) {
        // BACKGROUND --ck-color-base-background
        document.documentElement.style.setProperty('--ck-color-base-background', '#111827');
        // TEXT --ck-color-text
        document.documentElement.style.setProperty('--ck-color-text', '#ffffff');
        // BORDER --ck-color-base-border
        document.documentElement.style.setProperty('--ck-color-base-border', '#323b4b');
        // TOOLTIP TEXT COLOR --ck-color-tooltip-text
        document.documentElement.style.setProperty('--ck-color-tooltip-text', '#ffffff');
        // ICON HOVER --ck-color-button-default-hover-background
        document.documentElement.style.setProperty('--ck-color-button-default-hover-background', '#323b4b');
        // DROPDOWN NEXT TO BUTTON --ck-color-split-button-hover-background
        document.documentElement.style.setProperty('--ck-color-split-button-hover-background', '#323b4b');
        // ACTIVE BUTTON --ck-color-button-on-background
        document.documentElement.style.setProperty('--ck-color-button-on-background', '#323b4b');
        // ACTIVE BUTTON HOVER --ck-color-button-on-hover-background
        document.documentElement.style.setProperty('--ck-color-button-on-hover-background', '#3a3838');
        // LIST SELECTED BACKGROUND --ck-color-list-button-on-background
        document.documentElement.style.setProperty('--ck-color-list-button-on-background', '#323b4b');
        // LIST SELECTED COLOR --ck-color-list-button-on-text
        document.documentElement.style.setProperty('--ck-color-list-button-on-text', '#ffffff');

    } else {
        // Restore the saved default (light mode) colors
        document.documentElement.style.setProperty('--ck-color-base-background', defaultCKEditorColors.background);
        document.documentElement.style.setProperty('--ck-color-text', defaultCKEditorColors.text);
        document.documentElement.style.setProperty('--ck-color-base-border', defaultCKEditorColors.border);
        document.documentElement.style.setProperty('--ck-color-tooltip-text', defaultCKEditorColors.tooltipText);
        document.documentElement.style.setProperty('--ck-color-button-default-hover-background', defaultCKEditorColors.buttonHoverBackground);
        document.documentElement.style.setProperty('--ck-color-split-button-hover-background', defaultCKEditorColors.splitButtonHoverBackground);
        document.documentElement.style.setProperty('--ck-color-button-on-background', defaultCKEditorColors.buttonOnBackground);
        document.documentElement.style.setProperty('--ck-color-button-on-hover-background', defaultCKEditorColors.buttonOnHoverBackground);
        document.documentElement.style.setProperty('--ck-color-list-button-on-background', defaultCKEditorColors.listButtonOnBackground);
        document.documentElement.style.setProperty('--ck-color-list-button-on-text', defaultCKEditorColors.listButtonOnText);
    }
}

// Function to check the current mode and log it
function checkDarkMode() {
    setCKEditorColors();
}

// Create a MutationObserver to listen for changes to the class attribute
const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        if (mutation.attributeName === "class") {
            checkDarkMode();  // Call the function to log the current mode and update colors
        }
    });
});

// Start observing the html element for attribute changes
observer.observe(htmlElement, {
    attributes: true,  // Observe attribute changes
});

// Initial check on page load
saveDefaultCKEditorColors();
checkDarkMode();

This is my JS code that I input with the Unfold config. Basically, found the variables for the colors that CK Editor uses and used the Unfold colors. This is not the full list, just what I use so might be useful for starting off your own config.

I apologize if this marks the issue as not closed. Just wanted to share a simple solution to a problem.

"STYLES": [
        lambda request: static("css/unfold/ckeditor.css"),
    ],

Including the JS as per the Unfold documentation.