Suggested Darkbeet theme improvements #1

Open
opened 1 year ago by numnum · 6 comments
numnum commented 1 year ago
  1. Message text color is very bright, hurts the eyes (which isn't exactly the point of a dark mode theme, I'd say 😉). A better choice would be #c5c5c5 (just like --text-color).

  2. The text size is really small for most screens, I would recommend to increase it from 12px to 14px.

  3. New messages header could look like this:
    image
    instead of this
    image

  4. Vertical padding for the buttons is uneven:
    image

  5. The color of the padlock when the chatroom is not encrypted suggests that encryption is actually enabled. As the orange color is used in other places in this theme, it makes meaning of the padlock's orange color ambiguous.

  6. Hovering a chat room makes the text color darker instead of lighter.
    image

  7. "Open Groupchats" and "Bookmarks" are both groups at the same level, but have different colors (swapped between normal and :hover).

  8. The font Muli is used for just a few trivial items, such as group names ("Open groupchats", "Bookmarks"), but not for the rest. Any reason for that?

1. Message text color is very bright, hurts the eyes (which isn't exactly the point of a dark mode theme, I'd say 😉). A better choice would be #c5c5c5 (just like `--text-color`). 2. The text size is really small for most screens, I would recommend to increase it from 12px to 14px. 3. New messages header could look like this: ![image](/attachments/1058e118-14a5-475e-aef9-0fcb5d38e609) instead of this ![image](/attachments/c8aa6e8a-c57b-4e90-aae0-f39c81f08c05) 4. Vertical padding for the buttons is uneven: ![image](/attachments/c5970e9c-98d9-4d3d-9812-f54b900742ad) 5. The color of the padlock when the chatroom is _not encrypted_ suggests that encryption is actually _enabled_. As the orange color is used in other places in this theme, it makes meaning of the padlock's orange color ambiguous. 6. Hovering a chat room makes the text color darker instead of lighter. ![image](/attachments/8e30b84b-1478-47a9-994a-37a775c47593) 7. "Open Groupchats" and "Bookmarks" are both groups at the same level, but have different colors (swapped between normal and :hover). 8. The font Muli is used for _just a few trivial_ items, such as group names ("Open groupchats", "Bookmarks"), but not for the rest. Any reason for that?
Owner

Thanks a lot for all the feedback. I hope I can fix all the issues soon and push it for further testing.

Message text color is very bright, hurts the eyes (which isn’t exactly the point of a dark mode theme, I’d say 😉). A better choice would be #c5c5c5 (just like --text-color).

Yup. Agree with that.

The text size is really small for most screens, I would recommend to increase it from 12px to 14px.

Not sure about that but I will have a look. Which text do you have in mind the post text or text on the sidebars (like participant list)

New messages header could look like this:

Yes, agree. Couldn't find that one yet in the code to change it.

Vertical padding for the buttons is uneven:

Thanks, will fix it.

The color of the padlock when the chatroom is not encrypted suggests that encryption is actually enabled. As the orange color is used in other places in this theme, it makes meaning of the padlock’s orange color ambiguous.

Indeed it should be gray or in any way indicate opposite to what it does. I haven't touch it as I prepared the theme without libsignal enabled on my test env.

Hovering a chat room makes the text color darker instead of lighter.

Yes, another little detail I couldn't fix but I am aware of it. just wanted to push the build asap. I will try to hunt it down and fix together with few other places (hovering on popup menus does the smame thing).

The font Muli is used for just a few trivial items, such as group names (“Open groupchats”, “Bookmarks”), but not for the rest. Any reason for that?

Font wise I just use default converse stuff. Haven't been looking into it yet, but I think proper font is a core of having a nice theme so it is definatelly something to look into.

Thanks a lot for all the feedback. I hope I can fix all the issues soon and push it for further testing. > Message text color is very bright, hurts the eyes (which isn’t exactly the point of a dark mode theme, I’d say 😉). A better choice would be #c5c5c5 (just like --text-color). Yup. Agree with that. > The text size is really small for most screens, I would recommend to increase it from 12px to 14px. Not sure about that but I will have a look. Which text do you have in mind the post text or text on the sidebars (like participant list) > New messages header could look like this: Yes, agree. Couldn't find that one yet in the code to change it. > Vertical padding for the buttons is uneven: Thanks, will fix it. > The color of the padlock when the chatroom is not encrypted suggests that encryption is actually enabled. As the orange color is used in other places in this theme, it makes meaning of the padlock’s orange color ambiguous. Indeed it should be gray or in any way indicate opposite to what it does. I haven't touch it as I prepared the theme without libsignal enabled on my test env. > Hovering a chat room makes the text color darker instead of lighter. Yes, another little detail I couldn't fix but I am aware of it. just wanted to push the build asap. I will try to hunt it down and fix together with few other places (hovering on popup menus does the smame thing). > The font Muli is used for just a few trivial items, such as group names (“Open groupchats”, “Bookmarks”), but not for the rest. Any reason for that? Font wise I just use default converse stuff. Haven't been looking into it yet, but I think proper font is a core of having a nice theme so it is definatelly something to look into.
Poster

Thanks a lot for all the feedback. I hope I can fix all the issues soon and push it for further testing.

Message text color is very bright, hurts the eyes (which isn’t exactly the point of a dark mode theme, I’d say 😉). A better choice would be #c5c5c5 (just like --text-color).

Yup. Agree with that.

The text size is really small for most screens, I would recommend to increase it from 12px to 14px.

Not sure about that but I will have a look. Which text do you have in mind the post text or text on the sidebars (like participant list)

I meant both messages and the sidebars. With high-resolution devices it's way too small and - imho - even on a 1080p 24" screen it's quite small, especially when you compare it to pretty much any other messaging/social media/website doesn't use text sizes like this anymore.

New messages header could look like this:

Yes, agree. Couldn't find that one yet in the code to change it.

I'm seeing --chat-separator-border-bottom: 2px solid var(--blue) for the blue line and the following for the text/bg:
image

The color of the padlock when the chatroom is not encrypted suggests that encryption is actually enabled. As the orange color is used in other places in this theme, it makes meaning of the padlock’s orange color ambiguous.

Indeed it should be gray or in any way indicate opposite to what it does. I haven't touch it as I prepared the theme without libsignal enabled on my test env.

Yeah should be grayed or something, yes. I don't know if the icon is set by CSS via :before { content: }, but a padlock with a diagonal line through it would be even better.

Hovering a chat room makes the text color darker instead of lighter.

Yes, another little detail I couldn't fix but I am aware of it. just wanted to push the build asap. I will try to hunt it down and fix together with few other places (hovering on popup menus does the smame thing).

I agree that it feels quite messy and thus somehow is annoying to figure out which color is used for what.

The font Muli is used for just a few trivial items, such as group names (“Open groupchats”, “Bookmarks”), but not for the rest. Any reason for that?

Font wise I just use default converse stuff. Haven't been looking into it yet, but I think proper font is a core of having a nice theme so it is definatelly something to look into.

I suspected, first time I saw "vanilla" ConverseJS I was already a bit annoyed by the font use, it's messy. It'd be great if a proper UI/UX expert would take an in-depth look at the ConverseJS project (unfortunately I'm nowhere near one), there's a lot to gain there.

> Thanks a lot for all the feedback. I hope I can fix all the issues soon and push it for further testing. > > > Message text color is very bright, hurts the eyes (which isn’t exactly the point of a dark mode theme, I’d say 😉). A better choice would be #c5c5c5 (just like --text-color). > > Yup. Agree with that. > > > The text size is really small for most screens, I would recommend to increase it from 12px to 14px. > > Not sure about that but I will have a look. Which text do you have in mind the post text or text on the sidebars (like participant list) I meant both messages and the sidebars. With high-resolution devices it's way too small and - imho - even on a 1080p 24" screen it's quite small, especially when you compare it to pretty much _any_ other messaging/social media/website doesn't use text sizes like this anymore. > > New messages header could look like this: > > Yes, agree. Couldn't find that one yet in the code to change it. I'm seeing `--chat-separator-border-bottom: 2px solid var(--blue)` for the blue line and the following for the text/bg: ![image](/attachments/964b4fa2-e6c6-476d-b09c-dcf16290783f) > > The color of the padlock when the chatroom is not encrypted suggests that encryption is actually enabled. As the orange color is used in other places in this theme, it makes meaning of the padlock’s orange color ambiguous. > > Indeed it should be gray or in any way indicate opposite to what it does. I haven't touch it as I prepared the theme without libsignal enabled on my test env. Yeah should be grayed or something, yes. I don't know if the icon is set by CSS via `:before { content: }`, but a padlock with a diagonal line through it would be even better. > > Hovering a chat room makes the text color darker instead of lighter. > > Yes, another little detail I couldn't fix but I am aware of it. just wanted to push the build asap. I will try to hunt it down and fix together with few other places (hovering on popup menus does the smame thing). I agree that it feels quite messy and thus somehow is annoying to figure out which color is used for what. > > The font Muli is used for just a few trivial items, such as group names (“Open groupchats”, “Bookmarks”), but not for the rest. Any reason for that? > > Font wise I just use default converse stuff. Haven't been looking into it yet, but I think proper font is a core of having a nice theme so it is definatelly something to look into. I suspected, first time I saw "vanilla" ConverseJS I was already a bit annoyed by the font use, it's messy. It'd be great if a proper UI/UX expert would take an in-depth look at the ConverseJS project (unfortunately I'm nowhere near one), there's a lot to gain there.
4.7 KiB
Poster

I just saw this:
image

which uses:
image

I just saw this: ![image](/attachments/62dfd55b-40c3-41a9-8d40-32355df78c90) which uses: ![image](/attachments/b2561875-3bd0-45f4-ad29-508930896ef6)
3.0 KiB
3.8 KiB
Poster

Made a pull request. Every change relating to the glitches described above is put into a separate commit, so it's easy to review.

Cheers!

Made a pull request. Every change relating to the glitches described above is put into a separate commit, so it's easy to review. Cheers!
Owner

Awesome. I will check and pull. Thanks a lot!

Awesome. I will check and pull. Thanks a lot!
Poster

No worries! Keep up the good work!

No worries! Keep up the good work!
Sign in to join this conversation.
No Milestone
No Assignees
2 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.