I see. Mind shooting me those overrides when you get a chance? It looks like you may have inverted the foreground and background colors, but not sure.
That is one of the changes, but really I just copied their earlier styles. 
The overrides I have are:
--color-background: 39,44,56;
--color-foreground: 31,35,45;
--color-background-200: 39,44,56;
--color-background-100: 31,35,45;
I don’t know where they all apply
1 Like
I see. Well, i’ll see what i can do. I must say that my css isn’t as standardized / templatized as it should be, so easily tweaking the theme in a reasonable way isn’t as much of an option. I wish our css variables were as thoughtful as anilist.
However, for reference for you and others, I have opened up functions for you to play around with the variables if you want to play with the styles. Simply open up your browser dev console. These styles will not be persistent page to page, so this is just for playing around.
To set the standard font color, use:
window.gs.setThemeElement('body-color', 'white');
Or to switch the background and foreground, do:
const bg = window.gs.getThemeElement('bg');
const bgLight = window.gs.getThemeElement('bg-light');
window.gs.setThemeElement('bg', bgLight);
window.gs.setThemeElement('bg-light', bg);
All themes are available at window.gs.themes, but liable to change!
3 Likes
Simply looking at your background & foreground values, you could run:
window.gs.setThemeElement('bg', 'rgb(39,44,56)');
window.gs.setThemeElement('bg-light', 'rgb(31,35,45)');
Granted, not saying that’s a solution, just showing what it’d look like hah.
Than is informative though, thanks!
3 Likes
@seanblue ok, potential solution. If we make the background the same color as the dark header and then the foreground the color of what used to be the background, it makes all the backgrounds darker, increasing contrast.
Type this into your dev console to see:
window.gs.setThemeElement('bg-light', '#22262b');
window.gs.setThemeElement('bg', '#1d2024');
What do we think of that?
3 Likes
This area is broken:
The contrast on tags in lists is also a bit hard, even with the dev console commands above:
2 Likes
I do agree with @seanblue that in needs to be more contrasty. I was under the impression that it’s obviously an issue, but reading the forum threads it seems that not everyone finds an issue with it. That’s why I have to raise my voice to support the ‘we need more contrast/visibility’ tribe 
Some other ideas/considerations:
OLED dark mode
Basically a completely black dark mode. Very similar to what we can set the forums to. I know it doesn’t carry the Natively aesthetic with it (which I very much love on light mode) but it could be easily implemented as an extra option.
I’m not sure how popular this would be, but I for one would most certainly use this one if available.
Usage with night light mode/blue light filter
Another niche consideration.
So I’m sure many of use some kind of blue light filter on our devices at night, some never even turn it off. IMO a good theme design looks good with such a mode, too. This isn’t a uniform tint of colour, many devices/apps allow you to configure it. For example if you crank it up to the max on a Windows device it will be somewhat unreadable no matter the theme used. But I use the max strenght on my Samsung phone because that’s a much weaker hue. So testing with a general/average blue light filter mode should suffice.
As I said earlier the dark mode lacks a lot of contrast as is, with added night light it’s even worse. So I basically have to choose between a lighter but less blue-lighty, or a darker but much more blue-lighty Natively at night. It isn’t ideal.
4 Likes
I just have learnt to live with it, as I still prefer it from light, but it’s a problem and people going in new might find it annoying.
Another one I found, the copyright/privacy policy is almost invisible
If you apply the dev console commands above, it disappears completely.
5 Likes
I’m also very happy with the contrast for what it’s worth (not much, because I usually don’t choose dark mode, but this one just looked very soothing).
3 Likes
So, I’m not sure if dark mode will get indexed by google – I guess not? But if yes, there would be another reason to improve contrast since you would have a worse SEO rank since the current contrast seems to not stand current accessibility standards set by the W3C and thus will get ranked worse in Google, which I guess is not desirable.
Regardless of SEO though, I would definitely try reach AA accessibility standards since that is pretty well researched to work for a broad range of people. I saw that you talked about this earlier already, but I want to stress that having accessible text is usually not a trade off and just a good guidelines to make sure the text is readable on as many devices and for as many users as possible. Those guidelines are not perfect and they still are working on making the contrast work better, but in general, if you want to have something that is usable and readable for as many people as possible, follow the AA guidelines. 
I can definitely help in developing an accessible color palette, but not sure what would be the best way to go about it. I can see in your code that you’re using css variables. If you want, I can try to make a proposal for a dark mode equivalent for those colors.
9 Likes
Really appreciate all of that! I’ll do my best
I have some css variables, but unfortunately I’m using bootstrap 4 via Sass, which makes this all harder (many things don’t have css variables). I may attempt to upgrade to bootstrap 5, no sass, which has basically complete coverage with CSS variables.
So, i’m not sure if it makes sense right now, but if you feel like playing around, I will of course be interested in your results.
4 Likes
Ah, I see. I won’t have time next week, but the week after that. But to be fair, the current dark mode implementation doesn’t look too bad either. I think there is some room to optimize. I will send you some proposals then, we’ll see if anything is helpful I will probably check out the most important pages (dashboard, browsing books and book site) and make some notes for you on what I think would benefit from a new color and what color I would exchange it with
5 Likes
Mentioned this in the Natively thread, but posting it here too.
The effect to fade out the rest of a long review is messed up since it’s fading to white and needs to fade to dark:
And now that I think of it, I wonder if the spoiler hiding on reviews might not be messed up too…
4 Likes
Spoilers in reviews are okay:
Not sure what happens if the spoiler is in the fading out part of a long review though.
Edit: Investigating further, spoilers are affected when they fall on the fading out part:
This is how it looks when you see part of the review:
This is how it looks when you see the full review:
7 Likes
Upgrading to boostrap 5 and using css variables would probably be a good idea in the near future to avoid extra work on themes, and also to help preserve your sanity
4 Likes
I feel like spoilers could have a lighter colored blur, so that you can notice better that they’re there. Either that, or a dark blue maybe, something that would stand out just a little more. Here, it seems like my review ends at “categorized as”, the spoiler disappears into the background.
7 Likes
More Dark Theme glitchy behaviour, the button headers look wonky when you scroll
And I think this was mentioned before but it might be related:
4 Likes
So, I did a few dark mode fixes just now.
- dark blue text just changed to the standard gray body text
- review expand opaque cover is now fixed
- changed the inputs on the update progress / update item modals to be darker
- changed the input color & placeholder colors to be lighter
… still a lot of work to do though. And doesn’t address the general contrast concern that the people who prefer higher contrast have.
6 Likes
Playing around with a higher contrast version, maybe something like this?
Execute this code in the console:
window.gs.setThemeElement('body-color', '#adb5bd');
window.gs.setThemeElement('main-accent', '#000');
window.gs.setThemeElement('bg', 'rgb(24 24 27)');
window.gs.setThemeElement('bg-light', '#22262b');
5 Likes
The screenshot looks pretty great to me, and clear to read, on both my phone and PC (with and without blue light filter). The only part that’s a little hard to read there is the numbers after I’m Reading/Watching…
3 Likes
