Skip to content

Latest commit

 

History

History
115 lines (85 loc) · 7.31 KB

customization.md

File metadata and controls

115 lines (85 loc) · 7.31 KB
Raw

Customization

[TOC]

CSS-Variables

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

Just to give you an idea on 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 is 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 customized the theme with custom colors, spacings, font-sizes, etc. and you want to share your creation with others, you can to this here.

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

Read Next: Tips & Tricks