From e357aa546c5bf73357799f3f613c5a1c663a74c8 Mon Sep 17 00:00:00 2001
From: ed <s@ocv.me>
Date: Mon, 28 Nov 2022 21:19:42 +0000
Subject: [PATCH] add browserchrome color hint

---
 copyparty/web/browser.html |  1 +
 copyparty/web/browser.js   |  3 ++-
 copyparty/web/md.html      |  1 +
 copyparty/web/mde.html     |  1 +
 copyparty/web/msg.html     |  3 ++-
 copyparty/web/splash.css   |  2 +-
 copyparty/web/splash.html  |  1 +
 copyparty/web/svcs.html    |  3 ++-
 copyparty/web/util.js      | 19 +++++++++++++++++++
 9 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html
index 89881d05..732f1901 100644
--- a/copyparty/web/browser.html
+++ b/copyparty/web/browser.html
@@ -6,6 +6,7 @@
 	<title>{{ title }}</title>
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=0.8, minimum-scale=0.6">
+	<meta name="theme-color" content="#333">
 {{ html_head }}
 	<link rel="stylesheet" media="screen" href="/.cpr/ui.css?_={{ ts }}">
 	<link rel="stylesheet" media="screen" href="/.cpr/browser.css?_={{ ts }}">
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index 5e0aac44..059ffd68 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -4881,7 +4881,7 @@ function aligngriditems() {
 	var em2px = parseFloat(getComputedStyle(ebi('ggrid')).fontSize);
 	var gridsz = 10;
 	try {
-		gridsz = getComputedStyle(document.documentElement).getPropertyValue('--grid-sz').slice(0, -2);
+		gridsz = cprop('--grid-sz').slice(0, -2);
 	}
 	catch (ex) { }
 	var gridwidth = ebi('ggrid').clientWidth;
@@ -6136,6 +6136,7 @@ var settheme = (function () {
 		pbar.drawpos();
 		vbar.draw();
 		showfile.setstyle();
+		bchrome();
 
 		var html = [], itheme = ax.indexOf(theme[0]) * 2 + (light ? 1 : 0),
 			names = ['classic dark', 'classic light', 'pm-monokai', 'flat light', 'vice', 'hotdog stand', 'hacker', 'hi-con'];
diff --git a/copyparty/web/md.html b/copyparty/web/md.html
index 103f1c01..16d955ba 100644
--- a/copyparty/web/md.html
+++ b/copyparty/web/md.html
@@ -3,6 +3,7 @@
 	<title>📝 {{ title }}</title>
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=0.7">
+	<meta name="theme-color" content="#333">
 {{ html_head }}
 	<link rel="stylesheet" href="/.cpr/ui.css?_={{ ts }}">
 	<link rel="stylesheet" href="/.cpr/md.css?_={{ ts }}">
diff --git a/copyparty/web/mde.html b/copyparty/web/mde.html
index 75aefe59..47ce8424 100644
--- a/copyparty/web/mde.html
+++ b/copyparty/web/mde.html
@@ -3,6 +3,7 @@
 	<title>📝 {{ title }}</title>
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=0.7">
+	<meta name="theme-color" content="#333">
 {{ html_head }}
 	<link rel="stylesheet" href="/.cpr/ui.css?_={{ ts }}">
 	<link rel="stylesheet" href="/.cpr/mde.css?_={{ ts }}">
diff --git a/copyparty/web/msg.html b/copyparty/web/msg.html
index a0e862a9..a43e5e21 100644
--- a/copyparty/web/msg.html
+++ b/copyparty/web/msg.html
@@ -6,7 +6,8 @@
 	<title>{{ svcname }}</title>
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=0.8">
-	{{ html_head }}
+	<meta name="theme-color" content="#333">
+{{ html_head }}
 	<link rel="stylesheet" media="screen" href="/.cpr/msg.css?_={{ ts }}">
 </head>
 
diff --git a/copyparty/web/splash.css b/copyparty/web/splash.css
index 902fc6cb..1f6ec451 100644
--- a/copyparty/web/splash.css
+++ b/copyparty/web/splash.css
@@ -73,7 +73,7 @@ table {
 .num td:first-child {
 	text-align: right;
 }
-.c {
+.cn {
 	text-align: center;
 }
 .btns {
diff --git a/copyparty/web/splash.html b/copyparty/web/splash.html
index 67205b2c..b1b1c235 100644
--- a/copyparty/web/splash.html
+++ b/copyparty/web/splash.html
@@ -6,6 +6,7 @@
 	<title>{{ svcname }}</title>
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=0.8">
+	<meta name="theme-color" content="#333">
 {{ html_head }}
 	<link rel="stylesheet" media="screen" href="/.cpr/splash.css?_={{ ts }}">
 	<link rel="stylesheet" media="screen" href="/.cpr/ui.css?_={{ ts }}">
diff --git a/copyparty/web/svcs.html b/copyparty/web/svcs.html
index 02ec73bc..53876857 100644
--- a/copyparty/web/svcs.html
+++ b/copyparty/web/svcs.html
@@ -6,6 +6,7 @@
 	<title>{{ args.doctitle }} @ {{ args.name }}</title>
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=0.8">
+	<meta name="theme-color" content="#333">
 {{ html_head }}
 	<link rel="stylesheet" media="screen" href="/.cpr/splash.css?_={{ ts }}">
 	<link rel="stylesheet" media="screen" href="/.cpr/ui.css?_={{ ts }}">
@@ -13,7 +14,7 @@
 
 <body>
 	<div id="wrap" class="w">
-        <div class="c">
+        <div class="cn">
             <p class="btns"><a href="/">browse files</a> // <a href="/?h">control panel</a></p>
             <p>or choose your OS for cooler alternatives:</p>
             <div class="ossel">
diff --git a/copyparty/web/util.js b/copyparty/web/util.js
index f6240a5b..772497da 100644
--- a/copyparty/web/util.js
+++ b/copyparty/web/util.js
@@ -1634,6 +1634,25 @@ var favico = (function () {
 })();
 
 
+function cprop(name) {
+    return getComputedStyle(document.documentElement).getPropertyValue(name);
+}
+
+
+function bchrome() {
+    console.log(document.documentElement.className);
+    var v, o = QS('meta[name=theme-color]');
+    if (!o)
+        return;
+
+    try {
+        v = cprop('--bg-u3');
+    }
+    catch (ex) { }
+    o.setAttribute('content', v ? v : document.documentElement.className.indexOf('y') + 1 ? '#eee' : '#333');
+}
+bchrome();
+
 var cf_cha_t = 0;
 function xhrchk(xhr, prefix, e404, lvl, tag) {
     if (xhr.status < 400 && xhr.status >= 200)