The dark forum theme has arrived

Mave

TMS Founder
Administrator
Messages
235,861
Location
Belgium
Two weeks ago I was playing around with the element inspector on the forum and decided to ask if anyone would be up for a dark theme Now the dark version of the forum theme is finally here!

TMS: Dark Theme

There's nothing more irritating than opening a website at 4 a clock in the morning and having the power of a thousand suns brighten your face.
And this is exactly what motivated me to create this theme :biggrin:

The first big part was obviously changing the "look and feel" of the forum which mainly meant changing the colors everywhere. It took a while before I had them down to something I felt comfortable with as well.

TMS Light (old):

beforelight.png


TMS Dark:

afterdark.png



But it didn't stop there.. I actually spent a ton of time fixing the smileys.. Most of them had a white border around them which made them look crap on a dark background. (the gifs were the worst since I had to fix them frame by frame)

beforesm.JPG


aftersm.PNG


painintheass.PNG


The stars and membergroup colors also got an upgrade:

membergroups.png


stars.PNG


These small icons also got an update (finally)

beforesmallicons.JPG


aftersmallicons.PNG


The message icons got revamped:

messageicons.PNG



How do you activate/disable this theme?

Navigate to PROFILE -> Look and layout -> Current theme -> "change" -> Select "TMS Light" or "TMS Dark".

tmslighttmsdark.PNG



What now?

The "white" theme will remain the default one, still looking into a way to change themes using simply a button in the header. (which would make it much easier to switch)
Enjoy! And please do report bugs when you spot them! :holmes:

22/02/2017 UPDATE

Removed the blue tint in the board categories, as well as the white line.

Old
1.png


Removed white and blue
2.png


Merged into one board category
3.png


In the footer the blue was also removed from the title, and the smaller titles are also more subtle now. The bottom now has the same dark colour as the rest of the background.

Old
a.png


New
b.png
 
Ah yes, that did the trick. Looks great!

Only have the feeling a bottom border is missing here: https://cl.ly/131y0x2e3w0s/Image%202017-02-22%20at%2011.29.46%20AM.png
 
lextoc said:
Ah yes, that did the trick. Looks great!

Only have the feeling a bottom border is missing here: https://cl.ly/131y0x2e3w0s/Image%202017-02-22%20at%2011.29.46%20AM.png
That's weird, it shouldn't do that and I don't see it as you can see in the screenshot above: http://themavesite.com/TMS-Pictures/Forum/2017/DarkTheme/3.png
Will look into it though.

EDIT: Could you try again now, it's now 2px instead of one.
 
With the first one it's 1px now, and the second header is 2px:
https://cl.ly/022a3S1g361c/Image%202017-02-22%20at%201.14.50%20PM.png
https://cl.ly/3a2J1p2l303e/Image%202017-02-22%20at%201.15.00%20PM.png
 
lextoc said:
With the first one it's 1px now, and the second header is 2px:
https://cl.ly/022a3S1g361c/Image%202017-02-22%20at%201.14.50%20PM.png
https://cl.ly/3a2J1p2l303e/Image%202017-02-22%20at%201.15.00%20PM.png
What browser?
 
lextoc said:
Good news: I found what causes this. Bad news: disabling this will result in some things breaking...

Code:
/*
	Special styles for Safari (and other Webkit-based browsers like Chrome)
	Webkit needs this otherwise the post goes off to the right.
	Causes issues in IE browsers, and breaks cached search engines pages.
*/

table.table_list tbody.header td div.cat_bar
{
	/* margin-bottom: -1px; */
}

So for now I guess I'll have to leave it at this 1px difference.
 
A teacher of mine once had the expression "Mankind can put a man on the moon, but the same styling across 3 different browsers is nearly impossible"
 
Stybar said:
A teacher of mine once had the expression "Mankind can put a man on the moon, but the same styling across 3 different browsers is nearly impossible"
Sounds like an awesome teacher.
 
Back
Top Bottom