Add catppuccin colorscheme #549
Conversation
|
that is very cool |
There was a problem hiding this comment.
This looks cool, but there are a couple of things I would like to see changed.
- The mode dropdown (the one on hover of the mode indicator) does not align well with the bigger navbar, please move it down a bit, and perhaps also align it to the left if that's preferred.
- There appears to be no indicator inside explore mode as to what will happen when I click enter. This also means the related help text (see
:h explore) is now unreadable
- Finally, I do not like the required dependency on nerd fonts, this is how it looks for systems without it (which I can imagine are most systems, given users need to install it explicitly on pretty much all distros, let alone other operating systems)
I would recommend to replace the font dependency to using CSS data urls, see https://developer.mozilla.org/en-US/docs/Web/CSS/url#using_a_data_url for help.
Overall, I am very happy with this theme, despite all the feedback above. It honestly looks stunning for the most part, and am looking forward to bringing it to Vieb. Please feel free to reach out if you have followup questions regarding the feedback, I should be faster to respond now that I'm back from my holiday.
|
whoa thats pretty insane, im going to have to update my catppuccin theme, also can you somehow make changing font easier, like use some kind of variable that would change all font family occurences? |
|
These changes all make sense, I have around an hour now so will try get them all done, if not I'll try finish them off soon |
|
Hey @Jelmerro I think that's everything if you want to have another look 👍 |
There was a problem hiding this comment.
This is very great, almost ready I think, thank you for the update. I would like to know if it's possible to keep the logo visible. Aside from that, I noticed a lot of duplicate styling compared to the default colorscheme, this is redundant and can be removed. Finally, I would recommend to change the tab-suspended color to #000000 and make sure it works (as currently it's overwritten by the duplicate styling below). Thank you for working on this, I think we are very close to merging this, and would like to include this in the next release if possible.
| #tabs, #navbar {width: 100vw;display: flex;background: var(--bg);counter-reset: tab-counter -1; position: relative;} | ||
| #logo {-webkit-app-region: drag;height: 1.8em;width: 1.8em;margin: .1em;min-width: 1.8em;min-height: 1.8em; display: none;} | ||
| #mode-container {display: flex;width: 4em; height: 4em; text-align: center;margin: 0;justify-content: center; align-items: center;font-size:0.7em; font-weight: normal; position: relative;} | ||
| #mode {text-transform: capitalize;font-size: 1.3em;font-weight: bold;display: flex;align-items: center; line-height: 1;display: none;} |
There was a problem hiding this comment.
A lot of these styles overlap with the default styles, they do not need to be repeated. I would also prefer to keep the logo visible if possible.
| --fg: #cdd6f4; | ||
| --tab-foreground: #a6adc8; | ||
| --tab-background: #181825; | ||
| --tab-suspended: #181825; |
There was a problem hiding this comment.
Can we give suspended tabs a different color? I believe this is important information that's not supposed to be gone by using a different colorscheme.
| #tabs > span {padding: 0.25em;font-size: 0.9em;color: var(--tab-foreground);background: var(--tab-background);display: flex;flex: 1;max-width:20em;overflow: hidden;white-space: nowrap;height: 2.5em; border-top: solid .1em transparent;} | ||
| #tabs > ::before {counter-increment: tab-counter 1;content: counter(tab-counter); font-size: 0.85em;} | ||
| #tabs > span > img {margin: auto 0 auto .25em;padding: 0; padding-right: 0.5em;height: 1em;width: 1em;min-height: 1em;min-width: 1em;pointer-events: none;} | ||
| #tabs .visible-tab {background: var(--visible-tab); color: var(--fg); border-top: .1em solid #74c7ec;} | ||
| #tabs .pinned {min-width: 3em !important;max-width: 3em;width: 3em; padding: 0.25em;} | ||
| #tabs .pinned > span { display: none; } | ||
| #tabs .pinned > img {padding: 0;margin: auto;height: 1.2em;width: 1.2em;min-height: 1.2em;min-width: 1.2em;} |
There was a problem hiding this comment.
A lot of this styling is default too, and part of this styling means the suspend color is not being used, so please check with the default colorscheme to remove as much css that's duplicate as possible.
|
I'll try sort the above later 👍 |
|
Any updates? :) |
I thought I'd see if you wanted to merge the colorscheme I wrote based around the highly popular Catppuccin color palette.
I think it looks pretty nice, and could make for a nice option for people in addition to the current defaults.