jothepro / doxygen-awesome-css Goto Github PK
View Code? Open in Web Editor NEWCustom CSS theme for doxygen html-documentation with lots of customization parameters.
Home Page: https://jothepro.github.io/doxygen-awesome-css/
License: MIT License
Custom CSS theme for doxygen html-documentation with lots of customization parameters.
Home Page: https://jothepro.github.io/doxygen-awesome-css/
License: MIT License
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.
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
It should probably be this instead:
@media (prefers-color-scheme: dark) {
html:not(.light-mode) iframe#MSearchResults {
filter: invert() hue-rotate(180deg);
}
}
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 ๐
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
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).
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.
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:
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"> $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 <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>
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,
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?
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);
}
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:
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
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)?
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
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.
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?)
On Chrome 94 all elements embedded in iframes (e.g. dependency graphs, search results) do sometimes have a black background:
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... ๐ค
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"
Sidebar scales in order to fit logo, brief, and name.
Logo trunks project name and brief forcing side nav to move under the floating search bar.
Use a squared logo.
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.
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!
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!
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:
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 !
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.
Can u give some instruction about how to update?
just replace css & js files?
I can't find information about it in readme :(
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.
I tried to implement the sidebar only theme but it didn't work.
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...
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 iframe
s 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();
}
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?
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:
<map>
is generated1.
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.
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.
Hope that you can help us with this issue. Thank you!
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
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:
Hey there!
You showed some of the configurable CSS-parameters, but is somewhere out there a full list?
Best regards
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:
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.
Personally, I feel that the summary of functions could be a bit brighter, it now almost disappears in the background:
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]
*/
Here there is nothing to do I think. But the dependency graphs could look better ;)
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.
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
In Darkmode the left icon is missing to toggle the mode. In light mode a sun is visible.
Here is the setup:
HTML_EXTRA_FILES = doxygen-awesome-css/doxygen-awesome-darkmode-toggle.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
HTML_HEADER = header.html
HTML_FOOTER = footer.html
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
Is this even possible currently?
There is no css custom property to overwrite.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.