💄 Fixed light theme colors
This commit is contained in:
Liyas Thomas
@@ -10,8 +10,8 @@
|
||||
--bg-dark-color: #44475a;
|
||||
// Background color
|
||||
--bg-color: #282a36;
|
||||
// Auto-complete color
|
||||
--atc-color: #3C4556;
|
||||
// Auto-complete color
|
||||
--atc-color: #3C4556;
|
||||
// Text color
|
||||
--fg-color: #f8f8f2;
|
||||
|
||||
@@ -25,19 +25,19 @@
|
||||
}
|
||||
|
||||
:root.light {
|
||||
--bg-dark-color: #ffffff;
|
||||
--bg-dark-color: #e1e4eb;
|
||||
// Background color
|
||||
--bg-color: #F6F8FA;
|
||||
// Auto-complete color
|
||||
--atc-color: #F1F1F1;
|
||||
--bg-color: #ebeef5;
|
||||
// Auto-complete color
|
||||
--atc-color: #e1e4eb;
|
||||
// Text color
|
||||
--fg-color: #121212;
|
||||
--fg-color: #5d5d5f;
|
||||
|
||||
// Error color
|
||||
--err-color: invert(#393939, 1);
|
||||
--err-color: invert(#3C4556, 1);
|
||||
|
||||
// Active color
|
||||
--ac-color: #50fa7b;
|
||||
--ac-color: #57b5f9;
|
||||
// Active text color
|
||||
--act-color: #121212;
|
||||
--act-color: #ebeef5;
|
||||
}
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<pw-section class="cyan" label="Theme">
|
||||
<ul>
|
||||
<li>
|
||||
<h3 class="title">Background</h3>
|
||||
<div class="backgrounds">
|
||||
<div class="page">
|
||||
<pw-section class="cyan" label="Theme">
|
||||
<ul>
|
||||
<li>
|
||||
<h3 class="title">Background</h3>
|
||||
<div class="backgrounds">
|
||||
<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>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<h3 class="title">Color</h3>
|
||||
<div class="colors">
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<h3 class="title">Color</h3>
|
||||
<div class="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" />
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<h3 class="title">Frames</h3>
|
||||
<pw-toggle :on="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
|
||||
Multi-color {{ settings.DISABLE_FRAME_COLORS ? "disabled" : "enabled" }}
|
||||
</pw-toggle>
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<h3 class="title">Frames</h3>
|
||||
<pw-toggle :on="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
|
||||
Multi-color {{ settings.DISABLE_FRAME_COLORS ? "disabled" : "enabled" }}
|
||||
</pw-toggle>
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
|
||||
<!--
|
||||
<!--
|
||||
PROXY SETTINGS
|
||||
--------------
|
||||
This feature is currently not finished.
|
||||
@@ -57,151 +57,151 @@
|
||||
</ul>
|
||||
</pw-section>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import section from "../components/section";
|
||||
import swatch from "../components/settings/swatch";
|
||||
import toggle from "../components/toggle";
|
||||
import section from "../components/section";
|
||||
import swatch from "../components/settings/swatch";
|
||||
import toggle from "../components/toggle";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'pw-section': section,
|
||||
'pw-toggle': toggle,
|
||||
'swatch': swatch
|
||||
},
|
||||
export default {
|
||||
components: {
|
||||
'pw-section': section,
|
||||
'pw-toggle': toggle,
|
||||
'swatch': swatch
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
// 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
|
||||
// set the relevant values.
|
||||
themes: [{
|
||||
"color": "#282a36",
|
||||
"name": "Dark (Default)",
|
||||
"class": ""
|
||||
},
|
||||
{
|
||||
"color": "#F6F8FA",
|
||||
"name": "Light",
|
||||
"vibrant": true,
|
||||
"class": "light"
|
||||
}
|
||||
],
|
||||
// You can define a new color here! It will simply store the color value.
|
||||
colors: [
|
||||
// If the color is vibrant, black is used as the active foreground color.
|
||||
{
|
||||
"color": "#50fa7b",
|
||||
"name": "Green (Default)",
|
||||
"vibrant": true
|
||||
},
|
||||
{
|
||||
"color": "#f1fa8c",
|
||||
"name": "Yellow",
|
||||
"vibrant": true
|
||||
},
|
||||
{
|
||||
"color": "#ff79c6",
|
||||
"name": "Pink",
|
||||
"vibrant": true
|
||||
},
|
||||
{
|
||||
"color": "#ff5555",
|
||||
"name": "Red",
|
||||
"vibrant": false
|
||||
},
|
||||
{
|
||||
"color": "#bd93f9",
|
||||
"name": "Purple",
|
||||
"vibrant": true
|
||||
},
|
||||
{
|
||||
"color": "#ffb86c",
|
||||
"name": "Orange",
|
||||
"vibrant": true
|
||||
},
|
||||
{
|
||||
"color": "#8be9fd",
|
||||
"name": "Cyan",
|
||||
"vibrant": true
|
||||
},
|
||||
{
|
||||
"color": "#57b5f9",
|
||||
"name": "Blue",
|
||||
"vibrant": true
|
||||
},
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
// 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
|
||||
// set the relevant values.
|
||||
themes: [{
|
||||
"color": "#282a36",
|
||||
"name": "Dark (Default)",
|
||||
"class": ""
|
||||
},
|
||||
{
|
||||
"color": "#ebeef5",
|
||||
"name": "Light",
|
||||
"vibrant": true,
|
||||
"class": "light"
|
||||
}
|
||||
],
|
||||
// You can define a new color here! It will simply store the color value.
|
||||
colors: [
|
||||
// If the color is vibrant, black is used as the active foreground color.
|
||||
{
|
||||
"color": "#50fa7b",
|
||||
"name": "Green (Default)",
|
||||
"vibrant": true
|
||||
},
|
||||
{
|
||||
"color": "#f1fa8c",
|
||||
"name": "Yellow",
|
||||
"vibrant": true
|
||||
},
|
||||
{
|
||||
"color": "#ff79c6",
|
||||
"name": "Pink",
|
||||
"vibrant": true
|
||||
},
|
||||
{
|
||||
"color": "#ff5555",
|
||||
"name": "Red",
|
||||
"vibrant": false
|
||||
},
|
||||
{
|
||||
"color": "#bd93f9",
|
||||
"name": "Purple",
|
||||
"vibrant": true
|
||||
},
|
||||
{
|
||||
"color": "#ffb86c",
|
||||
"name": "Orange",
|
||||
"vibrant": true
|
||||
},
|
||||
{
|
||||
"color": "#8be9fd",
|
||||
"name": "Cyan",
|
||||
"vibrant": true
|
||||
},
|
||||
{
|
||||
"color": "#57b5f9",
|
||||
"name": "Blue",
|
||||
"vibrant": false
|
||||
},
|
||||
],
|
||||
|
||||
settings: {
|
||||
THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
|
||||
THEME_COLOR: '',
|
||||
THEME_COLOR_VIBRANT: true,
|
||||
settings: {
|
||||
THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
|
||||
THEME_COLOR: '',
|
||||
THEME_COLOR_VIBRANT: true,
|
||||
|
||||
DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false,
|
||||
PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false,
|
||||
PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || '',
|
||||
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
|
||||
}
|
||||
}
|
||||
DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false,
|
||||
PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false,
|
||||
PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || '',
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user