Implement dark theme option

That’s a huge improvement, yeah!

Also, here are some more places to fix. If you were to implement the colors you just showed and fixed most of the below issues, I’d probably switch to dark theme for real.

Expanded a series in your list

Selected status in your list

image

Minor suggestion - probably change the dark blue for these selections and other text

image

Sort in lists

image

The checkmark is hard to see for finished titles

image

This menu is still light

image

Some buttons and text on book pages are still light

image

5 Likes

@暁のルナ @seanblue Great to hear! I still pretty strongly prefer the current version, but i’m happy to add this higher contrast version as a user setting for dark mode. :smile:

It’s too dark for me for some reason.

In any case, I’ll try to get this rolled out soon. All the little issues you highlighted @seanblue are current issues already for dark mode I think, so need to address anyway.

3 Likes

Hmm, I think that blue looks good though. Do you want it brighter?

Blue is the default hyperlink color, and basically everywhere else you use it is a hyperlink afaict… So it’s confusing, on a UI level.

3 Likes

I don’t think this has been brought up yet, but apologies if I missed it.
On things you’ve already wishlisted, the greyed out box color makes it hard to see the check mark to see that it’s already been wishlisted (if you don’t realize that the wishlist button should be a different color, which I didn’t realize at first)

6 Likes

So I tried to look a bit into it.

In general, I’d reduce colors a lot, make existing colors more muted and make the overall style more darker so existing colors can pop again. I would design all interactive elements the same way. I’m not sure about the outlines I added, I can easily do another version without outlines. I just thought it was easier to make elements visually distinct by outlines instead of colors, since it’s harder if colors have to stick out from each other instead of outlines when you use dark mode.

Biggest inspiration was github dark mode.

You can see some before and after here:
Ideas for dark mode (figma link)

You can get the colors out of figma by using the inspect mode.

This is the result after playing around for a bit of time, if you like what I’m doing I can spent some more time with it, but I’m not sure if that is helpful in any way :sweat:

7 Likes

That looks very nice! I like the outlines and it’d be relatively easy to implement for dark mode but keep just a box-shadow for light mode.

If you want to generate your palette, i’d give it a go.

For right now, I’ve decided to implement the high contrast version, until I surface the low contrast version as a toggleable option.

It is helpful, but I’m not sure I think it makes sense to keep working on it. Just getting your palette would be helpful enough :smiling_face:

Most of the issues beyond that are around standardizing styles and fixing bugs :thinking:

Really appreciate you for doing that! I may have some more targeted questions for you later as I get to them.

4 Likes

I guess it would be good to check if the outlines would look okay-ish in the dashboard as well since there are even more cards close to each other, it could maybe become a bit too much. I guess I would also try and see how it looks there. I think it could work even without outlines.

How does everyone else here in the thread like it? If it doesn’t look good to you here of course we should stick to the old design or maybe only adapt a few things.

Sure, I can do that. I will do that sometime this week, hope there is no rush?

I guess I can’t help with the rest. I only can do HTML/CSS since my frontend days are long over :smiley: I am only working as a Product Designer since a few years, so always happy to give input on design things. It has been a few years since I last designed a dark mode, but of course when I did that for the company I worked at at the time we spent way more time on it and were several designers working on it, so I wouldn’t be surprised if my quick solution isn’t that good.

5 Likes

Oh and everyone, feel free to duplicate the figma file and play around with it and change things for the better! But be aware that there are two pages and one is just some messy drafts and inspirations :smiley:

5 Likes

That looks really solid and clear on both my phone & computer

1 Like

When editing the total page count, the numbers are black and almost impossible to see:

download (1)

Looks great! :+1:

5 Likes

Heya! Sorry for the late reply, I was sick so I wasn’t able to get back sooner with a color palette.

I have the colors here in the figma file

I also further adapted a few colors and reduced the initial colors where I could to make the color palette as small as possible. I also decided to remove the borders again as I felt like it’s only clutter that is not needed. Feel free to send me a dm if you need further support. In Figma you can also go into inspect mode to check where I used which color.

Hope this helps!

(I’m not sad if this doesn’t get implemented! So don’t feel pressured to use my colors if you feel like they don’t work.)

13 Likes

Also the up-down selectors aren’t dark. (The upper one is dropdown, the second is increase/decrease, though.)

Also, imo, there ought to be some space after Current page, before the dropdown selector.

5 Likes