I know you've been asking for a dark mode for the site for years, for those late evening/night forum-spamming sessions, when you really needed to win an argument on the internet before going to sleep.
Wait no more.
A new site theme is here that comes in two flavours: a light one for daylight and a dark one for night mode or very dim environments.
Note: This is only for the desktop version of the site, not for mobile.
Main features:
- Two-sidebars site layout with a narrower midsection, which should improve readability
- Top-side site menu with a rich choice of buttons, that are no longer hidden in menus
- New banner that actually looks like a banner
- Reshaped user profiles, posts, buttons, dropdown menus, every significant element that is part of the core forum experience has been reworked
- Fixed position action bars and pagination bars, so that you can always have page tools available on the top of the screen, even if you keep scrolling down the page
- New innovative "Navigation" sidebar which allows you to jump from a subforum to the top level forum section with just a click
- The themes keep as much as possible from the good parts of the original site theme, so things will also look very familiar
- New fonts that will make text on the site look crisp and easy to read, even from a distance
- An actual dark mode that is designed to reduce blue light and not mess with your sleep
- Site stats are now easy to see on the right, so you don't have to scroll to the bottom of the page to see who's also online
- Improved login experience
- And many many more features
Home page - Light mode
Home page - Dark mode
Forum main page - Light mode
Forum main page - Dark mode
Subforum topics view - Light mode
Posts - Light mode
Posts - Dark mode
Notifications:
Navigation sidebar:
This sidebar only shows up when you're in a subforum, because there's not much to navigate on the top level of the forum.
You can just use the Forum and Home buttons there.
Special-purpose pages - members list, dark mode:
Details, features - filter function on the home page:
Login:
Scheme of site navigation elements:
Install these two site themes that will improve your sleep, rev up your energy and make you lose 5 kilos. 
How to install and what to install
| 1) We'll need to install a browser extension first In order to make this work, you need to add or use a browser add-on or extension that can load custom styles for a site. Don't worry, it's very ez. I recommend using Stylus, which is available on both Chrome and Firefox. You can install it from here: Chrome: https://chrome.google.com/webstore/deta ... bafhncgmne Firefox: https://addons.mozilla.org/en-US/firefox/addon/styl-us/ Once you've installed this extension, make sure it's enabled so it can actually run custom styles. Now, you can go to the Extensions tab (in Chrome it now looks like a puzzle piece button on the top bar, which leads you to a menu with all the installed extensions) or click on the Stylus extension button on your browser toolbar (in Firefox) and click Manage. Then you will see a white screen with some buttons and menus. |
| 2) We're gonna create the first style Here you can click "Write new style" from the panel on the left, which will create a new style sheet with some options on the bottom. First, let's set a name for this style: you can enter any name you like, for example agecom-light or esoc-light. You will need to create one style for each theme, but let's first finish one then move on to the next. You can enter the name on the top left field below the Add Style header. Then click the button Save below it. Now, let's set the URL where this style will apply. You will find this option below the dark window in which you can enter the code. You see a field there called "Applies to Everything". Click on the + button. Now you will see a dropdown menu with some choices -- pick "URLs on the domain". Right next to this menu, in the field on the right, paste the name of the site domain: eso-community.net Save. Now you can enter the code for the light theme in the dark window above. I can't paste the code here, since it has over 130000 characters, more than 5000 lines of code. And forum messages are limited to 100000. So we're gonna use Pastebin, but I'll link you directly to the raw code, so you can just Ctrl-A Ctrl-C it from here: https://pastebin.com/raw/vKh5S1zA Now that you've copied the code for the light theme, paste it in that dark window that you've created with the Stylus browser extension. Make sure you have a name for it that gives you a clue about it being the light theme. Hit Save again. Then click the button "Back to manage" from the leftside panel. |
| 3) Then create the 2nd style Now you're back on the main screen of Stylus and can create a new style for dark mode. Click on Write new style again, fill in the field on the top left with a name for the dark theme, then Save. Again, go to "Applies to Everything" on the bottom. Click on the + button. Pick "URLs on the domain" from the dropdown menu, enter the eso-community.net name on the right field. Save. Now you can enter the code for the dark theme from here -- open this in another browser tab: https://pastebin.com/raw/ytmC55dB Copy the whole text and paste it in that dark window from the Stylus extension. Save. Now you should have two style sheets for the domain eso-community.net. |
All we need now is to enable the theme you'd like to use.
After you load the site, you can click on the button where browser extensions are then click on the Stylus button (in Chrome) or directly on the extension button (in Firefox), then you will see a small dialog pop up, it should look like this:
Check one of the themes you'd like to use right now. Only one of them can be used at a time. If you want to switch to the other, first enable the other by clicking its checkbox then disable the previously enabled one by unchecking its box. In this way, you can switch smoothly between site themes, without seeing any weird transitions. I could have maybe automated this with a script for you, but that would involve installing another extension that could run custom Javascript and I don't want to confuse you. Let's keep it simple.
No, nothing will happen to your browser, nobody's hacking you, it's just CSS code, it can't do anything other than just change how a site looks like for you on a given address. And the Stylus extension is recommended by the team at Mozilla, so I suppose they found nothing shady about it. It's used by hundreds of thousands of people.
If you can't manage to get it installed, let me know and I might do a Youtube vid with a tutorial on how to install it step by step, when I get the time.
Congratulations, you've made it this far and you've earned your improved site experience!
Known issues:
- When clicking on a notification, the page will direct you to the post which mentioned you or to your post that was liked, but since these themes have a fixed banner on top, the post will have one part hidden (about 1-2cm) under the banner. There's not much I can do about that, since this is caused by how the site script aligns the post in the viewport in the original site layout. If a significant number of people want a version of these themes with a site layout that is completely scrollable (no fixed banner and sidebars), I might develop a future version which enables that. It's actually easier to have that, but the drawback is that you will not have sidebars and toolbars available at all times when the page is scrolled down, you'll have to scroll up to get to those (just like you do now).
The site layout in these themes looks a bit more like the Discord interface, which also has some fixed menus and sidebars, while only keeping the chat content scrollable.
- The filter function that you can pop up by clicking on the sidebars wheel buttons (to pick whatever types of streams you want to see or whatever types of topics you want to see) might have some quirks. On the Home page, if you scroll down and then click on that filter wheel button, you won't see that element pop up, because it's somewhere scrolled up. It only works right when the page is not scrolled.
On the rest of the site, the sidebar filters work right if you click the wheel button and then click it again to close that element, after you finished making your picks. But if you keep that filter popped up then scroll the page, the element will be moved up. However, the next time you click again, it will spawn in the right place.
The reason why these things happen is because of how they were attached to the page. They were not done in the same way on the home page and the rest of the site. They have different parent elements, so if you make any changes to how elements on the page are displayed (like I did here by reshaping the site layout to improve things) then this is likely to lead to side effects on their child elements.
Disclaimers:
- This was developed for the desktop version of the site, for two reasons: mobile browsers don't really have add-ons/extensions to be able to load custom themes (and you can force a dark mode on mobile anyway) and the mobile version of the site is already OK, there's no need to optimise it much, since it has fewer elements anyway.
- These themes were developed and tested mainly for 1080p and 1440p resolutions. Above 2K, it's likely they will work well, as the site layout will just expand, increasing space. The current code only has specially made banner versions for 1080p and 1440p. Meaning on those resolutions there are separate, custom-made banners that provide an optimal experience. Below or above these resolutions, it's possible the banner will either look slightly partial or it might get zoomed in to cover the area better on higher resolutions. A future version might include more variations to cover more cases.
Below 1080p, some things might get crowded here and there and the forum navigation panel on the right bottom side might move on top of the ESOC utility bar above it. So, if there's a significant number of people with screens below 1080p and they experience significant issues and glitches, you can report them in this thread and I might fix them in a future version.
- Also, these themes were developed and tested on Chrome and Firefox, the latest versions, and rely on some modern browser features. So, if you happen to use a very old browser, it's possible some things might not work well. Though, I assumed that since we're on a gaming forum and gamers are likely to use more updated software, I don't think there are many people here running browsers from more than 5 years ago. Browsers like Edge or Brave are also likely to work fine, since they're based on Chromium (Chrome's open source version).
- I have no idea how the themes look like on Linux and macOS. Normally, they should look mostly the same as on Windows, if you're using Chrome or Firefox. If there's a significant number of people using Safari and some things need to be adjusted/fixed, let me know and I'll run some tests on a macOS machine.
- Despite my best efforts to make sure most of the site elements are covered, it's possible there might still be some loose ends in some corners that I've neglected (for example some tables in the user profile sections have a weird structure, so their headers might be misaligned). Just report them and I'll try to fix them when I get the time.
- If you have a very low-end computer or very slow internet, it's possible when you load the site with a theme enabled you will see the old site theme flashing before your eyes for a few tens of milliseconds. This happens because this code runs after everything from the site is loaded first, so on slow machines/internet, the page loading event might take a while, before it loads this custom code. Normally, after the code is loaded in memory, the browser will load it from there, so subsequent page loads should perform better.
If you like these themes and find that they improve your forum experience, you can support their development by making a donation to my PayPal: [email protected]
It might offset my electricity bill for those months during which I developed the themes. Cheers.
This is what Riot was talking about, but the buttons are still clickable so it's no big deal. The two extra buttons are admin control panel and moderator control panel.
