Vencord: colors.override not taking effect?

[malicean]

Hi everyone,

I've been using the Vencord theme autogenerated by Stylix, but my color palette and the colors the theme chooses by default make a few things hard to read. I'd like to swap the colors around using stylix.targets.vencord.colors.override (doc page), but my overrides seemingly aren't taking effect.

Here's the relevant part of my configuration (sourcehut file):

    programs.vesktop.enable = true;

    stylix.targets.vencord.colors.override =
      let
        norm = config.lib.stylix.colors;
      in
      {
        # Rotate [green,cyan,blue] := [blue,green,cyan]
        #
        # The stylix theme uses base0B (green) as the button color, and transitions to base0D (blue) on hover.
        # My green is too bright for the white foreground of a button, so use blue as button background with
        # cyan on hover.
        base0B = norm.base0D;
        base0C = norm.base0B;
        base0D = norm.base0C;
      };

Expectation: what was my base0B should become my base0D, and similar changes should happen for base0C and base0D.

Actuality: the same CSS theme gets generated and no change is observed.

I tried setting base0B = (throw "evaluated") to check if the attrset is getting used, and my configuration does throw, but am not sure how to further debug it. Maybe I am just using this option wrong? Would appreciate knowing if so.

I did find a discussion post about this for Discord and Nautilus themes, but the question seems to be asking to change which which colors get assigned to what components of the app, rather than substituting the colors the theme uses (what I want).

Thanks for any help!

[trueNAHO]

I've been using the Vencord theme autogenerated by Stylix, but my color palette and the colors the theme chooses by default make a few things hard to read.

Unless this is specific to your color scheme having poor contrast, feel free to submit a PR that improves the theme for everyone.

I'd like to swap the colors around using stylix.targets.vencord.colors.override (doc page), but my overrides seemingly aren't taking effect.

Here's the relevant part of my configuration (sourcehut file):

    programs.vesktop.enable = true;

    stylix.targets.vencord.colors.override =
      let
        norm = config.lib.stylix.colors;
      in
      {
        # Rotate [green,cyan,blue] := [blue,green,cyan]
        #
        # The stylix theme uses base0B (green) as the button color, and transitions to base0D (blue) on hover.
        # My green is too bright for the white foreground of a button, so use blue as button background with
        # cyan on hover.
        base0B = norm.base0D;
        base0C = norm.base0B;
        base0D = norm.base0C;
      };

Expectation: what was my base0B should become my base0D, and similar changes should happen for base0C and base0D.

Actuality: the same CSS theme gets generated and no change is observed.

I tried setting base0B = (throw "evaluated") to check if the attrset is getting used, and my configuration does throw, but am not sure how to further debug it. Maybe I am just using this option wrong? Would appreciate knowing if so.

I am unable to reproduce the CSS not being updated. Adding

diff --git a/modules/discord/testbeds/vencord.nix b/modules/discord/testbeds/vencord.nix
index fda8dcd7..d24cee09 100644
--- a/modules/discord/testbeds/vencord.nix
+++ b/modules/discord/testbeds/vencord.nix
@@ -13,6 +13,10 @@ in
     };
   };

+  home-manager.sharedModules = lib.singleton {
+    stylix.targets.vencord.colors.override.base00 = "FFFF00";
+  };
+
   environment.systemPackages = [ package ];
   nixpkgs.config.allowUnfreePredicate =
     pkg: builtins.elem (lib.getName pkg) [ "discord" ];

to our testbed, results in the following generated content:

:root {
    --base00: #FFFF00; /* Black */

---

Although this is totally unrelated to this issue, during investigation I realized that the stylix.targets.${target}.colors.override pattern is awkward and confusing when modules still rely on externally maintained Mustache templates. For example, the

background #{{base00-hex}}

-- github:tinted-theming/tinted-kitty, /templates/base16.mustache:14

declaration implies that the stylix.targets.kitty.colors.override.base00 declaration has no effect, while the following does:

diff --git a/modules/kitty/testbeds/kitty.nix b/modules/kitty/testbeds/kitty.nix
index 3173d466..ce41ed1d 100644
--- a/modules/kitty/testbeds/kitty.nix
+++ b/modules/kitty/testbeds/kitty.nix
@@ -9,6 +9,8 @@ in
   };

   home-manager.sharedModules = lib.singleton {
+    stylix.targets.kitty.colors.override.base00-hex = "#FFFF00";
+
     programs.kitty = {
       enable = true;
       inherit package;

[malicean]

Thanks for looking into it.

I am unable to reproduce the CSS not being updated.

Knowing this I managed to narrow it down to a misconfiguration on my side: I thought Vencord was some submodule of Vesktop (both "ve-") and there was a Vesktop color theme being generated, so I though I needed to set the Vencord override. I scrolled further down the documentation page and found the Vesktop override 🤦‍♀️

Unless this is specific to your color scheme having poor contrast, feel free to submit a PR that improves the theme for everyone.

I think I'll get around to a PR soon. A lot of stuff is tied to base0B and should remain base0B, but definitely not the buttons. For reference:

Palette: