From 96804d42f0f6aa6af85295933af6fd267b19e473 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 7 Oct 2018 19:59:22 +0300
Subject: [PATCH] Some themeing is working!!
---
src/App.scss | 56 ++++-----
src/_variables.scss | 7 +-
src/components/chat_panel/chat_panel.vue | 4 +-
src/components/color_input/color_input.vue | 84 +++++++++++++
.../notifications/notifications.scss | 7 +-
.../opacity_input/opacity_input.vue | 75 ++++++++++++
.../post_status_form/post_status_form.vue | 12 +-
src/components/settings/settings.vue | 2 +-
src/components/status/status.vue | 4 +-
.../style_switcher/style_switcher.js | 113 +++++++++++++-----
.../style_switcher/style_switcher.vue | 40 ++++---
src/components/tab_switcher/tab_switcher.scss | 8 +-
src/components/timeline/timeline.vue | 10 +-
.../user_card_content/user_card_content.vue | 16 +--
src/services/style_setter/style_setter.js | 28 +++--
15 files changed, 346 insertions(+), 120 deletions(-)
create mode 100644 src/components/color_input/color_input.vue
create mode 100644 src/components/opacity_input/opacity_input.vue
diff --git a/src/App.scss b/src/App.scss
index 1119caf2..c91b6a61 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -36,8 +36,8 @@ body {
font-family: sans-serif;
font-size: 14px;
margin: 0;
- color: $fallback--fg;
- color: var(--fg, $fallback--fg);
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
max-width: 100vw;
overflow-x: hidden;
}
@@ -50,10 +50,10 @@ a {
button {
user-select: none;
- color: $fallback--fg;
- color: var(--btnText, $fallback--fg);
- background-color: $fallback--btn;
- background-color: var(--btn, $fallback--btn);
+ color: $fallback--text;
+ color: var(--btnText, $fallback--text);
+ background-color: $fallback--fg;
+ background-color: var(--btn, $fallback--fg);
border: none;
border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius);
@@ -102,10 +102,10 @@ input, textarea, .select {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-top: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 2px black inset;
- background-color: $fallback--input;
- background-color: var(--input, $fallback--input);
- color: $fallback--lightFg;
- color: var(--lightFg, $fallback--lightFg);
+ background-color: $fallback--fg;
+ background-color: var(--input, $fallback--fg);
+ color: $fallback--lightText;
+ color: var(--inputText, $fallback--lightText);
font-family: sans-serif;
font-size: 14px;
padding: 8px 7px;
@@ -122,8 +122,8 @@ input, textarea, .select {
bottom: 0;
right: 5px;
height: 100%;
- color: $fallback--fg;
- color: var(--fg, $fallback--fg);
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
line-height: 29px;
z-index: 0;
pointer-events: none;
@@ -136,8 +136,8 @@ input, textarea, .select {
background: transparent;
border: none;
margin: 0;
- color: $fallback--fg;
- color: var(--fg, $fallback--fg);
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
padding: 4px 2em 3px 3px;
width: 100%;
z-index: 1;
@@ -149,8 +149,8 @@ input, textarea, .select {
&[type=checkbox] {
display: none;
&:checked + label::before {
- color: $fallback--fg;
- color: var(--fg, $fallback--fg);
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
}
&:disabled,
{
@@ -172,8 +172,8 @@ input, textarea, .select {
border-top: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 2px black inset;
margin-right: .5em;
- background-color: $fallback--input;
- background-color: var(--input, $fallback--input);
+ background-color: $fallback--fg;
+ background-color: var(--input, $fallback--fg);
vertical-align: top;
text-align: center;
line-height: 1.1em;
@@ -187,8 +187,8 @@ input, textarea, .select {
}
option {
- color: $fallback--fg;
- color: var(--fg, $fallback--fg);
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
}
@@ -279,9 +279,9 @@ nav {
margin: auto;
height: 50px;
- a i {
+ a, a i {
color: $fallback--link;
- color: var(--link, $fallback--link);
+ color: var(--topBarLink, $fallback--link);
}
}
}
@@ -331,8 +331,8 @@ main-router {
text-align: left;
line-height: 28px;
color: var(--panelText);
- background-color: $fallback--btn;
- background-color: var(--panel, $fallback--btn);
+ background-color: $fallback--fg;
+ background-color: var(--panel, $fallback--fg);
align-items: baseline;
.title {
@@ -389,8 +389,8 @@ main-router {
nav {
z-index: 1000;
color: var(--topBarText);
- background-color: $fallback--btn;
- background-color: var(--topBar, $fallback--btn);
+ background-color: $fallback--fg;
+ background-color: var(--topBar, $fallback--fg);
color: $fallback--faint;
color: var(--faint, $fallback--faint);
box-shadow: 0px 0px 4px rgba(0,0,0,.6);
@@ -518,8 +518,8 @@ nav {
cursor: pointer;
.selected {
- color: $fallback--lightFg;
- color: var(--lightFg, $fallback--lightFg);
+ color: $fallback--lightText;
+ color: var(--lightText, $fallback--lightText);
}
.text-format {
diff --git a/src/_variables.scss b/src/_variables.scss
index b5222a6a..0f73e929 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -3,14 +3,13 @@ $main-background: white;
$darkened-background: whitesmoke;
$fallback--bg: #121a24;
-$fallback--btn: #182230;
-$fallback--input: #182230;
+$fallback--fg: #182230;
$fallback--faint: rgba(185, 185, 186, .5);
-$fallback--fg: #b9b9ba;
+$fallback--text: #b9b9ba;
$fallback--link: #d8a070;
$fallback--icon: #666;
$fallback--lightBg: rgb(21, 30, 42);
-$fallback--lightFg: #b9b9ba;
+$fallback--lightText: #b9b9ba;
$fallback--border: #222;
$fallback--cRed: #ff0000;
$fallback--cBlue: #0095ff;
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index 30070d3e..f174319a 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -55,8 +55,8 @@
.chat-heading {
cursor: pointer;
.icon-comment-empty {
- color: $fallback--fg;
- color: var(--fg, $fallback--fg);
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
}
}
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
new file mode 100644
index 00000000..49d9bed7
--- /dev/null
+++ b/src/components/color_input/color_input.vue
@@ -0,0 +1,84 @@
+<template>
+<div class="color-control" :class="{ disabled: !present }">
+ <label :for="name" class="label">
+ {{label}}
+ </label>
+ <input
+ v-if="typeof fallback !== 'undefined'"
+ class="opt"
+ :id="name + '-o'"
+ type="checkbox"
+ :checked="present"
+ @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
+ >
+ <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
+ <input
+ :id="name"
+ class="color-input"
+ type="color"
+ :value="value || fallback"
+ :disabled="!present"
+ @input="$emit('input', $event.target.value)"
+ >
+ <input
+ :id="name + '-t'"
+ class="text-input"
+ type="text"
+ :value="value || fallback"
+ :disabled="!present"
+ @input="$emit('input', $event.target.value)"
+ >
+</div>
+</template>
+
+<script>
+export default {
+ props: [
+ 'name', 'label', 'value', 'fallback'
+ ],
+ computed: {
+ present () {
+ return typeof this.value !== 'undefined'
+ }
+ }
+}
+</script>
+
+<style lang="scss">
+.color-control {
+ display: flex;
+
+ &.disabled *:not(.opt-l){
+ opacity: .5
+ }
+
+ .label {
+ flex: 2;
+ min-width: 7em;
+ }
+
+ .opt-l {
+ align-self: center;
+ flex: 0;
+ &::before {
+ width: 14px;
+ height: 14px;
+ }
+ }
+
+ .text-input {
+ max-width: 7em;
+ flex: 1;
+ }
+
+ .color-input {
+ flex: 0;
+ padding: 1px;
+ cursor: pointer;
+ height: 100%;
+ max-height: 29px;
+ min-width: 2em;
+ border: none;
+ }
+}
+</style>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index a137ccd5..a98c2549 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -22,8 +22,8 @@
}
.loadmore-error {
- color: $fallback--fg;
- color: var(--fg, $fallback--fg);
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
}
.unseen {
@@ -90,6 +90,9 @@
padding: 0.25em 0;
color: $fallback--faint;
color: var(--faint, $fallback--faint);
+ a {
+ color: var(--faintLink);
+ }
}
padding: 0;
.media-body {
diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue
new file mode 100644
index 00000000..cfe6de21
--- /dev/null
+++ b/src/components/opacity_input/opacity_input.vue
@@ -0,0 +1,75 @@
+<template>
+<div class="opacity-control" :class="{ disabled: !present }">
+ <label :for="name" class="label">
+ {{$t('settings.opacity')}}
+ </label>
+ <input
+ v-if="typeof fallback !== 'undefined'"
+ class="opt"
+ :id="name + '-o'"
+ type="checkbox"
+ :checked="present"
+ @input="$emit('input', !present ? fallback : undefined)"
+ >
+ <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
+ <input
+ :id="name"
+ class="input-range"
+ type="range"
+ :value="value || fallback"
+ :disabled="!present"
+ @input="$emit('input', $event.target.value)"
+ max="1"
+ min="0"
+ step=".05">
+</div>
+</template>
+
+<script>
+export default {
+ props: [
+ 'name', 'value', 'fallback'
+ ],
+ computed: {
+ present () {
+ return typeof this.value !== 'undefined'
+ }
+ }
+}
+</script>
+
+<style lang="scss">
+.opacity-control {
+ display: flex;
+
+ &.disabled *:not(.opt-l) {
+ opacity: .5
+ }
+
+ .opt-l {
+ align-self: center;
+ line-height: 0;
+ &::before {
+ width: 14px;
+ height: 14px;
+ }
+ }
+
+ .label {
+ flex: 2;
+ min-width: 7em;
+ }
+
+ .input-range {
+ align-self: center;
+ background: none;
+ border: none;
+ padding: 0;
+ margin: 0;
+ height: auto;
+ box-shadow: none;
+ min-width: 9em;
+ flex: 1;
+ }
+}
+</style>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 42e9c65c..4514e79f 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -153,8 +153,8 @@
padding-bottom: 0;
margin-left: $fallback--attachmentRadius;
margin-left: var(--attachmentRadius, $fallback--attachmentRadius);
- background-color: $fallback--btn;
- background-color: var(--btn, $fallback--btn);
+ background-color: $fallback--fg;
+ background-color: var(--fg, $fallback--fg);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
@@ -261,8 +261,8 @@
min-width: 75%;
background: $fallback--bg;
background: var(--bg, $fallback--bg);
- color: $fallback--lightFg;
- color: var(--lightFg, $fallback--lightFg);
+ color: $fallback--lightText;
+ color: var(--lightText, $fallback--lightText);
}
.autocomplete {
@@ -291,8 +291,8 @@
}
&.highlighted {
- background-color: $fallback--btn;
- background-color: var(--btn, $fallback--btn);
+ background-color: $fallback--fg;
+ background-color: var(--fg, $fallback--fg);
}
}
}
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index eebb2cb7..990d1f0d 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -159,7 +159,7 @@
@import '../../_variables.scss';
.setting-item {
- border-bottom: 2px solid var(--btn, $fallback--btn);
+ border-bottom: 2px solid var(--fg, $fallback--fg);
margin: 1em 1em 1.4em;
padding-bottom: 1.4em;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index eb521280..57a007d9 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -284,8 +284,8 @@
margin-left: 0.2em;
}
a:hover i {
- color: $fallback--fg;
- color: var(--fg, $fallback--fg);
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
}
}
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index a1c44be3..203ca18a 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -31,6 +31,7 @@ export default {
panelColorLocal: undefined,
panelTextColorLocal: undefined,
+ panelFaintColorLocal: undefined,
panelOpacityLocal: undefined,
topBarColorLocal: undefined,
@@ -40,10 +41,17 @@ export default {
alertOpacityLocal: undefined,
- redColorLocal: '',
- blueColorLocal: '',
- greenColorLocal: '',
- orangeColorLocal: '',
+ borderColorLocal: undefined,
+ borderOpacityLocal: undefined,
+
+ faintColorLocal: undefined,
+ faintOpacityLocal: undefined,
+ faintLinkColorLocal: undefined,
+
+ cRedColorLocal: '',
+ cBlueColorLocal: '',
+ cGreenColorLocal: '',
+ cOrangeColorLocal: '',
btnRadiusLocal: '',
inputRadiusLocal: '',
@@ -74,16 +82,35 @@ export default {
return {
colors: {
bg: this.bgColorLocal,
- fg: this.fgColorLocal,
text: this.textColorLocal,
- panel: this.panelColorLocal,
- topBar: this.topBarColorLocal,
- btn: this.btnColorLocal,
link: this.linkColorLocal,
- cRed: this.redColorLocal,
- cBlue: this.blueColorLocal,
- cGreen: this.greenColorLocal,
- cOrange: this.orangeColorLocal
+
+ fg: this.fgColorLocal,
+ fgText: this.fgTextColorLocal,
+ fgLink: this.fgLinkColorLocal,
+
+ panel: this.panelColorLocal,
+ panelText: this.panelTextColorLocal,
+ panelFaint: this.panelFaintColorLocal,
+
+ input: this.inputColorLocal,
+ inputText: this.inputTextColorLocal,
+
+ topBar: this.topBarColorLocal,
+ topBarText: this.topBarTextColorLocal,
+ topBarLink: this.topBarLinkColorLocal,
+
+ btn: this.btnColorLocal,
+ btnText: this.btnTextColorLocal,
+
+ faint: this.faintColorLocal,
+ faintLink: this.faintLinkColorLocal,
+ border: this.borderColorLocal,
+
+ cRed: this.cRedColorLocal,
+ cBlue: this.cBlueColorLocal,
+ cGreen: this.cGreenColorLocal,
+ cOrange: this.cOrangeColorLocal
},
radii: {
btnRadius: this.btnRadiusLocal,
@@ -197,12 +224,12 @@ export default {
},
clearV1 () {
+ this.bgOpacityLocal = undefined
this.fgOpacityLocal = undefined
this.fgTextColorLocal = undefined
this.fgLinkColorLocal = undefined
- this.panelColorLocal = undefined
- this.topBarColorLocal = undefined
+ this.btnColorLocal = undefined
this.btnTextColorLocal = undefined
this.btnOpacityLocal = undefined
@@ -216,7 +243,17 @@ export default {
this.topBarColorLocal = undefined
this.topBarTextColorLocal = undefined
+ this.topBarLinkColorLocal = undefined
this.topBarOpacityLocal = undefined
+
+ this.alertOpacityLocal = undefined
+
+ this.borderColorLocal = undefined
+ this.borderOpacityLocal = undefined
+
+ this.faintColorLocal = undefined
+ this.faintOpacityLocal = undefined
+ this.faintLinkColorLocal = undefined
},
/**
@@ -228,22 +265,42 @@ export default {
const colors = input.colors || input
const radii = input.radii || input
- this.bgColorLocal = rgb2hex(colors.bg)
- this.fgColorLocal = rgb2hex(colors.fg)
- this.textColorLocal = rgb2hex(colors.text)
- this.linkColorLocal = rgb2hex(colors.link)
-
- if (version === 1) {
- this.clearV1()
+ if (version === 0) {
+ if (input.version) version = input.version
+ // Old v1 naming: fg is text, btn is foreground
+ if (typeof colors.text === 'undefined' && typeof colors.fg !== 'undefined') {
+ version = 1
+ }
+ // New v2 naming: text is text, fg is foreground
+ if (typeof colors.text !== 'undefined' && typeof colors.fg !== 'undefined') {
+ version = 2
+ }
}
- this.panelColorLocal = rgb2hex(colors.panel)
- this.topBarColorLocal = rgb2hex(colors.topBar)
+ console.log('BENIS')
+ console.log(version)
+ // Stuff that differs between V1 and V2
+ if (version === 1) {
+ console.log(colors)
+ this.fgColorLocal = rgb2hex(colors.btn)
+ this.textColorLocal = rgb2hex(colors.fg)
+ }
- this.redColorLocal = rgb2hex(colors.cRed)
- this.blueColorLocal = rgb2hex(colors.cBlue)
- this.greenColorLocal = rgb2hex(colors.cGreen)
- this.orangeColorLocal = rgb2hex(colors.cOrange)
+ const keys = new Set(version !== 1 ? Object.keys(colors) : [])
+ if (version === 1) {
+ // V1 ignores the rest
+ this.clearV1()
+ keys
+ .add('bg')
+ .add('link')
+ .add('cRed')
+ .add('cBlue')
+ .add('cGreen')
+ .add('cOrange')
+ }
+ keys.forEach(key => {
+ this[key + 'ColorLocal'] = rgb2hex(colors[key])
+ })
this.btnRadiusLocal = radii.btnRadius || 4
this.inputRadiusLocal = radii.inputRadius || 4
@@ -259,7 +316,7 @@ export default {
if (this.selectedVersion === 1) {
this.clearV1()
this.bgColorLocal = this.selected[1]
- this.btnColorLocal = this.selected[2]
+ this.fgColorLocal = this.selected[2]
this.textColorLocal = this.selected[3]
this.linkColorLocal = this.selected[4]
this.redColorLocal = this.selected[5]
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index cf1fac92..7ddc2d1c 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -58,16 +58,16 @@
<div class="color-item">
<ColorInput name="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/>
<OpacityInput name="fgOpacity" v-model="fgOpacityLocal" :fallback="bgOpacityLocal || 1"/>
- <ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.btnText"/>
- <ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="linkColorLocal"/>
+ <ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.fgText"/>
+ <ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="previewTheme.colors.fgLink"/>
</div>
<div class="color-item">
- <ColorInput name="cRedColor" v-model="redColorLocal" :label="$t('settings.cRed')"/>
- <ColorInput name="cBlueColor" v-model="blueColorLocal" :label="$t('settings.cBlue')"/>
+ <ColorInput name="cRedColor" v-model="cRedColorLocal" :label="$t('settings.cRed')"/>
+ <ColorInput name="cBlueColor" v-model="cBlueColorLocal" :label="$t('settings.cBlue')"/>
</div>
<div class="color-item">
- <ColorInput name="cGreenColor" v-model="greenColorLocal" :label="$t('settings.cGreen')"/>
- <ColorInput name="cOrangeColor" v-model="orangeColorLocal" :label="$t('settings.cOrange')"/>
+ <ColorInput name="cGreenColor" v-model="cGreenColorLocal" :label="$t('settings.cGreen')"/>
+ <ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/>
</div>
<div class="color-item wide">
<h4>Alert opacity</h4>
@@ -79,38 +79,40 @@
<div>
<div class="color-item">
<h4>Panel header</h4>
- <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
+ <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="panelOpacity" v-model="panelOpacityLocal" fallback="1"/>
- <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="textColorLocal" :label="$t('settings.links')"/>
+ <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.links')"/>
+ <ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.faint')"/>
</div>
<div class="color-item">
<h4>Top bar</h4>
- <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
+ <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="topBarOpacity" v-model="topBarOpacityLocal" fallback="1"/>
- <ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
- <ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="linkColorLocal" :label="$t('settings.links')"/>
+ <ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="previewTheme.colors.topBarText" :label="$t('settings.text')"/>
+ <ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="previewTheme.colors.topBarLink" :label="$t('settings.links')"/>
</div>
<div class="color-item">
<h4>Inputs</h4>
- <ColorInput name="inputColor" v-model="inputColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
+ <ColorInput name="inputColor" v-model="inputColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="inputOpacity" v-model="inputOpacityLocal" fallback="0.5"/>
- <ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
+ <ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="previewTheme.colors.inputText" :label="$t('settings.text')"/>
</div>
<div class="color-item">
<h4>Buttons</h4>
- <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
+ <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
- <ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
+ <ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="previewTheme.colors.btnText" :label="$t('settings.text')"/>
</div>
<div class="color-item">
<h4>Borders</h4>
- <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" label="Color"/>
- <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
+ <ColorInput name="borderColor" v-model="borderColorLocal" :fallback="previewTheme.colors.border" label="Color"/>
+ <OpacityInput name="borderOpacity" v-model="borderOpacityLocal" fallback="0.5"/>
</div>
<div class="color-item">
<h4>Faint text</h4>
- <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" :label="$t('settings.text')"/>
- <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
+ <ColorInput name="faintColor" v-model="faintColorLocal" :fallback="previewTheme.colors.faint" :label="$t('settings.text')"/>
+ <OpacityInput name="faintOpacity" v-model="faintOpacityLocal" fallback="0.5"/>
+ <ColorInput name="faintLinkColor" v-model="faintLinkColorLocal" :fallback="previewTheme.colors.faintLink" :label="$t('settings.link')"/>
</div>
</div>
</div>
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 374a19c5..578caec2 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -17,8 +17,8 @@
.tab, &::after, &::before {
border-bottom: 1px solid;
- border-bottom-color: $fallback--btn;
- border-bottom-color: var(--btn, $fallback--btn);
+ border-bottom-color: $fallback--fg;
+ border-bottom-color: var(--fg, $fallback--fg);
}
.tab {
@@ -28,8 +28,8 @@
&:not(.active) {
border-bottom: 1px solid;
- border-bottom-color: $fallback--btn;
- border-bottom-color: var(--btn, $fallback--btn);
+ border-bottom-color: $fallback--fg;
+ border-bottom-color: var(--fg, $fallback--fg);
z-index: 4;
}
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 2dd4376a..77a9a2af 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -61,12 +61,12 @@
opacity: 0.8;
background-color: transparent;
color: $fallback--faint;
- color: var(--faint, $fallback--faint);
+ color: var(--panelFaint, $fallback--faint);
}
.loadmore-error {
- color: $fallback--fg;
- color: var(--fg, $fallback--fg);
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
}
}
@@ -79,7 +79,7 @@
border-color: var(--border, $fallback--border);
padding: 10px;
z-index: 1;
- background-color: $fallback--btn;
- background-color: var(--btn, $fallback--btn);
+ background-color: $fallback--fg;
+ background-color: var(--fg, $fallback--fg);
}
</style>
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 59358040..f1b54fad 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -138,8 +138,8 @@
}
.user-info {
- color: $fallback--lightFg;
- color: var(--lightFg, $fallback--lightFg);
+ color: $fallback--lightText;
+ color: var(--lightText, $fallback--lightText);
padding: 0 16px;
.container {
@@ -173,8 +173,8 @@
}
.usersettings {
- color: $fallback--lightFg;
- color: var(--lightFg, $fallback--lightFg);
+ color: $fallback--lightText;
+ color: var(--lightText, $fallback--lightText);
opacity: .8;
}
@@ -193,8 +193,8 @@
}
.user-screen-name {
- color: $fallback--lightFg;
- color: var(--lightFg, $fallback--lightFg);
+ color: $fallback--lightText;
+ color: var(--lightText, $fallback--lightText);
display: inline-block;
font-weight: light;
font-size: 15px;
@@ -269,8 +269,8 @@
padding: .5em 1.5em 0em 1.5em;
text-align: center;
justify-content: space-between;
- color: $fallback--lightFg;
- color: var(--lightFg, $fallback--lightFg);
+ color: $fallback--lightText;
+ color: var(--lightText, $fallback--lightText);
&.clickable {
.user-count {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index cfa41b11..cc408933 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -112,27 +112,33 @@ const generatePreset = (input) => {
colors.text = col.text
colors.lightText = colors.text
+ colors.link = col.link
+ colors.border = col.border || col.fg
+ colors.faint = col.faint || col.text
colors.bg = col.bg
colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb
colors.fg = col.fg
- colors.fgText = getTextColor(colors.fg, colors.text)
+ colors.fgText = col.fgText || getTextColor(colors.fg, colors.text)
+ colors.fgLink = col.fgLink || getTextColor(colors.fg, colors.link)
colors.btn = col.btn || col.fg
- colors.btnText = getTextColor(colors.btn, colors.text)
+ colors.btnText = col.btnText || getTextColor(colors.btn, colors.fgText)
+
+ colors.input = col.input || col.fg
+ colors.inputText = col.inputText || getTextColor(colors.input, colors.fgText)
colors.panel = col.panel || col.fg
- colors.panelText = getTextColor(colors.panel, colors.text)
+ colors.panelText = col.panelText || getTextColor(colors.panel, colors.fgText)
+ colors.panelFaint = col.panelFaint || getTextColor(colors.panel, colors.faint)
colors.topBar = col.topBar || col.fg
- colors.topBarText = getTextColor(colors.topBar, colors.text)
+ colors.topBarText = col.topBarText || getTextColor(colors.topBar, colors.fgText)
+ colors.topBarLink = col.topBarLink || getTextColor(colors.topBar, colors.fgLink)
- colors.input = col.input || Object.assign({ a: 0.5 }, col.btn)
- colors.border = col.btn
- colors.faint = col.faint || Object.assign({ a: 0.5 }, col.text)
+ colors.faintLink = col.faintLink || col.link
- colors.link = col.link
colors.icon = mixrgb(colors.bg, colors.text)
colors.cBlue = col.cBlue
@@ -153,7 +159,7 @@ const generatePreset = (input) => {
colorRules: Object.entries(htmlColors).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';'),
radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';'),
theme: {
- colors,
+ colors: htmlColors,
radii
}
}
@@ -165,7 +171,7 @@ const setPreset = (val, commit) => {
.then((themes) => {
const theme = themes[val] ? themes[val] : themes['pleroma-dark']
const bgRgb = hex2rgb(theme[1])
- const btnRgb = hex2rgb(theme[2])
+ const fgRgb = hex2rgb(theme[2])
const textRgb = hex2rgb(theme[3])
const linkRgb = hex2rgb(theme[4])
@@ -176,7 +182,7 @@ const setPreset = (val, commit) => {
const colors = {
bg: bgRgb,
- btn: btnRgb,
+ fg: fgRgb,
text: textRgb,
link: linkRgb,
cRed: cRedRgb,