Skip to content

Commit bee4461

Browse files
jotheprojothepro
committed
feat: add theme switcher to showcase theming capabilities
1 parent d85fd09 commit bee4461

7 files changed

Lines changed: 227 additions & 44 deletions

File tree

‎Doxyfile‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1459,8 +1459,8 @@ HTML_EXTRA_STYLESHEET = doxygen-awesome.css \
14591459
doxygen-custom/custom.css \
14601460
doxygen-awesome-sidebar-only.css \
14611461
doxygen-awesome-sidebar-only-darkmode-toggle.css \
1462-
doxygen-custom/custom-alternative.css \
1463-
doxygen-custom/custom-alternative2.css
1462+
doxygen-custom/theme-round.css \
1463+
doxygen-custom/theme-robot.css
14641464

14651465
# The HTML_EXTRA_FILES tag can be used to specify one or more extra images or
14661466
# other source files which should be copied to the HTML output directory. Note

‎docs/customization.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ This theme is highly customizable because a lot of things are parameterized with
99

1010
Just to give you an idea of how flexible the styling is, click this button:
1111

12-
<div class="alter-theme-button" onclick="toggle_alternative_theme()" onkeypress="if (event.keyCode == 13) toggle_alternative_theme()" tabindex=0>Alter theme</div>
12+
<div class="primary-button" onclick="toggleThemeVariant()" onkeypress="if (event.keyCode == 13) toggleThemeVariant()" tabindex=0>Alter theme</div>
1313

1414
<br><hr>
1515

‎doxygen-custom/custom.css‎

Lines changed: 97 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -15,43 +15,115 @@
1515
}
1616
}
1717

18-
.alter-theme-button {
19-
display: inline-block;
20-
cursor: pointer;
21-
background: var(--primary-color);
22-
color: var(--page-background-color) !important;
23-
border-radius: var(--border-radius-medium);
24-
padding: var(--spacing-small) var(--spacing-medium);
25-
text-decoration: none;
18+
.title_screenshot {
19+
filter: drop-shadow(0px 3px 10px rgba(0,0,0,0.22));
20+
max-width: 500px;
21+
margin: var(--spacing-large) 0;
2622
}
2723

28-
.alter-theme-button:hover {
29-
background: var(--primary-dark-color);
24+
.title_screenshot .caption {
25+
display: none;
3026
}
3127

32-
html.dark-mode .darkmode_inverted_image img, /* < doxygen 1.9.3 */
33-
html.dark-mode .darkmode_inverted_image object[type="image/svg+xml"] /* doxygen 1.9.3 */ {
34-
filter: brightness(89%) hue-rotate(180deg) invert();
28+
#theme-selection {
29+
position: fixed;
30+
bottom: 0;
31+
left: 0;
32+
background: var(--side-nav-background);
33+
padding: 5px 2px 5px 8px;
34+
box-shadow: 0 -4px 4px -2px var(--side-nav-background);
35+
display: flex;
3536
}
3637

37-
.bordered_image {
38-
border-radius: var(--border-radius-small);
38+
#theme-selection label {
3939
border: 1px solid var(--separator-color);
40+
border-right: 0;
41+
color: var(--page-foreground-color);
42+
font-size: var(--toc-font-size);
43+
padding: 0 8px;
4044
display: inline-block;
41-
overflow: hidden;
45+
height: 22px;
46+
box-sizing: border-box;
47+
border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
48+
line-height: 20px;
49+
background: var(--page-background-color);
50+
opacity: 0.7;
4251
}
4352

44-
html.dark-mode .bordered_image img, /* < doxygen 1.9.3 */
45-
html.dark-mode .bordered_image object[type="image/svg+xml"] /* doxygen 1.9.3 */ {
46-
border-radius: var(--border-radius-small);
53+
@media (prefers-color-scheme: dark) {
54+
html:not(.light-mode) #theme-select {
55+
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23aaaaaa'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
56+
background-size: 8px;
57+
background-position: calc(100% - 6px) 65%;
58+
background-color: var(--page-background-color);
59+
}
4760
}
4861

49-
.title_screenshot {
50-
filter: drop-shadow(0px 3px 10px rgba(0,0,0,0.22));
51-
max-width: 500px;
52-
margin: var(--spacing-large) 0;
62+
html.dark-mode #theme-select {
63+
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23aaaaaa'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
64+
background-size: 8px;
65+
background-position: calc(100% - 6px) 65%;
66+
background-color: var(--page-background-color);
5367
}
5468

55-
.title_screenshot .caption {
56-
display: none;
69+
#theme-select {
70+
border: 1px solid var(--separator-color);
71+
border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
72+
padding: 0;
73+
height: 22px;
74+
font-size: var(--toc-font-size);
75+
font-family: var(--font-family);
76+
width: 215px;
77+
color: var(--primary-color);
78+
border-left: 0;
79+
display: inline-block;
80+
opacity: 0.7;
81+
outline: none;
82+
-webkit-appearance: none;
83+
-moz-appearance: none;
84+
appearance: none;
85+
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23888888'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
86+
background-size: 8px;
87+
background-position: calc(100% - 6px) 65%;
88+
background-repeat: no-repeat;
89+
background-color: var(--page-background-color);
5790
}
91+
92+
#theme-selection:hover #theme-select, #theme-selection:hover label {
93+
opacity: 1;
94+
}
95+
96+
#nav-tree-contents {
97+
margin-bottom: 30px;
98+
}
99+
100+
@media screen and (max-width: 767px) {
101+
#theme-selection {
102+
box-shadow: none;
103+
background: none;
104+
height: 20px;
105+
}
106+
107+
#theme-select {
108+
width: 80px;
109+
opacity: 1;
110+
}
111+
112+
#theme-selection label {
113+
opacity: 1;
114+
}
115+
116+
#nav-path ul li.navelem:first-child {
117+
margin-left: 160px;
118+
}
119+
120+
ul li.footer:not(:first-child) {
121+
display: none;
122+
}
123+
124+
#nav-path {
125+
position: fixed;
126+
bottom: 0;
127+
background: var(--page-background-color);
128+
}
129+
}

‎doxygen-custom/header.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,14 @@
8585
</tr>
8686
</tbody>
8787
</table>
88+
<div id="theme-selection">
89+
<label for="theme-select">Theme:</label>
90+
<select id="theme-select">
91+
<option value="theme-default">Default</option>
92+
<option value="theme-round">Round</option>
93+
<option value="theme-robot">Robot</option>
94+
</select>
95+
</div>
8896
</div>
8997
<!--END TITLEAREA-->
9098
<!-- end header part -->

‎doxygen-custom/theme-robot.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
html.theme-robot {
2+
/* primary theme color. This will affect the entire websites color scheme: links, arrows, labels, ... */
3+
--primary-color: #1c89a4;
4+
--primary-dark-color: #1a6f84;
5+
--primary-light-color: #5abcd4;
6+
--primary-lighter-color: #cae1f1;
7+
--primary-lightest-color: #e9f1f8;
8+
9+
--fragment-background: #ececec;
10+
--code-background: #ececec;
11+
12+
/* page base colors */
13+
--page-background-color: white;
14+
--page-foreground-color: #2c3e50;
15+
--page-secondary-foreground-color: #67727e;
16+
17+
18+
--border-radius-large: 0px;
19+
--border-radius-small: 0px;
20+
--border-radius-medium: 0px;
21+
22+
--spacing-small: 3px;
23+
--spacing-medium: 6px;
24+
--spacing-large: 12px;
25+
26+
--top-height: 125px;
27+
28+
--side-nav-background: var(--page-background-color);
29+
--side-nav-foreground: var(--page-foreground-color);
30+
--header-foreground: var(--side-nav-foreground);
31+
--searchbar-border-radius: var(--border-radius-medium);
32+
--header-background: var(--side-nav-background);
33+
--header-foreground: var(--side-nav-foreground);
34+
35+
--toc-background: rgb(243, 240, 252);
36+
--toc-foreground: var(--page-foreground-color);
37+
38+
--font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
39+
--page-font-size: 14px;
40+
--box-shadow: none;
41+
--separator-color: #cdcdcd;
42+
}
43+
44+
html.theme-robot.dark-mode {
45+
color-scheme: dark;
46+
47+
--primary-color: #49cad3;
48+
--primary-dark-color: #8ed2d7;
49+
--primary-light-color: #377479;
50+
--primary-lighter-color: #191e21;
51+
--primary-lightest-color: #191a1c;
52+
53+
--fragment-background: #000000;
54+
--code-background: #000000;
55+
56+
--page-background-color: #161616;
57+
--page-foreground-color: #d2dbde;
58+
--page-secondary-foreground-color: #555555;
59+
--separator-color: #545454;
60+
--toc-background: #20142C;
61+
62+
}

doxygen-custom/custom-alternative.css renamed to doxygen-custom/theme-round.css

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
html.alternative {
1+
html.theme-round {
22
/* primary theme color. This will affect the entire websites color scheme: links, arrows, labels, ... */
33
--primary-color: #AF7FE4;
44
--primary-dark-color: #9270E4;
5-
--primary-light-color: #7aabd6;
5+
--primary-light-color: #d2b7ef;
66
--primary-lighter-color: #cae1f1;
77
--primary-lightest-color: #e9f1f8;
88

@@ -18,6 +18,7 @@ html.alternative {
1818
--spacing-small: 8px;
1919
--spacing-medium: 14px;
2020
--spacing-large: 19px;
21+
--spacing-xlarge: 21px;
2122

2223
--top-height: 125px;
2324

@@ -33,12 +34,12 @@ html.alternative {
3334
--toc-foreground: var(--page-foreground-color);
3435
}
3536

36-
html.alternative.dark-mode {
37+
html.theme-round.dark-mode {
3738
color-scheme: dark;
3839

3940
--primary-color: #AF7FE4;
40-
--primary-dark-color: #9270E4;
41-
--primary-light-color: #4779ac;
41+
--primary-dark-color: #715292;
42+
--primary-light-color: #ae97c7;
4243
--primary-lighter-color: #191e21;
4344
--primary-lightest-color: #191a1c;
4445

‎doxygen-custom/toggle-alternative-theme.js‎

Lines changed: 51 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,52 @@
1+
// Toggle zwischen drei Theme-Zuständen und speichere im localStorage
2+
const THEME_CLASSES = ['theme-default', 'theme-round', 'theme-robot'];
3+
// Ermögliche das Umschalten per Button/Funktion (z.B. für onclick im HTML)
4+
function toggleThemeVariant() {
5+
let idx = getCurrentThemeIndex();
6+
idx = (idx + 1) % THEME_CLASSES.length;
7+
applyThemeClass(idx);
8+
}
19

2-
let original_theme_active = true;
3-
4-
function toggle_alternative_theme() {
5-
if(original_theme_active) {
6-
document.documentElement.classList.add("alternative")
7-
original_theme_active = false;
8-
} else {
9-
document.documentElement.classList.remove("alternative")
10-
original_theme_active = true;
11-
}
12-
}
10+
// Funktion global verfügbar machen
11+
window.toggleThemeVariant = toggleThemeVariant;
12+
13+
function getCurrentThemeIndex() {
14+
const stored = localStorage.getItem('theme-variant');
15+
if (stored === null) return 0;
16+
const idx = THEME_CLASSES.indexOf(stored);
17+
return idx === -1 ? 0 : idx;
18+
}
19+
20+
function applyThemeClass(idx) {
21+
document.documentElement.classList.remove(...THEME_CLASSES);
22+
if (THEME_CLASSES[idx] && THEME_CLASSES[idx] !== 'theme-default') {
23+
document.documentElement.classList.add(THEME_CLASSES[idx]);
24+
}
25+
localStorage.setItem('theme-variant', THEME_CLASSES[idx] || 'theme-default');
26+
// Select synchronisieren, falls vorhanden
27+
const select = document.getElementById('theme-select');
28+
if (select) select.value = THEME_CLASSES[idx];
29+
}
30+
31+
function setThemeByName(themeName) {
32+
const idx = THEME_CLASSES.indexOf(themeName);
33+
applyThemeClass(idx === -1 ? 0 : idx);
34+
}
35+
36+
37+
document.addEventListener('DOMContentLoaded', () => {
38+
const select = document.getElementById('theme-select');
39+
if (select) {
40+
// Initialisiere Auswahl aus localStorage
41+
const idx = getCurrentThemeIndex();
42+
select.value = THEME_CLASSES[idx];
43+
applyThemeClass(idx);
44+
// Theme bei Auswahl ändern
45+
select.addEventListener('change', e => {
46+
setThemeByName(e.target.value);
47+
});
48+
} else {
49+
// Fallback: Theme trotzdem setzen
50+
applyThemeClass(getCurrentThemeIndex());
51+
}
52+
});

0 commit comments

Comments
 (0)