Add an option to remove dark/light mode button

[Josh H]

Context

I designed my Sphinx site to revolve around the Light Theme and do not want users to have access to Dark mode as it simply does not work for the custom directives I have made.

Proposal

Can there be an html theme option, similar to something like use_download_button, perhaps "use_theme_button" with the default being light?

Tasks and updates

No response

[welcome]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.

If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).

Welcome to the EBP community! 🎉

[Avi Vajpeyi]

Hey @Josh-Hiz -- how did you remove the Dark theme option?

Was it just the following?
pydata/pydata-sphinx-theme#458 (comment)

# conf.py

html_theme_options = {
    "navbar_end": ["navbar-icon-links"],
}

[Josh H]

I had tried that but it didn't actually work for some reason, even though the book theme is based on Pydata not everything from Pydata can be applied to the book theme.

[sgpearse]

This is an important issue for my group as well, as darkmode makes our website nearly incomprehensible. We will need to explore other themes if dark mode cannot be removed :(

[Ravin Kumar]

I also would like to be able to remove or disable dark mode entirely

[Chris Holdgraf]

This issue would be a long-term fix for this:

• #797

In the meantime, you could make this button disappear with the following custom CSS:

button.theme-switch-button {
    display: none !important;
}

This is because the theme switch button has the following HTML and the rule above would select the top-most element and remove it:

<button class="theme-switch-button btn btn-sm btn-outline-primary navbar-btn rounded-circle" aria-label="light/dark" data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-original-title="light/dark">
    <span class="theme-switch" data-mode="light"><i class="fa-solid fa-sun"></i></span>
    <span class="theme-switch" data-mode="dark"><i class="fa-solid fa-moon"></i></span>
    <span class="theme-switch" data-mode="auto"><i class="fa-solid fa-circle-half-stroke"></i></span>
  </button>