doxygen-awesome-css icon indicating copy to clipboard operation
doxygen-awesome-css copied to clipboard

Dark mode in doxygen 1.14.0

Open MangaD opened this issue 6 months ago • 3 comments

The layout has changed in more recent versions and the CSS should be updated accordingly.

MangaD avatar Jun 01 '25 08:06 MangaD

Yes, I also noticed the same problem

parmi93 avatar Jun 10 '25 13:06 parmi93

Yup, noticing this too. When browsing files, the hierarchical display bar on the bottom has some light-mode leaking. Same with the right sidebar ToC.

grunt-lucas avatar Jun 12 '25 21:06 grunt-lucas

Can confirm I saw this problem. Identified:

  • the #nav-sync icon at the bottom right corner of the sidebar seems to be light mode
  • I'm not sure if the .sub-arrow elements in the top menu are rendering correctly, they look more like squares than arrows
  • the #page-nav-contents on the right are completely untouched and show in light mode

This was using the most recent Doxygen 1.14.0.

stur86 avatar Jun 17 '25 13:06 stur86

The #page-nav is a new addition controlled by the PAGE_OUTLINE_PANEL property.
It is enabled by default.

Also, a picture is worth a thousand words.

Screenshot

kitswas avatar Jul 12 '25 18:07 kitswas

For any interested I took an attempt to fix up some of the styling with Doxygen 1.14.0. But it's not complete, and I mostly just did it through trial and error. But in case it helps someone else, here are the CSS overrides that I've found which handles most of the issues I've noticed (other than the breadcrumbs)

#nav-tree {
    border-right: none;
}
#page-nav {
    border-left: 1px solid var(--separator-color);
}

.search-icon::before {
    background: transparent;
}

tr[class^="memdesc"] {
    box-shadow: none;
}

tr.heading + tr[class^="memitem"] td.memItemLeft, tr.groupHeader + tr[class^="memitem"] td.memItemLeft, tr.inherit_header + tr[class^="memitem"] td.memItemLeft {
    border-top: 1px solid var(--separator-color);
}

tr.heading + tr[class^="memitem"] td.memItemRight, tr.groupHeader + tr[class^="memitem"] td.memItemRight, tr.inherit_header + tr[class^="memitem"] td.memItemRight {
    border-top: 1px solid var(--separator-color);
}

tr[class^="memitem"] + tr[class^="memitem"] td.memItemLeft, tr[class^="memitem"] + tr[class^="memitem"] td.memItemRight, tr[class^="memitem"] + tr[class^="memitem"] td.memTeplParams{
    border-top: none;
}

tr[class^="memdesc"] + tr[class^="memitem"] td.memItemLeft, tr[class^="memdesc"] + tr[class^="memitem"] td.memItemRight {
    border-top: none;
}

.mdescLeft {
    border-left: 1px solid var(--separator-color);
    border-bottom: 1px solid var(--separator-color);
}
.mdescRight {
    border-right: 1px solid var(--separator-color);
    border-bottom: 1px solid var(--separator-color);
}

table.memberdecls .memItemLeft {
    border-radius: 0;
}

table.memberdecls .memItemRight {
    border-radius: 0;
}
table.memberdecls .memTemplParams {
    border-radius: 0;
}

td h2.groupheader {
    box-shadow: none;
    border-bottom: 1px solid var(--separator-color);
}

#page-nav {
    background: var(--side-nav-background);
}

ul.page-outline li.vis {
    background-color: var(--page-background-color);
}
Image

Nedra1998 avatar Sep 01 '25 16:09 Nedra1998