Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit a7cdeb6

Browse files
jotheprojothepro
committed
Improve documentation
- fix image color inversion in dark mode for doxygen 1.9.3 - make it more explicit what files are required in sidebar-only mode
1 parent 74b4250 commit a7cdeb6

File tree

5 files changed

+91
-23
lines changed

5 files changed

+91
-23
lines changed

‎README.md‎

Lines changed: 50 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
[![GitHub](https://img.shields.io/github/license/jothepro/doxygen-awesome-css)](https://github.com/jothepro/doxygen-awesome-css/blob/main/LICENSE)
55
![GitHub Repo stars](https://img.shields.io/github/stars/jothepro/doxygen-awesome-css)
66

7-
<div style="filter: drop-shadow(0px 3px 10px rgba(0,0,0,0.22)); max-width: 500px">
7+
<div class="title_screenshot">
88

99
![Screenshot of Doxygen Awesome CSS](img/screenshot.png)
1010

@@ -29,46 +29,77 @@ This theme is an attempt to update the visuals of Doxygen without changing its o
2929

3030
## Examples
3131

32-
- Sidebar-Only theme: [Documentation of this repository](https://jothepro.github.io/doxygen-awesome-css/)
33-
- Base theme: [libsl3](https://a4z.github.io/libsl3/)
32+
Some websites using this theme:
33+
34+
- [Documentation of this repository](https://jothepro.github.io/doxygen-awesome-css/)
35+
- [wxWidgets](https://docs.wxwidgets.org/3.2/)
36+
- [OpenCV 5.x](https://docs.opencv.org/5.x/)
37+
- [Zephyr](https://docs.zephyrproject.org/latest/doxygen/html/index.html)
38+
- [FELTOR](https://mwiesenberger.github.io/feltor/dg/html/modules.html)
39+
- [Spatial Audio Framework (SAF)](https://leomccormack.github.io/Spatial_Audio_Framework/index.html)
40+
- [libCloudSync](https://jothepro.github.io/libCloudSync/)
41+
- [libsl3](https://a4z.github.io/libsl3/)
3442

3543
## Installation
3644

37-
Copy the file `doxygen-awesome.css` from this repository into your project or add this repository as submodule and check out the latest release:
45+
To use the theme in your documentation, copy the required CSS and JS files from this repository into your project or add the repository as submodule and check out the latest release:
3846

3947
```bash
4048
git submodule add https://github.com/jothepro/doxygen-awesome-css.git
4149
cd doxygen-awesome-css
4250
git checkout v2.0.3
4351
```
4452

45-
Choose one of the theme variants and configure Doxygen accordingly:
53+
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.
54+
55+
### Choosing a layout
4656

47-
<span id="variants_image">
57+
There is two layout options. Choose one of them and configure Doxygen accordingly:
58+
59+
<div class="darkmode_inverted_image">
4860

4961
![Available theme variants](img/theme-variants.drawio.svg)
5062

51-
</span>
63+
</div>
64+
65+
66+
67+
#### Base Theme (1)
68+
69+
Comes with the typical Doxygen titlebar. Optionally the treeview in the sidebar can be enabled.
5270

53-
1. **Base theme**:
71+
Required files: `doxygen-awesome.css`
72+
73+
Required `Doxyfile` configuration:
5474
```
55-
# Doxyfile
5675
GENERATE_TREEVIEW = YES # optional. Also works without treeview
76+
DISABLE_INDEX = NO
77+
FULL_SIDEBAR = NO
5778
HTML_EXTRA_STYLESHEET = doxygen-awesome-css/doxygen-awesome.css
5879
```
5980

60-
2. **Sidebar-only theme**:
81+
#### Sidebar-Only Theme (2)
82+
83+
Hides the top titlebar to give more space to the content. The treeview must be enabled in order for this theme to work.
84+
85+
Required files: `doxygen-awesome.css`, `doxygen-awesome-sidebar-only.css`
86+
87+
Required `Doxyfile` configuration:
6188
```
62-
# Doxyfile
6389
GENERATE_TREEVIEW = YES # required!
90+
DISABLE_INDEX = NO
91+
FULL_SIDEBAR = NO
6492
HTML_EXTRA_STYLESHEET = doxygen-awesome-css/doxygen-awesome.css \
6593
doxygen-awesome-css/doxygen-awesome-sidebar-only.css
6694
```
6795

68-
Further installation instructions:
6996

70-
- [How to install extensions](docs/extensions.md)
71-
- [How to customize the theme (colors, spacing, border-radius, ...)](docs/customization.md)
97+
**Caution**: This theme is not compatible with the `FULL_SIDEBAR = YES` option provided by Doxygen!
98+
99+
### Further installation instructions:
100+
101+
- [Installing extensions](docs/extensions.md)
102+
- [Customizing the theme (colors, spacing, border-radius, ...)](docs/customization.md)
72103
- [Tips and Tricks for further configuration](docs/tricks.md)
73104

74105
## Browser support
@@ -78,11 +109,14 @@ Tested with
78109
- Chrome 104, Chrome 104 for Android, Chrome 103 for iOS
79110
- Safari 15, Safari for iOS 15
80111
- Firefox 103, Firefox 103 for Android, Firefox Daylight 102 for iOS
112+
- Edge 104
113+
114+
The theme does not strive to be backwards compatible to (significantly) older browser versions.
81115

82116
## Credits
83117

84-
- This theme is inspired by the [vuepress](https://vuepress.vuejs.org/) static site generator default theme.
85-
- Thank you for all the feedback on github!
118+
- This theme was initially inspired by the [vuepress](https://vuepress.vuejs.org/) static site generator default theme.
119+
- Thank you for all the bug reports, pull requests and inspiring feedback on github!
86120

87121
<span class="next_section_button">
88122

‎docs/extensions.md‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,11 @@ This is how you can create the default template with Doxygen:
2121

2222
## Dark Mode Toggle
2323

24-
Adds a button next to the search bar to enable and disable the dark theme variant manually.
24+
Adds a button next to the search bar to enable and disable the dark theme variant manually:
2525

26-
<img width=250 src="darkmode_toggle.png" style="border-radius: var(--border-radius-small); border: 1px solid var(--separator-color)"/>
26+
<div class="darkmode_inverted_image bordered_image">
27+
<img width=250 src="darkmode_toggle.png" />
28+
</div>
2729

2830
### Installation
2931

@@ -67,7 +69,9 @@ All customizations must be applied before calling `DoxygenAwesomeDarkModeToggle.
6769
6870
Shows a copy button when the user hovers over a code fragment:
6971
70-
<img width=490 src="fragment_copy_button.png" style="border-radius: var(--border-radius-small); border: 1px solid var(--separator-color)"/>
72+
<div class="darkmode_inverted_image bordered_image">
73+
<img width=490 src="fragment_copy_button.png"/>
74+
</div>
7175
7276
### Installation
7377
@@ -107,7 +111,9 @@ All customizations must be applied before calling `DoxygenAwesomeDarkModeToggle.
107111
108112
Provides a button on hover behind every headline to allow easy creation of a permanent link to the headline:
109113
110-
<img width=220 src="paragraph_link.png" style="border-radius: var(--border-radius-small); border: 1px solid var(--separator-color)"/>
114+
<div class="darkmode_inverted_image bordered_image">
115+
<img width=220 src="paragraph_link.png"/>
116+
</div>
111117
112118
Works for all headlines and for many documentation section titles.
113119
@@ -146,7 +152,12 @@ All customizations must be applied before calling `DoxygenAwesomeParagraphLink.i
146152
147153
On large screens the Table of Contents (TOC) is anchored on the top right of the page. This extension visualizes the reading progress by dynamically highlighting the currently active section.
148154
149-
On small screens the extension hides the TOC by default. The user can open it manually when needed.
155+
On small screens the extension hides the TOC by default. The user can open it manually when needed:
156+
157+
158+
<div class="darkmode_inverted_image bordered_image">
159+
<img width=380 src="interactive_toc_mobile.png" />
160+
</div>
150161
151162
### Installation
152163
@@ -167,7 +178,7 @@ On small screens the extension hides the TOC by default. The user can open it ma
167178

168179
### Customizing
169180

170-
The offset for when a headline is considered active can be changed. A smaller value means that the headline of the section must closer to the top of the viewport before it is highlighted in the TOC:
181+
The offset for when a headline is considered active can be changed. A smaller value means that the headline of the section must be closer to the top of the viewport before it is highlighted in the TOC:
171182
```js
172183
DoxygenAwesomeInteractiveToc.topOffset = 45
173184
```

‎docs/img/fragment_copy_button.png‎

-12.4 KB
Loading

‎docs/img/interactive_toc_mobile.png‎

16 KB
Loading

‎doxygen-custom/custom.css‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,29 @@
7373
background: var(--primary-dark-color);
7474
}
7575

76-
html.dark-mode #variants_image img {
76+
html.dark-mode .darkmode_inverted_image img, /* < doxygen 1.9.3 */
77+
html.dark-mode .darkmode_inverted_image object[type="image/svg+xml"] /* doxygen 1.9.3 */ {
7778
filter: brightness(87%) hue-rotate(180deg) invert();
79+
}
80+
81+
.bordered_image {
82+
border-radius: var(--border-radius-small);
83+
border: 1px solid var(--separator-color);
84+
display: inline-block;
85+
overflow: hidden;
86+
}
87+
88+
html.dark-mode .bordered_image img, /* < doxygen 1.9.3 */
89+
html.dark-mode .bordered_image object[type="image/svg+xml"] /* doxygen 1.9.3 */ {
90+
border-radius: var(--border-radius-small);
91+
}
92+
93+
.title_screenshot {
94+
filter: drop-shadow(0px 3px 10px rgba(0,0,0,0.22));
95+
max-width: 500px;
96+
margin: var(--spacing-large) 0;
97+
}
98+
99+
.title_screenshot .caption {
100+
display: none;
78101
}

0 commit comments

Comments
 (0)