stylix icon indicating copy to clipboard operation
stylix copied to clipboard

gnome: some colors are not themed

Open musjj opened this issue 7 months ago • 13 comments

I assert that this issue is relevant for Stylix

  • [x] I assert that this is a bug and not a user error or support request.
  • [x] I assert that this is not a duplicate of an existing issue.

Description

Some colors in the Gnome Shell does not follow the user's theme.

The "Do Not Disturb" knob in the calendar menu (pure white):

Image

The hover color of the items in the dropdown menu on the top-right system menu (pure black):

Image

Hover color of some items like the keyboard layout menu (pure black):

Image

The hovered date in the calendar (deep black, not from my theme color):

Image

flake.lock

flake.lock
{
  "nodes": {
    "nixpkgs": {
      "locked": {
        "lastModified": 1744932701,
        "narHash": "sha256-fusHbZCyv126cyArUwwKrLdCkgVAIaa/fQJYFlCEqiU=",
        "owner": "NixOS",
        "repo": "nixpkgs",
        "rev": "b024ced1aac25639f8ca8fdfc2f8c4fbd66c48ef",
        "type": "github"
      },
      "original": {
        "owner": "NixOS",
        "ref": "nixos-unstable",
        "repo": "nixpkgs",
        "type": "github"
      }
    },
    "base16": {
      "inputs": {
        "fromYaml": "fromYaml"
      },
      "locked": {
        "lastModified": 1745523430,
        "narHash": "sha256-EAYWV+kXbwsH+8G/8UtmcunDeKwLwSOyfcmzZUkWE/c=",
        "owner": "SenchoPens",
        "repo": "base16.nix",
        "rev": "58bfe2553d937d8af0564f79d5b950afbef69717",
        "type": "github"
      },
      "original": {
        "owner": "SenchoPens",
        "repo": "base16.nix",
        "type": "github"
      }
    },
    "base16-fish": {
      "flake": false,
      "locked": {
        "lastModified": 1622559957,
        "narHash": "sha256-PebymhVYbL8trDVVXxCvZgc0S5VxI7I1Hv4RMSquTpA=",
        "owner": "tomyun",
        "repo": "base16-fish",
        "rev": "2f6dd973a9075dabccd26f1cded09508180bf5fe",
        "type": "github"
      },
      "original": {
        "owner": "tomyun",
        "repo": "base16-fish",
        "type": "github"
      }
    },
    "base16-helix": {
      "flake": false,
      "locked": {
        "lastModified": 1736852337,
        "narHash": "sha256-esD42YdgLlEh7koBrSqcT7p2fsMctPAcGl/+2sYJa2o=",
        "owner": "tinted-theming",
        "repo": "base16-helix",
        "rev": "03860521c40b0b9c04818f2218d9cc9efc21e7a5",
        "type": "github"
      },
      "original": {
        "owner": "tinted-theming",
        "repo": "base16-helix",
        "type": "github"
      }
    },
    "base16-vim": {
      "flake": false,
      "locked": {
        "lastModified": 1732806396,
        "narHash": "sha256-e0bpPySdJf0F68Ndanwm+KWHgQiZ0s7liLhvJSWDNsA=",
        "owner": "tinted-theming",
        "repo": "base16-vim",
        "rev": "577fe8125d74ff456cf942c733a85d769afe58b7",
        "type": "github"
      },
      "original": {
        "owner": "tinted-theming",
        "repo": "base16-vim",
        "rev": "577fe8125d74ff456cf942c733a85d769afe58b7",
        "type": "github"
      }
    },
    "base16": {
      "inputs": {
        "fromYaml": "fromYaml"
      },
      "locked": {
        "lastModified": 1745523430,
        "narHash": "sha256-EAYWV+kXbwsH+8G/8UtmcunDeKwLwSOyfcmzZUkWE/c=",
        "owner": "SenchoPens",
        "repo": "base16.nix",
        "rev": "58bfe2553d937d8af0564f79d5b950afbef69717",
        "type": "github"
      },
      "original": {
        "owner": "SenchoPens",
        "repo": "base16.nix",
        "type": "github"
      }
    },
    "base16-fish": {
      "flake": false,
      "locked": {
        "lastModified": 1622559957,
        "narHash": "sha256-PebymhVYbL8trDVVXxCvZgc0S5VxI7I1Hv4RMSquTpA=",
        "owner": "tomyun",
        "repo": "base16-fish",
        "rev": "2f6dd973a9075dabccd26f1cded09508180bf5fe",
        "type": "github"
      },
      "original": {
        "owner": "tomyun",
        "repo": "base16-fish",
        "type": "github"
      }
    },
    "base16-helix": {
      "flake": false,
      "locked": {
        "lastModified": 1736852337,
        "narHash": "sha256-esD42YdgLlEh7koBrSqcT7p2fsMctPAcGl/+2sYJa2o=",
        "owner": "tinted-theming",
        "repo": "base16-helix",
        "rev": "03860521c40b0b9c04818f2218d9cc9efc21e7a5",
        "type": "github"
      },
      "original": {
        "owner": "tinted-theming",
        "repo": "base16-helix",
        "type": "github"
      }
    },
    "base16-vim": {
      "flake": false,
      "locked": {
        "lastModified": 1732806396,
        "narHash": "sha256-e0bpPySdJf0F68Ndanwm+KWHgQiZ0s7liLhvJSWDNsA=",
        "owner": "tinted-theming",
        "repo": "base16-vim",
        "rev": "577fe8125d74ff456cf942c733a85d769afe58b7",
        "type": "github"
      },
      "original": {
        "owner": "tinted-theming",
        "repo": "base16-vim",
        "rev": "577fe8125d74ff456cf942c733a85d769afe58b7",
        "type": "github"
      }
    },
    "stylix": {
      "inputs": {
        "base16": "base16",
        "base16-fish": "base16-fish",
        "base16-helix": "base16-helix",
        "base16-vim": "base16-vim",
        "firefox-gnome-theme": "firefox-gnome-theme",
        "flake-compat": "flake-compat",
        "flake-utils": "flake-utils",
        "git-hooks": "git-hooks",
        "gnome-shell": "gnome-shell",
        "home-manager": "home-manager",
        "nixpkgs": [
          "nixpkgs"
        ],
        "nur": "nur",
        "systems": "systems",
        "tinted-foot": "tinted-foot",
        "tinted-kitty": "tinted-kitty",
        "tinted-schemes": "tinted-schemes",
        "tinted-tmux": "tinted-tmux",
        "tinted-zed": "tinted-zed"
      },
      "locked": {
        "lastModified": 1746439475,
        "narHash": "sha256-9aFYFeE/Atl9i4rj9NqLLLER0y21F1nIF+ZeJ1Ueml4=",
        "owner": "danth",
        "repo": "stylix",
        "rev": "6c8b77a7f5c1ff7059c4b6d749ace3b6f083e4bb",
        "type": "github"
      },
      "original": {
        "owner": "danth",
        "repo": "stylix",
        "type": "github"
      }
    },
    "firefox-gnome-theme": {
      "flake": false,
      "locked": {
        "lastModified": 1744642301,
        "narHash": "sha256-5A6LL7T0lttn1vrKsNOKUk9V0ittdW0VEqh6AtefxJ4=",
        "owner": "rafaelmardojai",
        "repo": "firefox-gnome-theme",
        "rev": "59e3de00f01e5adb851d824cf7911bd90c31083a",
        "type": "github"
      },
      "original": {
        "owner": "rafaelmardojai",
        "repo": "firefox-gnome-theme",
        "type": "github"
      }
    },
    "flake-compat": {
      "flake": false,
      "locked": {
        "lastModified": 1733328505,
        "narHash": "sha256-NeCCThCEP3eCl2l/+27kNNK7QrwZB1IJCrXfrbv5oqU=",
        "owner": "edolstra",
        "repo": "flake-compat",
        "rev": "ff81ac966bb2cae68946d5ed5fc4994f96d0ffec",
        "type": "github"
      },
      "original": {
        "owner": "edolstra",
        "repo": "flake-compat",
        "type": "github"
      }
    },
    "flake-utils": {
      "inputs": {
        "systems": "systems"
      },
      "locked": {
        "lastModified": 1731533236,
        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
        "owner": "numtide",
        "repo": "flake-utils",
        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
        "type": "github"
      },
      "original": {
        "owner": "numtide",
        "repo": "flake-utils",
        "type": "github"
      }
    },
    "git-hooks": {
      "inputs": {
        "flake-compat": [
          "stylix",
          "flake-compat"
        ],
        "gitignore": "gitignore",
        "nixpkgs": [
          "stylix",
          "nixpkgs"
        ]
      },
      "locked": {
        "lastModified": 1742649964,
        "narHash": "sha256-DwOTp7nvfi8mRfuL1escHDXabVXFGT1VlPD1JHrtrco=",
        "owner": "cachix",
        "repo": "git-hooks.nix",
        "rev": "dcf5072734cb576d2b0c59b2ac44f5050b5eac82",
        "type": "github"
      },
      "original": {
        "owner": "cachix",
        "repo": "git-hooks.nix",
        "type": "github"
      }
    },
    "gnome-shell": {
      "flake": false,
      "locked": {
        "lastModified": 1732369855,
        "narHash": "sha256-JhUWbcYPjHO3Xs3x9/Z9RuqXbcp5yhPluGjwsdE2GMg=",
        "owner": "GNOME",
        "repo": "gnome-shell",
        "rev": "dadd58f630eeea41d645ee225a63f719390829dc",
        "type": "github"
      },
      "original": {
        "owner": "GNOME",
        "ref": "47.2",
        "repo": "gnome-shell",
        "type": "github"
      }
    },
    "home-manager": {
      "inputs": {
        "nixpkgs": [
          "nixpkgs"
        ]
      },
      "locked": {
        "lastModified": 1746413188,
        "narHash": "sha256-i6BoiQP0PasExESQHszC0reQHfO6D4aI2GzOwZMOI20=",
        "owner": "nix-community",
        "repo": "home-manager",
        "rev": "8a318641ac13d3bc0a53651feaee9560f9b2d89a",
        "type": "github"
      },
      "original": {
        "owner": "nix-community",
        "repo": "home-manager",
        "type": "github"
      }
    },
    "nur": {
      "inputs": {
        "flake-parts": "flake-parts",
        "nixpkgs": [
          "stylix",
          "nixpkgs"
        ],
        "treefmt-nix": "treefmt-nix"
      },
      "locked": {
        "lastModified": 1746056780,
        "narHash": "sha256-/emueQGaoT4vu0QjU9LDOG5roxRSfdY0K2KkxuzazcM=",
        "owner": "nix-community",
        "repo": "NUR",
        "rev": "d476cd0972dd6242d76374fcc277e6735715c167",
        "type": "github"
      },
      "original": {
        "owner": "nix-community",
        "repo": "NUR",
        "type": "github"
      }
    },
    "systems": {
      "locked": {
        "lastModified": 1681028828,
        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
        "owner": "nix-systems",
        "repo": "default",
        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
        "type": "github"
      },
      "original": {
        "owner": "nix-systems",
        "repo": "default",
        "type": "github"
      }
    },
    "tinted-foot": {
      "flake": false,
      "locked": {
        "lastModified": 1726913040,
        "narHash": "sha256-+eDZPkw7efMNUf3/Pv0EmsidqdwNJ1TaOum6k7lngDQ=",
        "owner": "tinted-theming",
        "repo": "tinted-foot",
        "rev": "fd1b924b6c45c3e4465e8a849e67ea82933fcbe4",
        "type": "github"
      },
      "original": {
        "owner": "tinted-theming",
        "repo": "tinted-foot",
        "rev": "fd1b924b6c45c3e4465e8a849e67ea82933fcbe4",
        "type": "github"
      }
    },
    "tinted-kitty": {
      "flake": false,
      "locked": {
        "lastModified": 1716423189,
        "narHash": "sha256-2xF3sH7UIwegn+2gKzMpFi3pk5DlIlM18+vj17Uf82U=",
        "owner": "tinted-theming",
        "repo": "tinted-kitty",
        "rev": "eb39e141db14baef052893285df9f266df041ff8",
        "type": "github"
      },
      "original": {
        "owner": "tinted-theming",
        "repo": "tinted-kitty",
        "rev": "eb39e141db14baef052893285df9f266df041ff8",
        "type": "github"
      }
    },
    "tinted-schemes": {
      "flake": false,
      "locked": {
        "lastModified": 1744974599,
        "narHash": "sha256-Fg+rdGs5FAgfkYNCs74lnl8vkQmiZVdBsziyPhVqrlY=",
        "owner": "tinted-theming",
        "repo": "schemes",
        "rev": "28c26a621123ad4ebd5bbfb34ab39421c0144bdd",
        "type": "github"
      },
      "original": {
        "owner": "tinted-theming",
        "repo": "schemes",
        "type": "github"
      }
    },
    "tinted-tmux": {
      "flake": false,
      "locked": {
        "lastModified": 1745111349,
        "narHash": "sha256-udV+nHdpqgkJI9D0mtvvAzbqubt9jdifS/KhTTbJ45w=",
        "owner": "tinted-theming",
        "repo": "tinted-tmux",
        "rev": "e009f18a01182b63559fb28f1c786eb027c3dee9",
        "type": "github"
      },
      "original": {
        "owner": "tinted-theming",
        "repo": "tinted-tmux",
        "type": "github"
      }
    },
    "tinted-zed": {
      "flake": false,
      "locked": {
        "lastModified": 1725758778,
        "narHash": "sha256-8P1b6mJWyYcu36WRlSVbuj575QWIFZALZMTg5ID/sM4=",
        "owner": "tinted-theming",
        "repo": "base16-zed",
        "rev": "122c9e5c0e6f27211361a04fae92df97940eccf9",
        "type": "github"
      },
      "original": {
        "owner": "tinted-theming",
        "repo": "base16-zed",
        "type": "github"
      }
    }
  },
  "root": "root",
  "version": 7
}

Installation Method

NixOS

System Information

  • system: "x86_64-linux"
  • host os: Linux 6.12.25, NixOS, 25.05 (Warbler), 25.05.20250501.f02fddb
  • multi-user?: yes
  • sandbox: yes
  • version: nix-env (Nix) 2.28.3
  • nixpkgs: /nix/store/zggank8h7rfa8p2rrnwymjcpj3k4ds5l-source

Notify maintainers

@danth

musjj avatar May 08 '25 12:05 musjj

The Do not Disturb knob is because it's a separate SVG file and we currently only change the CSS. (Support could be added for this.)

I will look into why the hover color isn't working correctly as this worked in older versions.

danth avatar May 08 '25 21:05 danth

I believe the hover color is wrong due to this transformation:

https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/f22fc3c5a94aeb83b5898074945682f5cc86429b/data/theme/gnome-shell-sass/_drawing.scss#L193

We don't set $variant, so presumably the color is always being darkened even on a dark scheme. Ideally this would be patched to use a color from the scheme, or otherwise use a different transformation which is less noticeable (while still being enough to indicate the hover).

danth avatar Jun 01 '25 17:06 danth

Is there a reason why stylix is not setting $variant? Is there a way to set it in the patch?

Also noticing a similar issue in the new stacked notifications feature:

Image

musjj avatar Jun 01 '25 19:06 musjj

Basically, we don't always know the correct value. Our polarity option only guides the default palette generator in what it should produce: it defaults to "either", and if the user sets their own theme then it could have no relation to the actual colors used. We would have to test the brightness of the background color and determine the variant that way.

This isn't implemented because the intention was that we would be setting everything to a fixed color from the scheme, so there would be nothing which was affected by the variant - clearly this is no longer the case.

danth avatar Jun 01 '25 20:06 danth

But base16 themes includes a variant property that describes the theme's polarity ("light" or "dark"). It's in the spec. All the upstream schemes comes with one, for example:

https://github.com/tinted-theming/schemes/blob/spec-0.11/base24/one-dark.yaml

So we should be able to reliably determine whether the author intends the theme to be light or dark. The property is technically optional, but we can just pick a default fallback in case it's missing.

musjj avatar Jun 01 '25 21:06 musjj

A new bug dropped, the text for some prompt windows are now colored black for some reason:

Image

The revision I'm currently using:

├───nixpkgs: github:NixOS/nixpkgs/ee930f9755f58096ac6e8ca94a1887e0534e2d81?narHash=sha256-Kh9K4taXbVuaLC0IL%2B9HcfvxsSUx8dPB5s5weJcc9pc%3D (2025-06-13 06:09:42)
└───stylix: github:nix-community/stylix/a14e525723c1c837b2ceacd8a37cba1f0b5e76c2?narHash=sha256-gBsstni5rgh1vt2SNThh51GNvxMDCjEBfpPksS0ig/c%3D (2025-06-15 21:37:44)

I wonder if there's a more robust system for theming Gnome out there. How does third-party custom themes for Gnome even work?

musjj avatar Jun 17 '25 14:06 musjj

But base16 themes includes a variant property that describes the theme's polarity ("light" or "dark"). It's in the spec. All the upstream schemes comes with one, for example:

https://github.com/tinted-theming/schemes/blob/spec-0.11/base24/one-dark.yaml

So we should be able to reliably determine whether the author intends the theme to be light or dark. The property is technically optional, but we can just pick a default fallback in case it's missing.

If the current approach in https://github.com/nix-community/stylix/pull/892 goes through, the "either" polarity will be dropped. Unsure whether this means polarity would represent the "dark" and "light" modes.

trueNAHO avatar Jul 13 '25 17:07 trueNAHO

Another approach is to infer the polarity based on the contrast between base00 (background) and base05 (foreground). If base00 is darker then it's a dark theme, if it's lighter then it's a light theme.

There's a Nix library for converting hex colors to OKLCH: https://github.com/nutsalhan87/nix-colorizer. We can use it to extract the L component and accurately determine the color's lightness (higher is lighter):

nix-repl> (hex.to.oklch "#ff0000").L
0.627984

nix-repl> (hex.to.oklch "#0000ff").L
0.452035

musjj avatar Jul 19 '25 16:07 musjj

@musjj I have also used that approach to determine if a theme is dark or light (to determine which color is better suited to represent panel shadows, IIRC).

For reference, here is my short function that returns brightness as an integer based on e.g. "base05" as input. Of course, it is probably not as accurate as the algorithm OKLCH uses to determine perceived brightness.

getBrightness = colorName: let
  getChannel = c: lib.toIntBase10 config.lib.stylix.colors."${colorName}-rgb-${c}";
  # One possible formula, based on https://www.w3.org/TR/AERT/#color-contrast
in (getChannel "r")*299 + (getChannel "g")*587 + (getChannel "b")*114;

LemmusLemmus avatar Jul 19 '25 20:07 LemmusLemmus

Another approach is to infer the polarity based on the contrast between base00 (background) and base05 (foreground). If base00 is darker then it's a dark theme, if it's lighter then it's a light theme.

This sounds way too hacky. Ideally, the meaning of polarity is improved such that it already refers to dark and light theme.

trueNAHO avatar Jul 19 '25 21:07 trueNAHO

Actually, I've realized that we're talking about two different things here: stylix.polarity and stylix.colors.variant. stylix.polarity is specified by stylix, but stylix.colors.variant is specified by tinted-theming. Unless there's a breaking change upstream at tinted-theming, stylix.colors.variant must always be either light or dark.

musjj avatar Jul 27 '25 08:07 musjj

Actually, I've realized that we're talking about two different things here: stylix.polarity and stylix.colors.variant. stylix.polarity is specified by stylix, but stylix.colors.variant is specified by tinted-theming. Unless there's a breaking change upstream at tinted-theming, stylix.colors.variant must always be either light or dark.

In that case, we can consider this stable, and I am fine with adding this, if it fixes the issue.

trueNAHO avatar Jul 27 '25 16:07 trueNAHO

In that case, we can consider this stable, and I am fine with adding this, if it fixes the issue.

We would have to use the hacky approach to set stylix.colors.variant for schemes from the palette generator, as currently it doesn't explicitly set a value for that. But yes, in other cases it's better to use the value already provided upstream.

danth avatar Aug 19 '25 07:08 danth