[TOC]
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:
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 */ } }
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!
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
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 |