Optionally configure ONLY light and dark themes, no auto theme?

[cmoliverio]

Hey folks,

I'm using the furo theme to host a documentation page for my FRC team as a GitHub page. I was running into some issues using CSS in combination with the sphinx-build conf.py where, when the page was opened with the auto theme, it would use the dark mode logo but the light mode theme settings.

What this is really led to is that I want an option to only have the light and dark mode options and remove the 'auto' one entirely. Then I don't have to worry about funky behavior when I try to use CSS and so forth.

For example; I imagine my conf.py looking something like this:

html_theme = 'furo'
html_title = ""
html_static_path = ['_static']

html_css_files = [
    # the theme file contains some settings for the light and dark mode
    "theme_file.css"
]

html_theme_options = {
    "light_logo": "images/light-logo.png",
    "dark_logo": "images/dark-logo.png",
    # some parameter here to disable the auto theme and button
}

The theme_file.css containts this:

/* Variables for colors */
:root {
    --blue: #031db0;
    --background-color: #eaeef3;
}

[data-theme="dark"] {
    --blue: #366aca;
    --background-color: #4184ff;
}

/* Logo settings */
.sidebar-logo {
    background-color: var(--background-color);
    border-radius: 15px;
}

[data-theme="dark"] .sidebar-logo {
    background-color: var(--background-color);
}

I don't know the best way to do that option, but I guess it makes the most sense to allow the user to specifically choose which themes they want to allow the page to have. For instance:

html_theme_options = {
    "furo_theme_list" = [ "light", "dark" ]  # and then the user could add 'auto' or not
}

Or, if they wanted to ONLY have the dark mode:

html_theme_options = {
    "furo_theme_list" = [ "dark" ] 
}

Obviously the default is that all three are enabled.

Is it possible to add this this feature? Do you folks this is a good idea? I looked through the source of furo and I think I could even add this change myself with enough effort, but if I could either get feedback or a thumbs up that would be great. I didn't see a similar request for this already.

Thanks yall!

[pradyunsg]

:root {
    --blue: #031db0;
    --background-color: #eaeef3;
}

[data-theme="dark"] {
    --blue: #366aca;
    --background-color: #4184ff;
}

Instead of doing this, I suggest using https://pradyunsg.me/furo/customisation/#light-css-variables-dark-css-variables for injecting the CSS variables that you want to inject.

https://github.com/pradyunsg/furo/blob/fd3e7b94e9959870aa3c8efb221de66be923421d/src/furo/assets/styles/base/_theme.sass#L6-40 shows the specifics of how things work for the CSS variables, wherein it basically duplicates the dark mode CSS declarations in a couple of spots.

[cmoliverio]

Ok, I got what you mean. I was already using that method for a different purpose, but I was able to get it working by doing this:

html_theme_options = {
    "light_logo": "images/light.png",
    "dark_logo": "images/dark.png",
    "light_css_variables": {
        "color-brand-primary": "#031db0",
        "color-brand-content": "#031db0",
        "background-color": "#123123"
    },
    "dark_css_variables": {
        "color-brand-primary": "#366aca",
        "color-brand-content": "#366aca",
        "background-color": "#321321"
    },
}

I am not a html/javascript/css expert so I feel pretty dumb now seeing that it was that simple.

Thanks for your help! This issue can be closed.