Dark Mode Style Options

Alfuzzy

Active member
Anyone know of/recommend a Dark Mode style that's available and modify's the colors of the stock XF style? I would like to offer a Dark Mode Style for my site visitors...site style is mostly based on the stock XF style.

Free would be nice...but low cost is doable too.

Thanks:)
 

Dragonfruit

Well-known member

Here's the one I used. It's free, and dark. I can tell you the colorizing on it isn't perfect, there's definitely some recolors you should do to make it better and readable. But it's basically what I needed. A dark version of the default to work with. Much easier than recoloring the default light one.
 

Alfuzzy

Active member
Thanks very much for the recommendation. Yes...looks like a great starting point (lots of "darkness")...I'd want to add some color highlights that matches my sites color theme to give it a bit more "pop"/diversity.

Basically looking for something that takes most of the white backgrounds of the stock style...and makes them "dark"...and makes the text white against the dark background (or a color that's readable against the dark background).

Just curious...does anyone know how does a style like this works? Does it:

  • Modify the stock XF templates (I think this one said it doesn't)?
  • Does it add code to the extra.less template for the "Dark Mode" style you create?
  • Some other way?

Thanks
 

Alfuzzy

Active member
Did some searching...and came this one. Any thoughts/opinions?:


Thanks
 

Dragonfruit

Well-known member
If you're looking for something that matches exactly as the stock light one, then I'd go with the one I already recommended. It's just re-colorized to be dark, and should not have any code changes. I recall thinking the same thing and verified it first.

Because I worked on heavily customizing light & dark styles for my board, and I wanted everything to be identical except the color styles.

For consistency sake, it's either that or what @Matthew S suggested - because you're buying a set, so the code is identical.
 

Alfuzzy

Active member
If you're looking for something that matches exactly as the stock light one, then I'd go with the one I already recommended. It's just re-colorized to be dark, and should not have any code changes. I recall thinking the same thing and verified it first.

Because I worked on heavily customizing light & dark styles for my board, and I wanted everything to be identical except the color styles.
Good deal...that is what I'm looking for. Thanks again.:)
 

l3ta

Well-known member
 

l3ta

Well-known member
 

Alfuzzy

Active member
Thanks for the help so far. This will be my first time downloading & installing a style. I saw in one of the styles recommended above the following install instructions:

Installation Instructions: While in the Admin CP, select:
Appearance > Styles > Import > Child of style: (No Parent) > and then click "Import"


* Is this pretty much the standard way to import a style (single .xml file)...and it won't overwrite any existing styles?

* Also...if I have a parent style that I've created (basically different colors of the XF stock style)...with my website logo, advertisements, and different node icons.

Should I import one of the dark styles as a "child style" of this parent style that my site is currently using...since what I want is a dark style version of the parent style I created & using now?

* If I decide that I don't like a dark style that I installed...is it as easy as Appearance > Styles > Click Trash Can...and "Poof" it's gone?

Thanks
 

Dragonfruit

Well-known member
You can also just disable it, don't have to delete it. If there's any work you've done on it, you can reference back to it later.
 
Top