Contents Menu Expand Light mode Dark mode Auto light/dark, in light mode Auto light/dark, in dark mode Skip to content
Furo
Furo
  • Quickstart
  • Customisation
    • Adding a logo
    • Adding an announcement banner
    • Changing buttons on page
    • Changing colors
    • Changing fonts
    • Changing footer icons
    • Changing landing page
    • Changing sidebar elements
    • Changing sidebar title
    • Hiding Contents sidebar
    • Injecting code
  • Markup Reference
    • Text Formatting
    • Admonitions
    • API documentation
    • Code Blocks
    • Hyperlinks
    • Images
    • Lists
    • Tables
    • Tabs
  • Recommendations

Development

  • Contributing
    • Workflow
    • Internals
    • Design Notes
  • Kitchen Sink
    • Admonitions
    • API documentation
    • Blocks
    • Generic items
    • Images & Figures
    • Lists
    • Really Long Page Title because we should test sidebar wrapping
    • sphinx-design stuff
    • Structural Elements
    • Structural Elements 2
    • Tables
    • Typography
  • Stability Policy
  • Changelog
  • License
Back to top
View this page
Edit this page

Adding a logo¶

Added in version 2020.08.14.beta5.

Changed in version 2020.11.10.beta15: Support for different logos for light and dark mode.

Logos are a point of recognition and an important part of branding. Furo supports adding your project’s logo at the top of the navigational (left) sidebar, like most other Sphinx themes.

Same logo for light and dark mode¶

Furo supports the standard Sphinx mechanism to add your project’s logo in the documentation, using the html_logo variable in conf.py.

html_logo = "logo.png"

Different logos for light and dark mode¶

Furo also supports setting different logos for light and dark mode. This can be necessary if the project’s logo is transparent and does not maintain sufficient contrast with the background in both modes.

This is done by setting light_logo and dark_logo in html_theme_options in conf.py.

html_static_path = ["_static"]
html_theme_options = {
    "light_logo": "logo-light-mode.png",
    "dark_logo": "logo-dark-mode.png",
}

Important

The filenames must be relative to the html_static_path folder. In the above example, that’d be _static/logo-light-mode.png and _static/logo-dark-mode.png.

This is different from how html_logo works, which copies the given filename into the correct location automagically.

Related Information¶

It is also possible to hide the name of the project in the sidebar, which might be desirable if the logo contains the project name.

Next
Adding an announcement banner
Previous
Customisation
Copyright © 2020, Pradyun Gedam
Made with Sphinx and @pradyunsg's Furo
On this page
  • Adding a logo
    • Same logo for light and dark mode
    • Different logos for light and dark mode
    • Related Information