ssb: Add a manual theme color picker.

apps/ssb/tf-styles.js

@@ -1,4 +1,5 @@
-import {css, unsafeCSS} from './lit-all.min.js';
+import {css, unsafeCSS, until} from './lit-all.min.js';
+import * as tfrpc from '/static/tfrpc.js';
 
 const tf = css`
 	img {
@@ -408,16 +409,8 @@ function is_dark(hex, value) {
 	return (r * 299 + g * 587 + b * 114) / 1000 < value;
 }
 
-function generated() {
-	let now = new Date();
-	let k_color = rgb_to_hex([
-		(now.getDay() * 128) / 6,
-		(now.getHours() * 128) / 23,
-		(now.getSeconds() * 128) / 59,
-	]);
-	//let k_color = '#034f84';
-	//let k_color = rgb_to_hex([Math.random() * 256, Math.random() * 256, Math.random() * 256]);
-	let [r, g, b] = hex_to_rgb(k_color);
+export function generate(color) {
+	let [r, g, b] = hex_to_rgb(color);
 	let [h, s, l] = rgb_to_hsl(r, g, b);
 
 	let theme1 = {
@@ -461,4 +454,28 @@ function generated() {
 	return unsafeCSS(result);
 }
 
-export let styles = [tf, w3, generated()];
+let g_theme;
+export function generate_theme() {
+	return g_theme
+		? g_theme
+		: until(
+				tfrpc.rpc.localStorageGet('color').then(function (value) {
+					g_theme = generate(value ?? '#034f84');
+					return g_theme;
+				}),
+				generated_now()
+			);
+}
+
+function generated_now() {
+	let now = new Date();
+	return generate(
+		rgb_to_hex([
+			(now.getDay() * 128) / 6,
+			(now.getHours() * 128) / 23,
+			(now.getSeconds() * 128) / 59,
+		])
+	);
+}
+
+export let styles = [tf, w3];