Closed dafitt closed 7 months ago
The buttons should be using base00
for the text colour as this is guaranteed to contrast with the accent colours.
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.
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...
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?
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.
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.
This should have more attention, i'm having this problem no matter the colorscheme i use.
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}";
};
};
};
@dafitt Would you mind making a pull request with those changes? If not I can try pulling something off.
A PR with any improvements would be much appreciated :)
If not, I should be able to work on this.
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.
I use the popular Catppuccin-Mocha base16 theme but unfortunately some color matches in the Stylix theme are off.
Buttons
Status Bar
Preferred result:
Note: I overrided the background base colors 00 to 04 to look more gray. I did not touch the other colors.