Dark Theme #20 closed

VERSION

@@ -1,4 +1,4 @@
 latest
 1
 1.1
-1.1.8
+1.1.9

system/appcache.php

@@ -57,6 +57,8 @@
 echo $domain."/load/js-libs/jquery.min.js"."\r\n";
 echo $domain."/load/js-libs/jquery-ui.min.js"."\r\n";
 echo $domain."/load/js-libs/jquery-ui.min.css"."\r\n";
+echo $domain."/load/js-libs/jquery-ui-light.theme.min.css"."\r\n";
+echo $domain."/load/js-libs/jquery-ui-dark.theme.min.css"."\r\n";
 foreach( scandir( __DIR__ . '/load/js-libs/images/' ) as $fona ){
 	if( $fona != '.' && $fona != '..' && is_file( __DIR__ . '/load/js-libs/images/'. $fona ) ){
 		echo $domain."/load/js-libs/images/".$fona."\r\n";
@@ -70,6 +72,7 @@
 }
 echo $domain."/load/marked.min.js"."\r\n";
 echo $domain."/load/codemirror/codemirror.css"."\r\n";
+echo $domain."/load/codemirror/dark-theme.css"."\r\n";
 echo $domain."/load/codemirror/codemirror.js"."\r\n";
 echo $domain."/load/codemirror/overlay.js"."\r\n";
 echo $domain."/load/codemirror/xml.js"."\r\n";
@@ -89,6 +92,7 @@
 	}
 }*/
 echo $domain."/load/prism/prism.css"."\r\n";
+echo $domain."/load/prism/dark-theme.css"."\r\n";
 echo $domain."/load/prism/prism.js"."\r\n";
 echo $domain."/load/notes.min.css"."\r\n";
 echo $domain."/load/notes.min.js"."\r\n";

system/index.php

@@ -56,7 +56,9 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 
 		<link rel="stylesheet" type="text/css" href="<?php echo $domain; ?>/load/js-libs/fonts.css">
-		<link rel="stylesheet" type="text/css" href="<?php echo $domain; ?>/load/js-libs/jquery-ui.min.css">		
+		<link rel="stylesheet" type="text/css" href="<?php echo $domain; ?>/load/js-libs/jquery-ui.min.css">
+		<link rel="stylesheet" type="text/css" href="<?php echo $domain; ?>/load/js-libs/jquery-ui-light.theme.min.css" media="screen and (prefers-color-scheme: light)"> 
+		<link rel="stylesheet" type="text/css" href="<?php echo $domain; ?>/load/js-libs/jquery-ui-dark.theme.min.css" media="screen and (prefers-color-scheme: dark)">
 
 		<script src="<?php echo $domain; ?>/load/js-libs/jquery.min.js"></script>
 		<script src="<?php echo $domain; ?>/load/js-libs/jquery-ui.min.js"></script>
@@ -75,11 +77,13 @@
 		<script src="<?php echo $domain; ?>/load/codemirror/htmlmixed.js"></script>
 		<script src="<?php echo $domain; ?>/load/codemirror/clike.js"></script>
 		<script src="<?php echo $domain; ?>/load/codemirror/meta.js"></script>
+		<link rel="stylesheet" type="text/css" href="<?php echo $domain; ?>/load/codemirror/dark-theme.css" media="screen and (prefers-color-scheme: dark)">
 
 		<link rel="stylesheet" href="<?php echo $domain; ?>/load/katex/katex.min.css">
 		<script src="<?php echo $domain; ?>/load/katex/katex.min.js"></script>
 
 		<link rel="stylesheet" href="<?php echo $domain; ?>/load/prism/prism.css">
+		<link rel="stylesheet" type="text/css" href="<?php echo $domain; ?>/load/prism/dark-theme.css" media="screen and (prefers-color-scheme: dark)">
 		<script src="<?php echo $domain; ?>/load/prism/prism.js"></script>
 
 		<link rel="stylesheet" href="<?php echo $domain; ?>/load/fa/fontawesome.min.css">

system/load/codemirror/dark-theme.css

@@ -0,0 +1,69 @@
+/* ambiance theme for codemirror */
+
+/* Color scheme */
+
+.cm-s-default .cm-header { color: lightblue; }
+.cm-s-default .cm-quote { color: #24C2C7; }
+
+.cm-s-default .cm-keyword { color: #cda869; }
+.cm-s-default .cm-atom { color: #CF7EA9; }
+.cm-s-default .cm-number { color: #78CF8A; }
+.cm-s-default .cm-def { color: #aac6e3; }
+.cm-s-default .cm-variable { color: #ffb795; }
+.cm-s-default .cm-variable-2 { color: #eed1b3; }
+.cm-s-default .cm-variable-3, .cm-s-default .cm-type { color: #faded3; }
+.cm-s-default .cm-property { color: #eed1b3; }
+.cm-s-default .cm-operator { color: #fa8d6a; }
+.cm-s-default .cm-comment { color: #555; font-style:italic; }
+.cm-s-default .cm-string { color: #8f9d6a; }
+.cm-s-default .cm-string-2 { color: #9d937c; }
+.cm-s-default .cm-meta { color: #D2A8A1; }
+.cm-s-default .cm-qualifier { color: yellow; }
+.cm-s-default .cm-builtin { color: #9999cc; }
+.cm-s-default .cm-bracket { color: #24C2C7; }
+.cm-s-default .cm-tag { color: #fee4ff; }
+.cm-s-default .cm-attribute { color: #9B859D; }
+.cm-s-default .cm-hr { color: pink; }
+.cm-s-default .cm-link { color: #F4C20B; }
+.cm-s-default .cm-special { color: #FF9D00; }
+.cm-s-default .cm-error { color: #AF2018; }
+
+.cm-s-default .CodeMirror-matchingbracket { color: #0f0; }
+.cm-s-default .CodeMirror-nonmatchingbracket { color: #f22; }
+
+.cm-s-default div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); }
+.cm-s-default.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
+.cm-s-default .CodeMirror-line::selection, .cm-s-default .CodeMirror-line > span::selection, .cm-s-default .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
+.cm-s-default .CodeMirror-line::-moz-selection, .cm-s-default .CodeMirror-line > span::-moz-selection, .cm-s-default .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
+
+/* Editor styling */
+
+.cm-s-default.CodeMirror {
+  line-height: 1.40em;
+  color: #E6E1DC;
+  background-color: #202020;
+  -webkit-box-shadow: inset 0 0 10px black;
+  -moz-box-shadow: inset 0 0 10px black;
+  box-shadow: inset 0 0 10px black;
+}
+
+.cm-s-default .CodeMirror-gutters {
+  background: #3D3D3D;
+  border-right: 1px solid #4D4D4D;
+  box-shadow: 0 10px 20px black;
+}
+
+.cm-s-default .CodeMirror-linenumber {
+  text-shadow: 0px 1px 1px #4d4d4d;
+  color: #111;
+  padding: 0 5px;
+}
+
+.cm-s-default .CodeMirror-guttermarker { color: #aaa; }
+.cm-s-default .CodeMirror-guttermarker-subtle { color: #111; }
+
+.cm-s-default .CodeMirror-cursor { border-left: 1px solid #7991E8; }
+
+.cm-s-default .CodeMirror-activeline-background {
+  background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.031);
+}

system/load/devjs/globals.js

@@ -215,7 +215,7 @@ function confirmDialog(cont, buttons, title){
 let isOpenedAsApp = ((("standalone" in window.navigator) && window.navigator.standalone == true) || (window.matchMedia('(display-mode: standalone)').matches));
 function displayAsApp(){
 	$('body').css({
-		background: '#f5f5f5'
+		background: 'var(--as-app-color)'
 	});
 	$('div.main').css({
 		border: 'none',