Leaguepedia:Night Mode Announcement

From Leaguepedia | League of Legends Esports Wiki
Jump to: navigation, search
Leaguepedia launches night mode theme!
April 1, 2019

If you've been following our Dev Blog or Discord server, you'll know that we've spent the past several months working on a night mode theme for the wiki. This was a huge undertaking - we had years and years of inline styles with hard-coded colors that we had to change to classes that used CSS variables to display color. In the process of doing that, we rebuilt templates for infoboxes, brackets, crossboxes, timelines, standings, matches, the front page, tabs, pick-bans, scoreboards...actually pretty much everything you see on the wiki, we rewrote the code for at some point within the past year, and at least half of it was done with the intention of making night mode a reality.

Along the way, we've also improved the editing experience a lot. Where before editors had to update match and game results in multiple places, now it's a single streamlined backend with some JS support to sync hard-coded elements on the front page for faster load times without the cost of additional manual data entry. Scoreboards now use CSS grid and have easy-to-edit Lua table definitions, so anyone can easily define any kind of bracket without any technical knowledge. Scoreboards have been rearranged so the two teams are next to each other, and the Lua to display them is identical through use of flex box. Infoboxes are also easier to edit now. If you want to read more about our backend system for displaying tournament results, you can check out this blog post additionally, where we go into detail about the processes behind building that.

It's been a long process, but the result is that we have a single page of variables that we can just change between the light them and the dark one. In fact, if we wanted to we could change out this short list of variables and make a pink or green skin instead! You can see our variable list here - these variables are all synced across all of our esports wikis, so eventually we will be able to make this a reality on other wikis too.

So, with that said, we are so VERY proud to present to you our newly-created dark mode skin! What does the end result look like? Check it out at the Hydra skin page here.

-- River (Lua & JS) & Ema (HTML & CSS)