catppuccin / vscode Goto Github PK

Because of the bracket colorize, sometimes the token color for contents is the same as bracket, reduces readability a little. I think we can have one of those solutions for this issue:

• Choose different colors for bracket[1-6] to other tokens (class, type...)
• Dim/Shade bracket color by certain amounts

Python

Typescript React

"catppuccin.accentColor": "sky",

Currently, the accentColor of the theme is only applied to certain properties. However, I believe it would be useful to extend its use to other properties to create a more coherent user experience.

As an example, I propose applying the accentColor "sky" (#87ceeb) to the following properties:

  "workbench.colorCustomizations": {
    "symbolIcon.constructorForeground": "#87ceeb",
    "tab.activeBorderTop": "#87ceeb",
    "terminalCursor.foreground": "#87ceeb",
    "activityBar.activeBorder": "#87ceeb",
    "badge.background": "#87ceeb",
    "button.hoverBackground": "#87ceebe6",
    "focusBorder": "#87ceeb",
    "editorGutter.modifiedBackground": "#87ceeb",
    "panelTitle.activeBorder": "#87ceeb",
    "statusBar.debuggingBackground": "#87ceeb",
    "statusBarItem.focusBorder": "#87ceeb",
    "statusBarItem.remoteBackground": "#87ceeb",
    "terminal.tab.activeBorder": "#87ceeb",
  },

By doing this, all visual elements related to the accentColor would look coherent and help users quickly identify important elements in the interface.

Could someone review this suggestion and consider it for a future update? Thank you!

The default dark+ theme has a shadow for distinguishing sticky scroll from other content.

This theme currently does not.

It can be enabled by setting "scrollbar.shadow" to a color. Below is an example of it being #80. In dark+, it's set to full black.

It also adds a shadow to the scrollbar, but there seems to be no way to prevent that.

Steps to Reproduce:

Reproduces after enabling Editor: Render Whitespace in VS Code settings.

Expected Behaviour:

Whitespaces are distinguishable like in default VS Code theme.

Current Behaviour:

Possible Implementation:

These colors are draft version, but it represents the main idea. If this issue is relevant, you can assign it on me, I'm ready to help with it.

As the title states there is a small issue with search highlights and comments. The both use the same colour – as the background to highlight result, and as text colour for comments. This means that if the searched term comes up in a comment it'll be just a grey box. Since most text is pretty light in colour anyway I'd suggest making the search highlight one of the darker colours maybe?

Here is an example of this:

Can you make the colors for python and such some languages to more of a Laverish view rather than green and peach ? Thankss !!

As mentioned in #55, the compile step doesn't work reliably yet. I suspect it's an issue with using async file writes, I'll try to hotfix it using fs.writeSync.

Hi all,

I have been having an issue with the colours in VS Code. After a while of working, the colour scheme of the code is gone. I have noticed it is mostly with the oranges, i.e. the modules imported in Python (not sure EXACTLY to which VS keys are these configured to) and SOMETIMES happens when I scroll too fast (either up or down). I have reinstalled VS Code from scratch and only installing Catppuccin + Python packages (Catppuccin's version is 2.7.0), but the issue remains. I am on MacOS. I leave you below a copy of the settings json, should it be helpful.

Thanks

Kind regards

"[python]": { "editor.formatOnType": true }, "workbench.colorTheme": "Catppuccin Mocha", "workbench.iconTheme": "catppuccin-mocha", "editor.cursorSmoothCaretAnimation": "explicit", "editor.cursorBlinking": "solid", "editor.fontFamily": "CascadiaCode-Regular", "editor.fontLigatures": "'calt', 'ss01', 'ss02', 'ss04', 'ss05', 'ss06', 'onum' 'zero'", "editor.fontSize": 16, "editor.wordWrap":"on", "notebook.output.fontSize": 16, "notebook.output.fontFamily": "CascadiaCode-Regular", "notebook.output.scrolling": true, "notebook.output.wordWrap": true, "diffEditor.wordWrap": "on", "workbench.preferredDarkColorTheme": "Catppuccin Mocha", "workbench.preferredLightColorTheme": "Catppuccin Latte", "workbench.editor.autoLockGroups": { "jupyter-notebook": true, "terminalEditor": true }, "interactiveSession.editor.wordWrap": "on", "editor.semanticHighlighting.enabled": true, "workbench.fontAliasing": "auto",

Hi,

First of all i really like this theme. 😍

I noticed you updated the theme inside the vscode marketplace, but unfortunatelly non microsoft releases of vscode like gitpod, vscodium, code - oss, cannot use microsoft marketplace they use the openvsx equivalent of it, which is still at the 1.0.6.
https://open-vsx.org/extension/Catppuccin/catppuccin-vsc

Would it be possible to extend the release script and not just release to the microsoft store but the open-vsx store aswell?

I've noticed that the VS Code theme's syntax highlighting looks much different from others like NeoVim. Why is that?

How do we make it have the same syntax highlighting as the nvim one? Can you make it look like nvim?

It should look like the image below.

The colour for the currently selected tab/file is the same as for the tab and top bar background. Inavtive tabs/files are darker and thus much more prominent in terms of visual hiarchy. I'd suggest to either switch the colours around, or use one of the overlay colours to indicate the currently selected tab/file. c:

The icon colours on the Activitus statusbar extension come out incorrectly (grey on a pink background), so can I please request that the following is added to match them with the rest of the statusbar icons?

"activitusbar.inactiveColour": "#302d41"

Just discovered this theme, and fell in love with the colors. Unfortunately, it changes many text strings to italic by default and there is no way of customizing this behavior:

Some people find italic font in their code attractive. I really dislike it and the lack of options to disable this is keeping me from using this theme. I hate italics. I know I'm not the only one. Some themes such as Gruvbox material or One Dark Pro have options in vscode's settings to disable italics:

While I'm aware there are ways of disabling italics entirely by tinkering in the innards of the vscode json settings, I believe that having dedicated checkboxes in the UI settings adds a lot to the user experience and would be a welcome change.

The color of code inside git conflict marker block is too dark when I'm using Latte variant:

I have started work on this in #53, creating this issue for more visibility. I aim to release it within a next MINOR update, which would be 2.3.0 or 2.4.0
Post-release-edit: Since the syntax highlighting was completely rewritten, it was released as v3.0.0.

Catppuccin still doesn't really have a strict styleguide, if we're talking about "Editor styleguides".
The terminal colours are well-defined (even though they're due for a minor rework as well), but for editors we essentially looked to nvim as our guide. Some ports come pretty close, others (like this port, VSCode), miss the mark completely.

@sgoudham and I recently worked on JetBrains, and while working on it we:

• looked at nvim, took what we could from there
• found flaws in how unmodified TreeSitter parses certain Languages (especially JS/TS)
• improved things, while not introducing radical changes.

The first comment in #53 shows my current progress adding the Python changes back into VSCode from JetBrains.
I will continue to work on other languages, rough order of my priorities:

• JS/JSX & TS/TSX
• HTML & CSS
• Rust
• Golang
• Everything else

TLDR: This will introduce large changes to the syntax highlighting. IMO our VSCode highlighting is all but consistent, and looks straight up terrible in some places.

Similarly to option to disable italics which was added recently, maybe a good idea was to add option to disable bold text?
In some languages there are a lot of bold text

I don't know if it is intentional, but the background color for input fields (for example, in settings) is the same as the general background color. This makes it difficult to distinguish the text fields from the background and also harder to modify the settings or fill a commit message (with the commit message plugin).

When I try to install the Catppuccin theme extension for VS Code I come across this message and I can't install it

The 'Catppuccin for VSCode' extension is not available in Visual Studio Code for the web. know why

Link to test: https://github.dev/catppuccin/catppuccin

Preview error:

Hello Catppuccin community,

I recently set Catppuccin Macchiato to VSCode, Nvim, and Bat, but for some reason, I am getting inconsistent colors in all of them.
What am I doing wrong?

Below are some infomation for web extensions:
https://code.visualstudio.com/api/extension-guides/web-extensions#web-extension-anatomy

There seems to be problem with SASS language syntax colouring

• The property value has italics styles (which should not happen)
• From line 9 to line 16, the property has different color comparing other lines

SASS	CSS

• If commented code is modified, it's pretty difficult to read in Source Control
• The minimap slider seems to obscure the location of modified code

For comparison, here's what Dracula looks like

When updating from extension version 2.5.0 to 2.6.0, the accent color reverts from what was set (i.e. Sapphire for me), to the default Mauve. This does not affect the setting, merely changing the color, and updating the setting to any other accent color does not change it.

The sidebar and status bar (and some other UI parts) in v2.2.0 got color changed to crust which looks pretty weird in Frappe and Machiato (the UI looks not so consistent and makes some UI parts "striped"). Is this intended?

Example:

I changed this color (editorStickyScrollHover.background) to Surface0 in my user config, which looks like this on Macchiato:

Hi,

I would like to suggest adding an option in the "catppuccin" theme to enable borders on various UI elements, as shown in the following manual example:

"workbench.colorCustomizations": {
    "activityBar.border": "#ffffff15",
    "button.secondaryHoverBackground": "#ffffff15",
    "checkbox.border": "#ffffff15",
    "editorGroupHeader.tabsBorder": "#ffffff15",
    "panel.border": "#ffffff15",
    "panelInput.border": "#ffffff15",
    "sideBar.border": "#ffffff15",
    "sideBarSectionHeader.border": "#ffffff15",
    "statusBar.border": "#ffffff15",
    "tab.border": "#ffffff15",
    "tab.unfocusedActiveBorderTop": "#ffffff15",
    "titleBar.border": "#ffffff15"
}

Currently, it's possible to customize the colors of various UI elements in the "settings.json" configuration file using the "workbench.colorCustomizations" property. However, this option does not include the ability to enable or disable borders. The ability to enable borders could be useful for users who want a more defined and contrasted UI.

Therefore, I suggest adding the "catppuccin.activeBorder" option in the "catppuccin" theme to allow users to enable or disable borders on various UI elements.

Thank you for considering this suggestion.

Could we have a 0.2.0 bump? It' really nice as ctp-0.2.0 has a light theme.

Is that a feature or a bug? If it is a feature, how can I change it?

Hi there 👋

287785a just updated the port to the 0.2.0 spec, but it's not updated on the VSCode Marketplace yet.

It seems that the first release there was published there via e4875ef, or just shortly before that commit. @VictorTennekes did you create the release? Would it be possible to update it, or even better, make that process part of a CI pipeline?

Idea

Introduce a top level folder default-themes with theme files frappe.json, latte.json, macchiato.json, and mocha.json.

Motivation

I'd like to use this theme at work but they're really strict about using scripts but are okay with themes and I'd like to keep attribution towards this project (using the github repo link rather than just copying over the files).

Hi, what font did you use to make != appear as ? thanks :)

Dependent on eclipse/openvsx#566 & eclipse/openvsx#539

Inlay hints look like this currently (Macchiato, but the others have the same problem)

They really stick out. I would like to see them less visible, maybe something like this:

Thoughts?

current catppuccin.italicComments option also control whether code blocks in markdown are italic or not.

I hope to keep both italic comments and non-italic code blocks. So, could you please add a new option? Or do I have some easy to change that?

If you set any color to something like accent 0.5, the theme won't recompile and this error message is printed to the console in devtools:

  ERR Cannot read properties of undefined (reading 'replace'): TypeError: Cannot read properties of undefined (reading 'replace')
    at n (c:\Users\lan\.vscode\extensions\catppuccin.catppuccin-vsc-2.3.0\dist\main.js:1:48532)
    at c:\Users\lan\.vscode\extensions\catppuccin.catppuccin-vsc-2.3.0\dist\main.js:1:49620
    at Array.map ()
    at V (c:\Users\lan\.vscode\extensions\catppuccin.catppuccin-vsc-2.3.0\dist\main.js:1:49535)
    at D (c:\Users\lan\.vscode\extensions\catppuccin.catppuccin-vsc-2.3.0\dist\main.js:1:64761)
    at F. (c:\Users\lan\.vscode\extensions\catppuccin.catppuccin-vsc-2.3.0\dist\main.js:1:65286)
    at Generator.next ()
    at c:\Users\lan\.vscode\extensions\catppuccin.catppuccin-vsc-2.3.0\dist\main.js:1:1083
    at new Promise ()
    at C (c:\Users\lan\.vscode\extensions\catppuccin.catppuccin-vsc-2.3.0\dist\main.js:1:903)
    at c:\Users\lan\.vscode\extensions\catppuccin.catppuccin-vsc-2.3.0\dist\main.js:1:65256
    at Array.map ()
    at F. (c:\Users\lan\.vscode\extensions\catppuccin.catppuccin-vsc-2.3.0\dist\main.js:1:65249)
    at Generator.next ()
    at c:\Users\lan\.vscode\extensions\catppuccin.catppuccin-vsc-2.3.0\dist\main.js:1:1083
    at new Promise ()
    at C (c:\Users\lan\.vscode\extensions\catppuccin.catppuccin-vsc-2.3.0\dist\main.js:1:903)
    at F.updateThemes (c:\Users\lan\.vscode\extensions\catppuccin.catppuccin-vsc-2.3.0\dist\main.js:1:65204)
    at c:\Users\lan\.vscode\extensions\catppuccin.catppuccin-vsc-2.3.0\dist\main.js:1:66396
    at p.invoke (c:\Users\lan\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:61:145)
    at v.deliver (c:\Users\lan\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:61:2266)
    at b.fire (c:\Users\lan\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:61:1844)
    at n.$acceptConfigurationChanged (c:\Users\lan\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:101:26409)
    at c:\Users\lan\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:101:25663
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Using an actual color or removing the opacity makes the theme compile again

Thank you for pushing this for vscode.

I want to report a problem that python docstring is probably too bright:

as compared to what I had on neovim

"catppuccin.accentColor": "sky",

Currently, the accentColor of the theme is only applied to certain properties. However, I believe it would be useful to extend its use to other properties to create a more coherent user experience.

As an example, I propose applying the accentColor "sky" (#87ceeb) to the following properties:

  "workbench.colorCustomizations": {
    "editorCursor.foreground": "#87ceeb",
    "editorBracketHighlight.foreground1": "#87ceeb",
    "tab.activeBorder": "#87ceeb",
    "tab.activeBorderTop": "#87ceeb",
    "terminalCursor.foreground": "#87ceeb",
  },

By doing this, all visual elements related to the accentColor would look coherent and help users quickly identify important elements in the interface.

Could someone review this suggestion and consider it for a future update? Thank you!

Can we have version of the different themes without italic font style

Viewing a merge conflict from VS Code's git integration. The editor puts a check box in the gutter next to each change so that you can choose the left or right resolution. For example, there's one on line 15 below. Once it's focused it gets a blue outline, and clicking it causes it to become checked, obviously, but it's invisible at first.

Just installed the theme and I'm using the Latte variant. I don't know why but the active line always have a red background. Is it the expected behavior?

Hi 👋
it seems that custom inlay hint setup is broken with the newest release. 😢

I've seen the following recent change (032dc31) that seems to add default styles for catppuccin (issue #83, PR #87).
I assume that this has somehow broken my custom setup. 😿

Also, it seems that it doesn't even use the new default styles (see screenshot below).

Custom setup

"workbench.colorCustomizations": {
        "[Catppuccin Macchiato]": {
            "editorInlayHint.foreground": "#74416b",
            "editorInlayHint.background": "#41363f2f",
        }
    },

Before

After (broken):

VS Code version

1.74.3

Catppuccin version:

2.6.0

Theme:

Catppuccin Macchiato

I have the Error Lens (usernamehw.errorlens) extension in my VSCode, and its default colors don't look great with this theme and so I've added some overrides to use Catppuccin colors instead. Would these be accepted in the upstream theme?

The overrides:

{
  "errorLens.errorForeground": "red",
  "errorLens.warningForeground": "peach",
  "errorLens.hintForeground": "teal"
}

And also: (had to use custom hex codes for these)

{
  // red/peach/teal, but with 0x22 opacity
  "errorLens.errorBackground": "#ed879622",
  "errorLens.warningBackground": "#f5a97f22",
  "errorLens.hintBackground": "#8bd5ca22"
}

This changes it from this:

to this:

There's also an info error level, but I haven't found code that produces it yet so I haven't been able to find colors that are similar to the original ones while fitting in (for now I have it set to some really obvious colors so I'll be sure to notice if I ever come across code that produces it)

Hey I'm not sure if this is something specific to vscodium but I don't see an option called "import theme" anywhere in the setting even after searching

Catppuccin v2.7.0

• There seems to be no syntax highlighting for .ddl files
• It appears like a plain text file
• Requesting to update and add syntax highlighting for .ddl files

Many terminal configs here have a light variant as well, it would be nice if vscode got the same treatment, for those of us who like working during the day with a light theme :P

I'm not sure if this question belongs here, but I didn't find any other way to ask and I would like to use that font in my VS Code setup.

Installing the Catppuccin color theme from one of the preferred installation methods does not provide me with an option to switch to "Latte" or other flavors.

I am using Visual Studio Code 1.70.0.