PyData Sphinx Theme

repository·main·Indexed 21 days ago

https://github.com/pydata/pydata-sphinx-theme

A clean, three-column, Bootstrap-based theme for Sphinx documentation created by and for the PyData community. It features a design system focused on accessibility (WCAG 2.1 Level A conformant), a predefined color palette for light and dark modes, and a specific typography hierarchy. The package is available via pip and conda.

Tokens
37.1K
Snippets
163
Records
204
Agent score
68%

What's inside pydata-sphinx-theme

  1. Overview of the PyData Sphinx Theme

    main
    The PyData Sphinx Theme is a clean, Bootstrap-based Sphinx theme developed by the PyData community. It is designed to be responsive, supports interactive light/dark theme toggling, and is highly customizable via CSS variables. It provides specialized CSS and UI support for Jupyter extensions and PyData execution outputs.
  2. Accessibility conformance and compatibility of PyData Sphinx Theme

    main

    The PyData Sphinx Theme is designed with accessibility in mind, aiming for an equitable user experience.

    Conformance Status

    • WCAG 2.1 Level A: Fully conformant.
    • WCAG 2.1 Level AA: Partially conformant (with a goal to reach full conformance).

    Testing and Compatibility

    To ensure the best experience, the theme is optimized for:

    • Browsers: Chrome (automated testing), Firefox (manual testing).
    • Operating Systems: Ubuntu (automated), MacOS, and Windows (manual).
    • Assistive Technologies: Tested manually with VoiceOver and NVDA.

    Note: The theme is not explicitly tested on Safari and behavior there may vary.

    Inheriting Accessibility

    Projects that use the PyData Sphinx Theme will inherit its accessibility features if they are configured using the theme's default settings. However, content creators remain responsible for ensuring that the specific content and any custom modifications added to their documentation are accessible.

  3. How the Table of Contents (TOC) handles top-level headers

    main

    The pydata-sphinx-theme right-hand Table of Contents (TOC) behavior changes based on the number of top-level headers (headers using the = underline style) in your document:

    1. Multiple top-level headers: If a page contains more than one top-level header, the TOC will include every top-level header as a primary entry. Subsequent sub-headers (using - or ~ underlines) will be nested under the top-level header they follow.

    2. Single top-level header: If a page contains only one top-level header, the theme treats it as the page title. In this case, the TOC will not show the top-level header itself; instead, it will only display the headers that appear underneath it.

  4. Configure the PyData Sphinx Theme via html_theme_options

    main

    All configuration options for the PyData Sphinx Theme are passed through the html_theme_options dictionary in your Sphinx conf.py file. This dictionary uses key: val pairs to control the behavior, look, and feel of your site. Most theme-specific settings (such as branding, navigation, and UI elements) must be defined within this variable.

    # Example configuration in conf.py
    html_theme = 'pydata_sphinx_theme'
    
    html_theme_options = {
        # Theme options go here
        'logo': {'text': 'My Project'},
        'show_guides': True,
    }
  5. How Jinja macros are used for asset linking

    main
    The Webpack build process generates a collection of Jinja macros located in static/webpack-macros.html. These macros are imported into the main layout.html file and used throughout the templates to correctly link to static assets. This mechanism supports asset preloading (e.g., preloading JavaScript in the <head>) to improve performance and reduce render artifacts.
  6. Use the correct Sphinx event for theme configuration

    main
    The PyData Sphinx Theme is activated after the config-inited event has already been triggered. If you are writing custom logic or event handlers within the theme that depend on configuration being ready, do not use config-inited. Instead, use the builder-inited event, which is the earliest reliable event available for this theme.
  7. Understand the asset source and distribution structure

    main

    The theme manages assets in two distinct locations depending on whether they are source files or compiled outputs:

    • Source Files (SCSS/JS):
      • SCSS styles: src/pydata_sphinx_theme/assets/styles
      • JS scripts: src/pydata_sphinx_theme/assets/scripts (includes imports for vendored libraries like Bootstrap).
    • Compiled Assets (Static):
      • Compiled CSS/JS: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/static

    Note: The compiled static folder is not tracked in Git but is included in the theme's final distribution.

  8. Understand the merge and review policy

    main

    The PyData Sphinx Theme follows a tiered merge policy designed to balance speed of iteration with code quality and stakeholder input. The policy categorizes changes into three types: moderate changes, major new features/breaking changes, and minor changes/bugfixes.

    Key principles include:

    • Prioritizing iterative improvement over perfection.
    • Giving preference to the opinions of maintainers from the PyData ecosystem.
    • Encouraging high-level discussion of important decisions before implementation.
    • Assuming maintainers act in good faith.
  9. Reference the PyData Sphinx Theme color system

    main

    The theme uses a predefined color palette designed for both light and dark modes, ensuring sufficient contrast to meet WCAG accessibility criteria.

    Base Colors

    Base colors are used for primary UI elements like buttons, backgrounds, and text:

    • Primary: Main color for major actions and interactive elements.
    • Secondary: Supporting color for secondary actions and highlights.
    • Accent: Emphasis color used sparingly for highlighting.
    • Gray (Neutral): Used for typography, borders, and backgrounds.
    • Foundation Colors: Black and white base colors used for backgrounds and surfaces (cards, containers, modals).

    Semantic Colors

    Semantic colors represent specific system states and should be paired with icons or text labels (not just color) to ensure clarity for all users:

    • Success
    • Error
    • Warning
    • Information

    For specific color variable names, refer to the Styling User Guide or the source _color.scss file.

  10. Understand PyData-specific styling in the theme

    main

    The PyData Sphinx Theme includes specialized CSS/SCSS rules to ensure that documentation for PyData ecosystem packages looks consistent and readable in both light and dark modes. These styles are applied via two specific extension files located in src/pydata_sphinx_theme/assets/styles/:

    1. extensions/_execution.scss: Contains styles for Sphinx libraries that execute code and insert output into the documentation (e.g., MyST-NB, Jupyter Sphinx, and the Matplotlib plot directive). This is the preferred location for generic improvements that benefit multiple packages.
    2. extensions/_pydata.scss: Contains styles for specific library quirks. This should be used minimally for special-casing individual libraries in the PyData ecosystem.
  11. Check if a user provided a configuration value

    main

    To determine if a user has manually specified a configuration value in their conf.py (as opposed to a value being set by a default), check the app.config._raw_config attribute. This attribute contains only the values explicitly provided by the user.

    Additionally, you can check app.config.overrides to see if a value was provided via the Sphinx Command Line Interface (CLI).

    # Returns True if the user manually specified 'somekey' in conf.py
    if "somekey" in app.config._raw_config:
        # user provided it
        pass
    
    # Check for CLI overrides
    if "somekey" in app.config.overrides:
        # user provided it via CLI
        pass