Experimenting with w3.css themes.

apps/ssb/tf-app.js

@@ -205,7 +205,7 @@ class TfElement extends LitElement {
 					@change=${this._handle_whoami_changed}
 				></tf-id-picker>
 				<button
-					class="w3-button w3-dark-grey w3-border"
+					class="w3-button w3-theme-d1 w3-border"
 					style="flex: 0 0 auto"
 					@click=${this.create_identity}
 					id="create_identity"
@@ -352,15 +352,15 @@ class TfElement extends LitElement {
 		};
 
 		let tabs = html`
-			<div class="w3-bar w3-black">
+			<div class="w3-bar w3-theme-l1 min-height: 100%">
 				${Object.entries(k_tabs).map(
 					([k, v]) => html`
 						<button
 							title=${v}
-							class="w3-bar-item w3-padding-large w3-hover-gray tab ${self.tab ==
+							class="w3-bar-item w3-padding-large w3-hover-theme tab ${self.tab ==
 							v
-								? 'w3-red'
-								: 'w3-black'}"
+								? 'w3-theme-l2'
+								: 'w3-theme-l1'}"
 							@click=${() => self.set_tab(v)}
 						>
 							${k}
@@ -375,11 +375,13 @@ class TfElement extends LitElement {
 				: html`<div>Select or create an identity.</div>`
 			: this.render_tab();
 		return html`
-			${this.render_id_picker()} ${tabs}
-			${this.tags.map(
-				(x) => html`<tf-tag tag=${x.tag} count=${x.count}></tf-tag>`
-			)}
-			${contents}
+			<div style="padding: 8px" class="w3-theme-dark">
+				${this.render_id_picker()} ${tabs}
+				${this.tags.map(
+					(x) => html`<tf-tag tag=${x.tag} count=${x.count}></tf-tag>`
+				)}
+				${contents}
+			</div>
 		`;
 	}
 }