Request for dark mode

[user.997422]

I think the white background is straining my eyes,
it will be much esyer if toph had a dark background.
can we get a dark mode?

[hjr265]

Thank you for this feedback. This is on our roadmap in sha Allah.

As we work on the implementation of a dark mode, you may want to use a web browser extension to emulate dark mode on Toph.

Google Chrome: https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh/related?hl=en
Firefox: Dark Reader – Get this Extension for 🦊 Firefox (en-US)

Please do not hesitate to let us know if you have any other question or feedback.

Edit: Replaced previous recommendation of the Dark Mode extension for Google Chrome with the Dark Reader extension.

[Nusab19]

@hjr265 I’ve tried using the Chrome Extension that you provided. It works for other sites. But for toph community, it has no effect.

Also, the way it makes toph.co dark is not so usable. Because it doesn’t change the text color to white. So, it’d be very helpful if you do something about it.

Edit: idk how but it now worked for community too. But still, not so eye friendly.

[hjr265]

The thing about dark mode is that it isn’t just a feature. It is also something that is tied closely to Toph’s brand. This not only would affect what we have now but also the products and services we plan to have in the future in sha Allah.

And of course there is a large backlog of things that needs to get done. Dark mode is in that list but not very high up.

There is an option on the table where we still recommend using browser extensions. But we make changes on our end to improve the results of these extensions applying dark mode styling. This can happen quicker as we bypass the notion of dark mode colors being a brand thing.

By going that route I just need to identify the specific issues with the browser extensions trying to apply dark mode, and fix them one by one.

The Dark Reader extension works better now than before. So a lot of work may not be necessary with this approach after all.

And yes, I can see that the extension fails to change the color of Toph’s logos and top nav icons. These are the kind of issues that I was talking about that we can address on our end to improve the browser extension’s results.

[hjr265]

Fixes for Dark Reader for toph.co:

^toph.co

INVERT
.panel__cover.-modest.-empty
.excalidraw img
.icon:not(.-custom)

CSS
.phead__logo img {
  background-image: url(https://static.toph.co/images/logo-white.png);
  background-size: 100% 100%;
  height: 2.5rem;
  padding: 2.5rem 0 0 0;
}
.bellmenu__meta::before {
  background-color: rgb(64, 69, 70);
}
body {
  background-color: rgb(27, 29, 30);
}
.pfoot {
  background-color: transparent;
}
.panel__cover {
  border-bottom-color: #e7ecf1;
}
.panel__cover .flair {
  background-color: hsla(0,0%,100%,.25);
}

Before:

After:

[hjr265]

Fixes for Dark Reader for community.toph.co:

community.toph.co

INVERT
.category-logo img

CSS
img#site-logo.logo-big {
  box-sizing: border-box;
  background-image: url(https://uploads.community.toph.co/original/2X/a/a98eea6345beaa27afa98056217bd63f987b314e.png);
  background-size: 100% 100%;
  width: 224px;
  height: 40px;
  padding: 40px 0 0 0;
}
img#site-logo.logo-small {
  box-sizing: border-box;
  background-image: url(https://uploads.community.toph.co/original/2X/2/2c304ca2f4279cece21b7192eb79d11f7921ac2f.png);
  background-size: 100% 100%;
  width: 40px;
  height: 40px;
  padding: 40px 0 0 0;
}

Before:

After:

[Nusab19]

Thanks a lot for those fixes. It’s better now. <3

[hjr265]

I am trying to see if Dark Reader will allow some way to serve these fixes from within Toph.

Allow sites to serve their own dynamic-theme-fixes.config and...

If not, then I will push a PR to them to include the fixes within their extension.