Colors

Light and dark modes

The theme includes a light and a dark mode, which can be toggled using the button in the top right corner of the page. This button needs to be enabled by setting the html_theme_options in your conf.py file:

html_theme_options = {
    # Code highlighting styles
    "pygments_light_style": "napari",
    "pygments_dark_style": "dracula",
    # Add theme switcher icon to navbar
    "navbar_end": ["version-switcher", "navbar-icon-links", "theme-switcher"],
}

The default mode can be set using the html_context variable in your conf.py file.

html_context = {
    # Use Light, Dark, or Auto
    "default_mode": "auto",
}

CSS Colors in the napari Sphinx Theme

The following colors are used in the napari Sphinx Theme.

Base colors

The following table shows the custom colors used in the napari theme:

Accessibility

Color Accessibility

Color	WCAG AA Compliance	Contrast Ratio
napari-primary-blue on white	Pass	4.8:1
napari-deep-blue on white	Pass	5.2:1
napari-dark-gray on white	Pass	7.1:1
white on napari-deep-blue	Pass	5.2:1

CSS Variables

To see more details, please see the CSS source file.

/* Base colors */
html {
    --napari-primary-blue: #80d1ff;
    --napari-deep-blue: #009bf2;
    --napari-light-blue: #d2efff;
    --napari-dark-blue: #526a77;
    --napari-dark-gray: #686868;
    --napari-gray: #f7f7f7;
    --napari-purple: #4d485c;
    --napari-color-text-title: black;
    --pst-color-headerlink: var(--napari-dark-gray);
    --pst-color-headerlink-hover: var(--napari-deep-blue);
    --pst-color-secondary: var(--napari-primary-blue);
    --pst-color-text-base: var(--napari-color-text-base);
    --napari-search-bg: #F3F4F5;
}

/* Light mode specific colors */
html[data-theme="light"] {
    --pst-color-primary: black;
    --napari-color-text-base: black;
    --pst-color-link: black;
    --pst-color-link-hover: black !important;
    --pst-color-inline-code: black !important;
    --pst-color-inline-code-links: black !important;
    --pst-color-on-background: white;
    --pst-color-text-muted: var(--napari-dark-gray);
    --pst-color-border: var(--napari-gray);
    --pst-color-target: var(--napari-gray);
    --napari-navbar: var(--napari-primary-blue);
    --napari-calendar-dark: var(--napari-deep-blue);
    --napari-calendar-light: var(--napari-light-blue);
}

/* Dark mode specific colors */
html[data-theme="dark"] {
    --pst-color-primary: white;
    --napari-color-text-base: white;
    --pst-color-link: white;
    --pst-color-link-hover: white !important;
    --pst-color-inline-code: white !important;
    --pst-color-inline-code-links: white !important;
    --pst-color-text-muted: var(--napari-light-gray);
    --pst-color-border: var(--napari-dark-gray);
    --pst-color-target: var(--napari-dark-gray);
    --napari-navbar: var(--napari-purple);
    --napari-calendar-dark: #26283d;
    --napari-calendar-light: var(--napari-dark-blue);
}

Admonition colors

CSS Variables

To see more details, please see the CSS source file.

.admonition.attention {
    --color: #d8f97d;
}
html[data-theme="dark"] .admonition.attention {
    --color: var(--pst-color-success);
}

.admonition.caution {
    --color: #ffc580;
}
html[data-theme="dark"] .admonition.caution {
    --color: var(--pst-color-target);
}

.admonition.warning {
    --color: #ffa680;
}
html[data-theme="dark"] .admonition.warning {
    --color: var(--pst-color-warning);
}

.admonition.danger {
    --color: #ff8080;
}

.admonition.error {
    --color: #fade7d;
}
html[data-theme="dark"] .admonition.error {
    --color: #FF55559C;
}

.admonition.hint {
    --color: #8094ff;
}

.admonition.tip {
    --color: #cf80ff;
}

.admonition.important {
    --color: #f1f379;
}
html[data-theme="dark"] .admonition.important {
    --color: var(--pst-color-attention);
}

.admonition.note {
    --color: #80ffe0;
}
html[data-theme="dark"] .admonition.note {
    --color: #239076;
}