Documentation Theming
Advanced
This section is intended for developers of authentik's documentation site. If you are looking to customize the theming of your own authentik instance, please refer to the branding documentation.
The authentik documentation site is built using Meta's Docusaurus, which uses their internal Infima CSS framework for its styling and theming capabilities. Infima's own documentation is limited, possibly due to it's internal nature and Docusaurus being the primary consumer. This document aims to provide an overview of how theming is handled in the authentik documentation site, and how you can customize it.
Infima Color Palette
With the exception of a few customizations, our color palette is managed through Infima's theming system.
Primary
Darkest
--ifm-color-primary-darkest
—
Darker
--ifm-color-primary-darker
—
Dark
--ifm-color-primary-dark
—
Default
--ifm-color-primary
—
Light
--ifm-color-primary-light
—
Lighter
--ifm-color-primary-lighter
—
Lightest
--ifm-color-primary-lightest
—
Secondary
Darkest
--ifm-color-secondary-darkest
—
Darker
--ifm-color-secondary-darker
—
Dark
--ifm-color-secondary-dark
—
Default
--ifm-color-secondary
—
Light
--ifm-color-secondary-light
—
Lighter
--ifm-color-secondary-lighter
—
Lightest
--ifm-color-secondary-lightest
—
Success
Darkest
--ifm-color-success-darkest
—
Darker
--ifm-color-success-darker
—
Dark
--ifm-color-success-dark
—
Default
--ifm-color-success
—
Light
--ifm-color-success-light
—
Lighter
--ifm-color-success-lighter
—
Lightest
--ifm-color-success-lightest
—
Info
Darkest
--ifm-color-info-darkest
—
Darker
--ifm-color-info-darker
—
Dark
--ifm-color-info-dark
—
Default
--ifm-color-info
—
Light
--ifm-color-info-light
—
Lighter
--ifm-color-info-lighter
—
Lightest
--ifm-color-info-lightest
—
Warning
Darkest
--ifm-color-warning-darkest
—
Darker
--ifm-color-warning-darker
—
Dark
--ifm-color-warning-dark
—
Default
--ifm-color-warning
—
Light
--ifm-color-warning-light
—
Lighter
--ifm-color-warning-lighter
—
Lightest
--ifm-color-warning-lightest
—
Danger
Darkest
--ifm-color-danger-darkest
—
Darker
--ifm-color-danger-darker
—
Dark
--ifm-color-danger-dark
—
Default
--ifm-color-danger
—
Light
--ifm-color-danger-light
—
Lighter
--ifm-color-danger-lighter
—
Lightest
--ifm-color-danger-lightest
—
Utility & UI Colors
Background Color
--ifm-background-color
—
Background Surface
--ifm-background-surface-color
—
Font Color Base
--ifm-font-color-base
—
Font Color Secondary
--ifm-font-color-secondary
—
Content Color
--ifm-color-content
—
Content Color Inverse
--ifm-color-content-inverse
—
Content Color Secondary
--ifm-color-content-secondary
—
Heading Color
--ifm-heading-color
—
Link Color
--ifm-link-color
—
Menu Color
--ifm-menu-color
—
Menu Color Active
--ifm-menu-color-active
—
Navbar Background
--ifm-navbar-background-color
—
Footer Background
--ifm-footer-background-color
—
Card Background
--ifm-card-background-color
—
Code Background
--ifm-code-background
—
Toc Border
--ifm-toc-border-color
—
Table Stripe
--ifm-table-stripe-background
—
Hover Overlay
--ifm-hover-overlay
—
Dispositions
Info
Contrast Background
--ifm-color-info-contrast-background
—
Dark
--ifm-color-info-dark
—
Darker
--ifm-color-info-darker
—
Darkest
--ifm-color-info-darkest
—
Light
--ifm-color-info-light
—
Lighter
--ifm-color-info-lighter
—
Lightest
--ifm-color-info-lightest
—
Success
Contrast Background
--ifm-color-success-contrast-background
—
Dark
--ifm-color-success-dark
—
Darker
--ifm-color-success-darker
—
Darkest
--ifm-color-success-darkest
—
Light
--ifm-color-success-light
—
Lighter
--ifm-color-success-lighter
—
Lightest
--ifm-color-success-lightest
—
Warning
Contrast Background
--ifm-color-warning-contrast-background
—
Dark
--ifm-color-warning-dark
—
Darker
--ifm-color-warning-darker
—
Darkest
--ifm-color-warning-darkest
—
Light
--ifm-color-warning-light
—
Lighter
--ifm-color-warning-lighter
—
Lightest
--ifm-color-warning-lightest
—
Danger
Contrast Background
--ifm-color-danger-contrast-background
—
Dark
--ifm-color-danger-dark
—
Darker
--ifm-color-danger-darker
—
Darkest
--ifm-color-danger-darkest
—
Light
--ifm-color-danger-light
—
Lighter
--ifm-color-danger-lighter
—
Lightest
--ifm-color-danger-lightest
—