ssb: Add a manual theme color picker.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&J8epgiTHHI/2GtNoS+FW3UpyTrIEL4ltovW1JpmwSW4=.sha256"
+	"previous": "&ceivZzkWd2Bvvdzdvdv68bZm2Y9oC0J352C78ZmMMU4=.sha256"
 }

apps/ssb/emojis.js

@@ -1,6 +1,6 @@
 import * as tfrpc from '/static/tfrpc.js';
 import {html, render} from './lit-all.min.js';
-import {styles} from './tf-styles.js';
+import {styles, generate_theme} from './tf-styles.js';
 
 let g_emojis;
 
@@ -140,6 +140,9 @@ export async function picker(callback, anchor, author, recent) {
 		<style>
 			${styles}
 		</style>
+		<style>
+			${generate_theme()}
+		</style>
 		<div
 			class="w3-modal"
 			style="display: block; box-sizing: border-box; z-index: 10"

apps/ssb/script.js

@@ -18,5 +18,8 @@ import * as tf_styles from './tf-styles.js';
 window.addEventListener('load', function () {
 	let style = document.createElement('style');
 	style.innerText = tf_styles.styles;
+	Promise.resolve(tf_styles.generate_theme()).then(function (x) {
+		style.innerText += x;
+	});
 	document.body.appendChild(style);
 });

apps/ssb/tf-app.js

@@ -1,6 +1,6 @@
 import {LitElement, html, css, guard, until} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
-import {styles} from './tf-styles.js';
+import {styles, generate_theme} from './tf-styles.js';
 
 class TfElement extends LitElement {
 	static get properties() {
@@ -763,6 +763,17 @@ class TfElement extends LitElement {
 		}
 	}
 
+	async pick_color() {
+		let input = document.createElement('input');
+		input.type = 'color';
+		input.value = (await tfrpc.rpc.localStorageGet('color')) ?? '#ff0000';
+		input.addEventListener('change', async function () {
+			await tfrpc.rpc.localStorageSet('color', input.value);
+			window.location.reload();
+		});
+		input.click();
+	}
+
 	render() {
 		let self = this;
 
@@ -819,6 +830,12 @@ class TfElement extends LitElement {
 						</button>
 					`
 				)}
+				<button
+					class="w3-bar-item w3-button w3-right"
+					@click=${this.pick_color}
+				>
+					🎨<span class="w3-hide-small">Color</span>
+				</button>
 			</div>
 		`;
 		let contents = this.guest
@@ -854,6 +871,9 @@ class TfElement extends LitElement {
 					`
 				: undefined;
 		return html`
+			<style>
+				${generate_theme()}
+			</style>
 			<div
 				style="width: 100vw; min-height: 100vh; height: 100vh; display: flex; flex-direction: column"
 				class="w3-theme-dark"

apps/ssb/tf-compose.js

@@ -1,7 +1,7 @@
 import {LitElement, html, unsafeHTML, live} from './lit-all.min.js';
 import * as tfutils from './tf-utils.js';
 import * as tfrpc from '/static/tfrpc.js';
-import {styles} from './tf-styles.js';
+import {styles, generate_theme} from './tf-styles.js';
 import Tribute from './tribute.esm.js';
 
 class TfComposeElement extends LitElement {
@@ -603,6 +603,9 @@ class TfComposeElement extends LitElement {
 						🔐 Encrypt
 					</button>`;
 		let result = html`
+			<style>
+				${generate_theme()}
+			</style>
 			<style>
 				.w3-input:empty::before {
 					content: attr(placeholder);

apps/ssb/tf-message.js

@@ -4,12 +4,14 @@ import {
 	html,
 	repeat,
 	render,
+	unsafeCSS,
 	unsafeHTML,
+	until,
 } from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
 import * as tfutils from './tf-utils.js';
 import * as emojis from './emojis.js';
-import {styles} from './tf-styles.js';
+import {styles, generate_theme} from './tf-styles.js';
 
 class TfMessageElement extends LitElement {
 	static get properties() {
@@ -701,7 +703,7 @@ class TfMessageElement extends LitElement {
 			: undefined;
 	}
 
-	render() {
+	_render() {
 		let content = this.message?.content;
 		if (this.message?.decrypted?.type == 'post') {
 			content = this.message.decrypted;
@@ -1095,6 +1097,15 @@ class TfMessageElement extends LitElement {
 			return this.render_small_frame(this.render_raw());
 		}
 	}
+
+	render() {
+		return html`
+			<style>
+				${generate_theme()}
+			</style>
+			${this._render()}
+		`;
+	}
 }
 
 customElements.define('tf-message', TfMessageElement);

apps/ssb/tf-news.js

@@ -1,6 +1,6 @@
 import {LitElement, html, unsafeHTML, repeat, until} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
-import {styles} from './tf-styles.js';
+import {styles, generate_theme} from './tf-styles.js';
 
 class TfNewsElement extends LitElement {
 	static get properties() {
@@ -231,6 +231,9 @@ class TfNewsElement extends LitElement {
 			}
 		}
 		return html`
+			<style>
+				${generate_theme()}
+			</style>
 			<div>
 				${repeat(
 					final_messages,

apps/ssb/tf-profile.js

@@ -1,7 +1,7 @@
 import {LitElement, html, until, unsafeHTML} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
 import * as tfutils from './tf-utils.js';
-import {styles} from './tf-styles.js';
+import {styles, generate_theme} from './tf-styles.js';
 
 class TfProfileElement extends LitElement {
 	static get properties() {
@@ -316,7 +316,9 @@ class TfProfileElement extends LitElement {
 		}
 		image = this.editing?.image ?? image;
 		let description = this.editing?.description ?? profile.description;
-		return html`<div class="w3-card-4 w3-container w3-theme-d3" style="box-sizing: border-box">
+		return html`
+			<style>${generate_theme()}</style>
+			<div class="w3-card-4 w3-container w3-theme-d3" style="box-sizing: border-box">
 			<header class="w3-container">
 				<p><tf-user id=${this.id} .users=${this.users}></tf-user> (${tfutils.human_readable_size(this.size)} in ${this.sequence} messages)</p>
 			</header>

apps/ssb/tf-reactions-modal.js

@@ -1,5 +1,5 @@
 import {LitElement, html, unsafeHTML} from './lit-all.min.js';
-import {styles} from './tf-styles.js';
+import {styles, generate_theme} from './tf-styles.js';
 
 class TfReactionsModalElement extends LitElement {
 	static get properties() {
@@ -24,50 +24,57 @@ class TfReactionsModalElement extends LitElement {
 	render() {
 		let self = this;
 		return this.votes?.length
-			? html` <div
-					class="w3-modal w3-animate-opacity"
-					style="display: block; box-sizing: border-box; z-index: 10"
-					@click=${this.clear}
-				>
+			? html` <style>
+						${generate_theme()}
+					</style>
 					<div
-						class="w3-modal-content w3-card-4 w3-theme-d1"
-						onclick="event.stopPropagation()"
+						class="w3-modal w3-animate-opacity"
+						style="display: block; box-sizing: border-box; z-index: 10"
+						@click=${this.clear}
 					>
-						<div class="w3-container w3-padding">
-							<header class="w3-container">
-								<h2>Reactions</h2>
-								<span class="w3-button w3-display-topright" @click=${this.clear}
-									>&times;</span
-								>
-							</header>
-							<ul class="w3-theme-dark w3-container w3-ul">
-								${this.votes
-									.sort((x, y) => y.timestamp - x.timestamp)
-									.map(
-										(x) => html`
-											<li style="display: flex; flex-direction: row; gap: 4px">
-												<span style="flex-basis: 3em"
-													>${x?.content?.vote?.expression}</span
+						<div
+							class="w3-modal-content w3-card-4 w3-theme-d1"
+							onclick="event.stopPropagation()"
+						>
+							<div class="w3-container w3-padding">
+								<header class="w3-container">
+									<h2>Reactions</h2>
+									<span
+										class="w3-button w3-display-topright"
+										@click=${this.clear}
+										>&times;</span
+									>
+								</header>
+								<ul class="w3-theme-dark w3-container w3-ul">
+									${this.votes
+										.sort((x, y) => y.timestamp - x.timestamp)
+										.map(
+											(x) => html`
+												<li
+													style="display: flex; flex-direction: row; gap: 4px"
 												>
-												<tf-user
-													style="flex: 1 1"
-													id=${x.author}
-													.users=${this.users}
-												></tf-user>
-												<span
-													style="flex-shrink: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
-													>${new Date(x?.timestamp).toLocaleString()}</span
-												>
-											</li>
-										`
-									)}
-							</ul>
-							<footer class="w3-container w3-padding">
-								<button class="w3-button" @click=${this.clear}>Close</button>
-							</footer>
+													<span style="flex-basis: 3em"
+														>${x?.content?.vote?.expression}</span
+													>
+													<tf-user
+														style="flex: 1 1"
+														id=${x.author}
+														.users=${this.users}
+													></tf-user>
+													<span
+														style="flex-shrink: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
+														>${new Date(x?.timestamp).toLocaleString()}</span
+													>
+												</li>
+											`
+										)}
+								</ul>
+								<footer class="w3-container w3-padding">
+									<button class="w3-button" @click=${this.clear}>Close</button>
+								</footer>
+							</div>
 						</div>
-					</div>
-				</div>`
+					</div>`
 			: undefined;
 	}
 }

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];

apps/ssb/tf-tab-connections.js

@@ -1,6 +1,6 @@
 import {LitElement, html} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
-import {styles} from './tf-styles.js';
+import {styles, generate_theme} from './tf-styles.js';
 
 class TfTabConnectionsElement extends LitElement {
 	static get properties() {
@@ -251,6 +251,9 @@ class TfTabConnectionsElement extends LitElement {
 	render() {
 		let self = this;
 		return html`
+			<style>
+				${generate_theme()}
+			</style>
 			<div class="w3-container" style="box-sizing: border-box">
 				<h2>New Connection</h2>
 				<textarea class="w3-input w3-theme-d1" id="code"></textarea>

apps/ssb/tf-tab-news-feed.js

@@ -1,6 +1,6 @@
 import {LitElement, cache, html, unsafeHTML, until} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
-import {styles} from './tf-styles.js';
+import {styles, generate_theme} from './tf-styles.js';
 
 class TfTabNewsFeedElement extends LitElement {
 	static get properties() {
@@ -538,6 +538,9 @@ class TfTabNewsFeedElement extends LitElement {
 			`;
 		}
 		return cache(html`
+			<style>
+				${generate_theme()}
+			</style>
 			${this.unread_allowed()
 				? html`<button
 						class="w3-button w3-theme-d1"

apps/ssb/tf-tab-news.js

@@ -7,7 +7,7 @@ import {
 	until,
 } from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
-import {styles} from './tf-styles.js';
+import {styles, generate_theme} from './tf-styles.js';
 
 class TfTabNewsElement extends LitElement {
 	static get properties() {
@@ -395,6 +395,9 @@ class TfTabNewsElement extends LitElement {
 			</div>`;
 		}
 		return cache(html`
+			<style>
+				${generate_theme()}
+			</style>
 			${this.render_sidebar()}
 			<div
 				style="margin-left: 2in; padding: 0px; top: 0; height: 100vh; max-height: 100%; overflow: auto; contain: layout"

apps/ssb/tf-tab-search.js

@@ -1,6 +1,6 @@
 import {LitElement, html, unsafeHTML} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
-import {styles} from './tf-styles.js';
+import {styles, generate_theme} from './tf-styles.js';
 
 class TfTabSearchElement extends LitElement {
 	static get properties() {
@@ -146,6 +146,7 @@ class TfTabSearchElement extends LitElement {
 		}
 		let self = this;
 		return html`
+			<style>${generate_theme()}</style>
 			<div class="w3-padding">
 				<div style="display: flex; flex-direction: row; gap: 4px">
 					<input type="text" class="w3-input w3-theme-d1" id="search" value=${this.query} style="flex: 1" @keydown=${this.search_keydown}></input>

apps/ssb/tf-tag.js

@@ -1,5 +1,5 @@
 import {LitElement, html, unsafeHTML} from './lit-all.min.js';
-import {styles} from './tf-styles.js';
+import {styles, generate_theme} from './tf-styles.js';
 
 class TfTagElement extends LitElement {
 	static get properties() {
@@ -17,11 +17,15 @@ class TfTagElement extends LitElement {
 
 	render() {
 		let number = this.count ? html` (${this.count})` : undefined;
-		return html`<a
-			href=${'#' + encodeURIComponent(this.tag)}
-			class="w3-tag w3-theme-d1 w3-round-4 w3-button"
-			>${this.tag}${number}</a
-		> `;
+		return html`
+			<style>
+				${generate_theme()}</style
+			><a
+				href=${'#' + encodeURIComponent(this.tag)}
+				class="w3-tag w3-theme-d1 w3-round-4 w3-button"
+				>${this.tag}${number}</a
+			>
+		`;
 	}
 }
 

apps/ssb/tf-user.js

@@ -1,6 +1,6 @@
 import {LitElement, html} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
-import {styles} from './tf-styles.js';
+import {styles, generate_theme} from './tf-styles.js';
 
 class TfUserElement extends LitElement {
 	static get properties() {
@@ -58,12 +58,15 @@ class TfUserElement extends LitElement {
 				/>`;
 			}
 		}
-		return html` <div
-			style=${'display: inline-block; vertical-align: middle; text-wrap: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis' +
-			(this.nolink ? '' : '; font-weight: bold')}
-		>
-			${image} ${name}
-		</div>`;
+		return html` <style>
+				${generate_theme()}
+			</style>
+			<div
+				style=${'display: inline-block; vertical-align: middle; text-wrap: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis' +
+				(this.nolink ? '' : '; font-weight: bold')}
+			>
+				${image} ${name}
+			</div>`;
 	}
 }