FuzeArena Dark Mode?

Retrocade_media

This is entirely non-essential, but it would be nice to have a dark mode for this website. Thats all. If it never happens it wouldn't be an issue, but if it was implemented I'd certainly use it.

PB____

You could do this yourself by creating a really simple Chrome extension, but it might need some fine-tuning to make sure the site remains usable:

create a folder with two files: manifest.json and style.css
Edit manifest.json to contain the following:

{
  "manifest_version": 2,
  "name": "FuzeArena dark theme",
  "description": "Dark theme for FuzeArena",
  "version": "0.0.1",
  "content_scripts": [{
    "css": ["style.css"],
    "matches": ["https://fuzearena.com/*"]
  }]
}

Edit style.css to contain the styling you want to use on Fuze Arena. You might need to fine-tune this along the way:

html, /* apply invert filter to the whole page (because the root element is html) */
img, /* apply second invert to content that should remain in original colors */
iframe, /* we don't want inverted youtube video's, or do we? */
twitter-widget, /* the twitter widget doesn't work well with the inverting, so I'm skipping that */
div[style*="background-image"], 
.status, 
.progress-bar
{
    filter: invert(1); /* the invert filter inverts all the colors for the selected html */
}
div[style*="background-image"] img, /* try to prevent triple inverts where double inverts are intended */
div[style*="background-image"] iframe, 
div[style*="background-image"] div[style*="background-image"] 
{
    filter: none; /* cancel triple invert, since more specific css selectors override more general css selectors */
}

/* my profile page has a gradient on the background that I need to invert as well to make it look good */
.page-user-pb____ .account>.cover img { filter: invert(1); }
.page-user-pb____ .account>.cover { filter: none; }

Open chrome://extensions as an URL in Chrome
Enable developer modus (top right)
Click the button on the top left to load an unpacked extention
Select the folder you created (that contains style.css and manifest.json)
Visit FuzeArena, to see your styling

If you change style.css don't forget to click the reload button on your own custom extension that you find on chrome://extensions

EDIT: I've done a few edit's to improve the CSS for better results... And yes, those last two lines in the css file are only to make my profile page look correct... (it has a gradient background image, that needs to be inverted as well)

I've now also added some comments and more elaborate formatting, to explain what I'm doing with the CSS.

Jonboy

Colin - what on earth is this! I had no idea you could do this (quite embarrassed actually) . Are there tools out there to manage this - allow editing and the like?

PB____

I'm sure there are some extensions out there that can do similar things in the Chrome Web Store (not sure if I should put an external link on the forum here).

I myself have a natural suspicion against any extension that is able to access and influence all my browser content and activity.
Maybe that's just me, but that's why I prefer to make such a simple extension myself, rather than installing something made by someone else...

EDIT: when it comes to managing this technically, it's a good practice to never trust any browser client to be 100% secure, you don't have control over that. If an API requires validation or security, that should always be implemented server side. Client side validation can be there, but that's mainly to serve user-friendliness.