Peertube: Ability to set main colors and fonts to override the default colors and fonts

[McFlat]

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

Admins may want a clean way to override the default colors, instead of using JavaScript or CSS to change them.

body {
  /*** theme ***/
  // now beware node-sass requires interpolation
  // for css custom properties #{$var}
  --mainColor: #{$orange-color};
  --mainHoverColor: #{$orange-hoover-color};
  --mainBackgroundColor: #{$bg-color};
  --mainForegroundColor: #{$fg-color};
  --menuBackgroundColor: #{$menu-background};
  --menuForegroundColor: #{$menu-color};
  --submenuColor: #{$sub-menu-color};
  --inputColor: #{$input-background-color};
  --inputPlaceholderColor: #{$input-placeholder-color};

  font-family: $main-fonts;
  font-weight: $font-regular;
  color: var(--mainForegroundColor);
  font-size: 14px;
}

Would be nice to allow admins to modify the mainColor and mainHoverColor, etc.

[McFlat]

Just like with most other open-source software, the admins that download the code and modify it to fit their needs they have ability to modify the look and feel of the site to fit their needs. Only way that a user can see what's under the hood is if view-source to see any kind of details.

[McFlat]

Here is the custom CSS I'm having to apply in order to change the main color. Kind of funky, but it works, I wish there was a better way without modifying to core sass styles and build to achieve it.

document.body.style.setProperty('--mainColor', '#E8252D');
document.body.style.setProperty('--mainHoverColor', '#B52325');

[Chocobozzz]

If you want to override variables, it should be

body#custom-css {
  --mainColor: #E8252D;
}

etc

We should improve the help tooltip

[McFlat]

But does that mean I have to override them in the sass/include/_variables.scss and then compile those assets?

[Chocobozzz]

Oup's sorry I edited my comment

[rigelk]

@McFlat no, that can be done in the custom CSS box in the administration menu, in the advanced settings.

[McFlat]

Ok cool, yeah that would be nice if can be done in administration. I'm thinking that the advanced settings is starting to get rather populated with lots of different things, like transcoding and styles, perhaps we can extract the styling (JS, CSS and any colors, fonts, logos) into a "Styles" tab, then keep the transcoding in the advanced tab and add more things to the advanced tab later as they come up.

[Chocobozzz]

Documented in https://framagit.org/framasoft/peertube/documentation/commit/4359d9ae9cc0719e33b19eef97f028e76c086b2f