Forum Settings
Forums

🌓 Is MAL's Dark Mode uncomfortable for you? Try this alternative!

New
Jan 26, 2023 5:24 AM
#1

Offline
Feb 2010
11827
This page is part of our Apps and Extensions section.



MAL's dark mode has strongly contrasting colors which can be headache-inducing for many users, so try my dark mode as an alternative! I've rebranded it as Comfortable Dark Mode. It also darkens the Fantasy Anime League and Mal X Japan pages- MAL dark mode doesn't darken these atm.

I've added many new features and fixes this past month to make the site easier to read and use, seen in the shots and video below. For example I've removed the bright background and ads from the home page which still show up in MAL's dark mode (WHAT WERE THEY THINKING!?!?).

Screenshots
Home page
Forum Post
Discussion Board

New features
Bloat removed from all page banners
Status colors added to Top Anime and Search pages
Always see reviewer scores
Reviews can be darkened
Tool Tips clearer and clickable

https://www.youtube.com/watch?v=89Gkr8e4TqU







If you want to edit it or learn to make your own Dark Mode extension




Big thanks and credit to Valerio_Lyndon for mapping out much of the site earlier in previous dark themes. I used a file with your name (and only your name) on it to get this started and it was a giant help in the beginning. Thanks and credit to ShaggyZE for any work you may have put into the file I used as well.

Colors were inspired in part by cicerakes dark mode (my preferred theme for years) and the Dark Reader extension, although I've made mine darker and added lots of other changes.

Shishio-kunNov 4, 2023 12:59 AM
Reply Disabled for Non-Club Members
Pages (2) [1] 2 »
Jan 26, 2023 8:23 AM
#2

Offline
Dec 2019
3445
good job, is this the one everyone has been working on and helping with?

also, is this the one I should add buttons to, or you were able to do those?
Jan 26, 2023 8:24 AM
#3

Offline
Aug 2022
179
Thank you! Been waiting for a while. Now I can finally turn off Dark Reader.
Jan 26, 2023 8:34 AM
#4

Offline
Feb 2010
11827
hacker09 said:
good job, is this the one everyone has been working on and helping with?

also, is this the one I should add buttons to, or you were able to do those?


No, this Dark mode extension is one I started over myself, had to do A LOT of research lol but I did learn a lot from Valerio_Lyndon's previous dark theme and Clarity CSS codes which went into this.

Yeah later, I was thinking yeah I could commission you to add some buttons to a different version of this- possibly a toggle on/off button and CSS injection button to like darken say a post that's a wall of text (it darkens reviews on hover atm since they are walls of text). And then that way we could use that to teach others javascript and extension making. However this version I wanted separate and extremely simple with least code as possible.

In the future I don't want to rely on volunteers for projects and do it all through commission, unless it's like a MAL Tokyo Revengers thing.

Shishio-kunJan 26, 2023 8:42 AM
Jan 26, 2023 8:36 AM
#5

Offline
Feb 2010
11827
host_ said:
Thank you! Been waiting for a while. Now I can finally turn off Dark Reader.


Thanks, I hope it works well! A slightly updated version should come out this weekend hopefully it will be sent automatically to you (updates some colors in the account settings).
Jan 26, 2023 8:41 AM
#6

Offline
Dec 2019
3445
Shishio-kun said:
hacker09 said:
good job, is this the one everyone has been working on and helping with?

also, is this the one I should add buttons to, or you were able to do those?


No, this Dark mode extension is one I started over myself, had to do A LOT of research lol but I did learn a lot from Valerio_Lyndon's previous dark theme and Clarity CSS codes which went into this.

Yeah later, I was thinking yeah I could commission you to add some buttons to a different version of this- possibly a toggle on/off button and CSS injection button to like darken say a post that's a wall of text (it darkens reviews on hover atm since they are walls of text). And then that way we could use that to teach others javascript and extension making. However this version I wanted separate and extremely simple with least code as possible.

In the future I don't to rely on volunteers for projects and do it all through commission, unless it's like a MAL Tokyo Revengers thing.


wow that's a great achievement then...

although I'm really short on time, let's keep talking and see
Jan 26, 2023 9:31 AM
#7

Offline
Nov 2018
5724
@Shishio-kun would you be able to make a version for Firefox? I've uninstalled Chrome from my laptop so I can't use it.
MAL EMOJIS - Get your specially formatted emojis for MAL forums.

Jan 26, 2023 9:50 AM
#8
⎠⎞ >⏝⏝<⎠⎞

Offline
Apr 2015
888
Amazing, thank you! The customizable version is really convenient.
Jan 26, 2023 9:55 AM
#9

Offline
Feb 2010
11827
_cjessop19_ said:
@Shishio-kun would you be able to make a version for Firefox? I've uninstalled Chrome from my laptop so I can't use it.


Fortunately it does work in Firefox
https://imgur.com/4Ap4Z8C
I have to see how to get it on the Firefox "extension store", it might take a bit of time for approval and getting thru their process, but I will let you know when it's up!

And was Dark Reader lagging for you on Firefox? Dark Reader lagged for me on Opera GX and this is a medium-level gaming PC so I think it is related to something besides the device. I also recommend Opera GX over these other browsers as it seems way smoother and you can use Chrome extensions.

If you don't wanna wait and want to install the extension without the Firefox extension place, you can go to this page:
about:debugging#/runtime/this-firefox
and then "Load temporary add-on"
you want to choose the manifest file in this folder (which you'd need to download and extract)
https://www.dropbox.com/s/utstiydx12kxu77/MyAnimelist%20Dark%20Mode%20by%20Shishio-kun.zip?dl=0

That should load the extension for you in Firefox
Jan 26, 2023 9:57 AM

Offline
Feb 2010
11827
coffeedrops said:
Amazing, thank you! The customizable version is really convenient.


Wow awesome to hear! :D

We can fix the dark theme fast this way too!

The root menu makes it really easy to recolor everything, thanks to Valerio_Lyndon for bringing that technique to this group I didn't know of it until he shared Clarity.
Jan 26, 2023 10:48 AM

Offline
Nov 2018
5724
Shishio-kun said:
I will let you know when it's up!

Cool
Shishio-kun said:
And was Dark Reader lagging for you on Firefox?

Yeah. Idk if they've recently updated it, but it isn't as bad now as it was before maybe a year or two ago. Maybe it's something to do on their end or something to do with MAL? I still notice a bit of lag occasionally.
Shishio-kun said:
I also recommend Opera GX over these other browsers as it seems way smoother and you can use Chrome extensions.

I've been loyal to Firefox for the past 15 years.
Shishio-kun said:
That should load the extension for you in Firefox

I'll just wait for it to get approved in the extension store then.
MAL EMOJIS - Get your specially formatted emojis for MAL forums.

Jan 26, 2023 12:25 PM

Offline
Jun 2015
351
looks nice, thx
Jan 26, 2023 1:05 PM
𝓣𝓱𝓮 𝓞𝓷𝓮

Offline
Jul 2020
1532
Looks and feels even better than the old (Stylus) approach I was using. Thanks a bunch! 



anime list -~~- manga list
Jan 26, 2023 1:43 PM

Offline
Aug 2015
97
Amazing job! Thank you!
Jan 26, 2023 4:03 PM

Offline
Nov 2019
148

I would've used this if it weren't for Dark Reader extension, also a tool you recommended. This one is great cause I can have dark mode on any site now! It's sooo wonderful!!!


Jan 26, 2023 5:57 PM

Offline
Feb 2019
636
You are a wonderful human being, I thank you from the bottom of my heart
(づ๑•ᴗ•๑)づ💖
My Candies:
“Even when you were so depressed and emotionally unstable, the taste of your coffee jelly stayed the same." Kusuo Saiki
Jan 26, 2023 11:59 PM
エクスプロージョン

Offline
Oct 2018
19503
Thank you!
Jan 27, 2023 3:58 AM

Offline
Mar 2016
520
Nice extension... but i found a "bug" when I'm looking at TNC's card edition forum lol



[th][/th] (and yes, it is an undocumented BBCode tag I just discovered when making the thread) was not configured to show in dark mode, so if someone enabled the extension, they won't able to read the source title of the card. Maybe you can do a fix later, tho?


Signature layout designed by myself,
using Microsoft Office PowerPoint and Paint.NET
Jan 27, 2023 4:16 AM

Offline
Feb 2010
11827
@nattadasu


I can't see what you're referring to and I never heard of a th tag on MAL, when I tested it out I get nothing





Can you please give me an example of "th" BBcode I can quote to test it out




If you are referring to the hard to see text (I outlined it with red below) I think it was made black on purpose with color tags; you don't need to do this as normally the text is dark on default MAL





Jan 27, 2023 4:25 AM

Offline
Mar 2016
520
Shishio-kun said:
@nattadasu


I can't see what you're referring to and I never heard of a th tag on MAL, when I tested it out I get nothing


Can you give me an example of "th" BBcode I can quote to test it out

If you are referring to the hard to see text (I outlined it with red below) I think it was made black on purpose with color tags; you don't need to do this as normally the text is dark on default MAL






Sure, tho, in this example, I minified the table since when I'm experimenting with tables, there's bug from MAL side by randomly put <br> before the table, made it messier
This is header
This is your-typical-column-data

[table][tr][th]This is header[/th][/tr][tr][td]This is your-typical-column-data[/td][/tr][/table]

for the rest of thread, it was by (poor) design lel


Signature layout designed by myself,
using Microsoft Office PowerPoint and Paint.NET
Jan 27, 2023 4:33 AM

Offline
Feb 2010
11827
@nattadasu

OK I just found what you were referring to (the grey box above the cards). When you said it doesn't show I was looking for something that my extension literally rendered invisible.

This is an easy fix and should be corrected when I update the extension later this weekend so thank you for letting me know! The cards have nice pictures too.

Jan 27, 2023 7:52 AM

Offline
Feb 2017
610
thank you so much!
 



placeholder text
Jan 27, 2023 7:53 AM
Dreamcatcher

Offline
Aug 2013
2429
Hi! Thanks so much, it got rid of the white parts that other stylus themes couldn't get away, however, I would like you to try and fix it for my anime list...

Could you maybe make it an option for it to work on only the other pages besides the anime/manga list? I like how it looks now, so I would rather be able to use both in combination. Thank you!
Jan 27, 2023 8:24 AM

Offline
Feb 2010
11827
Yuki-Chan276 said:
Hi! Thanks so much, it got rid of the white parts that other stylus themes couldn't get away, however, I would like you to try and fix it for my anime list...

Could you maybe make it an option for it to work on only the other pages besides the anime/manga list? I like how it looks now, so I would rather be able to use both in combination. Thank you!


Done, since it sounds like you are using the Stylus extension I put it up there as a third style. This is the condensed one (faster) and doesn't have any list changing CSS and also it's supposed to not activate on lists.

https://userstyles.world/style/8320/dark-myanimelist-excludes-lists-condensed-and-lightweight

If you have the Easy to Customize one, that one can also be edited by removing the "List settings" section at the bottom.
Shishio-kunJan 27, 2023 10:53 AM
Jan 27, 2023 8:39 AM
Dreamcatcher

Offline
Aug 2013
2429
Shishio-kun said:
Yuki-Chan276 said:
Hi! Thanks so much, it got rid of the white parts that other stylus themes couldn't get away, however, I would like you to try and fix it for my anime list...

Could you maybe make it an option for it to work on only the other pages besides the anime/manga list? I like how it looks now, so I would rather be able to use both in combination. Thank you!


Done, since it sounds like you are using the Stylus extension I put it up there are a third style. This is the condensed one (faster) and doesn't have any list changing CSS and also it's supposed to not activate on lists.

https://userstyles.world/style/8320/dark-myanimelist-excludes-lists-condensed-and-lightweight

If you have the Easy to Customize one, that one can also be edited by removing the "List settings" section at the bottom.


Thank you so much!
Jan 27, 2023 9:58 AM

Offline
Jun 2014
15
im totally grateful this is amazing! it will feel so much better reading long reviews here now 
thank you so much for your time! 
Jan 27, 2023 10:50 AM

Offline
Feb 2010
11827
dimsunshine said:
im totally grateful this is amazing! it will feel so much better reading long reviews here now 
thank you so much for your time! 


Thank you! :D

I used it a lot to test it and I noticed those reviews are annoying to read unless you dim the background.
Jan 27, 2023 11:47 AM

Offline
Jun 2014
15
Shishio-kun said:
dimsunshine said:
im totally grateful this is amazing! it will feel so much better reading long reviews here now 
thank you so much for your time! 


Thank you! :D

I used it a lot to test it and I noticed those reviews are annoying to read unless you dim the background.

agree it made me stressed for a long time, it may seems a simple thing BUT it does make difference <33
Jan 28, 2023 8:28 AM

Offline
Feb 2010
11827
@_cjessop19_

About Darkreader, it was lagging even this month for me, and this is a medium-grade gaming PC, but it seems to be an on-off thing. Maybe it is connected to some other extension or browser component.

I respect the loyalty to Firefox; I was just using the Firefox browser to test the extension on MAL and DAMN it is loading pages INSANELY FAST lmao. I prefer Opera GX for productivity and it's faster/easier than Chrome which has become bloated af.

My dark mode MAL extension was approved today and I updated it specifically to address something that didn't translate from Chrome to Firefox (the version should be #6). For me, it is loading instantly with no errors.

https://addons.mozilla.org/en-US/firefox/addon/myanimelist-dark-mode/

So I hope it works well for you and doesn't have the lag problem Dark Reader had for you and me! Also I think the extension needs to be clicked in the toolbar, and set to always use on MyAnimeList, or something like that, I believe that is a Firefox thing

If you use the extension and find any bright spots I can darken them via an update, I just need the page and info on where it is.
Jan 28, 2023 7:46 PM

Offline
Nov 2018
5724
@Shishio-kun

It loads really well. I'm seeing no issues at all and the browsing experience on MAL is smooth.

I would also recommend maybe adding the ability to change the darkmode colors in the extension settings so that you can get different shades of gray or even pure black backgrounds. Dark reader also allows makes the MAL blue color a bit darker/bolder and change the contrast and grayscale, which is quite nice to the eyes in darkmode. Maybe something to darken the blue color to what Dark reader does (or take the settings from them)?

I would also suggest making the Cancel button a darker color as it's very bright with the dark background. Maybe make it the same color as the How to use BBCode? button and still have it highlight a dark blue color when you hover over it? Same thing with the friend requests in the notifications. Accepted/Rejected is still white.

Are you able to darken the box created by the [code] tags? Maybe a light gray will do
_cjessop19_Jan 28, 2023 8:00 PM
MAL EMOJIS - Get your specially formatted emojis for MAL forums.

Jan 28, 2023 8:05 PM

Offline
Nov 2018
5724
I think it's also best that the extension doesn't apply to our anime/manga lists.



I believe you can see the issue I have here

If people want dark lists, then they can use custom BBCode or use a modern style to make it.
MAL EMOJIS - Get your specially formatted emojis for MAL forums.

Jan 29, 2023 12:42 AM

Offline
Feb 2010
11827
@_cjessop19_

Thank you, thats good to hear! :D

I darken all lists with this for when we visit people's blinding white lists (the default style) and also to darken transparent lists like yours. The Stylus themes have a version that excludes lists, but maybe for the extensions I can add a toggle or alternate extension that doesn't target lists. I'd have to research how toggling works in JavaScript as I'm completely new to it.

The code box I colored that way deliberately to make it stand out from normal and quote text, but I can lower the brightness on the code box.

I could make an alternate where it matches Dark Reader's colors 100%, using the root thing makes it easy to include alternate color schemes.

I don't know what cancel button you're referring to and would need to turn on my friend requests to see what you mean, but later yeah these can be updated.

Shishio-kunJan 29, 2023 12:49 AM
Jan 29, 2023 12:50 AM

Offline
Nov 2018
5724
Shishio-kun said:
I don't know what cancel button you're referring to

At the bottom of the text box. Click New reply and you can see Preview and Cancel, which are both white with gray text in the middle, which is hard to see.

Shishio-kun said:
I'd have to research how toggling works in JavaScript as I'm completely new to it.

A toggle would be good.

Shishio-kun said:
include alternate color schemes.

Maybe like how you can change the color scheme of a browser?
MAL EMOJIS - Get your specially formatted emojis for MAL forums.

Jan 29, 2023 1:10 AM

Offline
Nov 2018
5724
Is it possible to do something about this for our profiles?
MAL EMOJIS - Get your specially formatted emojis for MAL forums.

Jan 29, 2023 1:53 AM

Offline
Feb 2010
11827
_cjessop19_ said:
Is it possible to do something about this for our profiles?


Yes that can be fixed, I remember I did recolor this actually but maybe it needs to be "forced in" even harder

I don't see the problem with Preview and Cancel, maybe it's a Firefox only issue but I'm sure it can be addressed
Jan 29, 2023 4:33 AM
Dreamcatcher

Offline
Aug 2013
2429
Hi! I noticed that I can no longer click on a notification in the box, besides being able to click the thread link. Is that something that can be changed?
Jan 29, 2023 5:02 AM

Offline
Feb 2010
11827
Yuki-Chan276 said:
Hi! I noticed that I can no longer click on a notification in the box, besides being able to click the thread link. Is that something that can be changed?


I dont have this problem, what browser are you on and can you screencap what part you are referring to?
Jan 29, 2023 5:16 AM
Dreamcatcher

Offline
Aug 2013
2429
Shishio-kun said:
Yuki-Chan276 said:
Hi! I noticed that I can no longer click on a notification in the box, besides being able to click the thread link. Is that something that can be changed?


I dont have this problem, what browser are you on and can you screencap what part you are referring to?




I'm on chrome. I used to be able to click on the blue ish text without clicking on the link to go to the post I'm mentioned in. After that it will automatically change to read. This does not happen now.
Jan 29, 2023 5:28 AM

Offline
Feb 2010
11827
Yuki-Chan276 said:
Shishio-kun said:


I dont have this problem, what browser are you on and can you screencap what part you are referring to?




I'm on chrome. I used to be able to click on the blue ish text without clicking on the link to go to the post I'm mentioned in. After that it will automatically change to read. This does not happen now.


OK I see what you mean. That can almost certainly be fixed, although that spot was a real pain to edit which is why it's not 100% like the original site. It should be repaired in the next update and I will notify you then :D
Jan 29, 2023 6:06 AM
Dreamcatcher

Offline
Aug 2013
2429
Shishio-kun said:
Yuki-Chan276 said:




I'm on chrome. I used to be able to click on the blue ish text without clicking on the link to go to the post I'm mentioned in. After that it will automatically change to read. This does not happen now.


OK I see what you mean. That can almost certainly be fixed, although that spot was a real pain to edit which is why it's not 100% like the original site. It should be repaired in the next update and I will notify you then :D


Thank you!
Jan 29, 2023 1:26 PM

Offline
Feb 2010
11827
@_cjessop19_
Just curious, did you ever try MAL Redesign for dark mode before and what was your experience with it?? Please let me know.

https://addons.mozilla.org/en-US/firefox/addon/myanimelist-redesign/

Jan 30, 2023 3:56 AM

Offline
Feb 2010
11827
@Yuki-Chan276 the issue you reported should be fixed now, I hope it updates automatically for you
Jan 30, 2023 4:20 AM
Dreamcatcher

Offline
Aug 2013
2429
Shishio-kun said:
@Yuki-Chan276 the issue you reported should be fixed now, I hope it updates automatically for you


Thank you! It doesn't seem to have been updated yet, but I'll wait~
Jan 30, 2023 6:26 AM

Offline
Feb 2010
11827
Yuki-Chan276 said:
Shishio-kun said:
@Yuki-Chan276 the issue you reported should be fixed now, I hope it updates automatically for you


Thank you! It doesn't seem to have been updated yet, but I'll wait~

I read that Chrome does automatic updates, but it can take a bit ":D
Jan 30, 2023 6:40 AM
Dreamcatcher

Offline
Aug 2013
2429
Shishio-kun said:
Yuki-Chan276 said:


Thank you! It doesn't seem to have been updated yet, but I'll wait~

I read that Chrome does automatic updates, but it can take a bit ":D


I see! Don't worry about it. Thank you for fixing it!
Jan 31, 2023 11:09 AM

Offline
Feb 2010
11827
@_cjessop19_ The newest version of this extension (version 10) has been approved by Firefox; it fixes the button issue and list issue from what I see and also darkens the preview/cancel buttons. And thanks to Dancho for helping with me with testing it out earlier :D
Jan 31, 2023 11:22 PM

Offline
Nov 2018
5724
@Shishio-kun go to My Interest Stacks section, you need to fix the alternating row colors and the title row up top

Also, check out the Anime/Manga search page, there are a couple of things that need sorting.
_cjessop19_Jan 31, 2023 11:57 PM
MAL EMOJIS - Get your specially formatted emojis for MAL forums.

Feb 1, 2023 1:03 AM

Offline
Feb 2010
11827
OK, I've went through those pages and in the next update there should be many dark changes to the interest stack section and advanced anime search




Shishio-kunFeb 1, 2023 1:24 AM
Feb 1, 2023 7:20 AM

Offline
Feb 2010
11827
@hacker09 this is the link to the current extension, there's always a link in the opening post so later an updated version might be there if I do a major update

https://www.dropbox.com/s/t8vjnhjnl30w9rx/Dark%20mode%20ver%2010.rar?dl=0


You should also check this one out, very impressive and useful to learn from (although I didnt see it till after making this dark mode extension)
https://github.com/HritikVaishnav/Myanimelist-Redesigned

I believe this was the one that I learned from the most with a lot of cool tricks. I looked into it after the Chrome sample extensions and tutorials
https://github.com/dimdenGD/OldTwitter

Actually I think it was this one
https://github.com/sdras/productive-twitter/
Shishio-kunFeb 1, 2023 7:31 AM
Feb 1, 2023 9:21 AM

Offline
Dec 2019
3445
what should I do for the buttons?

instead of explaining with text, maybe explaining with a simple image would be better.

should I use this current extension,or wait more?
Reply Disabled for Non-Club Members
Pages (2) [1] 2 »

More topics from this board

» [BBCode] Font Awesome Guide

hideso - Dec 25, 2023

6 by Shishio-kun »»
Today, 12:26 AM

Sticky: » 💚 [REPAIR STICKY] Repair/speed up a design + Request a layout fix

Shishio-kun - Nov 17, 2023

33 by Shishio-kun »»
Yesterday, 11:42 PM

» [CSS - Modern] 🛠️ Tweaks for lists -- Horizontal tags, descriptions, category-coloured text, accent colour, and more.

Valerio_Lyndon - Oct 24, 2019

20 by IridescentJaune »»
Nov 22, 10:58 PM

» ✳️ Bunkasai 2024 List Design and Graphic Design contests are OPEN

Shishio-kun - Nov 18

2 by Shishio-kun »»
Nov 18, 5:01 AM

Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templates

Shishio-kun - Feb 16, 2023

29 by floral_sacrifice »»
Nov 15, 10:24 AM
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login