chore: dark mode for log

vernesong · Jan 18, 2025 · f5bc414 · f5bc414
1 parent b7869db
commit f5bc414
Show file tree

Hide file tree

Showing 4 changed files with 189 additions and 4 deletions.
diff --git a/luci-app-openclash/luasrc/view/openclash/config_editor.htm b/luci-app-openclash/luasrc/view/openclash/config_editor.htm
@@ -28,6 +28,7 @@
 </style>
 <link rel="stylesheet" href="/luci-static/resources/openclash/lib/codemirror.css"/>
 <link rel="stylesheet" href="/luci-static/resources/openclash/theme/material.css"/>
+<link rel="stylesheet" href="/luci-static/resources/openclash/theme/material-log.css"/>
 <link rel="stylesheet" href="/luci-static/resources/openclash/theme/idea.css"/>
 <link rel="stylesheet" href="/luci-static/resources/openclash/addon/fold/foldgutter.css"/>
 <link rel="stylesheet" href="/luci-static/resources/openclash/addon/lint/lint.css">
@@ -87,6 +88,33 @@
 </table>
 
 <script type="text/javascript">//<![CDATA[
+
+function isDarkBackground(element) {
+	var style = window.getComputedStyle(element);
+	var bgColor = style.backgroundColor;
+	let r, g, b;
+	if (/rgb\(/.test(bgColor)) {
+		var rgb = bgColor.match(/\d+/g);
+		r = parseInt(rgb);
+		g = parseInt(rgb);
+		b = parseInt(rgb);
+	} else if (/#/.test(bgColor)) {
+		if (bgColor.length === 4) {
+		r = parseInt(bgColor + bgColor, 16);
+		g = parseInt(bgColor + bgColor, 16);
+		b = parseInt(bgColor + bgColor, 16);
+		} else {
+		r = parseInt(bgColor.slice(1, 3), 16);
+		g = parseInt(bgColor.slice(3, 5), 16);
+		b = parseInt(bgColor.slice(5, 7), 16);
+		}
+	} else {
+		return false;
+	}
+	var luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+	return luminance < 128;
+};
+
 function merge_editor(id, id2, target, target2, readOnly, readOnly2, wid, height)
 {
 	var value, orig1, orig2, merge_editor, descr, gap, vscrollbar, vscrollbar_oc, panes = 2, highlight = true, connect = null, collapse = false;
@@ -438,6 +466,10 @@
 	core_editor.setOption("readOnly","true");
 	oc_editor.setSize("100%", "540px");
 	oc_editor.setOption("readOnly","true");
+	if (isDarkBackground(document.body)) {
+		core_editor.setOption('theme', 'material-log');
+		oc_editor.setOption('theme', 'material-log');
+	};
 };
 
 var proxy_mg = document.getElementById('cbi-table-1-proxy_mg');

diff --git a/luci-app-openclash/luasrc/view/openclash/select_git_cdn.htm b/luci-app-openclash/luasrc/view/openclash/select_git_cdn.htm
@@ -136,11 +136,11 @@
 		}
 		var luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
 		return luminance < 128;
- 	}
+ 	};
 
 	if (isDarkBackground(document.body)) {
 		document.documentElement.setAttribute('data-darkmode', 'true');
-	}
+	};
 
 	function get_update_info() {
 		XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "update_info")%>', null, function(x, status) {

diff --git a/luci-app-openclash/luasrc/view/openclash/sub_info_show.htm b/luci-app-openclash/luasrc/view/openclash/sub_info_show.htm
@@ -97,11 +97,11 @@
 	}
 	var luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
 	return luminance < 128;
- }
+ };
 
 if (isDarkBackground(document.body)) {
 	document.documentElement.setAttribute('data-darkmode', 'true');
-}
+};
 
 function progressbar_<%=idname%>(v, m, pc, np, f, t, tr) {
 		return String.format(

diff --git a/luci-app-openclash/root/www/luci-static/resources/openclash/theme/material-log.css b/luci-app-openclash/root/www/luci-static/resources/openclash/theme/material-log.css
@@ -0,0 +1,153 @@
+/*
+  Name:       material
+  Author:     Mattia Astorino (http://github.com/equinusocio)
+  Website:    https://material-theme.site/
+*/
+
+.cm-s-material-log.CodeMirror {
+  background-color: #263238;
+  color: #EEFFFF;
+}
+
+.cm-s-material-log .CodeMirror-gutters {
+  background: #263238;
+  color: #546E7A;
+  border: none;
+}
+
+.cm-s-material-log .CodeMirror-guttermarker,
+.cm-s-material-log .CodeMirror-guttermarker-subtle,
+.cm-s-material-log .CodeMirror-linenumber {
+  color: #546E7A;
+}
+
+.cm-s-material-log .CodeMirror-cursor {
+  border-left: 1px solid #FFCC00;
+}
+.cm-s-material-log.cm-fat-cursor .CodeMirror-cursor {
+  background-color: #5d6d5c80 !important;
+}
+.cm-s-material-log .cm-animate-fat-cursor {
+  background-color: #5d6d5c80 !important;
+}
+
+.cm-s-material-log div.CodeMirror-selected {
+  background: rgba(128, 203, 196, 0.2);
+}
+
+.cm-s-material-log.CodeMirror-focused div.CodeMirror-selected {
+  background: rgba(128, 203, 196, 0.2);
+}
+
+.cm-s-material-log .CodeMirror-line::selection,
+.cm-s-material-log .CodeMirror-line>span::selection,
+.cm-s-material-log .CodeMirror-line>span>span::selection {
+  background: rgba(128, 203, 196, 0.2);
+}
+
+.cm-s-material-log .CodeMirror-line::-moz-selection,
+.cm-s-material-log .CodeMirror-line>span::-moz-selection,
+.cm-s-material-log .CodeMirror-line>span>span::-moz-selection {
+  background: rgba(128, 203, 196, 0.2);
+}
+
+.cm-s-material-log .CodeMirror-activeline-background {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.cm-s-material-log .cm-keyword {
+  color: #C792EA;
+}
+
+.cm-s-material-log .cm-operator {
+  color: #89DDFF;
+}
+
+.cm-s-material-log .cm-variable-2 {
+  color: #EEFFFF;
+}
+
+.cm-s-material-log .cm-variable-3 {
+  color: #EEFFFF;
+}
+
+.cm-s-material-log .cm-type {
+  color: #f07178;
+}
+
+.cm-s-material-log .cm-builtin {
+  color: #FFCB6B;
+}
+
+.cm-s-material-log .cm-atom {
+  color: #F78C6C;
+}
+
+.cm-s-material-log .cm-number {
+  color: #FF5370;
+}
+
+.cm-s-material-log .cm-def {
+  color: #82AAFF;
+}
+
+.cm-s-material-log .cm-string {
+  color: #C3E88D;
+}
+
+.cm-s-material-log .cm-string-2 {
+  color: #C3E88D;
+}
+
+.cm-s-material-log .cm-comment {
+  color: #546E7A;
+}
+
+.cm-s-material-log .cm-variable {
+  color: #EEFFFF;
+}
+
+.cm-s-material-log .cm-tag {
+  color: #FF5370;
+}
+
+.cm-s-material-log .cm-tip {
+  color: #ff6f00;
+}
+
+.cm-s-material-log .cm-watchdog {
+  color: #b300ff;
+}
+
+.cm-s-material-log .cm-warn {
+  line-height: 1em;
+  font-weight: bold;
+  color: #ff00bb;
+}
+
+.cm-s-material-log .cm-meta {
+  color: #FFCB6B;
+}
+
+.cm-s-material-log .cm-attribute {
+  color: #C792EA;
+}
+
+.cm-s-material-log .cm-property {
+  color: #C792EA;
+}
+
+.cm-s-material-log .cm-qualifier {
+  color: #DECB6B;
+}
+
+.cm-s-material-log .cm-error {
+  line-height: 1em;
+  font-weight: bold;
+  color: #FF0000;
+}
+
+.cm-s-material-log .CodeMirror-matchingbracket {
+  text-decoration: underline;
+  color: white !important;
+}