feat: dark mode

LogCreative · Jun 29, 2024 · 9edd995 · 9edd995
1 parent c3c97f1
commit 9edd995
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -25,7 +25,6 @@
                 </div>
                 <div id="poweredby" class="accordion">
                     <a class="acckey" href="https://logcreative.github.io/LaTeXSparkle/src/art/chapter06.html" target="_blank"><img class="icon">🔖</img><div class="value">{{ $t('nav.quickstart') }}</div></a>
-                    <!-- darkmode -->
                     <a class="acckey" href="https://mirrors.sjtug.sjtu.edu.cn/CTAN/graphics/pgf/contrib/pgfplots/doc/pgfplots.pdf" target="_blank"><img src="res/poweredby/book.ico" class="icon"><div class="value">{{ $t('nav.doc') }}</div></a>
                     <a class="acckey" href="https://github.com/LogCreative/PGFPlotsEdt" target="_blank"><img src="res/poweredby/github.png"><div class="value">GitHub</div></a>
                     <a class="acckey" href="https://cn.vuejs.org/" target="_blank"><img class="icon" src="res/poweredby/vue.png"><div class="value">Vue.js</div></a>
@@ -460,12 +459,14 @@
     <script src="lib/vue-clipboard.js"></script>
     <script src="lib/highlight.min.js"></script>
     <script src="lib/latex.min.js"></script>
-    <link href="lib/vs.min.css" rel="stylesheet">
+    <link href="lib/vs.min.css" rel="stylesheet" media="(prefers-color-scheme: light)">
+    <link href="lib/vs2015.min.css" rel="stylesheet" media="(prefers-color-scheme: dark)">
     <script src="lib/split.min.js"></script>
     <script src="lib/vue-i18n.min.js"></script>
     <script src="lib/ace.min.js"></script>
     <script src="lib/mode-latex.min.js"></script>
     <script src="lib/theme-textmate.min.js"></script>
+    <script src="lib/theme-tomorrow_night.min.js"></script>
     <script src="lib/ext-language_tools.min.js"></script>
     <script src="lib/mode-snippets.js"></script>
     <script src="lib/snippets-latex.min.js"></script>

diff --git 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
diff --git a/lib/vs2015.min.css b/lib/vs2015.min.css
diff --git a/main.css b/main.css
@@ -1,16 +1,25 @@
+:root {
+    color-scheme: light dark;
+}
+
+body {
+    background-color: Canvas;
+    color: CanvasText;
+}
+
 button,
 summary{
     outline: none;
     cursor: pointer;
 }
 
 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,15 +279,15 @@ 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;
 }
 
 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
@@ -9,6 +9,10 @@
     <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
 </head>
 <style>
+    :root {
+        color-scheme: light dark;
+    }
+
     body{
         display: flex;
         justify-content: center;
@@ -19,7 +23,7 @@
 
     #alert{
         display: none;
-        background-color: yellow;
+        background-color: light-dark(yellow, orange);
         padding: 5px;
         border-radius: 5px;
     }

diff --git a/res/view/view.html b/res/view/view.html
@@ -7,6 +7,10 @@
     <title>Viewbox</title>
 </head>
 <style>
+    :root {
+        color-scheme: light dark;
+    }
+
     .wrap{
         width: 100%;
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,10 @@ @@
         <title>Viewbox</title>
     </head>
     <style>
+        :root {
+            color-scheme: light dark;
+        }
         .wrap{
             width: 100%;
         }
@@ Expand Down @@