Peertube: Ability to set a custom logo to override the default logo

[McFlat]

There needs to be a way to set a custom logo and favicon, just like setting custom CSS and custom JavaScript.

Admins may want a clean way to override the default logo and favicon, instead of using JavaScript or CSS to change it.

Some people may not like the defaults and will use JavaScript or CSS to override these, but it's not really a clean way to do this, considering there is a flicker of the default logo before the browser process the CSS or JavaScript which may override it.

[scanlime]

Agree that this would be a great config option to add!

Fwiw, I've been using this snippet of CSS to override the logo and haven't noticed any ill effects other than a slightly larger HTML file,

#peertube-title .icon.icon-logo {
    width: 50px !important;
    height: 24px !important;
    background: url("data:image/svg+xml;base64,PD94...dmc+Cg==") no-repeat !important;
}

Tune the width/height to taste, and the logo was originally SVG but bitmap images are likely fine here too.

[McFlat]

I think the .icon-logo will mostly always have to be 24px, but the width can vary. Here is the custom styles I've had to apply in order to make it show up on my end without any flicker side effect.

Would be better if I didn't have to do it this way at all, seems kind of funky.

CSS for the logo.

.logo-light {
    background: url(/client/assets/images/36px-light.svg);
    background-size: 24px;
    margin-right: 6px;
    margin-top: 6px;
}
.logo-dark {
    background: url(/client/assets/images/36px-dark.svg);
    background-size: 24px;
    margin-right: 6px;
    margin-top: 6px;
}

I'm sure would probably be better to use the theme name in the localStorage rather than comparing to the color #fff but that's how I have it for now.

JavaScript for the logo and favicon.

if (getComputedStyle(document.body).getPropertyValue('--mainBackgroundColor') === '#fff') {
    var theme = 'light';
} else {
    var theme = 'dark';
}

(function() {
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = '/client/assets/images/36px-' + theme + '.png';
    document.getElementsByTagName('head')[0].appendChild(link);
})();
document.getElementById('peertube-title').getElementsByTagName('span')[0].setAttribute('class', 'icon logo-' + theme);

[Chocobozzz]

For the favicon there is already an issue: https://github.com/Chocobozzz/PeerTube/issues/1043

[EndeavourAccuracy]

In some cases, the replacement logo will include the instance name in a specific font.
This would mean the custom logo would need to override not just the default logo but also the instance name.

[quentinDupont]

I think the .icon-logo will mostly always have to be 24px, but the width can vary. Here is the custom styles I've had to apply in order to make it show up on my end without any flicker side effect.

Would be better if I didn't have to do it this way at all, seems kind of funky.

CSS for the logo.

.logo-light {
    background: url(/client/assets/images/36px-light.svg);
    background-size: 24px;
    margin-right: 6px;
    margin-top: 6px;
}
.logo-dark {
    background: url(/client/assets/images/36px-dark.svg);
    background-size: 24px;
    margin-right: 6px;
    margin-top: 6px;
}

I'm sure would probably be better to use the theme name in the localStorage rather than comparing to the color #fff but that's how I have it for now.

JavaScript for the logo and favicon.

if (getComputedStyle(document.body).getPropertyValue('--mainBackgroundColor') === '#fff') {
    var theme = 'light';
} else {
    var theme = 'dark';
}

(function() {
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = '/client/assets/images/36px-' + theme + '.png';
    document.getElementsByTagName('head')[0].appendChild(link);
})();
document.getElementById('peertube-title').getElementsByTagName('span')[0].setAttribute('class', 'icon logo-' + theme);

Hello !
I don't find where to store my new logo image with this CSS, can you help me ?
I'm in versions 1.3.1

[quentinDupont]

Ok well, easier for me because i didn't want to change according to dark theme, so my JS :

document.getElementById('peertube-title').getElementsByTagName('span')[0].setAttribute('class', 'icon logo');

my CSS

#custom-css .logo {
    background-image: url(/client/assets/images/logo.svg);

and i just change logo.svg in /var/www/peertube/peertube-latest/client/dist/assets/images with my logo

[robinkooli]

Now we have a plugin and theme system, so better to add a custom logo through there.

[quentinDupont]

Wooo ! We're gonna see this in the next release ?

[robinkooli]

Nightly: http://builds.joinpeertube.org/nightly/

[Chocobozzz]

Here is a plugin that changes the logo/favicon: https://framagit.org/framasoft/peertube/official-plugins/tree/master/peertube-plugin-logo-framasoft (enabled on https://peertube2.cpy.re/)

Update the logo with CSS, and the favicon with JS.

Wooo ! We're gonna see this in the next release ?

Yep, in 1.4