Coloring the version switcher button does not work as expected

[sblauth]

Hi everyone,

I am trying to color the version switcher button of my docs using a .css file, as explained in the documentation (https://pydata-sphinx-theme.readthedocs.io/en/stable/user_guide/version-dropdown.html) with the code

.version-switcher__button[data-active-version-name*="dev"] {
   background-color: var(--pst-color-secondary);
}

In my conf.py file, I use:

html_theme_options = {
    "switcher": {
        "json_url": "https://cashocs.readthedocs.io/en/latest/_static/version_switcher.json",
        "version_match": switcher_version,
    },
}

where the switcher_version evaluates to "dev" at build-time (I have already checked this with a print statement).

For the sake of completeness, my version_switcher.json file is given by

[
    {
        "name": "dev",
        "version": "dev",
        "url": "https://cashocs.readthedocs.io/en/latest/"
    },
    {
        "name": "1.8 (stable)",
        "version": "1.8.12",
        "url": "https://cashocs.readthedocs.io/en/v1.8.12/"
    },
    {
        "version": "1.7",
        "url": "https://cashocs.readthedocs.io/en/v1.7.8/"
    },
    {
        "version": "1.6",
        "url": "https://cashocs.readthedocs.io/en/v1.6.1/"
    },
    {
        "version": "1.5",
        "url": "https://cashocs.readthedocs.io/en/v1.5.15/"
    },
    {
        "version": "1.4",
        "url": "https://cashocs.readthedocs.io/en/v1.4.8/"
    },
    {
        "version": "1.3",
        "url": "https://cashocs.readthedocs.io/en/v1.3.4/"
    },
    {
        "version": "1.2",
        "url": "https://cashocs.readthedocs.io/en/v1.2.1/"
    },
    {
        "version": "1.1",
        "url": "https://cashocs.readthedocs.io/en/v1.1.1/"
    },
    {
        "version": "1.0",
        "url": "https://cashocs.readthedocs.io/en/v1.0.4/"
    }
]

When I don't use the selector, i.e., if I use

.version-switcher__button {
   background-color: var(--pst-color-secondary);
}

or even

.version-switcher__button:not([data-active-version-name*="dev"]) {
   background-color: var(--pst-color-secondary);
}

then setting the background color works.

Additionally, I was unable to change the text color of the version switcher button with, e.g.,

.version-switcher__button {
   color: white;
}

It seems to me that the name "data-active-version-name" might be wrong. What would be the correct way to set this property?
And why am I unable to change the text color?

Trying the same with the "data-version-name" to color the entries inside the version-switcher__container worked as expected.

I am using Sphinx 5.3.0 with the pydata-sphinx-theme 0.12.0 installed using conda.

Thanks a lot for your help.

[12rambau]

looking at our own documentation: https://github.com/pydata/pydata-sphinx-theme/blob/main/docs/_static/custom.css

it seems the selector should be .version-switcher__container a[data-version-name*="dev"] could you try with this one and let us know ?

[sblauth]

Thanks a lot for your reply.
Well, the .version-switcher__container is not the problem, in fact, I am using the same configuration as the pydata-sphinx-theme for my docs, see https://cashocs.readthedocs.io/en/latest/
So the coloring inside the dropdown is fine.

However, I am having issues with the .version-switcher__button. I have tried many different approaches to color this one, including the one suggested in the docs, i.e.,

// If the active version has the name "dev", style it orange
.version-switcher__button[data-active-version-name*="dev"] {
   background-color: var(--pst-color-secondary);
}

However, there seems to be an issue with the data-active-version-name part. I can color the version-switcher button, but not with the correct selector for the current version. E.g., when I am using the name "dev" in my docs, the button stays in its default color when using

.version-switcher__button[data-active-version-name*="dev"] {
   background-color: var(--pst-color-secondary);
}

If I change this to

.version-switcher__button:not([data-active-version-name*="dev"]) {
   background-color: var(--pst-color-secondary);
}

the button changes its color to orange. However, as I am using the name "dev", this approach does not work me (especially if I want to color versions with "dev", "stable", and all other versions in different colors).

[sblauth]

I think for me it would be very helpful if I could somehow see the values of data-active-version, data-active-version-name and data-version and data-version-name. Do you perhaps know where I can find these?

[12rambau]

I check our documentation and it seems the value of these parameters are never changed in the page (they remain set to "" all the time). @choldgraf is it a bug or is it the expected behaviour ?

[choldgraf]

I'm not sure - I don't use the version switcher myself so not really sure what the intended behavior is

[drammock]

I wonder if this is the problem:

pydata-sphinx-theme/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js

Lines 353 to 356 in 39aa0d7

	if (
	entry.version ==
	"DOCUMENTATION_OPTIONS.version_switcher_version_match"
	) {

It looks like the conditional is checking version against the string DOCUMENTATION_OPTIONS.version_switcher_version_match instead of the value of that variable. Therefore activeVersion and activeVersionName are never getting changed because nobody ever has a version called "DOCUMENTATION_OPTIONS.version_switcher_version_match"