Customization

Table of Contents

• CSS-Variables
  • Setup
  • Available variables
• Doxygen generator
• Share your customizations

CSS-Variables

This theme is highly customizable because a lot of things are parameterized with CSS variables.

Just to give you an idea of how flexible the styling is, click this button:

Alter theme

Setup

It is recommended to add your own custom.css and overwrite the variables there:

HTML_EXTRA_STYLESHEET  = doxygen-awesome.css custom.css

Make sure to override the variables in the correct spot. All variables should be customized where they have been defined, in the html tag selector:

html {
    /* override light-mode variables here */
}

For dark-mode overrides, you have to choose where to put them, depending on whether the dark-mode toggle extension is installed or not:

• dark-mode toggle is installed

  html.dark-mode {
      /* define dark-mode variable overrides here if you DO use doxygen-awesome-darkmode-toggle.js */
  }

• dark-mode toggle is NOT installed The dark-mode is enabled automatically depending on the system preference:

  @media (prefers-color-scheme: dark) {
      html:not(.light-mode) {
          /* define dark-mode variable overrides here if you DON'T use doxygen-awesome-darkmode-toggle.js */
      }
  }

Available variables

The following list gives an overview of the variables defined in doxygen-awesome.css.

The list is not complete. To explore all available variables, have a look at the CSS starting from here. All variables are defined at the beginning of the stylesheet.

Parameter	Default (Light)	Default (Dark)
Color Scheme: primary theme colors. This will affect the entire websites color scheme: links, arrows, labels, ...
--primary-color	#1779c4	#1982d2
--primary-dark-color	#335c80	#5ca8e2
--primary-light-color	#70b1e9	#4779ac
Page Colors: background and foreground (text-color) of the documentation.
--page-background-color	#ffffff	#1C1D1F
--page-foreground-color	#2f4153	#d2dbde
--page-secondary-foreground-color	#6f7e8e	#859399
Spacing: default spacings. Most ui components reference these values for spacing, to provide uniform spacing on the page.
--spacing-small	5px
--spacing-medium	10px
--spacing-large	16px
Border Radius: border radius for all rounded ui components. Will affect many components, like dropdowns, memitems, codeblocks, ...
--border-radius-small	4px
--border-radius-medium	6px
--border-radius-large	8px
Content Width: The content is centered and constrained in its width. To make the content fill the whole page, set the following variable to auto.
--content-maxwidth	1000px
Code Fragment Colors: Color-Scheme of multiline codeblocks
--fragment-background	#F8F9FA	#282c34
--fragment-foreground	#37474F	#dbe4eb
Arrow Opacity: By default the arrows in the sidebar are only visible on hover. You can override this behavior so they are visible all the time.
--side-nav-arrow-opacity	0
--side-nav-arrow-hover-opacity	0.9
...and many more

If you miss a configuration option or find a bug, please consider opening an issue!

Doxygen generator

The theme overrides most colors with the --primary-color-* variables.

But there are a few small images and graphics that the theme cannot adjust or replace. To make these blend in better with the rest, it is recommended to adjust the doxygen color settings to something that matches the chosen color scheme.

For the default color scheme, these values work out quite well:

# Doxyfile
HTML_COLORSTYLE_HUE    = 209
HTML_COLORSTYLE_SAT    = 255
HTML_COLORSTYLE_GAMMA  = 113

Share your customizations

If you have customized the theme with custom colors, spacings, font-sizes, etc. and you want to share your creation with others, you can do this here.

I am always curious to learn about how you made the theme look even better!

Previous	Next
Extensions	Tips & Tricks