Help with Custom Skin in V3

[baris]

You create a new skin and define all the overrides you want. These values override the bootstrap variables.

Refer to bootstrap documentation and their _variables.scss file for things you can override.

[Teemberland]

@baris great! Thanks!

[Teemberland]

@baris I tried creating a custom skin and tried to override $primary like in your example. But I ended up with a broken theme? It looks like this:

The index page looks like that. Does that mean we can't cherry pick the variables that we want to override?

[baris]

Should work with just a single override, are you getting any errors in the nodebb logs our browser console? If there are errors in the sass the skin would fail to build and cause missing styles.

For example I tested below.

and got

[Teemberland]

@baris I figured it out. It does require a rebuild/restart after creating a custom skin. Sorry about that!

[Teemberland]

@baris it appears that custom skins is base off of the light skin (default), so when I override the background to something dark, the nav, sticky bar and blockquotes are all white. Would it be possible to override those as well?

[baris]

Yes you need to override a lot more variables if you are trying to make a dark theme.

[torn2]

Is there a guide for the themes and which variables need to be changed?

[Teemberland]

@torn2 overriding variables is the easy part. Finding which variable to override is the hard part. Right now, it's trial and error for me--which is not very efficient.

[Teemberland]

@baris got it. The hard part for me is finding which variable to override.

For instance, I'm trying to change the background color of the sticky toolbar in Harmony. In dev tools, it appears that I have to change the background-color of blockquote.

.text-bg-light, blockquote {
  color: #000 !important;
  background-color: RGBA(248,249,250,var(--bs-bg-opacity,1)) !important;

But since the value is written the way it is, it doesn't look like it's as simple as overriding a variable, like $primary.

[Teemberland]

Bump @baris ^^

[baris]

The sticky bar uses text-bg-light so it's background is using the variable $light, keep in mind if you override the $light variable it is gonna change in other places as well. If you only want to change the background of sticky tools just target that element with .sticky-tools .text-bg-light { background: red!important }

[Teemberland]

@baris Thanks!

if only target .sticky-tools .text-bg-light { background: red!important }, this will also change globally, correct?

I don't know if this exist already, but I wish there was a way to have a separate stylesheet for custom skins, that way we can target specific fields only for that skin.

[baris]

If you want to target specific skins you can use the name of that skin. The name of the skin is added to the body element. See below sample.

// darky skin
.skin-darkly {
   .sticky-tools {background: red !important;}
}
// no skin applied
.skin-noskin {
  .sticky-tools {background: green !important;}
}

[Teemberland]

@baris This is exactly what I need! Thank you!

[Teemberland]

@baris , question about Harmony in general. Say I'm using Harmony and I edited a few templates (removed/added some divs, etc). When a new version of Harmony comes out and I download the update, will it wipe all my customizations on the template level?

[PitaJ]

@Teemberland yes. We recommend using a plugin to override templates for this reason.

If it's just a couple, you can try using nodebb-plugin-customize

[Teemberland]

@PitaJ Thanks! I'll lookup that plugin! Otherwise, if I need to customize more templates, I guess it is better to create a separate theme right?

[PitaJ]

@Teemberland yeah it would be best to create a sub theme but I think you can also just use a plugin

[Teemberland]

@PitaJ Cool, i try both! Thank you!