Finetune VSCode theme

[dafitt]

I use the popular Catppuccin-Mocha base16 theme but unfortunately some color matches in the Stylix theme are off.

Buttons

Status Bar

Preferred result:

• Button font -> darker base color
• Status bar: background -> one of the background base colors (its really annoying when so bright in dark mode)

Note: I overrided the background base colors 00 to 04 to look more gray. I did not touch the other colors.

[danth]

The buttons should be using base00 for the text colour as this is guaranteed to contrast with the accent colours.

[dafitt]

My Font is base07 and my status bar is base0D. The green "Open remote Window"-button in the left of the status bar is using base0B.

Also tested polarity = "dark";, polarity = "light"; and no polarity. Colors do not change at all.

[dafitt]

So, indeed the base color of the status bar should be base0D in your VSCode-Stylix-Theme (template.mustache). So the color of catppuccin theme is the problem here. I would recommend to use a normal base00 - base03 for a more less distracting look and better support with various base16-themes. But...

I found a working workaround!

programs.vscode.userSettings = {
  "workbench.colorCustomizations" = {
    "[Stylix]" = {
      "statusBar.background" = "#${config.stylix.override.base01}";
      "scrollbarSlider.activeBackground" = "#${config.stylix.override.base04}aa";
      "scrollbarSlider.background" = "#${config.stylix.override.base02}88";
      "scrollbarSlider.hoverBackground" = "#${config.stylix.override.base03}88";
    };
  };
};

But it only works, when you have specified the stylix.override options like so:

stylix.override = {
  # catppuccin-mocha: but less blue in the background
  # <https://github.com/catppuccin/base16>
  base00 = "1e1e1e"; # base
  base01 = "181818"; # mantle
  base02 = "313232"; # surface0
  base03 = "454748"; # surface1
  base04 = "585b5d"; # surface2 
  base05 = "cdd6d9"; # text
  base06 = "f5e0dc"; # rosewater
  base07 = "b4befe"; # lavender
  base08 = "f38ba8"; # red
  base09 = "fab387"; # peach
  base0A = "f9e2af"; # yellow
  base0B = "a6e3a1"; # green
  base0C = "94e2d5"; # teal
  base0D = "89b4fa"; # blue
  base0E = "cba6f7"; # mauve
  base0F = "f2cdcd"; # flamingo
};

A general question: Is there any better way to extract the current base colors (to use it troughout my configuration) than with the overrides?

Room for Improvement

You should make the scrollbarSlider more transparent like in my workaround. If it is not, you cant see any highlights (the highlights in the picture) in the scroll bar when the slider is over it.

As for the font... I really dont know. Also a color mismatch of catppuccin? It is still blue (base07) because the status bar consists of buttons and buttons use the "button.foreground": "#{{base07-hex}}", i think?? (Correct me) There are so many base07's, i cant find the right one for the status bar... but the upper changed the font color of one button.

[danth]

Is there any better way to extract the current base colors (to use it troughout my configuration) than with the overrides?

You can use config.lib.stylix.colors.base00, config.lib.stylix.colors.base01 and so on.

[coffeeispower]

This should have more attention, i'm having this problem no matter the colorscheme i use.

[dafitt]

I am currently using the following settings apart from the default in modules/vscode/template.mustache:

programs.vscode.userSettings = {
  "workbench.colorCustomizations" = {
    "[Stylix]" = {
      "button.background" = "#${config.lib.stylix.colors.base0D}BB";
      "button.foreground" = "#${config.lib.stylix.colors.base06}";
      "button.secondaryBackground" = "#${config.lib.stylix.colors.base0E}BB";
      "button.secondaryForeground" = "#${config.lib.stylix.colors.base06}";
      "editor.selectionHighlightBackground" = "#${config.lib.stylix.colors.base04}EE";
      "editor.wordHighlightBackground" = "#${config.lib.stylix.colors.base01}00";
      "scrollbarSlider.activeBackground" = "#${config.lib.stylix.colors.base04}55";
      "scrollbarSlider.background" = "#${config.lib.stylix.colors.base03}55";
      "scrollbarSlider.hoverBackground" = "#${config.lib.stylix.colors.base04}99";
      "statusBar.background" = "#${config.lib.stylix.colors.base00}";
      "statusBar.noFolderBackground" = "#${config.lib.stylix.colors.base00}";
      "statusBar.noFolderForeground" = "#${config.lib.stylix.colors.base06}";
      "statusBarItem.remoteBackground" = "#${config.lib.stylix.colors.base00}";
    };
  };
};

[coffeeispower]

@dafitt Would you mind making a pull request with those changes? If not I can try pulling something off.

[danth]

A PR with any improvements would be much appreciated :)

If not, I should be able to work on this.

[danth]

I started a branch with some of my own adjustments: #271

Feel free to add suggestions or make pull requests on top of that branch, and we can combine them into one change before it's merged.