5

I spend a lot of time writing css for custom WordPress themes in VSCodium. I've created scripts using wp-cli to automate a lot of the process, so I use lots of custom properties/variables, especially for colors: foregrounds, backgrounds, and gradients.

Is there a way to make VSCode/VSCodium display a color preview for code like below, the way it does for keywords like color: red; or color: #ff0000 ?

:root {
    --hue--1: 45;

    --color--saturation: 1%;
    --color--lightness: 1%;
    --color--opacity: 1;
    
    --color--dark: hsl(var(--hue--1)
    calc(22 * var(--color--saturation))
    calc(33 * var(--color--lightness))
    calc(1 * var(--color--opacity))
    );
    --c1: [color preview square here]var(--color--dark);
}

Hopping from one theme to another it's hard to keep 9 color variants and 3 gradients straight without the color preview I've grown accustomed to (is this the dark one, the light one, the bright saturated one, or the muted one?)

I've tried various extensions: CSS Variable Autocomplete, Colorize, TODO Hightlight, and others. None have the desired effect.

spinhead
  • 53
  • 6
  • if none of the existing extensions does the calculation you can always write your own and add color decorators at the correct position, you can copy part of Google Chrome that parses CSS and performs the calculations – rioV8 Oct 29 '22 at 08:56
  • _copy part of Google Chrome that parses CSS and performs the calculations_ do you mean the developer tools/inspect element? not sure how the browser is related to color previews in VSCode. – spinhead Oct 29 '22 at 20:47
  • Google Chrome has to interpret the CSS file and determine the result color for each variable, you have to do the same to calculate the color for the decorator, find out how to do this using the open source of Google Chrome the C++ source – rioV8 Oct 29 '22 at 20:50
  • I think you're assuming knowledge I don't have. By "the decorator" do you mean the color preview box in VSCode? And are you saying this will be done in C++, meaning to solve my little challenge, step 1 is learn a programming language? please provide a little more detail to help me understand your suggestion. – spinhead Oct 30 '22 at 21:16
  • the color preview is a decorator in VSC, see the VSC Extension API doc page. You need to parse and calculate the expressions in the CSS file and Google Chrome has an example on how to that in C++, you have to port this to JavaScript or create some Language Server for CSS for VSC, I think they can be any language and a compiled executable – rioV8 Oct 30 '22 at 21:23
  • Writing my own extension is FAR outside the level of effort I'm looking for. Thanks anyway. – spinhead Oct 31 '22 at 20:59
  • you are just waiting till somebody else looks for some level of effort, if you write a patch/pull-request to the CSS extension of VSC we all benefit – rioV8 Oct 31 '22 at 22:56
  • @rioV8 which part of the VSC Extension API document? – BJury Mar 06 '23 at 19:13
  • @BJury It is not a 1000 page document so you can read it all – rioV8 Mar 06 '23 at 20:32
  • I have done, and I cant see the part you're referring to. – BJury Mar 06 '23 at 21:06
  • i believe that vscode extensions done in javascript, no c++ required – Reishin Mar 10 '23 at 00:20

0 Answers0