techwire/bang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add true black theme

Browse Source
This commit is contained in:
Alberto Xamin 2023-01-26 17:27:42 +00:00
parent a6ae613927
commit 9fea8bcae0
4 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/public/index.html
View File

@ -7,10 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <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"/> <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"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<meta name="theme-color" content="white" <meta name="theme-color" content="black">
media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#181a1b"
media="(prefers-color-scheme: dark)">
<meta name="apple-mobile-web-app-capable" content="yes"> <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-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="PewPew!"> <meta name="apple-mobile-web-app-title" content="PewPew!">

14
frontend/src/App.vue
View File

@ -10,11 +10,11 @@
<help v-if="showHelp"/> <help v-if="showHelp"/>
<div style="position:fixed;bottom:4pt;right:4pt;display:flex;z-index:10"> <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" 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"/> <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"> <select id="theme" class="btn" v-model="theme">
<option <option
v-for="(theme, i) in ['light.☀️', 'dark.🌙️', 'sepia.🌇️', 'grayscale.📰️']" v-for="(theme, i) in ['light.☀️', 'dark.🌙️', 'sepia.🌇️', 'grayscale.📰️', 'black.⬛']"
:key="`theme-${i}`" :key="`theme-${i}`"
:value="theme.split('.')[0]"> :value="theme.split('.')[0]">
{{theme.split('.')[1]}} {{$t(`theme.${theme.split('.')[0]}`)}} {{theme.split('.')[1]}} {{$t(`theme.${theme.split('.')[0]}`)}}
@ -104,6 +104,8 @@ export default {
console.log("Prefers dark mode") console.log("Prefers dark mode")
this.theme = "dark"; this.theme = "dark";
} }
var style = getComputedStyle(document.body);
document.querySelector("meta[name='theme-color']").setAttribute("content", style.getPropertyValue('--bg-color'));
}, },
joinDiscord() { joinDiscord() {
window.open('https://discord.gg/Dr58dZ2na8', '_blank'); window.open('https://discord.gg/Dr58dZ2na8', '_blank');
@ -121,7 +123,9 @@ export default {
watch: { watch: {
theme() { theme() {
document.documentElement.setAttribute("data-theme", this.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() { mounted() {
@ -277,6 +281,10 @@ input:disabled {
--font-color: rgb(174, 194, 211); --font-color: rgb(174, 194, 211);
--bg-color: #181a1b; --bg-color: #181a1b;
} }
[data-theme="black"] {
--font-color: rgb(174, 194, 211);
--bg-color: #000000;
}
[data-theme="sepia"] { [data-theme="sepia"] {
--font-color: rgb(54, 43, 33); --font-color: rgb(54, 43, 33);
--bg-color: #e7d6bb; --bg-color: #e7d6bb;

3
frontend/src/i18n/en.json
View File

@ -808,6 +808,7 @@
"sepia": "Sepia", "sepia": "Sepia",
"light": "Light", "light": "Light",
"dark": "Dark", "dark": "Dark",
"grayscale": "Grayscale" "grayscale": "Grayscale",
"black": "True Black"
} }
} }

3
frontend/src/i18n/it.json
View File

@ -808,6 +808,7 @@
"sepia": "Seppia", "sepia": "Seppia",
"light": "Chiaro", "light": "Chiaro",
"dark": "Scuro", "dark": "Scuro",
"grayscale": "Scala di Grigi" "grayscale": "Scala di Grigi",
"black": "Nero Puro"
} }
} }