Open
Description
i like to read documentation in a dark-themed version.
as this fits more to my overall setting.
i think there are others too ;-)
solutions
DIY
add a button that switches the themes - example for this is in the docsify docu:
https://github.com/docsifyjs/docsify/blob/release-v4/docs/themes.md#click-to-preview
add to the top of index.html
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css" disabled=""/>this prepares the dark-mode theme - and disables the stylesheet on load. (browser feature)
then add this to the end of index.html
<div class="toggleTheme">
<a data-theme="vue"></a>
<a data-theme="dark"></a>
</div>
<style>
:root {
/* https://gitlab.com/w3teal/docsify-dark-switcher/-/blob/main/docsify-dark-switcher.js?ref_type=heads#L50 */
--dark-moon-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M9.598 1.591a.749.749 0 0 1 .785-.175 7.001 7.001 0 1 1-8.967 8.967.75.75 0 0 1 .961-.96 5.5 5.5 0 0 0 7.046-7.046.75.75 0 0 1 .175-.786m1.616 1.945a7 7 0 0 1-7.678 7.678 5.499 5.499 0 1 0 7.678-7.678'/%3E%3C/svg%3E");
--dark-sun-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M8 12a4 4 0 1 1 0-8a4 4 0 0 1 0 8m0-1.5a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5m5.657-8.157a.75.75 0 0 1 0 1.061l-1.061 1.06a.749.749 0 0 1-1.275-.326a.749.749 0 0 1 .215-.734l1.06-1.06a.75.75 0 0 1 1.06 0Zm-9.193 9.193a.75.75 0 0 1 0 1.06l-1.06 1.061a.75.75 0 1 1-1.061-1.06l1.06-1.061a.75.75 0 0 1 1.061 0M8 0a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0V.75A.75.75 0 0 1 8 0M3 8a.75.75 0 0 1-.75.75H.75a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 3 8m13 0a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 16 8m-8 5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 13m3.536-1.464a.75.75 0 0 1 1.06 0l1.061 1.06a.75.75 0 0 1-1.06 1.061l-1.061-1.06a.75.75 0 0 1 0-1.061M2.343 2.343a.75.75 0 0 1 1.061 0l1.06 1.061a.751.751 0 0 1-.018 1.042a.751.751 0 0 1-1.042.018l-1.06-1.06a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E");
}
.toggleTheme {
position: fixed;
right: 2rem;
top: 4rem;
}
.toggleTheme a {
display: inline-block;
border: none;
cursor: pointer;
width: 2em;
height: 2em;
mask-size: 2em 2em;
}
a[data-theme="vue"]{
mask-image: var(--dark-sun-icon);
background: yellow;
}
a[data-theme="dark"]{
mask-image: var(--dark-moon-icon);
background: rgb(43, 0, 255);
}
</style>
<script>
var preview = Docsify.dom.find(".toggleTheme");
var themes = Docsify.dom.findAll('[rel="stylesheet"]');
function activateTheme(title) {
themes.forEach(function (theme) {
theme.disabled = theme.title !== title;
});
}
preview.onclick = function (e) {
var title = e.target.getAttribute("data-theme");
activateTheme(title);
};
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
// activate dark mode
activateTheme("dark");
}
</script>code is untested - just copied together from the examples..
use Plugin
Metadata
Metadata
Assignees
Labels
No labels