From 9fea8bcae0468615b0bc328f0c5b2f40b37da6eb Mon Sep 17 00:00:00 2001
From: Alberto Xamin <alberto@xamin.it>
Date: Thu, 26 Jan 2023 17:27:42 +0000
Subject: [PATCH] add true black theme

---
 frontend/public/index.html |  5 +----
 frontend/src/App.vue       | 14 +++++++++++---
 frontend/src/i18n/en.json  |  3 ++-
 frontend/src/i18n/it.json  |  3 ++-
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/frontend/public/index.html b/frontend/public/index.html
index 37bab11..e776bef 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -7,10 +7,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
 		<meta name="keywords" content="bang, bang online, bang game, bang multiplayer, bang card game, bang card game online, Bang! card game rules online, play Bang! online, bang online with friends, high noon, dodge city, gold rush"/>
 		<link rel="icon" href="<%= BASE_URL %>favicon.ico">
-		<meta name="theme-color" content="white"
-			media="(prefers-color-scheme: light)">
-			<meta name="theme-color" content="#181a1b"
-			media="(prefers-color-scheme: dark)">
+		<meta name="theme-color" content="black">
 		<meta name="apple-mobile-web-app-capable" content="yes">
 		<meta name="apple-mobile-web-app-status-bar-style" content="default">
 		<meta name="apple-mobile-web-app-title" content="PewPew!">
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index cd31ba5..a3811ea 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -10,11 +10,11 @@
 		<help v-if="showHelp"/>
 		<div style="position:fixed;bottom:4pt;right:4pt;display:flex;z-index:10">
 			<input type=button class="btn" style="min-width:28pt;cursor:pointer;" @click="()=>{sending_report = true}" :value=" $t('report') " />
-			<input type="button" class="btn" value="" style="min-width:28pt;cursor:pointer;background-image: url('https://img.icons8.com/color/48/discord-logo.png');background-size:2em;" @click="joinDiscord"/>
+			<input type="button" class="btn" value="" style="min-width:28pt;cursor:pointer;background-image: url('https://img.icons8.com/color/48/discord-logo.png');background-size:2em;background-repeat: no-repeat;" @click="joinDiscord"/>
 			<input type="button" class="btn" :value="(showHelp?'X':'?')" style="min-width:28pt;border-radius:100%;cursor:pointer;" @click="getHelp"/>
 			<select id="theme" class="btn" v-model="theme">
 				<option
-					v-for="(theme, i) in ['light.☀️', 'dark.🌙️', 'sepia.🌇️', 'grayscale.📰️']"
+					v-for="(theme, i) in ['light.☀️', 'dark.🌙️', 'sepia.🌇️', 'grayscale.📰️', 'black.⬛']"
 					:key="`theme-${i}`"
 					:value="theme.split('.')[0]">
 						{{theme.split('.')[1]}} {{$t(`theme.${theme.split('.')[0]}`)}}
@@ -104,6 +104,8 @@ export default {
 				console.log("Prefers dark mode")
 				this.theme = "dark";
 			}
+			var style = getComputedStyle(document.body);
+			document.querySelector("meta[name='theme-color']").setAttribute("content", style.getPropertyValue('--bg-color'));
 		},
 		joinDiscord() {
 			window.open('https://discord.gg/Dr58dZ2na8', '_blank');
@@ -121,7 +123,9 @@ export default {
 	watch: {
 		theme() {
 			document.documentElement.setAttribute("data-theme", this.theme);
-			localStorage.setItem('theme', this.theme)
+			localStorage.setItem('theme', this.theme);
+			var style = getComputedStyle(document.body);
+			document.querySelector("meta[name='theme-color']").setAttribute("content", style.getPropertyValue('--bg-color'));
 		}
 	},
 	mounted() {
@@ -277,6 +281,10 @@ input:disabled {
 	--font-color: rgb(174, 194, 211);
 	--bg-color: #181a1b;
 }
+[data-theme="black"] {
+	--font-color: rgb(174, 194, 211);
+	--bg-color: #000000;
+}
 [data-theme="sepia"] {
 	--font-color: rgb(54, 43, 33);
 	--bg-color: #e7d6bb;
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 28e7a6c..790d01b 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -808,6 +808,7 @@
     "sepia": "Sepia",
     "light": "Light",
     "dark": "Dark",
-    "grayscale": "Grayscale"
+    "grayscale": "Grayscale",
+		"black": "True Black"
   }
 }
\ No newline at end of file
diff --git a/frontend/src/i18n/it.json b/frontend/src/i18n/it.json
index ed7cb42..6e44de8 100644
--- a/frontend/src/i18n/it.json
+++ b/frontend/src/i18n/it.json
@@ -808,6 +808,7 @@
     "sepia": "Seppia",
     "light": "Chiaro",
     "dark": "Scuro",
-    "grayscale": "Scala di Grigi"
+    "grayscale": "Scala di Grigi",
+    "black": "Nero Puro"
   }
 }
\ No newline at end of file