Allow hard-coding light/dark/dual mode

[McSinyx]

If the site's author uses images with transparent background, only light or dark would work, so it'd be nice if perse can hint that the other mode is broken by hard-coding the working mode.

Describe the solution you'd like

As suggested by @pavithraes on GH-24:

Something like a setting in conf.py for the preferred action?

html_theme_options = {
    "theme-color": light/dark/dual,
}

Describe alternatives you've considered

None.

Additional context

If plantuml plugin is used for Sphinx, the diagram would look somewhat like this in dark mode:

One could tweak the plantuml theme but it's not very easy to get something looking nice for both dark and light.

[pradyunsg]

"hey, don't do that" :)

Overall, I prefer that documentation authors to support both the color schemes properly and would like to enforce that preference here. Supporting this would also introduce complexity in the CSS and I don't think that complexity is worthwhile. For elements that don't work well with light/dark mode, I recommend using .. rstclass:: only-light and .. rstclass:: only-dark to ensure things look OK.

For folks who really want to disable a specific mode, they can override the CSS variables to effectively disable the dark/light mode. It's not something I want to make easy, for the reasons stated above.

[McSinyx]

Supporting this would also introduce complexity in the CSS and I don't think that complexity is worthwhile.

This makes sense to me, I thought it was possible to do it in the Sphinx layer. .. rst-class:: only-light doesn't seem to have any effect and I don't have the mental space to play with the hard way at this moment, so I guess I try to avoid using plantuml with furo 🤷 (it's a school thing).

[pradyunsg]

Oh yea, that'll need to wait until 3d89d56 makes it into a release. :)

[merlinND]

For future reference, the following config options manage to "force light mode" by making dark mode colors equal to the light mode ones (values taken from _colors.scss).
It's just a workaround, but worked for us.

html_theme_options = {
    # Since Furo doesn't allow us to disable dark mode, we make dark mode
    # equivalent to light mode by overriding all colors back to their light value.
    # See: https://github.com/pradyunsg/furo/issues/28
    'dark_css_variables': {
        # Taken from: https://github.com/pradyunsg/furo/blob/c682d5d3502f3fa713c909eebbf9f3afa0f469d9/src/furo/assets/styles/variables/_colors.scss
        'color-problematic': '#b30000',

        # Base Colors
        'color-foreground-primary': 'black', # for main text and headings
        'color-foreground-secondary': '#5a5c63', # for secondary text
        'color-foreground-muted': '#646776', # for muted text
        'color-foreground-border': '#878787', # for content borders

        'color-background-primary': 'white', # for content
        'color-background-secondary': '#f8f9fb', # for navigation + ToC
        'color-background-hover': '#efeff4ff', # for navigation-item hover
        'color-background-hover--transparent': '#efeff400',
        'color-background-border': '#eeebee', # for UI borders
        'color-background-item': '#ccc', # for "background" items (eg: copybutton)

        # Announcements
        'color-announcement-background': '#000000dd',
        'color-announcement-text': '#eeebee',

        # Brand colors
        'color-brand-primary': '#2962ff',
        'color-brand-content': '#2a5adf',

        # Highlighted text (search)
        'color-highlighted-background': '#ddeeff',

        # GUI Labels
        'color-guilabel-background': '#ddeeff80',
        'color-guilabel-border': '#bedaf580',

        # API documentation
        'color-api-keyword': 'var(--color-foreground-secondary)',
        'color-highlight-on-target': '#ffffcc',

        # Admonitions
        'color-admonition-background': 'transparent',

        # Cards
        'color-card-border': 'var(--color-background-secondary)',
        'color-card-background': 'transparent',
        'color-card-marginals-background': 'var(--color-background-hover)',

        # Code blocks
        'color-code-foreground': 'black',
        'color-code-background': '#f8f9fb',
    }
}
# Force pygments style in dark mode back to the light variant
pygments_dark_style = 'tango'

[aidanCQ]

This worked for me. Hide the toggle button using CSS:

.theme-toggle-container {
  display: none;
}

Override the body's data attribute with JS:

document.body.setAttribute("data-theme", "dark");