diff --git a/index.html b/index.html index 3cbdd20..b8e23aa 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,6 @@
🔖
{{ $t('nav.quickstart') }}
 -
{{ $t('nav.doc') }}
GitHub
Vue.js
 @@ -460,12 +459,14 @@ - + + + diff --git a/js/style.js b/js/style.js index 9599069..f97becd 100644 --- a/js/style.js +++ b/js/style.js @@ -6,15 +6,32 @@ // 采用 highlight.js 库 Vue.use(hljs.vuePlugin); +// 暗色模式 + +const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)"); + +var updateDarkMode = function(e) { + var editor = ace.edit("manualfile"); + if (e.matches) { + // dark mode + editor.setTheme("ace/theme/tomorrow_night"); + } else { + // light mode + editor.setTheme("ace/theme/textmate"); + } +} + +darkModePreference.addEventListener("change", e => updateDarkMode(e)); + // 删除线样式 Vue.directive('soutline',function(el,binding){ if(binding.value){ // el.style['text-decoration'] = 'none'; - el.style['color'] = '#666'; + el.style['color'] = '#777'; el.style['opacity'] = '1.0'; } else { // el.style['text-decoration'] = 'line-through'; - el.style['color'] = '#999'; + el.style['color'] = '#777'; el.style['opacity'] = '0.5'; } }); @@ -53,7 +70,7 @@ var warnCode = function (qselector) { } var blurCode = function (qselector) { - highlightCode(qselector,"transparent"); + highlightCode(qselector,"light-dark(white, rgb(30,30,30))"); } // 设置分割栏的高度 @@ -99,7 +116,7 @@ var gomanual = function(){ }) langTools=ace.require("ace/ext/language_tools"); langTools.setCompleters([customCompleter]); - editor.setTheme("ace/theme/textmate"); + updateDarkMode(darkModePreference); editor.session.setMode("ace/mode/latex"); editor.session.setValue(app.file); editor.session.setUseWrapMode(true); diff --git a/lib/theme-tomorrow_night.min.js b/lib/theme-tomorrow_night.min.js new file mode 100644 index 0000000..89d6a63 --- /dev/null +++ b/lib/theme-tomorrow_night.min.js @@ -0,0 +1,8 @@ +ace.define("ace/theme/tomorrow_night-css",["require","exports","module"],function(e,t,n){n.exports=".ace-tomorrow-night .ace_gutter {\n background: #25282c;\n color: #C5C8C6\n}\n\n.ace-tomorrow-night .ace_print-margin {\n width: 1px;\n background: #25282c\n}\n\n.ace-tomorrow-night {\n background-color: #1D1F21;\n color: #C5C8C6\n}\n\n.ace-tomorrow-night .ace_cursor {\n color: #AEAFAD\n}\n\n.ace-tomorrow-night .ace_marker-layer .ace_selection {\n background: #373B41\n}\n\n.ace-tomorrow-night.ace_multiselect .ace_selection.ace_start {\n box-shadow: 0 0 3px 0px #1D1F21;\n}\n\n.ace-tomorrow-night .ace_marker-layer .ace_step {\n background: rgb(102, 82, 0)\n}\n\n.ace-tomorrow-night .ace_marker-layer .ace_bracket {\n margin: -1px 0 0 -1px;\n border: 1px solid #4B4E55\n}\n\n.ace-tomorrow-night .ace_marker-layer .ace_active-line {\n background: #282A2E\n}\n\n.ace-tomorrow-night .ace_gutter-active-line {\n background-color: #282A2E\n}\n\n.ace-tomorrow-night .ace_marker-layer .ace_selected-word {\n border: 1px solid #373B41\n}\n\n.ace-tomorrow-night .ace_invisible {\n color: #4B4E55\n}\n\n.ace-tomorrow-night .ace_keyword,\n.ace-tomorrow-night .ace_meta,\n.ace-tomorrow-night .ace_storage,\n.ace-tomorrow-night .ace_storage.ace_type,\n.ace-tomorrow-night .ace_support.ace_type {\n color: #B294BB\n}\n\n.ace-tomorrow-night .ace_keyword.ace_operator {\n color: #8ABEB7\n}\n\n.ace-tomorrow-night .ace_constant.ace_character,\n.ace-tomorrow-night .ace_constant.ace_language,\n.ace-tomorrow-night .ace_constant.ace_numeric,\n.ace-tomorrow-night .ace_keyword.ace_other.ace_unit,\n.ace-tomorrow-night .ace_support.ace_constant,\n.ace-tomorrow-night .ace_variable.ace_parameter {\n color: #DE935F\n}\n\n.ace-tomorrow-night .ace_constant.ace_other {\n color: #CED1CF\n}\n\n.ace-tomorrow-night .ace_invalid {\n color: #CED2CF;\n background-color: #DF5F5F\n}\n\n.ace-tomorrow-night .ace_invalid.ace_deprecated {\n color: #CED2CF;\n background-color: #B798BF\n}\n\n.ace-tomorrow-night .ace_fold {\n background-color: #81A2BE;\n border-color: #C5C8C6\n}\n\n.ace-tomorrow-night .ace_entity.ace_name.ace_function,\n.ace-tomorrow-night .ace_support.ace_function,\n.ace-tomorrow-night .ace_variable {\n color: #81A2BE\n}\n\n.ace-tomorrow-night .ace_support.ace_class,\n.ace-tomorrow-night .ace_support.ace_type {\n color: #F0C674\n}\n\n.ace-tomorrow-night .ace_heading,\n.ace-tomorrow-night .ace_markup.ace_heading,\n.ace-tomorrow-night .ace_string {\n color: #B5BD68\n}\n\n.ace-tomorrow-night .ace_entity.ace_name.ace_tag,\n.ace-tomorrow-night .ace_entity.ace_other.ace_attribute-name,\n.ace-tomorrow-night .ace_meta.ace_tag,\n.ace-tomorrow-night .ace_string.ace_regexp,\n.ace-tomorrow-night .ace_variable {\n color: #CC6666\n}\n\n.ace-tomorrow-night .ace_comment {\n color: #969896\n}\n\n.ace-tomorrow-night .ace_indent-guide {\n background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYHB3d/8PAAOIAdULw8qMAAAAAElFTkSuQmCC) right repeat-y\n}\n\n.ace-tomorrow-night .ace_indent-guide-active {\n background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQIW2PQ1dX9zzBz5sz/ABCcBFFentLlAAAAAElFTkSuQmCC) right repeat-y;\n}\n"}),ace.define("ace/theme/tomorrow_night",["require","exports","module","ace/theme/tomorrow_night-css","ace/lib/dom"],function(e,t,n){t.isDark=!0,t.cssClass="ace-tomorrow-night",t.cssText=e("./tomorrow_night-css");var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass,!1)}); (function() { + ace.require(["ace/theme/tomorrow_night"], function(m) { + if (typeof module == "object" && typeof exports == "object" && module) { + module.exports = m; + } + }); + })(); + \ No newline at end of file diff --git a/lib/vs2015.min.css b/lib/vs2015.min.css new file mode 100644 index 0000000..ff01047 --- /dev/null +++ b/lib/vs2015.min.css @@ -0,0 +1 @@ +pre code.hljs{display:block;overflow-x:auto;padding:.5em}code.hljs{padding:3px 5px}.hljs{background:#1e1e1e;color:#dcdcdc}.hljs-keyword,.hljs-literal,.hljs-name,.hljs-symbol{color:#569cd6}.hljs-link{color:#569cd6;text-decoration:underline}.hljs-built_in,.hljs-type{color:#4ec9b0}.hljs-class,.hljs-number{color:#b8d7a3}.hljs-meta .hljs-string,.hljs-string{color:#d69d85}.hljs-regexp,.hljs-template-tag{color:#9a5334}.hljs-formula,.hljs-function,.hljs-params,.hljs-subst,.hljs-title{color:#dcdcdc}.hljs-comment,.hljs-quote{color:#57a64a;font-style:italic}.hljs-doctag{color:#608b4e}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-tag{color:#9b9b9b}.hljs-template-variable,.hljs-variable{color:#bd63c5}.hljs-attr,.hljs-attribute{color:#9cdcfe}.hljs-section{color:gold}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-bullet,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo,.hljs-selector-tag{color:#d7ba7d}.hljs-addition{background-color:#144212;display:inline-block;width:100%}.hljs-deletion{background-color:#600;display:inline-block;width:100%} \ No newline at end of file diff --git a/main.css b/main.css index c19f6b4..67cc381 100644 --- a/main.css +++ b/main.css @@ -1,3 +1,12 @@ +:root { + color-scheme: light dark; +} + +body { + background-color: Canvas; + color: CanvasText; +} + button, summary{ outline: none; @@ -5,12 +14,12 @@ summary{ } a{ - color: gray; + color: light-dark(gray, lightgray); text-decoration: none; } .nav{ - background:whitesmoke; + background:light-dark(whitesmoke, rgb(71, 71, 71)); padding: 5px 10px; margin-bottom: 10px; overflow-y: hidden; @@ -85,7 +94,7 @@ a{ margin: 0 2em; max-width: 50em; font-size: smaller; - color: gray; + color: light-dark(gray, lightgray); } #about #copyright-hint { @@ -114,8 +123,8 @@ a{ } .texCode,#texAllCode{ - border: 2px solid transparent; - background-color: white; + border: 2px solid light-dark(white, rgb(30,30,30)); + /* background-color: Canvas; */ } #code { @@ -168,6 +177,8 @@ textarea{ margin-bottom: 7px; border-radius: 0px 0px 10px 10px; border: 1.5px solid green; + background-color: white; + color: black; } .container{ @@ -201,11 +212,11 @@ footer{ #addtooltip button { width: 100px; text-align: left; - background-color: white; - border: 1px solid rgb(68, 68, 148); + background-color: Canvas; + border: 1px solid light-dark(rgb(68, 68, 148), skyblue); border-radius: 0px; transition: ease-in 0.2s; - color: rgb(68, 68, 148); + color: light-dark(rgb(68, 68, 148), skyblue); } #addbuttons button { @@ -268,7 +279,7 @@ footer{ details { margin: 0px 2px 10px 0px; padding: 10px; - background: rgb(250, 250, 250); + background: light-dark(whitesmoke, rgb(52, 52, 52)); box-shadow: 1px 1px 1px 1px rgba(129, 129, 129, 0.4); border-radius: 10px; } @@ -276,7 +287,7 @@ details { summary { margin: 5px; font-weight: 600; - color: gray; + color: light-dark(gray, lightgray); } #axis{ @@ -312,13 +323,13 @@ summary { } #series .upBut { - background-color:rgb(255, 95, 95); + background-color: light-dark(rgb(255, 95, 95), rgb(157, 58, 58)); color: white; - border: 1px solid red; + border: 1px solid light-dark(red, darkred); } #series .upBut:hover { - background-color: rgb(255, 143, 143); + background-color: light-dark(rgb(255, 143, 143), rgb(199, 74, 74)); } #series .deleteBut { @@ -358,7 +369,7 @@ summary { .seriesitem .type{ margin: 3px 0px 5px 0px; - color: #666; + color: light-dark(#666, white); } .fileChooser { @@ -389,8 +400,8 @@ summary { height: 20px; top: 0; content: " "; - background-color: #fff; - color: #fff; + background-color: Canvas; + color: white; display: inline-block; visibility: visible; border: 1px solid grey; @@ -417,7 +428,7 @@ summary { #series .ptd input[type=checkbox]:checked::after { background-color: #ca710b; - border: 1px solid red; + border: 1px solid light-dark(red, darkred); content: "+"; font-size: 15px; text-align: center; @@ -454,7 +465,7 @@ summary { cursor: col-resize; } .gutter.gutter-horizontal:hover { - background-color: lightgray; + background-color: light-dark(lightgray, darkgray); } #panel-three{ overflow-x:hidden; @@ -467,12 +478,12 @@ input[type=text]{ } #data input[type=text]{ - background-color: rgba(255, 255, 255, 0.6); + background-color: light-dark((255, 255, 255, 0.6), (255, 255, 255, 0.4)); margin: 0px; } .seriesitem:hover { - background-color: rgba(128, 128, 128, 0.1); + background-color: light-dark(rgba(128, 128, 128, 0.1), rgba(128, 128, 128, 0.3)); } .parambar, .coordbar, .tableparambar{ @@ -505,7 +516,7 @@ input[type=text]{ .parambar { /* background-color: rgba(173, 216, 230, 0.3); */ - background-color: white; + background-color: Canvas; border-top: 1px solid blue; border-bottom: 1px solid blue; } @@ -518,8 +529,8 @@ input[type=text]{ .tableparambar { background-color: rgba(255, 0, 0, 0.1); - border-top: 1px solid red; - border-bottom: 1px solid red; + border-top: 1px solid light-dark(red, darkred); + border-bottom: 1px solid light-dark(red, darkred); } .param:focus, diff --git a/res/function/func2tex.html b/res/function/func2tex.html index bb2ac71..d9d8d92 100644 --- a/res/function/func2tex.html +++ b/res/function/func2tex.html @@ -9,6 +9,10 @@