zhangyuheng/MrDoc
1
0
Fork 0
forked from mirror/MrDoc
Code Pull Requests Activity

新增文档页面日间/夜间模式切换功能

Browse Source
This commit is contained in:
yangjian 2023-02-04 23:23:25 +08:00
parent 84f5a4053c
commit 9faf4309a3
5 changed files with 56 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
static/darkmode-js/darkmode-js.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
static/mrdoc/mrdoc-docs.css
View File

@ -1,3 +1,7 @@
/* 文档夜间模式 */
html.theme-dark{
filter: invert(1) hue-rotate(180deg);
}
/*一级无序li显示实心圆点*/
.doc-content ul li{
list-style:disc;

43
static/mrdoc/mrdoc-docs.js
View File

@ -146,6 +146,49 @@ function toggleSidebar(){
return false;
}
const darkmode = new Darkmode({
autoMatchOsTheme:false,
});
// 页面初始化夜间模式
initTheme = function(){
themeDarkStatus = window.localStorage.getItem("theme-dark")
// 如果本地存储为夜间模式
if(themeDarkStatus == '1' && $("html").hasClass("theme-dark") == false){
$("html").toggleClass("theme-dark")
$(".theme-switch i").removeClass("fa-moon-o")
$(".theme-switch i").addClass("fa-sun-o")
}
console.log(darkmode.isActivated())
if(darkmode.isActivated()){
darkmode.toggle()
}
}
initTheme();
// 切换日/夜间模式
$(function(){
$(".theme-switch").click(toggleDark);
});
function toggleDark(){
if($("html").hasClass("theme-dark")){
window.localStorage.removeItem("theme-dark")
$(".theme-switch i").removeClass("fa-sun-o")
$(".theme-switch i").addClass("fa-moon-o")
$("a.theme-switch").attr("title","切换至夜间模式")
}else{
window.localStorage.setItem("theme-dark","1")
$(".theme-switch i").removeClass("fa-moon-o")
$(".theme-switch i").addClass("fa-sun-o")
$("a.theme-switch").attr("title","切换至日间模式")
}
$("html").toggleClass("theme-dark");
console.log(darkmode.isActivated())
if(darkmode.isActivated()){
darkmode.toggle();
}
}
/*
页面初始化字体设置
*/

4
template/app_doc/docs_base.html
View File

@ -205,6 +205,9 @@
<a class="btn pull-left font-switch" href="javascript:void(0);" title="{% trans '切换字体类型' %}">
<i class="fa fa-text-height"></i>
</a>
<a class="btn pull-left theme-switch" href="javascript:void(0);" title="{% trans '切换至夜间模式' %}">
<i class="fa fa-moon-o"></i>
</a>
<!-- 顶部工具栏 -->
{% block head_toolbar %}
{% endblock %}
@ -301,6 +304,7 @@
<script src="{% static 'layui/layui.js' %}?version={{mrdoc_version}}"></script>
<script src="{% static 'viewerjs/viewer.min.js' %}?version={{mrdoc_version}}"></script>
<script src="{% static 'qrcodejs/qrcode.min.js' %}?version={{mrdoc_version}}"></script>
<script src="{% static 'darkmode-js/darkmode-js.min.js' %}?version={{mrdoc_version}}"></script>
<script src="{% static 'mrdoc/mrdoc-docs.js' %}?version={{mrdoc_version}}"></script>
<script src="{% static 'iconFont/iconfont.js' %}?version={{mrdoc_version}}"></script>
<script src="{% static 'editor.md/lib/purify.min.js' %}?version={{mrdoc_version}}"></script>

4
template/app_doc/share/share_doc.html
View File

@ -75,6 +75,9 @@
<a class="btn pull-left font-switch" href="javascript:void(0);" title="{% trans '切换字体类型' %}">
<i class="fa fa-text-height"></i>
</a>
<a class="btn pull-left theme-switch" href="javascript:void(0);" title="{% trans '切换至夜间模式' %}">
<i class="fa fa-moon-o"></i>
</a>
<!-- 顶部工具栏 -->
{% block head_toolbar %}
<!-- 文档目录 -->
@ -176,6 +179,7 @@
<script src="{% static 'layui/layui.js' %}?version={{mrdoc_version}}"></script>
<script src="{% static 'viewerjs/viewer.min.js' %}?version={{mrdoc_version}}"></script>
<script src="{% static 'qrcodejs/qrcode.min.js' %}?version={{mrdoc_version}}"></script>
<script src="{% static 'darkmode-js/darkmode-js.min.js' %}?version={{mrdoc_version}}"></script>
<script src="{% static 'mrdoc/mrdoc-docs.js' %}?version={{mrdoc_version}}"></script>
<script src="{% static 'iconFont/iconfont.js' %}?version={{mrdoc_version}}"></script>
<script src="{% static 'editor.md/lib/purify.min.js' %}?version={{mrdoc_version}}"></script>