I’ve been trying to get custom.css to handle this by using colorthief (https://lokeshdhakar.com/projects/color-thief/) to determine if the image is light or dark and to set a contrasting color palette.

I don’t have a lot experience with CSS/JS should this be doable?

Here is the code I have tried to date but the @import on the custom.css gets an error, “This page failed to load a stylesheet from a URL.”
This is currently aimed at MMM-CalendarExt3 which is most used for me.

/* custom.css code
@import url('https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.2/color-thief.min.js');

body::after {
  content: '';
  display: none;
  /* Ensure the external script is loaded before running the adaptiveFontColor.js script */
  background-image: url('modules/MMM-GooglePhotos/adaptiveFontColor.js');
}
// adaptiveFontColor.js

function isColorDark(rgbColor) {
    const [r, g, b] = rgbColor;
    // Calculate luminance
    const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
    return luminance < 128;
}

function applyAdaptiveFontColor(imageElement, targetElements) {
    const colorThief = new ColorThief();
    const dominantColor = colorThief.getColor(imageElement);
    console.log('Dominant Color:', dominantColor); // Log the dominant color
    const isDark = isColorDark(dominantColor);

    const fontColor = isDark ? 'white' : 'black';
    const textShadow = isDark ? '0 0 5px rgba(0,0,0,0.8)' : '0 0 5px rgba(255,255,255,0.8)';

    console.log('Font Color:', fontColor); // Log the font color
    console.log('Text Shadow:', textShadow); // Log the text shadow

    targetElements.forEach(element => {
        element.style.color = fontColor;
        element.style.textShadow = textShadow;
        console.log('Applied styles to:', element); // Log the element being styled
    });
}

function setupObserver(imageSelector, targetSelector) {
    const imageElement = document.querySelector(imageSelector);
    const targetElements = document.querySelectorAll(targetSelector);

    console.log('Image Element:', imageElement); // Log the image element
    console.log('Target Elements:', targetElements); // Log the target elements

    if (imageElement) {
        const observer = new MutationObserver((mutations) => {
            console.log('Mutation observed:', mutations); // Log mutations
            if (imageElement.complete) {
                applyAdaptiveFontColor(imageElement, targetElements);
                console.log('Image complete');
            } else {
                imageElement.addEventListener('load', () => {
                    applyAdaptiveFontColor(imageElement, targetElements);
                    console.log('Image loaded');
                });
            }
        });

        observer.observe(imageElement, {
            attributes: true,
            attributeFilter: ['src']
        });

        // Initial check in case the image is already loaded
        if (imageElement.complete) {
            applyAdaptiveFontColor(imageElement, targetElements);
            console.log('Initial image complete');
        } else {
            imageElement.addEventListener('load', () => {
                applyAdaptiveFontColor(imageElement, targetElements);
                console.log('Initial image loaded');
            });
        }
    } else {
        console.log('Image element not found with selector:', imageSelector);
    }
}

// Wait for the document to load
window.addEventListener('load', function() {
    console.log('Document loaded'); // Log document load event
    const imageSelector = '#GPHOTO_CURRENT'; // Updated selector for the image
    const targetSelector = '.CX3A .event .headline'; // Adjusted selector for calendar events

    setupObserver(imageSelector, targetSelector);
});

Any help would be appreciated.