feat(claude): init #1579
+179
−0
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,161 @@ | ||
| /* ==UserStyle== | ||
| @name Claude Catppuccin | ||
| @namespace github.com/catppuccin/userstyles/styles/claude | ||
| @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/claude | ||
| @version 2000.01.01 | ||
| @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/claude/catppuccin.user.less | ||
| @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aclaude | ||
| @description Soothing pastel theme for Claude | ||
| @author Catppuccin | ||
| @license MIT | ||
|
|
||
| @preprocessor less | ||
| @var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] | ||
| @var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] | ||
| @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] | ||
| ==/UserStyle== */ | ||
|
|
||
| @-moz-document url-prefix("https://claude.ai/chat"), url("https://claude.ai/new"), url("https://claude.ai/login") { | ||
| :root[data-mode="dark"] { | ||
| #catppuccin(@darkFlavor); | ||
| } | ||
| :root[data-mode="light"], | ||
| [data-theme="claude"][data-mode="light"] /* Special rule for the login page */ { | ||
| #catppuccin(@lightFlavor); | ||
| } | ||
|
|
||
| #hslify(@color) { | ||
| @raw: e( | ||
| %("%s %s% %s%", hue(@color), saturation(@color), lightness(@color)) | ||
| ); | ||
| } | ||
|
|
||
| #catppuccin(@flavor) { | ||
| @rosewater: @catppuccin[@@flavor][@rosewater]; | ||
| @flamingo: @catppuccin[@@flavor][@flamingo]; | ||
| @pink: @catppuccin[@@flavor][@pink]; | ||
| @mauve: @catppuccin[@@flavor][@mauve]; | ||
| @red: @catppuccin[@@flavor][@red]; | ||
| @maroon: @catppuccin[@@flavor][@maroon]; | ||
| @peach: @catppuccin[@@flavor][@peach]; | ||
| @yellow: @catppuccin[@@flavor][@yellow]; | ||
| @green: @catppuccin[@@flavor][@green]; | ||
| @teal: @catppuccin[@@flavor][@teal]; | ||
| @sky: @catppuccin[@@flavor][@sky]; | ||
| @sapphire: @catppuccin[@@flavor][@sapphire]; | ||
| @blue: @catppuccin[@@flavor][@blue]; | ||
| @lavender: @catppuccin[@@flavor][@lavender]; | ||
| @text: @catppuccin[@@flavor][@text]; | ||
| @subtext1: @catppuccin[@@flavor][@subtext1]; | ||
| @subtext0: @catppuccin[@@flavor][@subtext0]; | ||
| @overlay2: @catppuccin[@@flavor][@overlay2]; | ||
| @overlay1: @catppuccin[@@flavor][@overlay1]; | ||
| @overlay0: @catppuccin[@@flavor][@overlay0]; | ||
| @surface2: @catppuccin[@@flavor][@surface2]; | ||
| @surface1: @catppuccin[@@flavor][@surface1]; | ||
| @surface0: @catppuccin[@@flavor][@surface0]; | ||
| @base: @catppuccin[@@flavor][@base]; | ||
| @mantle: @catppuccin[@@flavor][@mantle]; | ||
| @crust: @catppuccin[@@flavor][@crust]; | ||
| @accent: @catppuccin[@@flavor][@@accentColor]; | ||
|
|
||
| color-scheme: if(@flavor = latte, light, dark); | ||
|
|
||
| ::selection { | ||
| background-color: fade(@accent, 30%); | ||
| } | ||
|
|
||
| input, | ||
| textarea { | ||
| &::placeholder { | ||
| color: @subtext0 !important; | ||
| } | ||
| } | ||
|
|
||
| --accent-brand: #hslify(@accent) []; | ||
| --accent-main-000: #hslify(darken(@accent, 5%)) []; | ||
| --accent-main-100: #hslify(@accent) []; | ||
| --accent-main-200: #hslify(@accent) []; | ||
| --accent-main-900: #hslify(lighten(@accent, 10%)) []; | ||
| --accent-pro-000: #hslify(lighten(@accent, 5%)) []; | ||
| --accent-pro-100: #hslify(@accent) []; | ||
| --accent-pro-200: #hslify(@accent) []; | ||
| --accent-pro-900: #hslify(darken(@accent, 25%)) []; | ||
| --accent-secondary-000: #hslify(@overlay0) []; | ||
| --accent-secondary-100: #hslify(@overlay1) []; | ||
| --accent-secondary-200: #hslify(@overlay1) []; | ||
| --accent-secondary-900: #hslify(@overlay2) []; | ||
| --bg-000: #hslify(@mantle) []; | ||
| --bg-100: #hslify(@base) []; | ||
| --bg-200: #hslify(@base) []; | ||
| --bg-300: #hslify(@surface0) []; | ||
| --bg-400: #hslify(@surface1) []; | ||
| --bg-500: #hslify(@surface2) []; | ||
| --border-000: #hslify(@base) []; | ||
| --border-100: #hslify(@crust) []; | ||
| --border-200: #hslify(@crust) []; | ||
| --border-300: #hslify(@overlay0) []; | ||
| --border-400: #hslify(@overlay1) []; | ||
| --border-500: #hslify(@overlay2) []; | ||
| --danger-000: #hslify(@maroon) []; | ||
| --danger-100: #hslify(@red) []; | ||
| --danger-200: #hslify(@red) []; | ||
| --danger-900: #hslify(@pink) []; | ||
| --oncolor-000: #hslify(darken(@mantle, 5%)) []; | ||
| --oncolor-100: #hslify(@mantle) []; | ||
| --oncolor-200: #hslify(@mantle) []; | ||
| --oncolor-300: #hslify(lighten(@mantle, 5%)) []; | ||
| --text-000: #hslify(darken(@text, 5%)) []; | ||
| --text-100: #hslify(@text) []; | ||
| --text-200: #hslify(@text) []; | ||
| --text-300: #hslify(@subtext0) []; | ||
| --text-400: #hslify(@subtext1) []; | ||
| --text-500: #hslify(lighten(@subtext1, 5%)) []; | ||
|
|
||
| /* Specific overwrite for generated code blocks */ | ||
| code { | ||
| /* Generated code default color */ | ||
| span { | ||
| color: @text !important; | ||
| } | ||
|
|
||
| /* 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; | ||
| } | ||
|
Comment on lines
+126
to
+149
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 😓 |
||
| } | ||
|
|
||
| /* Logo with hard coded fill */ | ||
| svg path[fill="#D97757"] { | ||
| fill: @accent !important; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /* deno-fmt-ignore */ | ||
| @catppuccin: { | ||
| @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; | ||
| @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; | ||
| @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; | ||
| @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; | ||
| }; | ||
Binary file not shown.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should avoid darkening colors by more than 10% if possible.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Invert the text color to base/mantle/crust.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I added a special rule so I didn't have to change the color for text-300.