jothepro / doxygen-awesome-css

Custom CSS theme for doxygen html-documentation with lots of customization parameters.

Doxygen Awesome

Doxygen Awesome is a custom CSS theme for Doxygen HTML documentation with lots of customization parameters.

Motivation

I really like how the Doxygen HTML documentation is structured! But IMHO it looks a bit outdated.

This theme is an attempt to update the visuals of Doxygen without changing its overall layout too much.

Features

• 🌈 Clean, modern design
• 🚀 Heavily customizable by adjusting CSS variables
• 🧩 No changes to the HTML structure of Doxygen are required
• 📱 Improved mobile usability
• 🌘 Dark mode support!
• 🥇 Works best with doxygen 1.9.1 - 1.9.4 and 1.9.6 - 1.10.0

Examples

Some websites using this theme:

• Documentation of this repository
• wxWidgets
• OpenCV 5.x
• Zephyr
• FELTOR
• Spatial Audio Framework (SAF)
• Randolf Richardson's C++ classes
• libCloudSync
• libsl3

Installation

To use the theme when generating your documentation, bring the required CSS and JS files from this repository into your project.

This can be done in several ways:

• manually copying the files
• adding the project as a Git submodule
• adding the project as a npm/xpm dependency
• installing the theme system-wide

All theme files are located in the root of this repository and start with the prefix doxygen-awesome-. You may not need all of them. Follow the install instructions to figure out what files are required for your setup.

Git submodule

For projects that use git, add the repository as a submodule and check out the desired release:

git submodule add https://github.com/jothepro/doxygen-awesome-css.git
cd doxygen-awesome-css
git checkout v2.3.3

npm/xpm dependency

In the npm ecosystem, this project can be added as a development dependency to your project:

cd your-project
npm install https://github.com/jothepro/doxygen-awesome-css#v2.3.3 --save-dev

ls -l node_module/@jothepro/doxygen-awesome-css

Similarly, in the xPack ecosystem, this project can be added as a development dependency to an xpm managed project.

System-wide

You can even install the theme system-wide by running make install. The files will be installed to /usr/local/share/ by default, but you can customize the install location with make PREFIX=/my/custom/path install.

Choosing a layout

There are two layout options. Choose one of them and configure Doxygen accordingly:

• Base Theme

  

  Comes with the typical Doxygen titlebar. Optionally the treeview in the sidebar can be enabled.

  Required files: doxygen-awesome.css

  Required Doxyfile configuration:

  GENERATE_TREEVIEW      = YES # optional. Also works without treeview
  DISABLE_INDEX = NO
  FULL_SIDEBAR = NO
  HTML_EXTRA_STYLESHEET  = doxygen-awesome-css/doxygen-awesome.css
  HTML_COLORSTYLE        = LIGHT # required with Doxygen >= 1.9.5
  

• Sidebar-Only Theme

  

  Hides the top titlebar to give more space to the content. The treeview must be enabled in order for this theme to work.

  Required files: doxygen-awesome.css, doxygen-awesome-sidebar-only.css

  Required Doxyfile configuration:

  
  GENERATE_TREEVIEW      = YES # required!
  DISABLE_INDEX          = NO
  FULL_SIDEBAR           = NO
  HTML_EXTRA_STYLESHEET  = doxygen-awesome-css/doxygen-awesome.css \
                          doxygen-awesome-css/doxygen-awesome-sidebar-only.css
  HTML_COLORSTYLE        = LIGHT # required with Doxygen >= 1.9.5
  

@warning

• This theme is not compatible with the FULL_SIDEBAR = YES option provided by Doxygen!
• HTML_COLORSTYLE must be set to LIGHT since Doxygen 1.9.5!

Further installation instructions

• Installing extensions
• Customizing the theme (colors, spacing, border-radius, ...)
• Tips and Tricks for further configuration

Browser support

Tested with

• Chrome 119, Chrome 119 for Android, Chrome 119 for iOS
• Safari 17, Safari for iOS 16
• Firefox 118, Firefox 120 for Android, Firefox 119 for iOS
• Edge 119
• Opera 108

The theme does not strive to be backward compatible with (significantly) older browser versions.

Credits

Thanks for all the bug reports and inspiring feedback on GitHub!

Special thanks to all the contributors:

Read Next
Extensions

doxygen-awesome-css's Issues

dot/GraphViz diagrams are cut off

I recently upgraded to v1.6.0 (thanks for the project BTW). I use dot toe generate collaboration diagrams which are then placed in the docs. This is how they look. The first diagram is cut off to the right.

Bugs header menus colors

Hey,

Nice work, my doc is now looking sweet!

The header background foreground doesn't really like when we change the page foreground values.
For now I only changed the #top background and foreground but couldn't do more because you use the page color variables.

It messes with the chevron for because the text menu color is the page foreground color:

When the chevron color is the header foreground:

And because I set a dark background and a light foreground, we cannot see the chevron:

I had to set the border color to the foreground color so that I can see them:

But that doesn't work that well with hover:

I fixed it with this piece of code base on the hover a color:

Could it be possible to add hover menus customization? For chevrons, border-color, box-shadow color?

That could allow me to have a full dark top menu.
Thanks in advance!

Black background on iframes (graphics, search) in dark mode

On Chrome 94 all elements embedded in iframes (e.g. dependency graphs, search results) do sometimes have a black background:

How to reproduce

• Make sure the system does not have dark-mode enabled
• Go to a page in the example docs containing a dependency graph (e.g. here)
• Enable dark mode by clicking the ☀️-Button
• the background of the graphs should be fine:
  
• refresh the page
• now the iframe-background is not transparent any more and it will stay black on all iframes. 😲

I can reproduce this on Chrome 94 on macOS and on Chrome for Android. Other supported browser don't seem to be affected. I don't know when this started to be a problem and I don't know what the reason might be.

Given the fact that it is not consistent (it only starts to be a problem after a page refresh or if the page is loaded in dark mode) even let's me consider that this might be a bug in Chrome?

If you want to help, pls let me know if you can reproduce the issue or if you have an idea what is going on... 🤔

Invalid XHTML

Hi,

First of all: Thanks for your work, this is indeed awesome. I did something similar for our project documentation, but your solution is much cleaner and more comprehensive. I immediately adopted it, see our user guide for an example. I did some minor changes, mostly to the sidebar, maybe you are interested in some of those.

Anyway, the main issue I had was invalid XHTML markup: If you run your site through the W3C validator you'll notice a couple of issues you might want to fix.

Thanks,
Daniel

Navigation is broken on mobile with Doxygen 1.9.2

Doxygen 1.9.2 creates a "hamburger menu" on mobile that conflicts with the doxygen-awesome CSS. Here's how it looks with Doxygen 1.9.2 in collapsed state:

Here's how it looks in expanded state:

I think this commit in Doxygen is responsible: doxygen/doxygen@74b8e42

Consider upstream integration

Hi again,

Did you consider submitting your work upstream to be integrated directly into Doxygen? While I really like your solution, I'm a little concerned about incompatibilities with future Doxygen versions. Furthermore, this would allow a much larger group of people to benefit from you work. Just a thought...

Suppress list of definitions in inline code

Hi, Thanks for the awesome stylesheet!

When using doxygen-awesome.css, I get a list of all definitions of variables used in a function in inline code (those which are already hyperlinked in the code fragment). I don't get this list with the default output. Setting SOURCE_BROWSER to NO doesn't suppress it. How can I suppress it?

See the issue after line 15 within the code fragment.

Light theme Search Results not working when system theme is Dark

If you have your system theme to Dark, but have the new theme toggle set to Light, the search results stay inverted (dark). I believe that a html:not(.light-mode) is missing here:

doxygen-awesome-css/doxygen-awesome.css

Lines 580 to 584 in 8739758

	@media (prefers-color-scheme: dark) {
	iframe#MSearchResults {
	filter: invert() hue-rotate(180deg);
	}
	}

It should probably be this instead:

@media (prefers-color-scheme: dark) {
    html:not(.light-mode) iframe#MSearchResults {
        filter: invert() hue-rotate(180deg);
    }
}

Configure dark mode be the default on page load

As a fan of dark mode, I thought it would be nice to have a configuration option to set dark mode on initial page load. I started looking into how to implement it, but thought I would open a "feature request" just in case.

Code block black on white

Thanks @jothepro for this nice theme ! It's brilliant that you made it and share it. And thanks for recommending it here : doxygen/doxygen#8404 .

Before going to the title of this "issue", a question. I guess that the license is such that I can just copy the css file and include it in my repo (to keep things simple I'd rather steer around submodules however good they work, even though I would have to update myself). But, do you have a way in mind to credit your work?

Then, I do have some suggestions:

Whitespace

I feel that too lot of white space is 'wasted'. Consider the following example with a few long lines (generated on exactly the same browser window):

I think that this really make the docs less readable, as I find a key strength of the doxygen rendering (despite, I agree with you, its old looks) it getting in overview. Personally, I think that herein the doxygen rendering really has its merits for example over breathe.

Summary

Personally, I feel that the summary of functions could be a bit brighter, it now almost disappears in the background:

Code block

I have some code blocks, and those are shown black on white, which does not look super nice

for which my docstring was

    /**
    Extract the unknown "dofval":

        dofval[iiu()]

    \param dofval input [#ndof]
    \return dofval_u input [#nnu]
    */

Dependency graph

Here there is nothing to do I think. But the dependency graphs could look better ;)

Wrong highlight in sidebar menu menu

Hello,
Thank you for your great theme!
We are using your theme in our project at https://docs.daisykit.org/. It provides a very good looking. However, we think that there is a bug in the sidebar which remembers and highlights the last menu item when loading another page in a new tab.

Reproduce:

• Visit our site at https://docs.daisykit.org/, click an item on the sidebar menu, for example Coding structure - SDK.
• Open another tab, visit https://docs.daisykit.org/. The sidebar stills highlight Coding structure - SDK.
• Browser: Chrome 93.0.4577.82 on Ubuntu.

Environment:

• Our system is deployed with Netlify. I think the Doxygen version is smaller than 1.9.2 as recommended.
• Theme version 1.5.0.
• All the source code for documentation can be found here.

Hope that you can help us with this issue. Thank you!

Misscolored Hierarchy nodes

The css works like a charm with the DOT graphs, but it misses the Hierarchy ones!
They are black like the background and they are not visible, see below:

Default page width

This is not really an "issue".
Actually I mainly just want to thank the contributors to this project, since I had been looking around for a modern doxygen theme with light/dark modes for quite a while now - to no avail.
This one ticked pretty much all the boxes for one of our projects (https://leomccormack.github.io/Spatial_Audio_Framework/).

The only problem I had was with the default maxwidth, which looks comically narrow on a 1440p/4K monitor.
--content-maxwidth: 900px;
Perhaps setting this to "auto", or at least increasing this value, would be better for a default configuration?

In any case, great work, and thanks again!

Creating a link to the dark theme

Hi doxygen-awesome developers,

thanks for an excellent and very easy to use theme. I just updated my documentation to use it, and it took me 5 seconds to do so, which is amazing :-) As I was mentioning on our reddit discussion [1], I have one slight snag though: I prefer using dark mode wherever possible and I've noticed two issues with the automatic detection of dark mode:

• on old versions of Windows (say Windows 7), I do not believe there is a system-wide dark mode setting.
• on my current Linux machine, though my Chrome is on dark mode I do not see the site on dark mode (from my site [2]):

Is there a way I could put a link on the main page for the dark mode version of the theme somehow?

Many thanks for your time.

[1] dxoygen (sic.) awesome css : make your doxygen docs looking more modern
[2] Dogen documentation

Different table row hover background colors in dark/light mode

Is this even possible currently?
There is no css custom property to overwrite.

doxygen 1.9.2 compatibility issue(s)

Doxygen 1.9.2 was released. As a developer I want to officially support the new Doxygen release.

If you find any compatibility issues, pls report them here.

Known issues:

• The dark mode toggle is broken (#43 (comment))
• In sidebar mode, the separator line between sidebar and content is not going all the way through to the top:
  

[FR] Collapsible Navbar for Small Screens

I would like to request the feature of a collapsible navbar on small screens.
Although the whole styling looks great, the top section of the created webpages are a bit crowded on smartphones in my opinion.

It would therefore be great to have the option to have a collapsible navigation at the top of the page like it is seen on several other websites.

However, there is no urgent need to implement this 😃

List of overwritable CSS-parameters

Hey there!

You showed some of the configurable CSS-parameters, but is somewhere out there a full list?

Best regards

Dark Mode Toggle isn't global

I've tried the Dark Mode Toggle and although it basically works, it only switches preferences for a single html page and not globally for all pages in the documentation. Once the option is set for a page it stays that way.

PS: Thank you for this project. It literally saved the documentation of an legacy project I'm working on currently.

Support @invariant, @pre blocks

@invariant and @pre blocks should be supported so they have a similar appearance like @note or similar blocks.

Inheritance graph legend link is not colored like a link

Below the inheritance diagrams there is a small span containing the word "legend". This leads to a generated page explaining the colors used in the diagram.

When this has been visited before, this link is styled with some weird color (#300000) and doesn't stand out.

This can be overridden by setting something like

.contents a:visited {
  font-color: var(--primary-dark-color);
}

I'm not entirely sure what is going on there and why the declared style for anchors doesn't apply in this case.

Dark theme for SVG graphs

When using raster images (such as the default PNG), doxygen-awesome does a hue-rotate(180deg) invert() for img tags in dark theme. When you have DOT_IMAGE_FORMAT set to svg, Doxygen uses iframe tags instead of img tags. Please add iframe:not([id]) to the css rule for img tags, so that the iframes for SVG are also changed for dark theme.

Something like this should probably suffice:

@media (prefers-color-scheme: dark) {
    html:not(.light-mode) div.contents div.dyncontent img,
    html:not(.light-mode) div.contents div.dyncontent iframe:not([id]) {
        filter: hue-rotate(180deg) invert();
    }
}

html.dark-mode div.contents div.dyncontent img,
html.dark-mode div.contents div.dyncontent iframe:not([id]) {
    filter: hue-rotate(180deg) invert();
}

The line number is displayed in the wrong position

As shown in the image, the line number of the code snippets not perfectly

Search results a tat dark

Still a huge fan! But to business:

I find the text of the search results a tat dark, and I've noticed straining my eyes a bit. What do you think?

dark mode toggle have 0x0 size

Hi,
problem
When I apply the dark mode toggle to my website, the toggle hide:

And the css file loaded normally in the page:

additional question
The doc in readme may no clear enough, I think u mean add those line into default css(generated by doxygen)?
When i take my first eye on it, I just copy those content to footer.html and header.html.(And undoubtedly the website cannot work well).

And the generate command of doxgen(1.9.1) should be 3 arguments (like doxygen -w html header.html footer.html _ and del the '_' file), but in doc there just 2 arguments

thx

Menu runs over content

If you use doxygen-awesome-css as-is, on mid-size screen devices menu will run over content:

Here is the fix:

@media screen and (min-width: 767px) and (max-width: 1410px) {
    #doc-content .contents, #doc-content .header .title {
        margin-left: 250px;
    }
}

Is there a way to check which version of theme that you have?

I looked at doxygen-awesome.css for a version number and didn't see one. Is there currently a way to check with version of the theme files you have if you didn't use the submodule method? If not, would it worthwhile adding version information to the static files (some or all)?

Feature Request - force dark/light mode

It would be great if dark or light mode could be enforced somehow independently of the system preferences.
Transparency or not, having a project with a lot of images from dot or mscgen simply looks better in light mode.

Index navigation colors are not overridden in dark mode

Firstly this theme is amazing! 😍

Playing around I noticed these qindex elements are styled using the original .css so I suspect an override might be missing?

Workaround

I added the following to my overrides.css

    html:not(.light-mode) div.qindex,
    html:not(.light-mode) div.navtab {
        background-color: var(--side-nav-background);
        border: 1px solid var(--separator-color);
    }

icon in darkmode not available

In Darkmode the left icon is missing to toggle the mode. In light mode a sun is visible.

Here is the setup:

Include the required Javascript

HTML_EXTRA_FILES = doxygen-awesome-css/doxygen-awesome-darkmode-toggle.js

Add the additional CSS. This is ONLY required for the sidebar-only theme variant!

HTML_EXTRA_STYLESHEET = doxygen-awesome-css/doxygen-awesome.css \
doxygen-awesome-css/doxygen-awesome-sidebar-only.css
doxygen-awesome-css/doxygen-awesome-sidebar-only-darkmode-toggle.css

set custom header & footer files generated in previous step

HTML_HEADER = header.html
HTML_FOOTER = footer.html

DOT-Graphs for color-scheme dark

First of all, thanks for this really nice css theme.
It makes the look of a doxygen documentation really a lot better.

However I have a short remark. It would be nice if you could add a short hint somewhere in the documentation, about using DOT-Graphs combined with the dark color-scheme. Because it is necessary to set the DOT_TRANSPARENT value in the Doxyfile to YES for nice graphs without some black background. Otherwise the color of the graph is changed by filter: hue-rotate(180deg) invert(); which makes the white background black, which however does not blend in with the background in dark-mode.

Spent almost an eternity to find out what's wrong with my output. 😅

As a future possibility without relying on DOT_TRANSPARENT: I guess it would also be possible to add some javascript function to edit the graph-colors which may circumvent the documented problems of the dot-transparent setting (see here). Additionally this would add the possibility to change also the colors of the arrows in the graphs depending on --primary-color for instance and so on.

font load delay

Not sure if this is Doxygen or the CSS problem. The page loaded as expected on the desktop environment, but not on the tablet. Fonts are loaded when there is interaction with the browser, like scrolling to the end.

video_2022-03-21_17-18-52.mp4

Doxygen.cfg

GENERATE_HTML           = YES
GENERATE_XML            = NO
GENERATE_LATEX          = NO
HAVE_DOT                = YES
DOT_IMAGE_FORMAT        = svg
DOT_TRANSPARENT         = YES

# Project Stuff
PROJECT_NAME           = "EEEN21000"
PROJECT_BRIEF          = "GROUP 30 Line Following Buggy"
OUTPUT_DIRECTORY       = ""

# Inputs
INPUT                  = README.md \ 
                      

RECURSIVE              = YES

EXTRACT_ALL            = YES
EXTRACT_PRIVATE        = YES
EXTRACT_PRIV_VIRTUAL   = NO
EXTRACT_PACKAGE        = NO
EXTRACT_STATIC         = YES
EXTRACT_LOCAL_CLASSES  = YES
USE_MATHJAX            = YES
SORT_MEMBER_DOCS       = NO
USE_MDFILE_AS_MAINPAGE = README.md

GENERATE_TREEVIEW      = YES
HTML_HEADER            = header.html
HTML_EXTRA_FILES     = doxygen-awesome-css/doxygen-awesome-darkmode-toggle.js \ 
                         doxygen-awesome-css/doxygen-awesome-paragraph-link.js \
HTML_EXTRA_STYLESHEET  = doxygen-awesome-css/doxygen-awesome.css \
                         doxygen-awesome-css/doxygen-awesome-sidebar-only.css \ 
                         doxygen-awesome-css/doxygen-awesome-sidebar-only-darkmode-toggle.css                  

Feature suggestion: collapse/fold code blocks

I think it could be quite useful to add a "fold code block" feature. We could annotate a code block as "folded" in Doxygen somehow, and then hide it behind a > indicator that can be clicked to reveal the code. Jupyter notebooks have this feature, and ReadTheDocs too: https://sphinx-toolbox.readthedocs.io/en/stable/extensions/collapse.html#directive-collapse. You can even do this in GitHub markdown using the <details> tag:

Click to expand

Hello!

is it possible to use highlight.js or prism.js with this?

This theme is great! I want to use this theme but with a language (Stan) that isn't included in doxygen code highlighting. I've tried to use highlight.js with this following https://coderwall.com/p/ydwz3a/use-highlight-js-for-syntax-highlighting-in-doxygen-generated-documentation but all the line endings are removed so it looks like one long string.

Is there a way to allow these highlighters to highlight the code blocks (while still using this css theme for the blocks?)

Github Action to keep style up to date

I'm using the great style almost everywhere. I'm shipping this style simply with the library, because I don't like submodules. Keeping the style up-to-date is in issue however. We had a really nice contribution having a GH Action checking if the style is up-to-date, and if it is not it opens a PR by @1uc here BlueBrain/HighFive#507 . It would be amazing if this would be converted in an 'official' GH Action !

No search box found after using doxygen-awesome-css v1.4.0

How to update

Can u give some instruction about how to update?
just replace css & js files?
I can't find information about it in readme :(

Code indentation is broken (v1.3.0)

Hi. Thanks for this, I love the project!

I like to add in source code to my docs. Here is how it looks without the doxygen-awesome-css applied:

And here's how it looks with the custom CSS enabled:

(It would also be cool if there was an option to turn off the dark-theme for the code, it's a little hard to read surrounded by a bunch of white).

Treeview Layout - Lowest level fromating.

Hi,
i recently build dox for a plugin with this nice css. But i found following problem:

The lowest level of the tree view is always at the right border of the tree view.

I already fixed it for me locally by adding display: inline-block; to the .arrow section of the .css file. The the tree view looks as i expected:

I would make a pull request my self, but i don't have the right to do so.

Cheers - darkblizzard

Class/collaboration diagrams have misplaced links

When you choose to generate a class or collaboration diagram, Doxygen generates a <map> HTML tag containing <area>s pointing to the related types.

However, when using doxygen-awesome-css, the diagrams are resized to fit the column width which invalidates the links' position.

To solve this I guess you either have to:

1. fix how the <map> is generated
2. run some JS to fix the coordinates on page load
3. keep the original graph size

1. Might be tricky and 3. would change the page layout and probably won't be mobile friendly so I guess it leaves us with 2., but I don't know if it's easy to implement or not.

[1.4.0] Fragment line height set to 0 by obsolete class

https://github.com/jothepro/doxygen-awesome-css/blob/main/doxygen-awesome.css#L882

The line height is then overruled by setting the individual lines' height with the new variable a few lines further down. Is there a special reason the line height is first set to 0 for the fragment and then the lines are set to something else?

Dark Mode toggle broken in Doxygen 1.9.2

@dmadison reported in #47: On mobile [...] the dark mode toggle runs off the screen. When testing in Chrome using the device toolbar, the dark mode toggle also disappears after resizing (and reappears on refresh).

Gnome Web searchbox not showing

In gnome web (epiphany), searchbox is not showing if index.html started from file explorer.

However in your demo website it works.

Sidebaronly version not working.

I tried to implement the sidebar only theme but it didn't work.

Buggy Search Bar when `SERVER_BASED_SEARCH=YES`

Doxygen version 1.9.3
Doxygen-awesome-css version 2.0.2

Seeing old search bar design over the doxygen-awesome-css search bar.

My changes:

1. Default changes from doxygen-awesome-css tutorial.
2. added header.html & footer.html

doxhead.html

<!-- HTML header for doxygen 1.9.4-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=11"/>
<meta name="generator" content="Doxygen $doxygenversion"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!--BEGIN PROJECT_NAME--><title>$projectname: $title</title><!--END PROJECT_NAME-->
<!--BEGIN !PROJECT_NAME--><title>$title</title><!--END !PROJECT_NAME-->
<link href="$relpath^tabs.css" rel="stylesheet" type="text/css"/>
<!--BEGIN DISABLE_INDEX-->
  <!--BEGIN FULL_SIDEBAR-->
<script type="text/javascript">var page_layout=1;</script>

  <!--END FULL_SIDEBAR-->
<!--END DISABLE_INDEX-->
<script type="text/javascript" src="$relpath^jquery.js"></script>
<script type="text/javascript" src="$relpath^dynsections.js"></script>
$treeview
$search
$mathjax
<link href="$relpath^$stylesheet" rel="stylesheet" type="text/css" />
$extrastylesheet
<script type="text/javascript" src="$relpath^doxygen-awesome-darkmode-toggle.js"></script>
<script type="text/javascript">
  DoxygenAwesomeDarkModeToggle.lightModeIcon = '🌞'
  // icon from https://fonts.google.com/icons
  DoxygenAwesomeDarkModeToggle.darkModeIcon = `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#009793"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M8.1,14.15C9.77,14.63,11,16.17,11,18c0,0.68-0.19,1.31-0.48,1.87c0.48,0.09,0.97,0.14,1.48,0.14 c1.48,0,2.9-0.41,4.13-1.15c-2.62-0.92-5.23-2.82-6.8-5.86C7.74,9.94,7.78,7.09,8.29,4.9c-2.57,1.33-4.3,4.01-4.3,7.1c0,0,0,0,0,0 c0.01,0,0.01,0,0.02,0C5.66,12,7.18,12.83,8.1,14.15z" opacity=".3"/><path d="M19.78,17.51c-2.47,0-6.57-1.33-8.68-5.43C8.77,7.57,10.6,3.6,11.63,2.01C6.27,2.2,1.98,6.59,1.98,12 c0,0.14,0.02,0.28,0.02,0.42C2.61,12.16,3.28,12,3.98,12c0,0,0,0,0,0c0-3.09,1.73-5.77,4.3-7.1C7.78,7.09,7.74,9.94,9.32,13 c1.57,3.04,4.18,4.95,6.8,5.86c-1.23,0.74-2.65,1.15-4.13,1.15c-0.5,0-1-0.05-1.48-0.14c-0.37,0.7-0.94,1.27-1.64,1.64 c0.98,0.32,2.03,0.5,3.11,0.5c3.5,0,6.58-1.8,8.37-4.52C20.18,17.5,19.98,17.51,19.78,17.51z"/><path d="M7,16l-0.18,0C6.4,14.84,5.3,14,4,14c-1.66,0-3,1.34-3,3s1.34,3,3,3c0.62,0,2.49,0,3,0c1.1,0,2-0.9,2-2 C9,16.9,8.1,16,7,16z"/></g></g></svg>`
  DoxygenAwesomeDarkModeToggle.init()
</script>

</head>
<body>
<!--BEGIN DISABLE_INDEX-->
  <!--BEGIN FULL_SIDEBAR-->
<div id="side-nav" class="ui-resizable side-nav-resizable"><!-- do not remove this div, it is closed by doxygen! -->
  <!--END FULL_SIDEBAR-->
<!--END DISABLE_INDEX-->

<div id="top"><!-- do not remove this div, it is closed by doxygen! -->

<!--BEGIN TITLEAREA-->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
 <tbody>
 <tr id="projectrow">
  <!--BEGIN PROJECT_LOGO-->
  <td id="projectlogo"><img alt="Logo" src="$relpath^$projectlogo"/></td>
  <!--END PROJECT_LOGO-->
  <!--BEGIN PROJECT_NAME-->
  <td id="projectalign">
   <div id="projectname">$projectname<!--BEGIN PROJECT_NUMBER--><span id="projectnumber">&#160;$projectnumber</span><!--END PROJECT_NUMBER-->
   </div>
   <!--BEGIN PROJECT_BRIEF--><div id="projectbrief">$projectbrief</div><!--END PROJECT_BRIEF-->
  </td>
  <!--END PROJECT_NAME-->
  <!--BEGIN !PROJECT_NAME-->
   <!--BEGIN PROJECT_BRIEF-->
    <td>
    <div id="projectbrief">$projectbrief</div>
    </td>
   <!--END PROJECT_BRIEF-->
  <!--END !PROJECT_NAME-->
  <!--BEGIN DISABLE_INDEX-->
   <!--BEGIN SEARCHENGINE-->
     <!--BEGIN !FULL_SIDEBAR-->
    <td>$searchbox</td>
     <!--END !FULL_SIDEBAR-->
   <!--END SEARCHENGINE-->
  <!--END DISABLE_INDEX-->
 </tr>
  <!--BEGIN SEARCHENGINE-->
   <!--BEGIN FULL_SIDEBAR-->
   <tr><td colspan="2">$searchbox</td></tr>
   <!--END FULL_SIDEBAR-->
  <!--END SEARCHENGINE-->
 </tbody>
</table>
</div>
<!--END TITLEAREA-->
<!-- end header part -->

doxfoot.html

<!-- HTML footer for doxygen 1.9.4-->
<!-- start footer part -->
<!--BEGIN GENERATE_TREEVIEW-->
<div id="nav-path" class="navpath"><!-- id is needed for treeview function! -->
  <ul>
    $navpath
    <li class="footer">$generatedby <a href="https://www.doxygen.org/index.html"><img class="footer" src="$relpath^doxygen.svg" width="104" height="31" alt="doxygen"/></a> $doxygenversion </li>
  </ul>
</div>
<!--END GENERATE_TREEVIEW-->
<!--BEGIN !GENERATE_TREEVIEW-->
<hr class="footer"/><address class="footer"><small>
$generatedby&#160;<a href="https://www.doxygen.org/index.html"><img class="footer" src="$relpath^doxygen.svg" width="104" height="31" alt="doxygen"/></a> $doxygenversion
</small></address>
<!--END !GENERATE_TREEVIEW-->
</body>

</html>

Class list has too bright elements

Thanks once more for the great theme!

I was just looking under "Class Lists", and there I find really bright elements:

Personally I find this a bit tough on the eyes, and difficult to read.
Is there something that could be done?

Project logo 200x50 px trunks project tile and brief.

[System configuration]

OS: Ubuntu 20.04 L.T.S
Browser: Google Chrome v90.0.4430.93
Doxygen version: 1.9.1
Doxygen Awesome mode: sidebar_only
PROJECT_LOGO: 200 px width 55 px height (max dimensions from Doxygen manual)
PROJECT_NAME: "Contiki-NG + Kafka Contact Tracing" (placeholder)
PROJECT_BRIEF: "A simple integration between Contiki-NG and Apache Kafka"

[Expected result]

Sidebar scales in order to fit logo, brief, and name.

[Actual result]

Logo trunks project name and brief forcing side nav to move under the floating search bar.

[Temporary solution]

Use a squared logo.

ACTUAL RESULT SCREENSHOT

TEMPORARY SOLUTION SCREENSHOT

Possible to always show the foldout triangle in side bar?

Unlike the default Doxygen theme, Awesome only shows the foldout triangles if you hover over that particular element. Is there a quick way to change that behavior to always show?

Thanks,

`DISABLE_INDEX = YES` is not supported: The MSearchBox is too close to the title

This theme is awesome, but i think the MSearchBox is too close to the title, like this picture showed:

I believe we should add a margin-left to css, such as margin-left: 2vw. It will look better, like this:

In the default dark mode, the "Class Index" table style uses a hard to read background color.

Hey there, thanks for making this so my documentation doesn't look like it was published in the 90s. I've noticed a problem with the default dark theme where the class index uses a super white background color on every other row of the list:

I think it would be much easier to read if it used a gray background instead of the white like here:

The live page where I'm seeing this issue is here if that helps: https://apeira.github.io/Torch/classes.html