feat(claude): init

[ruiiiijiiiiang]

🎉 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 🗒

• I have read and followed Catppuccin's submission guidelines.
• I have made a new directory underneath /styles/<name-of-website> containing the contents of the /template directory.
  • I have ensured that the new directory is in lower-kebab-case.
  • I have followed the template and kept the preprocessor as LESS.
• I have made sure to update the userstyles.yml file with information about the new userstyle.
• I have included the following files:
  • 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.

[uncenter]

Login page unthemed:

[uncenter]

Boxed in red are areas of text that I can tell are unthemed based on the preview image.

[isabelroses]

We are currently not synatx highlighting the code. It would be great if we could. I'm noticing that its using prismjs could you take a look at adding that. The docs for doing so can be found here https://github.com/catppuccin/userstyles/blob/main/docs/guide/syntax-highlighting.md

[ruiiiijiiiiang]

We are currently not synatx highlighting the code. It would be great if we could. I'm noticing that its using prismjs could you take a look at adding that. The docs for doing so can be found here https://github.com/catppuccin/userstyles/blob/main/docs/guide/syntax-highlighting.md

Thank you for the remainder. They must have recently added prismjs to their front end. I have updated the styles accordingly.

[uncenter]

I was putting off setting up a Claude account for a while but I did it 😄, I'll review later today

[uncenter]

Looks like https://claude.ai/recents and https://claude.ai/settings/profile aren't themed, can we theme them?

EDIT: Huh sorry it looks like the settings page is themed, not sure what I was seeing earlier!

[uncenter]

Tooltips appear unthemed.

https://claude.ai/upgrade is not themed by the URL selectors but does appear themed if you add the URL selector, with no styling changes!

[ruiiiijiiiiang]

Tooltips appear unthemed.

https://claude.ai/upgrade is not themed by the URL selectors but does appear themed if you add the URL selector, with no styling changes!

The tooltips have been fixed. I've also updated the url selector to just use url-prefix("https://claude.ai/") and it appears to be theming all pages correctly.

[uncenter]

Can you set color: text; on code blocks? Looks like non-token text is unthemed here.
It also looks like inline code is themed, from the .text-danger-000 class, but ideally we should make it accent.

[ruiiiijiiiiang]

Can you set color: text; on code blocks? Looks like non-token text is unthemed here. It also looks like inline code is themed, from the .text-danger-000 class, but ideally we should make it accent.

Code color updated. Frappe with lavender accent:

[uncenter]

The contrast of Start new chat here doesn't look great, what do you think?

And about the sidebar in general - we typically make sidebars like Claude's mantle. You can reference the ChatGPT userstyle. We should make the chat messages/AI replies have a background of surface0 to fit better after that change.

[MathieuDR]

The projects are unthemed I think

When you select a style, it also seems unthemed, note when you have a custom style the description has a gradient over it, which also seems unthemed.