mirrors/hoppscotch
1
0
Fork 0
mirror of https://github.com/hoppscotch/hoppscotch synced 2024-11-21 22:50:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

GitHub Logo on theme background change

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
layouts/default.vue
View File

@ -22,7 +22,7 @@
<nuxt id="main" />
<footer>
<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>
<button id="installPWA" @click.prevent="showInstallPrompt()">
Install PWA
@ -120,7 +120,10 @@
// Once the PWA code is initialized, this holds a method
// that can be called to show the user the installation
// 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() {

7
pages/settings.vue
View File

@ -102,6 +102,13 @@
applyTheme(name) {
this.applySetting('THEME_CLASS', 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) {
// By default, the color is vibrant.