Question 136544 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – How can I use a linear-gradient in a VS Code theme?

I am creating a theme for VS Code and would like to use a linear gradient on a few components. The problem I’m running into is that when I use linear-gradient in the theme.json file, VS Code is only displaying the first color in the gradient.

I have searched for days online for an answer to this dilemma and can’t seem to find even a morsel of help on the topic.

Tags:

2

Answers


  1. 0 
        .className {
  background: #FF4E50;
  background: -webkit-linear-gradient(right, #FF4E50, #F9D423);
  background: linear-gradient(to left, #FF4E50, #F9D423);
}

    try this, if not work then can you please share your code?

    Login or Signup to reply.
  2. 0

    Gradients are not currently supported in VS Code colour customizations / colour themes.

    There are extensions that allow you to write custom CSS, or theme extensions that contribute custom CSS to achieve gradients through non-standard means. Ex.

    Both work by modifying what are supposed to be more-or-less internal VS Code files, which will cause VS Code to issue a corruption warning (which you need to install another extension to suppress: lehni.vscode-fix-checksums), and those file modifications may need to be re-done upon VS Code updates, so it’s not really ideal, but at the moment, it appears to be the only way to get theme gradients.

    For example, to see how the synthwave extension does the VS Code modification, see its src/extension.js file. For the custom CSS extension, see its src/extension.js file- particularly the performPatch function. They both read internal VS Code files, modify them, and write the result back to the filesystem.

    There’s a feature request for such theming and customization functionality: [themes] Allow gradients along with colors #92736. You can show your support for the issue ticket by giving a thumbs up reaction to the issue. But please don’t make a "me too" comment. "me too" comments generally come off as annoying to repo maintainers because they clutter up discussion and don’t contribute anything of significant value.

    For your reference / learning purposes, I found the above issue ticket by googling "github vscode issues color gradient".

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search