Custom User Themes #13
Replies: 11 comments 9 replies
-
Solarized Light Code BlocksCreated by @r0ckarong --fragment-background: #fdf6e3;
--fragment-foreground: #586e75;
--fragment-keyword: #cb4b16;
--fragment-keywordtype: #268bd2;
--fragment-keywordflow: #859900;
--fragment-token: #2aa198;
--fragment-comment: #657b83;
--fragment-link: #d33682;
--fragment-preprocessor: #2aa198;
--fragment-linenumber-color: #586e75;
--fragment-linenumber-background: #eee8d5; |
Beta Was this translation helpful? Give feedback.
-
|
By the way, I'm just using the default doxygen-awesome.css and add another stylesheet that overrides the variables I need changing in a second stylesheet. If you add that as another entry in the doxygen HTML_EXTRA_STYLESHEET line they are both inserted (actually applies to as many stylesheets as you want)! This way, I can just pull the latest version of this repo and maintain my customizations at the same time. Just make sure to add the supplementary stylesheet last so the values actually override those from doxygen-awesome.css. I find this much easier than having to merge the development progress from this repo into a fully customized file. If something about the main stylesheet changes, I just need to adjust a few things in my supplemental file. |
Beta Was this translation helpful? Give feedback.
-
ZephyrVersion: 1.6.1
Link (optional): https://docs.zephyrproject.org/latest/doxygen/html/index.html |
Beta Was this translation helpful? Give feedback.
-
FeltorVersion 1.6.1 Code https://github.com/feltor-dev/feltor/tree/master/doc Like @r0ckarong suggested above I placed my changes in a second stylesheet "menubar.css" which is included in doxygen's |
Beta Was this translation helpful? Give feedback.
-
|
Version 2.0.3, a small custom.css, to mark Namespaces in the Class list
|
Beta Was this translation helpful? Give feedback.
-
|
Nice. Would like to see this upstream 👍 |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
GitLab Corner with animationInspired by the GitHub-Corner used in this repo I've searched the web for some input (see credits at the end) and created a similar thing for the Gitlab-Logo. custom.css/* Gitlab-Corner from https://bryce.io/gitlab-corners/ */
.gitlab-corner-wrapper{
overflow:hidden;
width:var(--gitlab-margin);
height:var(--gitlab-margin);
position:absolute;
top:0;
right:0
}
.gitlab-corner{
position:absolute;
top:-11px;
right:-46px;
transform:rotate(45deg);
background:var(--gitlab-corner-color);
border:40px solid var(--gitlab-corner-color);
border-bottom:none;
border-top:var(--gitlab-corner-color) solid 14px;
z-index: 10000; /*higher than main-menu which has 9999*/
}
.gitlab-corner svg{
width:calc(0.6 * var(--gitlab-margin));
height:calc(0.6 * var(--gitlab-margin));
margin-bottom:-4px
}
.cls-1 { fill:#e24329; }
.cls-2 { fill:#fc6d26; }
.cls-3 { fill:#fca326; }
.gitlab-corner:hover .cls-1 {
animation: cycle 600ms;
}
.gitlab-corner:hover .cls-2 {
animation: cycleMid 600ms;
}
.gitlab-corner:hover .cls-3 {
animation: cycleEnd 600ms;
}
@keyframes cycle {
from { fill:#fc6d26; }
20% { fill:#fca326; }
40% { fill:#e24329; }
60% { fill:#fc6d26; }
80% { fill:#fca326; }
to { fill:#e24329; }
}
@keyframes cycleMid {
from { fill:#e24329; }
20% { fill:#fc6d26; }
40% { fill:#fca326; }
60% { fill:#e24329; }
80% { fill:#fc6d26; }
to { fill:#fca326; }
}
@keyframes cycleEnd {
from { fill:#fca326; }
20% { fill:#e24329; }
40% { fill:#fc6d26; }
60% { fill:#fca326; }
80% { fill:#e24329; }
to { fill:#fc6d26; }
}
@media (max-width:500px){
.gitlab-corner:hover .cls-1,
.gitlab-corner:hover .cls-2,
.gitlab-corner:hover .cls-3 {animation:none}
.gitlab-corner .cls-1 {animation:cycle .6s}
.gitlab-corner .cls-2 {animation:cycleMid .6s}
.gitlab-corner .cls-3 {animation:cycleEnd .6s}
}header.htmlShould be directly added after <!-- Gitlab-Corner from https://bryce.io/gitlab-corners/ -->
<div class="gitlab-corner-wrapper">
<a href="https://gitlab.com/your_group/your_project" target="_blank" class="gitlab-corner" aria-label="View source on GitLab">
<!-- Old Gitlab-logo -->
<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 586 559">
<path id="path46" class="cls-1" d="M461.17,301.83l-18.91-58.12L404.84,128.43a6.47,6.47,0,0,0-12.27,0L355.15,243.64H230.82L193.4,128.43a6.46,6.46,0,0,0-12.26,0L143.78,243.64l-18.91,58.19a12.88,12.88,0,0,0,4.66,14.39L293,435,456.44,316.22a12.9,12.9,0,0,0,4.73-14.39"></path>
<path id="path50" class="cls-2" d="M293,434.91h0l62.16-191.28H230.87L293,434.91Z"></path>
<path id="path58" class="cls-1" d="M293,434.91,230.82,243.63h-87L293,434.91Z"></path>
<path id="path66" class="cls-3" d="M143.75,243.69h0l-18.91,58.12a12.88,12.88,0,0,0,4.66,14.39L293,435,143.75,243.69Z"></path>
<path id="path74" class="cls-2" d="M143.78,243.69h87.11L193.4,128.49a6.47,6.47,0,0,0-12.27,0l-37.35,115.2Z"></path>
<path id="path78" class="cls-1" d="M293,434.91l62.16-191.28H442.3L293,434.91Z"></path>
<path id="path82" class="cls-3" d="M442.24,243.69h0l18.91,58.12a12.85,12.85,0,0,1-4.66,14.39L293,434.91l149.2-191.22Z"></path>
<path id="path86" class="cls-2" d="M442.28,243.69h-87.1l37.42-115.2a6.46,6.46,0,0,1,12.26,0l37.42,115.2Z"></path>
</svg> -->
<!-- New Gitlab-logo -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 380">
<path class="cls-1" d="M282.83,170.73l-.27-.69-26.14-68.22a6.81,6.81,0,0,0-2.69-3.24,7,7,0,0,0-8,.43,7,7,0,0,0-2.32,3.52l-17.65,54H154.29l-17.65-54A6.86,6.86,0,0,0,134.32,99a7,7,0,0,0-8-.43,6.87,6.87,0,0,0-2.69,3.24L97.44,170l-.26.69a48.54,48.54,0,0,0,16.1,56.1l.09.07.24.17,39.82,29.82,19.7,14.91,12,9.06a8.07,8.07,0,0,0,9.76,0l12-9.06,19.7-14.91,40.06-30,.1-.08A48.56,48.56,0,0,0,282.83,170.73Z" />
<path class="cls-2" d="M282.83,170.73l-.27-.69a88.3,88.3,0,0,0-35.15,15.8L190,229.25c19.55,14.79,36.57,27.64,36.57,27.64l40.06-30,.1-.08A48.56,48.56,0,0,0,282.83,170.73Z" />
<path class="cls-3" d="M153.43,256.89l19.7,14.91,12,9.06a8.07,8.07,0,0,0,9.76,0l12-9.06,19.7-14.91S209.55,244,190,229.25C170.45,244,153.43,256.89,153.43,256.89Z" />
<path class="cls-2" d="M132.58,185.84A88.19,88.19,0,0,0,97.44,170l-.26.69a48.54,48.54,0,0,0,16.1,56.1l.09.07.24.17,39.82,29.82s17-12.85,36.57-27.64Z" />
</svg>
</a>
</div>ResultNew logo
Old logo
CreditsSpecial thanks go to the webpage https://bryce.io/gitlab-corners/ which already did the hardest job for the animation of the old logo. Also there different colour-variants can be found. |
Beta Was this translation helpful? Give feedback.
-
Version switcherI was intrigued by the version switcher that the ROOT-documentation uses and incorporated it into my project. The original implementation is done by @Axel-Naumann and is released under the git repo root-project/doxyvers licensed under LGPL-3.0 license.
Since a few things need to be considered when integrating it using doxygen-awesome I'll post here the necessary modifications. dropdown.css/* (c) Axel Naumann, CERN; 2020-03-02 */
/* Modified by Bernd Riederer to incorporate color schemes from doxygen-awesome */
/* Adapted from https://www.w3schools.com/howto/howto_css_dropdown.asp */
.dropbtn {
margin-left: var(--spacing-small);
border: 1px solid lightgray;
color: white;
background-color: var(--primary-color);
padding: var(--spacing-small);
font-size: 14px;
min-width: 85px;
}
.dropbtn:after{
content: '';
border: 4px solid transparent;
border-top: 4px solid white;
margin-left: 12px;
margin-bottom: 3px;
display: inline-block;
vertical-align: bottom;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
margin-left: var(--spacing-small);
background-color: var(--primary-lightest-color);
min-width: 75px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */.dropdown-content a {
color: black;
padding: 4px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: var(--primary-lighter-color);}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
color: black;
background-color: var(--primary-light-color);
}selectversion.jsThis part may need some modification depending on the URL and the repo-layout that is used. Nevertheless for me the following works. /// Modified version of ROOT-version selector
/// Modified by Bernd Riederer
/// (c) Axel Naumann, CERN; 2020-03-02
/// Configurable section.
// What the master is called. Leave untouched if master has no doc.
let master = 'master';
/// Pathname part of the URL containing the different versioned doxygen
/// subdirectories. Must be browsable.
let urlroot = '/project-name/docs-subfolder';
///=============================================================================
// Remove trailing '/'.
if (urlroot[urlroot.length - 1] == '/')
urlroot = urlroot.substring(0, urlroot.length - 1)
let urlrootdirs = urlroot.split('/').length;
function url2version(patharr) {
// Given the directory array of a URL (i.e. without domain), extract the
// version corresponding to the URL.
// E.g. for `https://example.com/doc/master/classX.html`, the directory array
// becomes `["doc", "master, "classX.html"]. This function might return
// the second element, `master`.
return patharr[urlrootdirs];
}
let patharr = window.location.pathname.replace(/\/+/g, '/').split('/');
let thisvers = url2version(patharr);
$('.dropbtn').html(thisvers);
// https://stackoverflow.com/questions/30622369
$.get(urlroot + '/', (data) => {
let ret = parseDirectoryListing(data);
$('.dropdown-content').append(ret.join(''));
// Now check which links actually exist, and remove the href for those
// that don't.
$('.dropdown-content')
.find('.verslink')
.each(function () {
var el = $(this);
var request = new XMLHttpRequest();
request.open('HEAD', el.attr('href'), true);
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 404) {
el.removeAttr('href');
el.css({
'color': "gray",
'text-decoration': 'line-through'
});
}
}
};
request.send();
});
});
function parseDirectoryListing(text) {
let docs = text.match(/href="([^/][^"]+)"/g); // only directories.
docs = docs.map((x) =>
x.replace(/.\//g, '')
.replace(/href="/, '')
.replace(/"$/, ''))
.sort().reverse();
docs = docs.filter(function (line) {
// suppress link to current version
return !RegExp(thisvers).test(line)
// suppress hidden dirs
&& !/^[.]/.test(line);
});
if (docs.includes(master)) {
// Move "master" first.
docs.splice(docs.findIndex(el => el == master), 1);
docs.splice(0, 0, master);
}
docs = docs.map((x) => '<a class="verslink" href="'
+ patharr.slice(0, urlrootdirs).join('/')
+ '/' + x + '/' + patharr[patharr.length - 1] + '">'
+ x
+ '</a>');
return docs;
}header.htmlReplacing the projectnumber of doxygen by the dropdown. Note the path has changed compared to root-project/doxyvers. <!--BEGIN PROJECT_NUMBER-->
<!-- BEGIN version select -->
<div class="dropdown" id="projectnumber">
<button class="dropbtn">$projectnumber</button>
<div class="dropdown-content">
</div>
</div>
<script type="text/javascript" src="$relpath^selectversion.js"></script>
<!-- END version select -->
<!--<span id="projectnumber">$projectnumber</span>--><!--END PROJECT_NUMBER--> |
Beta Was this translation helpful? Give feedback.
-
CardsI did an experimental implementation of cards in the home page of one of my projects, and I think that it might be a good starting point for a new feature to be added to this theme:
The initial post was #117. The html & css code can be seen in https://github.com/micro-os-plus/utils-lists-xpack/tree/xpack-develop/website. As a possible improvement, I was thinking on adding some small images on top of the card title, but currently I don't have these images, I have to further search for something suitable. If someone with a better knowledge of CSS is interested in such a feature and is willing to further improve it, I'd be more than happy to test the result. |
Beta Was this translation helpful? Give feedback.
-
|
Very nice ! I'm quite sure that I'll use it ! Thx. |
Beta Was this translation helpful? Give feedback.
-
|
The current CSSs are in: and the HTML in: If you have suggestions to improve the implementation, please let me know. |
Beta Was this translation helpful? Give feedback.
-
|
Here is another site using such cards in the home page:
|
Beta Was this translation helpful? Give feedback.
-
|
I just tried it, and it is not very visible in dark mode. Do you know what shadow color should be used in dark mode ? |
Beta Was this translation helpful? Give feedback.
-
|
You guys could use ALIASES for this, its what i do:
ALIASES CSS .card {
background: var(--code-background);
border-radius: var(--border-radius-small);
flex: 1;
margin: 0;
}
.card .card-text {
padding-top: 7.5px;
}
.card .card-text, .card-text > p, .card-text a {
font-size: var(--navigation-font-size) !important;
}
.card-text div > a {
display: contents;
line-height: var(--content-line-height);
}
.card .card-text, .card-text > p:last-child {
margin-bottom: 0px;
}
@media only screen and (max-width: 767px) {
.row {
flex-direction: column !important;
}
}
.row {
display: flex;
gap: 25px;
align-items: stretch;
}
.column {
display: flex;
flex: 50%;
box-sizing: border-box;
} |
Beta Was this translation helpful? Give feedback.
-
Dracula themeVersion: 2.2.1 DescriptionDiscover my take on the Dracula-inspired Doxygen theme, featuring a dark mode true to the original, and a personal twist in the form of a purple-themed light mode. I've also incorporated new icons for dark/light modes. The CSS settings have been fine-tuned, drawing from custom.css and updates to doxygen-awesome.css. Note that these are my adaptations and may vary from the original Dracula theme. Changesdoxygen-awesome.csshtml {
/* primary theme color. This will affect the entire websites color scheme: links, arrows, labels, ... */
--primary-color: #bd93f9;
--primary-dark-color: #9270e4;
--primary-light-color: #9270e4;
/* page base colors */
--page-background-color: #ffffff;
--page-foreground-color: #2f4153;
--page-secondary-foreground-color: #6f7e8e;
/* color for all separators on the website: hr, borders, ... */
--separator-color: #bd93f965;
/* border radius for all rounded components. Will affect many components, like dropdowns, memitems, codeblocks, ... */
--border-radius-large: 22px;
--border-radius-small: 9px;
--border-radius-medium: 14px;
/* default spacings. Most components reference these values for spacing, to provide uniform spacing on the page. */
--spacing-small: 8px;
--spacing-medium: 14px;
--spacing-large: 19px;
--top-height: 125px;
...
}
html.dark-mode {
color-scheme: dark;
--primary-color: #bd93f9;
--primary-dark-color: #9270e4;
--primary-light-color: #9270e4;
--primary-lighter-color: #191e21;
--primary-lightest-color: #191a1c;
--page-background-color: #21222c;
--page-foreground-color: #d2dbde;
--page-secondary-foreground-color: #859399;
--separator-color: #3a3246;
--side-nav-background: #282a36;
--side-nav-foreground: #f8f8f2;
--toc-background: #282A36;
--searchbar-background: var(--page-background-color);
...
}doxygen-awesome-darkmode-toggle.jsclass DoxygenAwesomeDarkModeToggle extends HTMLElement {
// SVG icons from https://www.iconfinder.com/
// Link to the author https://www.iconfinder.com/rasmusnielsendk
static lightModeIcon = `<svg height="20.315mm" viewBox="0 0 57.587 57.587" width="20.315mm" xmlns="http://www.w3.org/2000/svg"><title/><circle cx="28.398" cy="28.696" fill="#f5ce42" r="16.948"/></svg>`
static darkModeIcon = `<svg height="20.315mm" viewBox="0 0 57.587 57.587" width="20.315mm" xmlns="http://www.w3.org/2000/svg"><title/><path d="M41.446,32.535A16.647,16.647,0,0,1,25.163,12.361a16.655,16.655,0,1,0,20.1,19.717A16.7,16.7,0,0,1,41.446,32.535Z" fill="#7269af"/></svg>`
...
} |
Beta Was this translation helpful? Give feedback.
-
Tokyo Night StormScreenshot
Live examplehttps://gregorykogan.github.io/result-cpp/ custom.csshtml.dark-mode {
--primary-color: #7aa2f7;
--primary-dark-color: #bb9af7;
--primary-light-color: #b4f9f8;
--page-background-color: #24283b;
--page-foreground-color: #a9b1d6;
--page-secondary-foreground-color: #9aa5ce;
--separator-color: #565f89;
--side-nav-background: #1a1b26;
--code-background: #31364e;
--code-foreground: #73daca;
--tablehead-background: #1a1b26;
--blockquote-background: #414868;
--blockquote-foreground: #73daca;
--warning-color: #e0af68;
--warning-color-dark: #ff9e64;
--warning-color-darker: #f7768e;
--bug-color: #f7768e;
--fragment-background: #24283b;
--fragment-foreground: #a9b1d6;
--fragment-keyword: #bb9af7;
--fragment-keywordtype: #a9b1d6;
--fragment-keywordflow: #bb9af7;
--fragment-token: #9ece6a;
--fragment-comment: #565f89;
--fragment-link: #73daca;
--fragment-preprocessor: #bb9af7;
--fragment-linenumber-color: #414868;
--fragment-linenumber-background: #24283b;
--fragment-linenumber-border: #1a1b26;
}SourceColor palette taken from vscode tokyo night theme |
Beta Was this translation helpful? Give feedback.
-
Minimal Tabs
CSS/** TABS **/
/* button wrapper */
.tabs-overview {
border-bottom: 0px !important;
font-weight: 500 !important;
}
/* button */
.tab-button {
padding: 0 !important;
}
/* button content */
.tab-title {
box-shadow: none !important;
border-radius: var(--border-radius-small) !important;
color: var(--deprecated-color-darker); /*or --page-secondary-foreground-color*/
}
/* button content (not-active) (hover) */
.tab-button:hover:not(.active) .tab-title {
border-radius: var(--border-radius-small) !important;
color: inherit !important;
}
/* button content (active) */
.tab-button.active .tab-title {
box-shadow: none !important;
color: var(--primary-color) !important;
font-weight: 600;
background: var(--page-background-color) !important;
border-radius: var(--border-radius-small) var(--border-radius-small) 0 0 !important;
border: 1px solid var(--separator-color) !important;
border-bottom: 1px solid transparent !important;
}
/* button content underline */
.tab-button.active::after {
display: none !important;
}
/* content */
.tabbed > ul {
border: 1px solid var(--separator-color);
padding: 0 13px !important;
margin-top: -1px !important;
}ALIASESMARKDOWN USAGE |
Beta Was this translation helpful? Give feedback.
-
|
great idea ! |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Doxygen Awesome CSS is designed to be easily customizable by adjusting CSS variables.
In this place you can share your own customized styles with other users. I am really interested in how you optimize this theme to work best for you!
Examples for adjustments that you might want to share:
To share your style, add a comment to this discussion, with the following information:
Please do not post content that changes things other than the CSS-variables provided by Doxygen Awesome! If you miss a configuration option to achieve what you want to do, or you made adjustments to the CSS to fix a bug, please open an issue or a PR.
Beta Was this translation helpful? Give feedback.
All reactions