ClearML/clearml-docs
1
0
Fork 0
mirror of https://github.com/clearml/clearml-docs synced 2025-06-26 18:17:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

dark/light mode for logo

Browse Source
This commit is contained in:
revital 2025-03-02 13:42:28 +02:00
parent 1d4c890320
commit 06542c39c3
2 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/webapp/webapp_reports.md
View File

@ -429,7 +429,11 @@ image enclosed in parentheses:
The rendered output should look like this:
![Logo](https://raw.githubusercontent.com/clearml/clearml/master/docs/clearml-logo.svg)
<img class="light-mode-only" src="https://raw.githubusercontent.com/clearml/clearml/master/docs/clearml-logo.svg" alt="Logo"/>
<img class="dark-mode-only" src="https://raw.githubusercontent.com/clearml/clearml/master/docs/clearml-logo-dark.svg" alt="Logo"/>
<br/>
To add a title to the image, which you can see in a tooltip when hovering over the image, add the title after the image's
link:
@ -439,7 +443,9 @@ link:
```
The rendered output should look like this:
<img src="https://raw.githubusercontent.com/clearml/clearml/master/docs/clearml-logo.svg" alt="Logo with Title" title="ClearML logo"/>
<img class="light-mode-only" src="https://raw.githubusercontent.com/clearml/clearml/master/docs/clearml-logo.svg" title="ClearML logo"/>
<img class="dark-mode-only" src="https://raw.githubusercontent.com/clearml/clearml/master/docs/clearml-logo-dark.svg" title="ClearML logo"/>
Hover over the image to see its title.

9
src/css/custom.css
View File

@ -620,6 +620,15 @@ html[data-theme=dark] .medium-zoom-image.medium-zoom-image--opened {border-radiu
[data-theme='dark'] img[src$='#light-mode-only'] {
display: none;
}
[data-theme='dark'] .light-mode-only {
display: none;
}
[data-theme='light'] .dark-mode-only {
display: none;
}
/* table */
.markdown table {
border-spacing: 0;