reopening discussion: Custom background for Boards

[thefeiter]

It would be great, to have a customizable background for Boards.
By this I mean for example setting a custom background color for a board or even an image. I think this is a Feature, that Trello offers.
In my application it would help users to differentiate between Boards with similar topics. Having a custom background makes it easy to see, which Board you are working on.

Is your feature request related to a problem? Please describe.
Its not a problem, rather a UX improvement.

Describe the solution you'd like
A setting in the Board details which allows to set a custom background color or even lets the user upload or choose an image to be used (maybe blurred) as the background.

Describe alternatives you've considered
The only ability to mark boards with colors is the small circle next to the boards name, which is not very prominent...
I tried fiddling with some CSS, but that does not really work out, since it interferes with shadows and other graphic effects on the existing UI

Additional context
This is a duplicate of Issue #1051 which is already quite old and closed for being stale. I would like to open the discussion on this Feature again.

[thefeiter]

My current workaround looks like this:

Javascript loaded via jsloader plugin:

function adj_bg_color(board_url) {
    if (/apps\/deck\/board\/\d+$/.test(window.location.href)) {

        var url_end = window.location.href.split("apps/deck/board/");
        var board_id = url_end[url_end.length - 1].split("/")[0].split("?")[0].split("#")[0]

        $.getJSON(window.location.protocol + "//" + window.location.host + "/apps/deck/boards/" + board_id, function (data) {

            var interval = setInterval(() => {
                if(window.location.href != board_url){//url changed meanwhile
                    clearInterval(interval);
                }
                if (document.querySelector('.board') != null) {
                    document.querySelector('.board').setAttribute("style", `background-color:#${data.color}`);
                    clearInterval(interval);
                }
            }, 100);
        });
    }
}

if (window.location.href.includes("apps/deck")) {

    adj_bg_color(window.location.href);

    let prevUrl = undefined;
    setInterval(() => {
        const currUrl = window.location.href;
        if (currUrl != prevUrl) {
            // URL changed
            prevUrl = currUrl;
            adj_bg_color(currUrl);
        }
    }, 100);

}

Custom CSS:

.stack__header::before{
    background-image: none !important;

}

.stack__header{
    border-radius: 15px;
    background: var(--color-main-background);
    margin: 2px;
}