兼容暗黑模式

src/CHANGELOG.md

@@ -1,7 +1,7 @@
 ### v1.1.4
 
+- 兼容暗黑模式
 - 修复某些情况下导航目录被遮挡的 bug
-- 兼容暗黑模式（50%）
 - 修复按 S 搜藏时无法跳转到备忘(收藏)插件的 bug
 - linux 收手册下新增一个 tmux 快捷键 [ryuzheng提供](https://github.com/ryuzheng/TmuxCheatSheet) [中文原版](https://gist.github.com/ryerh/14b7c24dfd623ef8edc7) [英文原版](https://gist.github.com/MohamedAlaa/2961058)
 

src/assets/index.js

@@ -42,7 +42,7 @@ showList = (text, index, listnum) => {
     utools.setExpendHeight(num > 11 ? 550 : 50 * num);
     $(".select").removeClass('select');
     $(".info:first").addClass('select');
-    $('html').getNiceScroll().resize();
+    // $('html').getNiceScroll().resize();
     // 鼠标锁，方式鼠标抢占选择条
     window.manualVars.mouseLockTime = new Date().getTime();
 }
@@ -72,7 +72,7 @@ manualSubInput = () => {
 // 显示手册
 showManual = path => {
     utools.setExpendHeight(550);
-    $('#manual').getNiceScroll().resize()
+    // $('#manual').getNiceScroll().resize()
     if (/^((ht|f)tps?):\/\//.test(path)) {
         window.open(path);
     } else {
@@ -129,14 +129,14 @@ highlightManual = (selector, text) => {
 }
 
 // 初始化
-scrollInit = () => {
+// scrollInit = () => {
-    $("html").niceScroll({
+//     $("html").niceScroll({
-        enablekeyboard: false
+//         enablekeyboard: false
-    });
+//     });
-    $("#manual").niceScroll({
+//     $("#manual").niceScroll({
-        enablekeyboard: true
+//         enablekeyboard: true
-    });
+//     });
-}
+// }
 
 // 向活动窗口发送文本
 sendText = text => {
@@ -168,7 +168,7 @@ loadList = addnum => {
         var listnum = $(".info").length;
         if ($(window).scrollTop() >= (listnum * 50 - 550)) {
             $("#mainlist").append(window.manualVars.infoRows.slice(listnum, listnum + addnum).join(''));
-            $('html').getNiceScroll().resize();
+            // $('html').getNiceScroll().resize();
         }
     }
 }
@@ -176,15 +176,16 @@ loadList = addnum => {
 adaptDarkMode = () => {
     if (utools.isDarkColors()) {
         !$('#darkmode').length && $('head').append('<link id="darkmode" rel="stylesheet" href="assets/styles/darkmode.css">')
+            && $('#darkprism').attr('href', 'assets/styles/prism-dark.css')
     } else {
-        $('#darkmode').length && $('#darkmode').remove()
+        $('#darkmode').length && $('#darkmode').remove() && $('#darkprism').attr('href', 'assets/styles/prism.css')
     }
 }
 
 // 进入插件
 utools.onPluginEnter(async ({ code, type, payload }) => {
     if (fofoCommon.isRunningAtFirstTime()) fofoCommon.showChangeLog()
-    scrollInit();
+    // scrollInit();
     adaptDarkMode()
     // checkUpdate();
     window.manualVars = {}
@@ -232,10 +233,10 @@ utools.onPluginEnter(async ({ code, type, payload }) => {
         window.readDir(assetDir, (err, files) => {
             if (!err) {
                 files.forEach(file => {
-                    $('head').append(`<link rel="stylesheet" href="${assetDir}/${file}" name="manual">`)
+                    $('title').after(`<link rel="stylesheet" href="${assetDir}/${file}" name="manual">`)
                 }) 
             } else {
-                $('head').append('<link rel="stylesheet" href="assets/styles/manual.css" name="manual">')
+                $('title').after('<link rel="stylesheet" href="assets/styles/manual.css" name="manual">')
             }
         })
         // 读取目录文件
@@ -276,13 +277,13 @@ utools.onPluginEnter(async ({ code, type, payload }) => {
 });
 
 utools.onPluginOut(() => {
-    $("#mainlist").html('').hide();
+    $("#mainlist").empty().hide();
-    $("#options").html('').hide();
+    $("#options").empty().hide();
     $("#manual").hide();
-    $("#manualBody").html('')
+    $("#manualBody").empty()
-    $("#manualNavi").html('')
+    $("#manualNavi").empty()
-    $(".load").html('').hide();
+    $(".load").empty().hide();
-    $("#infopannel").html('').hide();;
+    $("#infopannel").empty().hide();;
     $('link[name="manual"]').remove();
 })
 

src/assets/options.js

@@ -93,12 +93,13 @@ showOptions = async () => {
         $("#devdocs").html('中文手册');
         $('#add').addClass("disabled");
     }
+    $('#options').fadeIn(100)
     // 平滑过渡
-    setTimeout(() => {
+    // setTimeout(() => {
-        $('#options').fadeIn(100).promise().done(() => {
+    //     $('#options').fadeIn(100).promise().done(() => {
-            $('html').getNiceScroll().resize();
+    //         $('html').getNiceScroll().resize();
-        })
+    //     })
-    }, 50);
+    // }, 50);
 }
 
 showCustomize = () => {

src/assets/styles/darkmode.css

@@ -1,8 +1,12 @@
-#options * {
+#options,
+#options *,
+#manual,
+#manualBody {
     background: #303133;
     color: white;
 }
 
+/*设置*/
 #options .keyword {
     background: #505050;
     color: #f1f2f3;
@@ -22,32 +26,109 @@
     border-bottom: 1px solid #696666;
 }
 
+/*列表*/
 #mainlist .info {
     background: #303133;
     color: #f1f2f3;
 }
 
-#manual,
-#manualBody {
-    background: #e6e6e6;
-}
-
 #mainlist .info.select {
     background: #585958;
 }
 
+/*手册*/
 #manual #manualNavi ul {
-    /* background: #585958; */
+    background: #313131;
-    background: #e6e6e6;
     box-shadow: 0 0 10px #000;
 }
 
 #manual #manualNavi ul input {
-    /* background: #585958; */
+    background: #313131;
-    background: #e6e6e6;
+    color: white;
-    /* color: white; */
 }
 
-.nicescroll-cursors {
+#manual h1, #manual h2 {
+    border-bottom: 1px solid #656565;
+}
+
+#manual code, #manual kbd, #manual pre {
+    color: white;
+    background: #3b3b3c;
+}
+
+#manual blockquote {
+    color: #30a06d;
+}
+
+#manual h3 {
+    background: #1e1e1f;
+    border: 1px solid #696969;
+    color: #ffffff;
+}
+
+#manual table tr {
+    background-color: #383838;
+    border-top: 1px solid #c6cbd1;
+}
+
+#manual table tr:nth-child(2n) {
+    background-color: #4a4a4a;
+}
+
+#manual table td, #manual table th {
+    border: 1px solid #464646;
+}
+
+#manual h3 code {
+    color: #98c7de;
+}
+
+#manual em {
+    color: #a0a0a0;
+}
+
+#manual strong {
+    color: #92c3f3;
+}
+
+#manual pre code {
+    color: #ffffff;
+}
+
+/*jQuery fix*/
+.syntaxhighlighter {
+    background: #3a3a3a;
+}
+
+pre .tag, pre .tag .title, pre .rules .property, pre .django .tag .keyword, pre .keyword {
+    color: #03A9F4;
+}
+
+#manual code a {
+    color: #94d3ff;
+}
+
+div.warning {
+    background: #444444;
+}
+
+/*滚动条*/
+/* .nicescroll-cursors {
     border: 1px solid rgba(255, 255, 255, 0.15) !important;
+} */
+
+::-webkit-scrollbar {
+    width: 6px;
+    height: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: rgb(153, 153, 153);
+    height: 30px;
+    border-radius: 7px;
+    border: none;
+}
+
+::-webkit-scrollbar-track-piece {
+    background-color: rgb(87, 87, 87);
 }

src/assets/styles/prism-dark.css

@@ -0,0 +1,125 @@
+/* PrismJS 1.20.0
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript */
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #ccc;
+	background: none;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #2d2d2d;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #999;
+}
+
+.token.punctuation {
+	color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+	color: #e2777a;
+}
+
+.token.function-name {
+	color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+	color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+	color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+	color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+	color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+	color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.token.inserted {
+	color: green;
+}
+

src/assets/styles/style.css

@@ -110,6 +110,6 @@ body {
 }
 
 
-::-webkit-scrollbar {
+/* ::-webkit-scrollbar {
     height: 3px;
-}
+} */

src/index.html

@@ -7,12 +7,12 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="assets/styles/style.css">
     <link rel="stylesheet" href="assets/styles/options.css">
-    <link rel="stylesheet" href="assets/styles/prism.css">
+    <link rel="stylesheet" href="assets/styles/prism.css" id="darkprism">
     <link rel="stylesheet" href="assets/styles/jquery.autoMenu.css">
     <script src="assets/plugins/jquery-3.3.1.min.js"></script>
     <script src="assets/plugins/jquery.autoMenu.js"></script>
     <script src="assets/plugins/hlsearch.js"></script>
-    <script src="assets/plugins/jquery.nicescroll.min.js"></script>
+    <!-- <script src="assets/plugins/jquery.nicescroll.min.js"></script> -->
     <script src="assets/plugins/prism.js"></script>
     <script src="assets/plugins/sweetalert2.all.min.js"></script>
     <title>Manuals</title>