A new theme for Read the Docs

We have been hard at work improving Read the Docs over the past month. A large amount of back end work has been going on, and now we have a brand new documentation theme to showcase it.

We have looked at how users use documentation, and built a beautiful and highly functional new interface for browsing documentation. We have come up with a solution that looks as great as it functions.

The New Theme

Full site

The full documentation page is now beautiful and streamlined. We got rid of the visual clutter and integrated a full-project Table of Contents on the sidebar. When you go into a specific page, the page-level contents get embedded in the sidebar as well. This allows you to keep context inside the documentation when you land on a page from a search.

Old

http://i.imgur.com/hWOnmKy.png

New

http://i.imgur.com/7oLntvR.png

Flyout

Read the Docs provides a lot of functionality for documentation projects. The flyout we provides on each page is the avenue to accessing that functionality. We need to pack all our functionality into this small space.

In the new theme, the flyout is integrated into the bottom left of the theme. For all other projects, it stays in the same place in the bottom right.

The old version was very simple, providing access to a version selector. With the new version we wanted to do more.

Old

The old flyout let you:

  • Change versions
  • Go back to Read the Docs
http://i.imgur.com/CBDPzbD.png

New

The new flyout lets you:

  • Change versions
  • Go back to Read the Docs
  • See the current version
  • Show if the current version is out of date
  • Download docs for offline viewing
  • Contribute edits on GitHub or Bitbucket
  • Do a full-text search (Coming soon)
http://i.imgur.com/9DRP8fj.png

Mobile

The new theme really shines on mobile. We provide a beautiful interface for phones and tablets, while staying completely functional.

http://i.imgur.com/29uEpVs.png

Using it

There are two ways that you can use this theme on Read the Docs. The first is to simply leave your html_theme variable set to default. This is now the default Read the Docs theme. You can also set RTD_NEW_THEME = True in your project’s conf.py, and we will use our theme when building on Read the Docs no matter what html_theme is set to.

After you change these settings, simply rebuild your docs and the theme should update. More information about the theme can be found on the theme documentation page

If you want to continue using the old theme, simply set RTD_OLD_THEME = True in your conf.py.

Creation Story

Dave Snider approached me about a month ago, offering to help improve the documentation ecosystem. He is a designer with an interest in documentation, and wanted to help out with Read the Docs. He built this fantastic new theme for Read the Docs, and is hard at work improving the main site as well.

Conclusion

This theme is a great addition to the documentation ecosystem. It is highly functional and beautiful, allowing users to easily navigate and find what they need.

We have a few more tricks up our sleeves, but theme is ready to launch today. Over the next few weeks we’ll be adding a bit more functionality to it, which should be even more delightful.

I hope that you enjoy using it. If you have any feedback, please open an issue on GitHub for the repo. To follow announcements for Read the Docs, follow us on Twitter

If you want to support work like this, help fund development on Read the Docs on Gittip.