July 25, 2022 by Reion

Cutefish Menu Bar Chameleon

A new feature introduced in the macOS Big Sur version of the top menu bar is that the menu bar background color adapts to the desktop wallpaper for a more integrated effect than before.

The actual effect is more than just making the background transparent + blurred, it will extract the theme color from the top area of the wallpaper image.

Implementation method

Add up all the rgb values in the image data and divide them by the area of the image to find the average.

QImage img("wallpaper_file_name.jpg");
QSize size = img.size();

long long sumR = 0, sumG = 0, sumB = 0;
int measureArea = size.width() * size.height();

// Iterate over each coordinate of the image
for (int y = 0; y < size.height(); ++y) {
    QRgb *line = (QRgb *)img.scanLine(y);
    
    for (int x = 0; x < size.width(); ++x) {
        sumR += qRed(line[x]);
        sumG += qGreen(line[x]);
        sumB += qBlue(line[x]);
    }
}

sumR /= measureArea;
sumG /= measureArea;
sumB /= measureArea;

QColor themeColor = QColor(sumR, sumG, sumB);

Font color adaptation to background scheme:

(r * 0.299 + g * 0.587 + b * 0.114) > 186 ? "black" : "white"

Showcase