feat(claude): init #1579
feat(claude): init #1579
Conversation
…ning when possible
styles/claude/catppuccin.user.less
Outdated
| --accent-pro-100: #hslify(@accent) []; | ||
| --accent-pro-200: #hslify(@accent) []; | ||
| --accent-pro-900: #hslify(lighten(@accent, 10%)) []; | ||
| --accent-pro-900: #hslify(darken(@accent, 25%)) []; |
There was a problem hiding this comment.
We should avoid darkening colors by more than 10% if possible.
There was a problem hiding this comment.
I was hoping to create more contrast for elements like this one, where the background color is accent-pro-900. If I change the darken ratio to 10%, the text becomes very hard to read:
What's a good approach to make it more readable without too much darkening?
There was a problem hiding this comment.
Invert the text color to base/mantle/crust.
There was a problem hiding this comment.
I added a special rule so I didn't have to change the color for text-300.
| /* Generated code in green */ | ||
| span.token[style="color: rgb(152, 195, 121);"] { | ||
| color: @green !important; | ||
| } | ||
|
|
||
| /* Generated code in yellow */ | ||
| span.token[style="color: rgb(209, 154, 102);"] { | ||
| color: @yellow !important; | ||
| } | ||
|
|
||
| /* Generated code in blue */ | ||
| span.token[style="color: rgb(97, 175, 239);"] { | ||
| color: @blue !important; | ||
| } | ||
|
|
||
| /* Generated code in red */ | ||
| span.token[style="color: rgb(224, 108, 117);"] { | ||
| color: @red !important; | ||
| } | ||
|
|
||
| /* Generated code in magenta */ | ||
| span.token[style="color: rgb(198, 120, 221);"] { | ||
| color: @mauve !important; | ||
| } |
There was a problem hiding this comment.
We should ideally try to match this to our own syntax highlighting, but if these inline styles are all we got... I guess not.
There was a problem hiding this comment.
Yeah I wish I could do that but unfortunately this is all I have to work with 😓
|
Boxed in red are areas of text that I can tell are unthemed based on the preview image. |
uncenter
added
the
waiting on author
|
@uncenter The onboarding page is now being styled correctly. |
uncenter
removed
the
waiting on author
🎉 Theme for Claude 🎉
Claude.ai, similar to ChatGPT, is an AI-powered chatbot and assistant developed by Anthropic, designed to provide conversational, creative, and problem-solving support. It focuses on generating helpful, safe, and user-aligned responses.
Latte with Peach
Frappe with Sapphire
Macchiato with Flamingo
Mocha with Mauve
🗒 Checklist 🗒
/styles/<name-of-website>containing the contents of the/templatedirectory.userstyles.ymlfile with information about the new userstyle.catppuccin.user.less- all the CSS for the userstyle, based on the template.preview.webp- composite image of all four individual flavor screenshots (taken with the default accent color of mauve) stitched together, generated via Catwalk.