geckon01/PhpSpreadsheet
1
0
Fork 0
mirror of https://github.com/PHPOffice/PhpSpreadsheet.git synced 2026-10-08 04:46:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

More Documentation Tweaks

Browse Source 
Special handling in javascript and css for any image whose `alt` value starts with `Logo`, rather than targeting one specific value.

Remove 2 no-longer relevant statements from `extra.css`.

Add css member for `mkdocs` theme.

Add link to PhpSpreadsheet site to the bottom line of each page for `readthedocs` and `mkdocs` themes. In theory, these links should already exist, and they do locally, but not, for some reason, when run on readthedocs.io. This link is different from the `Edit on Github` link at the top, which is a kind of interesting feature.

Add a bookmarklet on the main page for toggling images to dark mode, which would probably be the preference for users employing dark mode. Images are usually left unchanged in dark mode, but almost all our images are screenshots, and dark mode might be appropriate for them.
This commit is contained in:
oleibman
2026-09-19 19:57:45 -07:00
parent 066e4da72c
commit d13f34b84e
18 changed files with 95 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/extra/darkimages.js
+24
View File
@@ -0,0 +1,24 @@
/* the following 2 attempts didn't always work
{
const images = document.querySelectorAll('img');
images.forEach(img => {img.style.filter = img.style.filter ? '' : 'invert(100%) hue-rotate(180deg)';});
}
{
const images = document.querySelectorAll('img');
images.forEach(img => {img.style.filter = img.style.filter ? '' : 'hue-rotate(180deg)';});
}
*/
/* this appears to work all the time */
{
const images = document.querySelectorAll('img');
images.forEach(img => {
const temp = img.style.filter;
if (temp == '' || temp == 'none') {
img.style.filter = 'invert(1) hue-rotate(180deg)';
} else {
img.style.filter = 'none';
}
});
}
docs/extra/darkmode.css
+3 -3
View File
@@ -6,12 +6,12 @@ Retrieved 2026-08-24, License - CC BY-SA 4.0
@media (prefers-color-scheme: dark) {
html {
filter: invert(100%);
filter: invert(100%) hue-rotate(180deg);
}
/* double apply invert filter to cancel out effect on images */
img:not([alt="Logo"]) {
filter: invert(100%);
img:not([alt^="Logo"]) {
filter: invert(100%) hue-rotate(180deg);
}
/* Dark mode (slate scheme) alternating rows */
docs/extra/lightmode.js → docs/extra/darkmodetoggle.js
View File
docs/extra/extra.css
-3
View File
@@ -22,6 +22,3 @@ table.features-cross-reference {
.wehavedarktoggle {display: block;}
.wedonthavedarktoggle {display: none;}
[data-bs-theme="dark"] img[alt="Logo"] {filter: invert(100%)}
[data-md-color-scheme="slate"] img[alt="Logo"] {filter: invert(100%)}
docs/extra/invertlight.js → docs/extra/lightmodetoggle.js
+5 -1
View File
@@ -1,7 +1,11 @@
(function(){
document.documentElement.style.filter = document.documentElement.style.filter ? '' : 'invert(100%) hue-rotate(180deg)';
const images = document.querySelectorAll('img');
images.forEach(img => { if (img.alt != 'Logo') img.style.filter = 'invert(100%) hue-rotate(180deg)';});
images.forEach(img => {
if (!img.alt.startsWith('Logo')) {
img.style.filter = img.style.filter ? '' : 'invert(100%) hue-rotate(180deg)';
}
});
if (document.body.getAttribute('data-md-color-scheme') == 'slate') {
document.body.setAttribute('data-md-color-scheme', 'default');
} else {
docs/extra/mkdocs.css
+1
View File
@@ -0,0 +1 @@
[data-bs-theme="dark"] [alt^="Logo"] {filter: invert(100%) hue-rotate(180deg);}
docs/extra/sitelink.js
+5
View File
@@ -0,0 +1,5 @@
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll("li.wy-breadcrumbs-aside").forEach(function(obj) {
obj.innerHTML = "<a href='https://github.com/PHPOffice/phpspreadsheet'>Visit PhpSpreadsheet</a>" + obj.innerHTML;
});
});
docs/extra/sitelink.mkdocs2.js
+10
View File
@@ -0,0 +1,10 @@
document.addEventListener("DOMContentLoaded", function() {
var done = false;
document.querySelectorAll("#toc-collapse ul").forEach(function(obj) {
const x = obj.innerHTML;
if (!done) {
obj.innerHTML = "<li class='nav-item'><a class='nav-link' href='https://github.com/PHPOffice/phpspreadsheet'>Visit PhpSpreadsheet</a></li>" + x;
done = true;
}
});
});
docs/extra/sitelink2.js
+5
View File
@@ -0,0 +1,5 @@
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll("footer").forEach(function(obj) {
obj.innerHTML = obj.innerHTML.replace("uilt with", "uilt for <a href='https://github.com/PHPOffice/PhpSpreadsheet'>PhpSpreadsheet</a> with");
});
});
docs/extra/tablestripes.css
+1
View File
@@ -6,3 +6,4 @@
[data-md-color-scheme="slate"] table tbody tr:nth-child(2n) {
background-color: #404040;
}
[data-md-color-scheme="slate"] [alt^="Logo"] {filter: invert(100%) hue-rotate(180deg);}
docs/index.md
+30 -7
View File
@@ -168,8 +168,10 @@ may defer to your system's settings.
This particular theme does not come with a toggle to switch back and forth.
If you want to switch and it is inconvenient for you to change the browser setting:
<br><br>
<h3>Toggles If Your Browser Setting Is Dark Mode</h3>
If your setting is dark mode, and your browser supports ES11, this
<a href="javascript:(function()%7BArray.from(document.styleSheets).forEach((sheet)%20%3D%3E%20%7Bif%20(sheet.href%3F.includes('darkmode.css')%20%3F%3F%20false)%20%7Bsheet.disabled%20%3D%20!sheet.disabled%3B%7D%7D)%7D)()">Dark/Light Toggle</a>
<a href="javascript:(function()%7BArray.from(document.styleSheets).forEach((sheet)%20%3D%3E%20%7Bif%20(sheet.href%3F.includes('darkmode.css')%20%3F%3F%20false)%20%7Bsheet.disabled%20%3D%20!sheet.disabled%3B%7D%7D)%7D)()">DarkModeToggle</a>
can be used as a bookmarklet. It executes:
```javascript
@@ -180,28 +182,49 @@ Array.from(document.styleSheets).forEach((sheet) => {
});
```
<h3>Toggles If Your Browser Setting Is Light Mode</h3>
If your setting is light mode, and your browser supports ES6, this
<a href="javascript:(function()%7B(function()%7Bdocument.documentElement.style.filter%20%3D%20document.documentElement.style.filter%20%3F%20''%20%3A%20'invert(100%25)%20hue-rotate(180deg)'%3Bconst%20images%20%3D%20document.querySelectorAll('img')%3Bimages.forEach(img%20%3D%3E%20%7Bif%20(img.alt%20!%3D%20'Logo')%20%7Bimg.style.filter%20%3D%20img.style.filter%20%3F%20''%20%3A%20'invert(100%25)%20hue-rotate(180deg)'%3B%7D%7D)%3Bif%20(document.body.getAttribute('data-md-color-scheme')%20%3D%3D%20'slate')%20%7Bdocument.body.setAttribute('data-md-color-scheme'%2C%20'default')%3B%7D%20else%20%7Bdocument.body.setAttribute('data-md-color-scheme'%2C%20'slate')%3B%7D%7D)()%7D)()">Emulate Dark Mode</a>
bookmarklet can be used to emulate dark mode, but just reload the page to restore light mode:
<a href="javascript:(function()%7B(function()%7B%0A%20%20%20%20document.documentElement.style.filter%20%3D%20document.documentElement.style.filter%20%3F%20''%20%3A%20'invert(100%25)%20hue-rotate(180deg)'%3B%0A%20%20%20%20const%20images%20%3D%20document.querySelectorAll('img')%3B%0A%20%20%20%20images.forEach(img%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20if%20(img.alt%20!%3D%20'Logo%20on%20White%20Background')%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20img.style.filter%20%3D%20img.style.filter%20%3F%20''%20%3A%20'invert(100%25)%20hue-rotate(180deg)'%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20if%20(document.body.getAttribute('data-md-color-scheme')%20%3D%3D%20'slate')%20%7B%0A%20%20%20%20%20%20%20%20document.body.setAttribute('data-md-color-scheme'%2C%20'default')%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20document.body.setAttribute('data-md-color-scheme'%2C%20'slate')%3B%0A%20%20%20%20%7D%0A%7D)()%3B%7D)()%3B">LightModeToggle</a>
bookmarklet (changed 2026-09-18) can be used to toggle dark/light mode (or just reload the page to restore light mode):
```javascript
(function(){
document.documentElement.style.filter = document.documentElement.style.filter ? '' : 'invert(100%) hue-rotate(180deg)';
const images = document.querySelectorAll('img');
images.forEach(img => {
if (img.alt != 'Logo') {
if (!img.alt.startsWith('Logo')) {
img.style.filter = img.style.filter ? '' : 'invert(100%) hue-rotate(180deg)';
}
});
}
});
if (document.body.getAttribute('data-md-color-scheme') == 'slate') {
document.body.setAttribute('data-md-color-scheme', 'default');
} else {
document.body.setAttribute('data-md-color-scheme', 'slate');
}
})();
```
</div>
<div>
<h3>Displaying Images in Dark Mode</h3>
Images are not normally adjusted for Dark/Light mode.
If you also want images to display in dark mode, try <a href="javascript:(function()%7B%7Bconst%20images%20%3D%20document.querySelectorAll('img')%3Bimages.forEach(img%20%3D%3E%20%7Bconst%20temp%20%3D%20img.style.filter%3Bif%20(temp%20%3D%3D%20''%20%7C%7C%20temp%20%3D%3D%20'none')%20%7Bimg.style.filter%20%3D%20'invert(1)%20hue-rotate(180deg)'%3B%7D%20else%20%7Bimg.style.filter%20%3D%20'none'%3B%7D%7D)%3B%7D%7D)()">DarkImages3</a> as a bookmarklet. (You may have to execute it twice the first time on a page.) It executes:
```javascript
{
const images = document.querySelectorAll('img');
images.forEach(img => {
const temp = img.style.filter;
if (temp == '' || temp == 'none') {
img.style.filter = 'invert(1) hue-rotate(180deg)';
} else {
img.style.filter = 'none';
}
});
}
```
</div>
## Credits
docs/topics/reading-and-writing-to-file.md
+1 -1
View File
@@ -832,7 +832,7 @@ images root. For example, instead of:
You might want to see:
```html
<img src="http://www.domain.com/images/logo.jpg">
<img src="http://www.example.com/images/logo.jpg">
```
You can use the following code to achieve this result:
mkdocs.material.yml
+1
View File
@@ -35,6 +35,7 @@ extra_css:
# - extra/pygments.emacs.css
- extra/pygments.default.light.css
- extra/pygments.lightbulb.dark.css
- extra/zensical.topbar.css
extra_javascript:
- extra/extrajs.js
markdown_extensions:
mkdocs.materialx.yml
+1
View File
@@ -36,6 +36,7 @@ extra_css:
# - extra/pygments.emacs.css
- extra/pygments.default.light.css
- extra/pygments.lightbulb.dark.css
- extra/zensical.topbar.css
extra_javascript:
- extra/extrajs.js
markdown_extensions:
mkdocs.mkdocs.yml
+4 -2
View File
@@ -1,6 +1,6 @@
site_name: PhpSpreadsheet Documentation
#site_url: https://github.com/PHPOffice/phpspreadsheet
repo_url: https://github.com/PHPOffice/phpspreadsheet
site_url: https://github.com/PHPOffice/PhpSpreadsheet
repo_url: https://github.com/PHPOffice/PhpSpreadsheet
#repo_name: PhpSpreadsheet
#edit_uri: edit/master/docs/
@@ -11,9 +11,11 @@ theme:
extra_css:
- extra/extra.css
- extra/copyclipboard.css
- extra/mkdocs.css
extra_javascript:
- extra/extrajs.js
- extra/copyclipboard.js
- extra/sitelink2.js
# Mkdocs theme does not honor green and red color for ✔ and ✖.
# I am at a loss to explain why, or even how; no other theme has this problem.
# These are used on features-cross-reference page.
mkdocs.readthedocs.yml
+1
View File
@@ -14,5 +14,6 @@ extra_css:
extra_javascript:
- extra/extrajs.js
- extra/copyclipboard.js
- extra/sitelink2.js
markdown_extensions:
- md_in_html
mkdocs.yml
+2 -1
View File
@@ -1,5 +1,5 @@
site_name: PhpSpreadsheet Documentation
#site_url: https://github.com/PHPOffice/phpspreadsheet
site_url: https://github.com/PHPOffice/PhpSpreadsheet/
repo_url: https://github.com/PHPOffice/phpspreadsheet
#repo_name: PhpSpreadsheet
#edit_uri: edit/master/docs/
@@ -14,5 +14,6 @@ extra_css:
extra_javascript:
- extra/extrajs.js
- extra/copyclipboard.js
- extra/sitelink2.js
markdown_extensions:
- md_in_html
properdocs.yml
+1
View File
@@ -14,5 +14,6 @@ extra_css:
extra_javascript:
- extra/extrajs.js
- extra/copyclipboard.js
- extra/sitelink2.js
markdown_extensions:
- md_in_html