Comments (11)
Great port! One suggestion: Just want to point out that the OLED version is not official (you probably know that already, but just wanted to point that out) and we're calling it Catppuccin Americano
on the Discord instead of Espresso, so you might want to change that in the stylus file itself.
from userstyles.
Hello,
Thanks for the hard work so far I just have some things to add:
Changes:
- I can imagine this might be hard to change and I am presume this is not intentional
- Most things when they are subsets / subitems should go lighter e.g.
Document attachment:
Selected chat on default whatsapp:
- Red text for blocking/reporting etc isnt correctly themed see
--danger
Example image:
- Toggles should ideally be theme see example:
- Hovering some buttons looks a bit strange
example image:
- The download and play buttons look a bit strange (personally i recomend to have them set to a white colour etc
Examples:
- see #52 - i agree with this
- The chat filter button is not themed
- Can we make the checkbox's follow accent?
- Disabled button text isn't following catppucchin theme
Example image:
- The keyboard shortcuts are not theme
from userstyles.
#52
I'll change the background for incoming messages as soon as I can. Should it be a toggle? Or should it be surface1 as default?
As for the links, I followed the style guide, which at the point I started with the theme suggested Rosewater for Links and URLs. I'll update the links to use Sapphire and Teal
- Not intentional at all, of course. Just something I saw once but didn't have the time to fix, and completely forgot about it. It's not hard to fix, but it requires defining variables with rgb/rgba (I don't remember right now) values, instead of hex which is what mostly everything else in the UI uses. Not sure if there's a way to convert from hex to rgb directly in css, but I haven't found any. I'll get to it when I have time.
- Should that be accent (like Reddit's toggles), or just green?
- What should the colours be for hover buttons?
- Should that be green background with the foreground in base, or accent background?
- Disabled buttons uses hsla right now. I'll see how to fix that (also, what should the color for disabled buttons be?)
- That's something I missed as well. Should be easy to fix though.
For the points I didn't mention, I'm gonna fix them as soon as I can.
Thanks for the feedback!
from userstyles.
Hey, i think the theme looks great. I just wanted to leave a suggestion to make a toggle to switch the received messages background color to surface1. In my case it's hard to read on black unless everything is black too.
This is how it would look like:
Other thing is that links are usually Sapphire color and on hover Teal
Other then that it's a great port :P
from userstyles.
#2025 (comment) I'll change the background for incoming messages as soon as I can. Should it be a toggle? Or should it be surface1 as default? As for the links, I followed the style guide, which at the point I started with the theme suggested Rosewater for Links and URLs. I'll update the links to use Sapphire and Teal
I think surface1 as default, no need for a toggle (up to you though for the toggle)
I think the style guide needs an update to refelect the new view on links.
- Should that be accent (like Reddit's toggles), or just green?
I recommend accent.
- What should the colours be for hover buttons?
For hover if its an accent make it lighter or darker up to your disgression. If its a tonal button such as surface0
then you can make it surface1
for example.
- Should that be green background with the foreground in base, or accent background?
Use curst or mantle.
- Disabled buttons uses hsla right now. I'll see how to fix that (also, what should the color for disabled buttons be?)
Disabled buttons are usually darker but the text should be something like subtext0
or subtext1
Good luck!
from userstyles.
I've made some of the updates. I think surface1 might be too light for incoming messages if we use a lighter tone for subitems, as @isabelroses mentioned, especially in Mocha and Americano (which I forgot to rename, I'll do that now)
For reference, this is Mocha
and this is Americano
Isolated like this it looks okay, but I feel the contrast is a bit too high and incoming messages, especially those with quotes, links or anything attached, are a bit too bright.
These are now the colors for active, hover and the base color for chats in the chat list
Regarding the issues you brought up in #52:
- 2, those specific cases, and also the hover item in dropdown menus, are fixed
- 3, that is using the theme now
- 4, the toggles are using accent when active, and surface when inactive (though the track color for the switch does not change, only the handle. I might fix that when I do the rgb and rgba colors for everything else)
- 6, I changed that, but I probably should change it to text instead of overlay, it's not white enough.
- 7, as mentioned earlier, surface1 might be too bright. Not sure if you agree, or if you think it is okay
- 8, that button is using green as background and crust as foreground now, I can change the background to accent if that makes more sense
- 9, done
- 11, done (except for the button boxes, which use rgba colors, so I will do those later).
I haven't changed 1, 5 and 10 yet, as those need rgb color variables
from userstyles.
I've made some of the updates. I think surface1 might be too light for incoming messages if we use a lighter tone for subitems
You might be correct maybe make the incoming text's base and their subitems surface0
Everything else LGTM
from userstyles.
I've made some of the updates. I think surface1 might be too light for incoming messages if we use a lighter tone for subitems
You might be correct maybe make the incoming text's base and their subitems surface0 Everything else LGTM
Great! I'll change the background for incoming to base and subitems surface0. Maybe I can add a toggle for those who prefer to have it brighter.
As for the others, I have fixed 1 and 5 (although for the button hover 15% darker is a little too much I think, I might change it to 10% and see)
I'll try to fix the disabled buttons when I can, shouldn't be hard I imagine. I just have to get the right hsl for each theme
from userstyles.
Maybe I can add a toggle for those who prefer to have it brighter.
Nobody will stop you making a toggle by the way so go for it.
from userstyles.
Note
We are putting userstyle issues on hold while catppuccin/community#4 is being discussed.
from userstyles.
Hiya 👋
I'm happy to announce that ports which are themed with Stylus (called "Userstyles") now live over at https://github.com/catppuccin/userstyles. This means that your existing work will have to be transformed into a pull request to that repository.
Please follow the documentation detailed here on how to create a userstyle.
I'll be transferring this issue to the userstyles repository as they will not be reviewed here anymore. Thank you for your patience during this process!
from userstyles.
Related Issues (20)
- Whatsapp Web new sidebar not styled
- pinterest userstyle issue when applying HOT 1
- Spotify unthemed background behind sidebar elements
- youtube: readability issues in shorts player HOT 1
- Proton: Some text inside message in not visible but present HOT 2
- Spotify: Text shows in white on white when using Latte theme
- spotify: unthemed elements
- Whatsapp Web new chat filters not styled
- YouTube - empty chat is white when using Catppuccin Macchiato HOT 1
- Google: Some components not styled
- Hand off maintenance of canvas-lms userstyle HOT 1
- Hoppscotch invisible text in graphql
- wikiwand userstyle: Not distinguishable between starred and not starred languages
- shouldn't we be using a .less file extension for files using Less as the pre-processor instead of using .css? HOT 3
- chatgpt: new domain chatgpt.com
- gmail: Assumption of a base dark-mode theme
- Settings menu un-styled menu-item hover color
- Wikipedia wrong styling for equations and tables
- Color issues
- wikiwand: citations overlay text
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from userstyles.