Coloring jupyter book text properly

[mscharling]

Hi,

I'm very new to all this kinda stuff and I've been digging a lot to find something about how one changes the text coloring in the standard jupyter theme (Sphinx Book Theme, I know). I haven't tried making custom css before, so I was hoping someone could explain to me how I change the blue color when hovering the text in the sidebar to some other color.

Is there some primary color which can be changed? I guess I would like to change all places with the blue colored text to some other color.

I hope my question i somewhat clear😅

[ZviBaratz]

Hi @mscharling,
Generally speaking, to add custom CSS follow the docs and create book/_static/custom.css.
More specifically, links are represented by HTML's <a> tag. To change the color of hovered links, you should include the following rule in your CSS:

a:hover {
    color: red;
}

Jupyter book adds the "reference" and "internal" classes to the table of content links, so if you wanted to change only those, it would be:

a.reference.internal:hover {
    color: red;
}

However, it seems like this rule is overridden by the theme, so to force it you should include the !important tag:

a.reference.internal:hover {
    color: red!important;
}

Hope this helps!

[mscharling]

Wonderful! This works like a charm. Very elaborated answer which was just what I needed :-)