dark mode

index.html

@@ -39,6 +39,7 @@
 
   <!-- Codemirror from https://cdnjs.com/libraries/codemirror -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" integrity="sha256-vZ3SaLOjnKO/gGvcUWegySoDU6ff33CS5i9ot8J9Czk=" crossorigin="anonymous" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/theme/darcula.min.css" integrity="sha256-ZzdkdGSdYSUv4R77x7A5G7EeFDLMhAiCybNBNxNoxos=" crossorigin="anonymous" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.js" integrity="sha256-dPTL2a+npIonoK5i0Tyes0txCMUWZBf8cfKRfACRotc=" crossorigin="anonymous"></script>
 
   <!-- Codemirror Modes -->

web/common-function.js

@@ -1,5 +1,5 @@
 /*jshint strict:false, node:false */
-/*exported run_tests, read_settings_from_cookie, beautify, submitIssue, copyText, selectAll, clearAll, changeToFileContent*/
+/*exported run_tests, read_settings_from_cookie, beautify, submitIssue, copyText, selectAll, clearAll, changeToFileContent, setPreferredColorScheme*/
 var the = {
   use_codemirror: !window.location.href.match(/without-codemirror/),
   beautifier_file: window.location.href.match(/debug/) ? 'beautifier' : './beautifier.min',
@@ -365,3 +365,12 @@ function changeToFileContent(input) {
     };
   }
 }
+
+function setPreferredColorScheme() {
+  var isPreferredColorSchemeDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  if (isPreferredColorSchemeDark) {
+    $('.CodeMirror').addClass('cm-s-darcula');
+    $('body').addClass('dark-mode');
+    $('.logo').children('img').attr("src", "web/banner-dark.svg");
+  }
+}

web/common-style.css

@@ -165,3 +165,27 @@ select {
     height: 50vh;
   }
 }
+
+.dark-mode {
+  background: #202124;
+  color: #f8f9fa;
+}
+
+.dark-mode a {
+  color: #9da2ff;
+}
+
+.dark-mode a:visited {
+  color: #d7affb;
+}
+
+.dark-mode a.self {
+  color: #d2d3d7;
+}
+
+.dark-mode select,
+.dark-mode textarea {
+  background-color: #2e3037;
+  color: #e8eaed;
+  border: 1px solid #333333;
+}

web/onload.js

@@ -2,7 +2,7 @@
 $(function() {
 
   read_settings_from_cookie();
-
+  
   $.getJSON("./package.json", function(data) {
     $('#version-number').text('(v' + data.version + ')');
   });
@@ -17,6 +17,7 @@ $(function() {
     the.editor = CodeMirror.fromTextArea(textArea, {
       lineNumbers: true
     });
+    setPreferredColorScheme();
     set_editor_mode();
     the.editor.focus();