starred/karakeep

Fork 0

mirror of https://github.com/karakeep-app/karakeep.git synced 2026-04-24 23:46:06 +03:00

[GH-ISSUE #1261] UI clean-up suggestion #810

New issue

Open

opened 2026-03-02 11:52:55 +03:00 by kerem · 4 comments

kerem commented

2026-03-02 11:52:55 +03:00

Owner

Originally created by @dotvhs on GitHub (Apr 13, 2025).
Original GitHub issue: https://github.com/karakeep-app/karakeep/issues/1261

First of all - great work on the Karakeep, it looks like a very well thought-out project!

Playing with it for a bit I noticed thought that some parts of the UI aren't very consistent and I decided on cleaning it up a little bit.

I don't think I'm confident in my skills to implement this myself and definitely wouldn't try without prior discussion about it.

Below I will post comparison of my changes made to the UI. I shuffled around some colors, reduced amount of borders used, and unified paddings here and there. I can work on some other views if necessary and it's open for feedback too.

Dark version before:

Dark version after:

Light version before:

Light version after:

Figma project:
https://www.figma.com/design/Ge7wCrj7P0sJbSK1SzbXnQ/Karakeep-Clean-up?node-id=0-1&t=jwOwnOfKCbGDlqWp-1

Originally created by @dotvhs on GitHub (Apr 13, 2025). Original GitHub issue: https://github.com/karakeep-app/karakeep/issues/1261 First of all - great work on the Karakeep, it looks like a very well thought-out project! Playing with it for a bit I noticed thought that some parts of the UI aren't very consistent and I decided on cleaning it up a little bit. I don't think I'm confident in my skills to implement this myself and definitely wouldn't try without prior discussion about it. Below I will post comparison of my changes made to the UI. I shuffled around some colors, reduced amount of borders used, and unified paddings here and there. I can work on some other views if necessary and it's open for feedback too. Dark version before: ![Image](https://github.com/user-attachments/assets/7220247a-d9ea-4fcf-bf2d-4c2cdf4a0d71) Dark version after: ![Image](https://github.com/user-attachments/assets/f5134d85-71c4-4422-8ecb-782c67e8dbf7) Light version before: ![Image](https://github.com/user-attachments/assets/471fe684-1e5b-4167-ab3f-d3176faa88d7) Light version after: ![Image](https://github.com/user-attachments/assets/f32ebfb2-f3a7-4745-96c5-cf6ae295a3a0) Figma project: https://www.figma.com/design/Ge7wCrj7P0sJbSK1SzbXnQ/Karakeep-Clean-up?node-id=0-1&t=jwOwnOfKCbGDlqWp-1

kerem added the

UI/UX

label

2026-03-02 11:52:55 +03:00

kerem commented

2026-03-02 11:52:56 +03:00

Author

Owner

@egla89 commented on GitHub (Apr 14, 2025):

I feel like the reduction in text contrast in dark mode is quite drastic. The text in New Item is also not accessibility anymore this way, as it doesn't pass basic WCAG contrast checks, whereas the labels are only slightly below the recommended minimum contrast for small text.

@egla89 commented on GitHub (Apr 14, 2025): I feel like the reduction in text contrast in dark mode is quite drastic. The text in `New Item` is also not accessibility anymore this way, as it doesn't pass basic WCAG contrast checks, whereas the labels are only slightly below the recommended minimum contrast for small text.

kerem commented

2026-03-02 11:52:56 +03:00

Author

Owner

@dotvhs commented on GitHub (Apr 14, 2025):

I feel like the reduction in text contrast in dark mode is quite drastic. The text in New Item is also not accessibility anymore this way, as it doesn't pass basic WCAG contrast checks, whereas the labels are only slightly below the recommended minimum contrast for small text.

Thanks for the comment :) I updated my Figma project and I fixed the things you mentioned

@dotvhs commented on GitHub (Apr 14, 2025): > I feel like the reduction in text contrast in dark mode is quite drastic. The text in `New Item` is also not accessibility anymore this way, as it doesn't pass basic WCAG contrast checks, whereas the labels are only slightly below the recommended minimum contrast for small text. Thanks for the comment :) I updated my Figma project and I fixed the things you mentioned

kerem commented

2026-03-02 11:52:56 +03:00

Author

Owner

@MohamedBassem commented on GitHub (Apr 20, 2025):

Hey, @dotvhs really appreciate taking the time and suggesting those cleanups! My thoughts:

I REALLY like how the tags look in your design. I think we should do it.
I also like getting rid of the shadows under the card, it indeed looks cleaner.
The color of the "Save" button indeed looks less intrusive when it matches the color of the tag. I like that as well.

The part I'm not so sure about is getting rid of the contrast between the sidebar and the content. We can try to make it less contrasty, but I feel like without it, something seems missing.

I also don't mind getting rid of the bottom border of the navbar (and only add it on scroll), but we'll have to come up with a nice way to blend them assuming the previous point about restoring the contrast in the sidebar.

@MohamedBassem commented on GitHub (Apr 20, 2025): Hey, @dotvhs really appreciate taking the time and suggesting those cleanups! My thoughts: 1. I REALLY like how the tags look in your design. I think we should do it. 2. I also like getting rid of the shadows under the card, it indeed looks cleaner. 3. The color of the "Save" button indeed looks less intrusive when it matches the color of the tag. I like that as well. The part I'm not so sure about is getting rid of the contrast between the sidebar and the content. We can try to make it less contrasty, but I feel like without it, something seems missing. I also don't mind getting rid of the bottom border of the navbar (and only add it on scroll), but we'll have to come up with a nice way to blend them assuming the previous point about restoring the contrast in the sidebar.

kerem commented

2026-03-02 11:52:56 +03:00

Author

Owner

@dotvhs commented on GitHub (Apr 22, 2025):

The part I'm not so sure about is getting rid of the contrast between the sidebar and the content. We can try to make it less contrasty, but I feel like without it, something seems missing.

Thanks for the reply and I'm glad you mostly like the project :) I updated it now and I included your feedback for the sidebar in it:

@dotvhs commented on GitHub (Apr 22, 2025): > The part I'm not so sure about is getting rid of the contrast between the sidebar and the content. We can try to make it less contrasty, but I feel like without it, something seems missing. Thanks for the reply and I'm glad you mostly like the project :) I updated it now and I included your feedback for the sidebar in it: ![Image](https://github.com/user-attachments/assets/8a6e52ec-69e0-473e-b53a-726e9cae015e) ![Image](https://github.com/user-attachments/assets/a2ec270c-0203-44aa-841b-5281a8cfe0af)

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/karakeep#810

No description provided.

Rows
Columns