GitHub Logo on theme background change

the contrast is improved while the theme is switched.
Handled the case if there is no storage value for the selected class.
This commit is contained in:
pmankar
2019-08-29 01:51:47 +02:00
parent 11791deec5
commit 5ec993f9f4
2 changed files with 12 additions and 2 deletions

View File

@@ -22,7 +22,7 @@
<nuxt id="main" /> <nuxt id="main" />
<footer> <footer>
<div> <div>
<a href="https://github.com/liyasthomas/postwoman" target="_blank"><img src="~static/icons/github.svg" alt="" style="margin-right: 16px">GitHub</a> <a href="https://github.com/liyasthomas/postwoman" target="_blank"><img id="imgGitHub" src="~static/icons/github.svg" alt="" :style="logoStyle()">GitHub</a>
</div> </div>
<button id="installPWA" @click.prevent="showInstallPrompt()"> <button id="installPWA" @click.prevent="showInstallPrompt()">
Install PWA Install PWA
@@ -120,7 +120,10 @@
// Once the PWA code is initialized, this holds a method // Once the PWA code is initialized, this holds a method
// that can be called to show the user the installation // that can be called to show the user the installation
// prompt. // prompt.
showInstallPrompt: null showInstallPrompt: null,
logoStyle() {
return "margin-right: 16px;" + (((this.$store.state.postwoman.settings.THEME_CLASS || '').includes("light")) ? " filter: invert(100%); -webkit-filter: invert(100%);" : '')
}
} }
}, },
beforeMount() { beforeMount() {

View File

@@ -102,6 +102,13 @@
applyTheme(name) { applyTheme(name) {
this.applySetting('THEME_CLASS', name); this.applySetting('THEME_CLASS', name);
document.documentElement.className = name; document.documentElement.className = name;
let imgGitHub = document.getElementById("imgGitHub");
imgGitHub.style['filter'] = "";
imgGitHub.style['webkit-filter'] = "invert(100%)";
if (name.includes("light")){
imgGitHub.style['filter'] = "invert(100%)";
imgGitHub.style['webkit-filter'] = "invert(100%)";
}
}, },
setActiveColor(color, vibrant) { setActiveColor(color, vibrant) {
// By default, the color is vibrant. // By default, the color is vibrant.