btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

💄 Fixed light theme colors

Browse Source
This commit is contained in:
Liyas Thomas
2019-09-04 10:07:08 +05:30
parent 0aec1e1607
commit 0350355626
2 changed files with 174 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
assets/css/themes.scss
View File

@@ -10,8 +10,8 @@
--bg-dark-color: #44475a; --bg-dark-color: #44475a;
// Background color // Background color
--bg-color: #282a36; --bg-color: #282a36;
// Auto-complete color // Auto-complete color
--atc-color: #3C4556; --atc-color: #3C4556;
// Text color // Text color
--fg-color: #f8f8f2; --fg-color: #f8f8f2;
@@ -25,19 +25,19 @@
} }
:root.light { :root.light {
--bg-dark-color: #ffffff; --bg-dark-color: #e1e4eb;
// Background color // Background color
--bg-color: #F6F8FA; --bg-color: #ebeef5;
// Auto-complete color // Auto-complete color
--atc-color: #F1F1F1; --atc-color: #e1e4eb;
// Text color // Text color
--fg-color: #121212; --fg-color: #5d5d5f;
// Error color // Error color
--err-color: invert(#393939, 1); --err-color: invert(#3C4556, 1);
// Active color // Active color
--ac-color: #50fa7b; --ac-color: #57b5f9;
// Active text color // Active text color
--act-color: #121212; --act-color: #ebeef5;
} }

328
pages/settings.vue
View File

@@ -1,37 +1,37 @@
<template> <template>
<div class="page"> <div class="page">
<pw-section class="cyan" label="Theme"> <pw-section class="cyan" label="Theme">
<ul> <ul>
<li> <li>
<h3 class="title">Background</h3> <h3 class="title">Background</h3>
<div class="backgrounds"> <div class="backgrounds">
<span :key="theme.class" @click="applyTheme(theme.class)" v-for="theme in themes"> <span :key="theme.class" @click="applyTheme(theme.class)" v-for="theme in themes">
<swatch :active="settings.THEME_CLASS === theme.class" :class="{ vibrant: theme.vibrant }" :color="theme.color" :name="theme.name"></swatch> <swatch :active="settings.THEME_CLASS === theme.class" :class="{ vibrant: theme.vibrant }" :color="theme.color" :name="theme.name"></swatch>
</span> </span>
</div> </div>
</li> </li>
</ul> </ul>
<ul> <ul>
<li> <li>
<h3 class="title">Color</h3> <h3 class="title">Color</h3>
<div class="colors"> <div class="colors">
<span :key="entry.color" @click.prevent="setActiveColor(entry.color, entry.vibrant)" v-for="entry in colors"> <span :key="entry.color" @click.prevent="setActiveColor(entry.color, entry.vibrant)" v-for="entry in colors">
<swatch :active="settings.THEME_COLOR === entry.color.toUpperCase()" :class="{ vibrant: entry.vibrant }" :color="entry.color" :name="entry.name" /> <swatch :active="settings.THEME_COLOR === entry.color.toUpperCase()" :class="{ vibrant: entry.vibrant }" :color="entry.color" :name="entry.name" />
</span> </span>
</div> </div>
</li> </li>
</ul> </ul>
<ul> <ul>
<li> <li>
<h3 class="title">Frames</h3> <h3 class="title">Frames</h3>
<pw-toggle :on="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')"> <pw-toggle :on="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
Multi-color {{ settings.DISABLE_FRAME_COLORS ? "disabled" : "enabled" }} Multi-color {{ settings.DISABLE_FRAME_COLORS ? "disabled" : "enabled" }}
</pw-toggle> </pw-toggle>
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<!-- <!--
PROXY SETTINGS PROXY SETTINGS
-------------- --------------
This feature is currently not finished. This feature is currently not finished.
@@ -57,151 +57,151 @@
</ul> </ul>
</pw-section> </pw-section>
--> -->
</div> </div>
</template> </template>
<script> <script>
import section from "../components/section"; import section from "../components/section";
import swatch from "../components/settings/swatch"; import swatch from "../components/settings/swatch";
import toggle from "../components/toggle"; import toggle from "../components/toggle";
export default { export default {
components: { components: {
'pw-section': section, 'pw-section': section,
'pw-toggle': toggle, 'pw-toggle': toggle,
'swatch': swatch 'swatch': swatch
}, },
data() { data() {
return { return {
// NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss // NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
// You should copy the existing light theme as a template and then just // You should copy the existing light theme as a template and then just
// set the relevant values. // set the relevant values.
themes: [{ themes: [{
"color": "#282a36", "color": "#282a36",
"name": "Dark (Default)", "name": "Dark (Default)",
"class": "" "class": ""
}, },
{ {
"color": "#F6F8FA", "color": "#ebeef5",
"name": "Light", "name": "Light",
"vibrant": true, "vibrant": true,
"class": "light" "class": "light"
} }
], ],
// You can define a new color here! It will simply store the color value. // You can define a new color here! It will simply store the color value.
colors: [ colors: [
// If the color is vibrant, black is used as the active foreground color. // If the color is vibrant, black is used as the active foreground color.
{ {
"color": "#50fa7b", "color": "#50fa7b",
"name": "Green (Default)", "name": "Green (Default)",
"vibrant": true "vibrant": true
}, },
{ {
"color": "#f1fa8c", "color": "#f1fa8c",
"name": "Yellow", "name": "Yellow",
"vibrant": true "vibrant": true
}, },
{ {
"color": "#ff79c6", "color": "#ff79c6",
"name": "Pink", "name": "Pink",
"vibrant": true "vibrant": true
}, },
{ {
"color": "#ff5555", "color": "#ff5555",
"name": "Red", "name": "Red",
"vibrant": false "vibrant": false
}, },
{ {
"color": "#bd93f9", "color": "#bd93f9",
"name": "Purple", "name": "Purple",
"vibrant": true "vibrant": true
}, },
{ {
"color": "#ffb86c", "color": "#ffb86c",
"name": "Orange", "name": "Orange",
"vibrant": true "vibrant": true
}, },
{ {
"color": "#8be9fd", "color": "#8be9fd",
"name": "Cyan", "name": "Cyan",
"vibrant": true "vibrant": true
}, },
{ {
"color": "#57b5f9", "color": "#57b5f9",
"name": "Blue", "name": "Blue",
"vibrant": true "vibrant": false
}, },
], ],
settings: { settings: {
THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '', THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
THEME_COLOR: '', THEME_COLOR: '',
THEME_COLOR_VIBRANT: true, THEME_COLOR_VIBRANT: true,
DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false, DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false,
PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false, PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false,
PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || '', PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || '',
PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || '' PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ''
}
}
},
watch: {
proxySettings: {
deep: true,
handler (value) {
this.applySetting('PROXY_URL', value.url);
this.applySetting('PROXY_KEY', value.key);
}
}
},
methods: {
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.
if (vibrant == null) vibrant = true;
document.documentElement.style.setProperty('--ac-color', color);
document.documentElement.style.setProperty('--act-color', vibrant ? '#282a36' : '#f8f8f2');
this.applySetting('THEME_COLOR', color.toUpperCase());
this.applySetting('THEME_COLOR_VIBRANT', vibrant);
},
getActiveColor() {
// This strips extra spaces and # signs from the strings.
const strip = (str) => str.replace(/#/g, '').replace(/ /g, '');
return `#${strip(window.getComputedStyle(document.documentElement).getPropertyValue('--ac-color')).toUpperCase()}`;
},
applySetting(key, value) {
this.settings[key] = value;
this.$store.commit('postwoman/applySetting', [key, value]);
},
toggleSetting(key) {
this.settings[key] = !this.settings[key];
this.$store.commit('postwoman/applySetting', [key, this.settings[key]]);
}
},
beforeMount() {
this.settings.THEME_COLOR = this.getActiveColor();
},
computed: {
proxySettings () {
return {
url: this.settings.PROXY_URL,
key: this.settings.PROXY_KEY
}
}
} }
}
},
watch: {
proxySettings: {
deep: true,
handler(value) {
this.applySetting('PROXY_URL', value.url);
this.applySetting('PROXY_KEY', value.key);
}
}
},
methods: {
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.
if (vibrant == null) vibrant = true;
document.documentElement.style.setProperty('--ac-color', color);
document.documentElement.style.setProperty('--act-color', vibrant ? '#282a36' : '#f8f8f2');
this.applySetting('THEME_COLOR', color.toUpperCase());
this.applySetting('THEME_COLOR_VIBRANT', vibrant);
},
getActiveColor() {
// This strips extra spaces and # signs from the strings.
const strip = (str) => str.replace(/#/g, '').replace(/ /g, '');
return `#${strip(window.getComputedStyle(document.documentElement).getPropertyValue('--ac-color')).toUpperCase()}`;
},
applySetting(key, value) {
this.settings[key] = value;
this.$store.commit('postwoman/applySetting', [key, value]);
},
toggleSetting(key) {
this.settings[key] = !this.settings[key];
this.$store.commit('postwoman/applySetting', [key, this.settings[key]]);
}
},
beforeMount() {
this.settings.THEME_COLOR = this.getActiveColor();
},
computed: {
proxySettings() {
return {
url: this.settings.PROXY_URL,
key: this.settings.PROXY_KEY
}
}
} }
}
</script> </script>