No OneTemporary
Actions

Size

81 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/App.scss b/src/App.scss
	index 3b03a76197..b6d4943a90 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,885 +1,886 @@
	@import './_variables.scss';

	#app {
	min-height: 100vh;
	max-width: 100%;
	overflow: hidden;
	}

	.app-bg-wrapper {
	position: fixed;
	z-index: -1;
	height: 100%;
	left: 0;
	right: -20px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0 50%;
	}

	i[class^='icon-'] {
	user-select: none;
	}

	h4 {
	margin: 0;
	}

	#content {
	box-sizing: border-box;
	padding-top: 60px;
	margin: auto;
	min-height: 100vh;
	max-width: 980px;
	background-color: rgba(0,0,0,0.15);
	+ background-color: var(--underlay, rgba(0,0,0,0.15));
	align-content: flex-start;
	}

	.text-center {
	text-align: center;
	}

	html {
	font-size: 14px;
	}

	body {
	font-family: sans-serif;
	font-family: var(--interfaceFont, sans-serif);
	margin: 0;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	max-width: 100vw;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	&.hidden {
	display: none;
	}
	}

	a {
	text-decoration: none;
	color: $fallback--link;
	color: var(--link, $fallback--link);
	}

	button {
	user-select: none;
	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);
	cursor: pointer;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
	box-shadow: var(--buttonShadow);
	font-size: 14px;
	font-family: sans-serif;
	font-family: var(--interfaceFont, sans-serif);

	i[class*=icon-] {
	color: $fallback--text;
	color: var(--btnText, $fallback--text);
	}

	&::-moz-focus-inner {
	border: none;
	}

	&:hover {
	box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
	box-shadow: var(--buttonHoverShadow);
	}

	&:active {
	box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
	box-shadow: var(--buttonPressedShadow);
	}

	&:disabled {
	cursor: not-allowed;
	opacity: 0.5;
	}

	&.pressed {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg)
	}

	&.danger {
	// TODO: add better color variable
	color: $fallback--text;
	color: var(--alertErrorPanelText, $fallback--text);
	background-color: $fallback--alertError;
	background-color: var(--alertError, $fallback--alertError);
	}
	}

	label.select {
	padding: 0;

	}

	input, textarea, .select {
	border: none;
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);
	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 0px 2px 0px rgba(0, 0, 0, 1) inset;
	box-shadow: var(--inputShadow);
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	color: $fallback--lightText;
	color: var(--inputText, $fallback--lightText);
	font-family: sans-serif;
	font-family: var(--inputFont, sans-serif);
	font-size: 14px;
	margin: 0;
	padding: 8px .5em;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	height: 28px;
	line-height: 16px;
	hyphens: none;

	&:disabled, &[disabled=disabled] {
	cursor: not-allowed;
	opacity: 0.5;
	}

	.icon-down-open {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 5px;
	height: 100%;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	line-height: 28px;
	z-index: 0;
	pointer-events: none;
	}

	select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	color: $fallback--text;
	color: var(--inputText, --text, $fallback--text);
	margin: 0;
	padding: 0 2em 0 .2em;
	font-family: sans-serif;
	font-family: var(--inputFont, sans-serif);
	font-size: 14px;
	width: 100%;
	z-index: 1;
	height: 28px;
	line-height: 16px;
	}

	&[type=range] {
	background: none;
	border: none;
	margin: 0;
	box-shadow: none;
	flex: 1;
	}

	&[type=radio] {
	display: none;
	&:checked + label::before {
	box-shadow: 0px 0px 2px black inset, 0px 0px 0px 4px $fallback--fg inset;
	box-shadow: var(--inputShadow), 0px 0px 0px 4px var(--fg, $fallback--fg) inset;
	background-color: var(--accent, $fallback--link);
	}
	&:disabled {
	&,
	& + label,
	& + label::before {
	opacity: .5;
	}
	}
	+ label::before {
	flex-shrink: 0;
	display: inline-block;
	content: '';
	transition: box-shadow 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: 100%; // Radio buttons should always be circle
	box-shadow: 0px 0px 2px black inset;
	box-shadow: var(--inputShadow);
	margin-right: .5em;
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	vertical-align: top;
	text-align: center;
	line-height: 1.1em;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	box-sizing: border-box;
	}
	}

	&[type=checkbox] {
	display: none;
	&:checked + label::before {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	&:disabled {
	&,
	& + label,
	& + label::before {
	opacity: .5;
	}
	}
	+ label::before {
	flex-shrink: 0;
	display: inline-block;
	content: '✔';
	transition: color 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: $fallback--checkboxRadius;
	border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
	box-shadow: 0px 0px 2px black inset;
	box-shadow: var(--inputShadow);
	margin-right: .5em;
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	vertical-align: top;
	text-align: center;
	line-height: 1.1em;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	box-sizing: border-box;
	}
	}
	}

	option {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	}

	.hide-number-spinner {
	-moz-appearance: textfield;
	&[type=number]::-webkit-inner-spin-button,
	&[type=number]::-webkit-outer-spin-button {
	opacity: 0;
	display: none;
	}
	}

	i[class*=icon-] {
	color: $fallback--icon;
	color: var(--icon, $fallback--icon)
	}

	.btn-block {
	display: block;
	width: 100%;
	}

	.btn-group {
	position: relative;
	display: inline-flex;
	vertical-align: middle;

	button {
	position: relative;
	flex: 1 1 auto;

	&:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	}

	&:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	}
	}
	}

	.container {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0 10px 0 10px;
	}

	.item {
	flex: 1;
	line-height: 50px;
	height: 50px;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;

	.nav-icon {
	margin-left: 0.4em;
	}

	&.right {
	justify-content: flex-end;
	}
	}

	.auto-size {
	flex: 1
	}

	.nav-bar {
	padding: 0;
	width: 100%;
	align-items: center;
	position: fixed;
	height: 50px;
	box-sizing: border-box;

	.logo {
	display: flex;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	align-items: stretch;
	justify-content: center;
	flex: 0 0 auto;
	z-index: -1;
	transition: opacity;
	transition-timing-function: ease-out;
	transition-duration: 100ms;

	.mask {
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: $fallback--fg;
	background-color: var(--topBarText, $fallback--fg);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}

	img {
	height: 100%;
	object-fit: contain;
	display: block;
	flex: 0;
	}
	}

	.inner-nav {
	position: relative;
	margin: auto;
	box-sizing: border-box;
	padding-left: 10px;
	padding-right: 10px;
	display: flex;
	align-items: center;
	flex-basis: 970px;
	height: 50px;

	a, a i {
	color: $fallback--link;
	color: var(--topBarLink, $fallback--link);
	}
	}
	}

	main-router {
	flex: 1;
	}

	.status.compact {
	color: rgba(0, 0, 0, 0.42);
	font-weight: 300;

	p {
	margin: 0;
	font-size: 0.8em
	}
	}

	/* Panel */

	.panel {
	display: flex;
	position: relative;

	flex-direction: column;
	margin: 0.5em;

	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);

	&::after, & {
	border-radius: $fallback--panelRadius;
	border-radius: var(--panelRadius, $fallback--panelRadius);
	}

	&::after {
	content: '';
	position: absolute;

	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	pointer-events: none;

	box-shadow: 1px 1px 4px rgba(0,0,0,.6);
	box-shadow: var(--panelShadow);
	}
	}

	.panel-body:empty::before {
	content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
	display: block;
	margin: 1em;
	text-align: center;
	}

	.panel-heading {
	display: flex;
	flex: none;
	border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
	border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
	background-size: cover;
	padding: .6em .6em;
	text-align: left;
	line-height: 28px;
	color: var(--panelText);
	background-color: $fallback--fg;
	background-color: var(--panel, $fallback--fg);
	align-items: baseline;
	box-shadow: var(--panelHeaderShadow);

	.title {
	flex: 1 0 auto;
	font-size: 1.3em;
	}

	.faint {
	background-color: transparent;
	color: $fallback--faint;
	color: var(--panelFaint, $fallback--faint);
	}

	.alert {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-x: hidden;
	}

	button {
	flex-shrink: 0;
	}

	button, .alert {
	// height: 100%;
	line-height: 21px;
	min-height: 0;
	box-sizing: border-box;
	margin: 0;
	margin-left: .25em;
	min-width: 1px;
	align-self: stretch;
	}

	a {
	color: $fallback--link;
	color: var(--panelLink, $fallback--link)
	}
	}

	.panel-heading.stub {
	border-radius: $fallback--panelRadius;
	border-radius: var(--panelRadius, $fallback--panelRadius);
	}

	.panel-footer {
	border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);


	.faint {
	color: $fallback--faint;
	color: var(--panelFaint, $fallback--faint);
	}

	a {
	color: $fallback--link;
	color: var(--panelLink, $fallback--link)
	}
	}

	.panel-body > p {
	line-height: 18px;
	padding: 1em;
	margin: 0;
	}

	.container > * {
	min-width: 0px;
	}

	.fa {
	color: grey;
	}

	nav {
	z-index: 1000;
	color: var(--topBarText);
	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);
	box-shadow: var(--topBarShadow);
	}

	.fade-enter-active, .fade-leave-active {
	transition: opacity .2s
	}
	.fade-enter, .fade-leave-active {
	opacity: 0
	}

	.main {
	flex-basis: 50%;
	flex-grow: 1;
	flex-shrink: 1;
	}

	.sidebar-bounds {
	flex: 0;
	flex-basis: 35%;
	}

	.sidebar-flexer {
	flex: 1;
	flex-basis: 345px;
	width: 365px;
	}

	.mobile-shown {
	display: none;
	}

	@media all and (min-width: 800px) {
	body {
	overflow-y: scroll;
	}

	.sidebar-bounds {
	overflow: hidden;
	max-height: 100vh;
	width: 345px;
	position: fixed;
	margin-top: -10px;

	.sidebar-scroller {
	height: 96vh;
	width: 365px;
	padding-top: 10px;
	padding-right: 50px;
	overflow-x: hidden;
	overflow-y: scroll;
	}

	.sidebar {
	width: 345px;
	}
	}
	.sidebar-flexer {
	max-height: 96vh;
	flex-shrink: 0;
	flex-grow: 0;
	}
	}
	.badge {
	display: inline-block;
	border-radius: 99px;
	min-width: 22px;
	max-width: 22px;
	min-height: 22px;
	max-height: 22px;
	font-size: 15px;
	line-height: 22px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	padding: 0;

	&.badge-notification {
	background-color: $fallback--cRed;
	background-color: var(--badgeNotification, $fallback--cRed);
	color: white;
	color: var(--badgeNotificationText, white);
	}
	}

	.alert {
	margin: 0.35em;
	padding: 0.25em;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	min-height: 28px;
	line-height: 28px;

	&.error {
	background-color: $fallback--alertError;
	background-color: var(--alertError, $fallback--alertError);
	color: $fallback--text;
	color: var(--alertErrorText, $fallback--text);

	.panel-heading & {
	color: $fallback--text;
	color: var(--alertErrorPanelText, $fallback--text);
	}
	}

	&.warning {
	background-color: $fallback--alertWarning;
	background-color: var(--alertWarning, $fallback--alertWarning);
	color: $fallback--text;
	color: var(--alertWarningText, $fallback--text);

	.panel-heading & {
	color: $fallback--text;
	color: var(--alertWarningPanelText, $fallback--text);
	}
	}
	}

	.faint {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	}

	.faint-link {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);

	&:hover {
	text-decoration: underline;
	}
	}

	@media all and (min-width: 800px) {
	.logo {
	opacity: 1 !important;
	}
	}

	.item.right {
	text-align: right;
	}

	.visibility-notice {
	padding: .5em;
	border: 1px solid $fallback--faint;
	border: 1px solid var(--faint, $fallback--faint);
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);
	}

	.notice-dismissible {
	padding-right: 4rem;
	position: relative;

	.dismiss {
	position: absolute;
	top: 0;
	right: 0;
	padding: .5em;
	color: inherit;
	}
	}

	.button-icon {
	font-size: 1.2em;
	}

	@keyframes shakeError {
	0% {
	transform: translateX(0);
	}
	15% {
	transform: translateX(0.375rem);
	}
	30% {
	transform: translateX(-0.375rem);
	}
	45% {
	transform: translateX(0.375rem);
	}
	60% {
	transform: translateX(-0.375rem);
	}
	75% {
	transform: translateX(0.375rem);
	}
	90% {
	transform: translateX(-0.375rem);
	}
	100% {
	transform: translateX(0);
	}
	}

	@media all and (max-width: 800px) {
	.mobile-hidden {
	display: none;
	}

	.panel-switcher {
	display: flex;
	}

	.container {
	padding: 0;
	}

	.panel {
	margin: 0.5em 0 0.5em 0;
	}

	.menu-button {
	display: block;
	margin-right: 0.8em;
	}
	}

	.setting-item {
	border-bottom: 2px solid var(--fg, $fallback--fg);
	margin: 1em 1em 1.4em;
	padding-bottom: 1.4em;

	> div {
	margin-bottom: .5em;
	&:last-child {
	margin-bottom: 0;
	}
	}

	&:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 1em;
	}

	select {
	min-width: 10em;
	}


	textarea {
	width: 100%;
	max-width: 100%;
	height: 100px;
	}

	.unavailable,
	.unavailable i {
	color: var(--cRed, $fallback--cRed);
	color: $fallback--cRed;
	}

	.btn {
	min-height: 28px;
	min-width: 10em;
	padding: 0 2em;
	}

	.number-input {
	max-width: 6em;
	}
	}
	.select-multiple {
	display: flex;
	.option-list {
	margin: 0;
	padding-left: .5em;
	}
	}
	.setting-list,
	.option-list{
	list-style-type: none;
	padding-left: 2em;
	li {
	margin-bottom: 0.5em;
	}
	.suboptions {
	margin-top: 0.3em
	}
	}

	.login-hint {
	text-align: center;

	@media all and (min-width: 801px) {
	display: none;
	}

	a {
	display: inline-block;
	padding: 1em 0px;
	width: 100%;
	}
	}

	.btn.btn-default {
	min-height: 28px;
	}

	.animate-spin {
	animation: spin 2s infinite linear;
	display: inline-block;
	}

	@keyframes spin {
	0% {
	transform: rotate(0deg);
	}

	100% {
	transform: rotate(359deg);
	}
	}

	.new-status-notification {
	position:relative;
	margin-top: -1px;
	font-size: 1.1em;
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: var(--border, $fallback--border);
	padding: 10px;
	z-index: 1;
	background-color: $fallback--fg;
	background-color: var(--panel, $fallback--fg);
	}
	diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
	index b450dc8e36..602a635e39 100644
	--- a/src/components/style_switcher/style_switcher.js
	+++ b/src/components/style_switcher/style_switcher.js
	@@ -1,605 +1,614 @@
	-import { rgb2hex, hex2rgb, getContrastRatio, alphaBlend } from '../../services/color_convert/color_convert.js'
	+import { rgb2hex, hex2rgb, getContrastRatio, getContrastRatioLayers, alphaBlend } from '../../services/color_convert/color_convert.js'
	import { set, delete as del } from 'vue'
	import { merge } from 'lodash'
	import { generateCompat, generateColors, generateShadows, generateRadii, generateFonts, composePreset, getThemes } from '../../services/style_setter/style_setter.js'
	import ColorInput from '../color_input/color_input.vue'
	import RangeInput from '../range_input/range_input.vue'
	import OpacityInput from '../opacity_input/opacity_input.vue'
	import ShadowControl from '../shadow_control/shadow_control.vue'
	import FontControl from '../font_control/font_control.vue'
	import ContrastRatio from '../contrast_ratio/contrast_ratio.vue'
	import TabSwitcher from '../tab_switcher/tab_switcher.js'
	import Preview from './preview.vue'
	import ExportImport from '../export_import/export_import.vue'
	import Checkbox from '../checkbox/checkbox.vue'

	// List of color values used in v1
	const v1OnlyNames = [
	'bg',
	'fg',
	'text',
	'link',
	'cRed',
	'cGreen',
	'cBlue',
	'cOrange'
	].map(_ => _ + 'ColorLocal')

	export default {
	data () {
	return {
	availableStyles: [],
	selected: this.$store.getters.mergedConfig.theme,

	previewShadows: {},
	previewColors: {},
	previewRadii: {},
	previewFonts: {},

	shadowsInvalid: true,
	colorsInvalid: true,
	radiiInvalid: true,

	keepColor: false,
	keepShadows: false,
	keepOpacity: false,
	keepRoundness: false,
	keepFonts: false,

	textColorLocal: '',
	accentColorLocal: undefined,
	linkColorLocal: undefined,

	bgColorLocal: '',
	bgOpacityLocal: undefined,

	+ underlayColorLocal: '',
	+ underlayOpacityLocal: undefined,
	+
	fgColorLocal: '',
	fgTextColorLocal: undefined,
	fgLinkColorLocal: undefined,

	btnColorLocal: undefined,
	btnTextColorLocal: undefined,
	btnOpacityLocal: undefined,

	inputColorLocal: undefined,
	inputTextColorLocal: undefined,
	inputOpacityLocal: undefined,

	panelColorLocal: undefined,
	panelTextColorLocal: undefined,
	panelLinkColorLocal: undefined,
	panelFaintColorLocal: undefined,
	panelOpacityLocal: undefined,

	topBarColorLocal: undefined,
	topBarTextColorLocal: undefined,
	topBarLinkColorLocal: undefined,

	alertErrorColorLocal: undefined,
	alertWarningColorLocal: undefined,

	badgeOpacityLocal: undefined,
	badgeNotificationColorLocal: undefined,

	borderColorLocal: undefined,
	borderOpacityLocal: undefined,

	faintColorLocal: undefined,
	faintOpacityLocal: undefined,
	faintLinkColorLocal: undefined,

	cRedColorLocal: '',
	cBlueColorLocal: '',
	cGreenColorLocal: '',
	cOrangeColorLocal: '',

	shadowSelected: undefined,
	shadowsLocal: {},
	fontsLocal: {},

	btnRadiusLocal: '',
	inputRadiusLocal: '',
	checkboxRadiusLocal: '',
	panelRadiusLocal: '',
	avatarRadiusLocal: '',
	avatarAltRadiusLocal: '',
	attachmentRadiusLocal: '',
	tooltipRadiusLocal: ''
	}
	},
	created () {
	const self = this

	getThemes().then((themesComplete) => {
	self.availableStyles = themesComplete
	})
	},
	mounted () {
	this.normalizeLocalState(this.$store.getters.mergedConfig.customTheme)
	if (typeof this.shadowSelected === 'undefined') {
	this.shadowSelected = this.shadowsAvailable[0]
	}
	},
	computed: {
	selectedVersion () {
	return Array.isArray(this.selected) ? 1 : 2
	},
	currentCompat () {
	return generateCompat({
	shadows: this.shadowsLocal,
	fonts: this.fontsLocal,
	opacity: this.currentOpacity,
	colors: this.currentColors,
	radii: this.currentRadii
	})
	},
	currentColors () {
	return {
	bg: this.bgColorLocal,
	text: this.textColorLocal,
	link: this.linkColorLocal,

	fg: this.fgColorLocal,
	fgText: this.fgTextColorLocal,
	fgLink: this.fgLinkColorLocal,

	accent: this.accentColorLocal,

	+ underlay: this.underlayColorLocal,
	+
	panel: this.panelColorLocal,
	panelText: this.panelTextColorLocal,
	panelLink: this.panelLinkColorLocal,
	panelFaint: this.panelFaintColorLocal,

	input: this.inputColorLocal,
	inputText: this.inputTextColorLocal,

	topBar: this.topBarColorLocal,
	topBarText: this.topBarTextColorLocal,
	topBarLink: this.topBarLinkColorLocal,

	btn: this.btnColorLocal,
	btnText: this.btnTextColorLocal,

	alertError: this.alertErrorColorLocal,
	alertWarning: this.alertWarningColorLocal,
	badgeNotification: this.badgeNotificationColorLocal,

	faint: this.faintColorLocal,
	faintLink: this.faintLinkColorLocal,
	border: this.borderColorLocal,

	cRed: this.cRedColorLocal,
	cBlue: this.cBlueColorLocal,
	cGreen: this.cGreenColorLocal,
	cOrange: this.cOrangeColorLocal
	}
	},
	currentOpacity () {
	return {
	bg: this.bgOpacityLocal,
	btn: this.btnOpacityLocal,
	input: this.inputOpacityLocal,
	panel: this.panelOpacityLocal,
	topBar: this.topBarOpacityLocal,
	border: this.borderOpacityLocal,
	- faint: this.faintOpacityLocal
	+ faint: this.faintOpacityLocal,
	+ underlay: this.underlayOpacityLocal
	}
	},
	currentRadii () {
	return {
	btn: this.btnRadiusLocal,
	input: this.inputRadiusLocal,
	checkbox: this.checkboxRadiusLocal,
	panel: this.panelRadiusLocal,
	avatar: this.avatarRadiusLocal,
	avatarAlt: this.avatarAltRadiusLocal,
	tooltip: this.tooltipRadiusLocal,
	attachment: this.attachmentRadiusLocal
	}
	},
	preview () {
	return composePreset(this.previewColors, this.previewRadii, this.previewShadows, this.previewFonts)
	},
	previewTheme () {
	if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {}, fonts: {} }
	return this.preview.theme
	},
	// This needs optimization maybe
	previewContrast () {
	if (!this.previewTheme.colors.bg) return {}
	const colors = this.previewTheme.colors
	const opacity = this.previewTheme.opacity
	if (!colors.bg) return {}
	const hints = (ratio) => ({
	text: ratio.toPrecision(3) + ':1',
	// AA level, AAA level
	aa: ratio >= 4.5,
	aaa: ratio >= 7,
	// same but for 18pt+ texts
	laa: ratio >= 3,
	laaa: ratio >= 4.5
	})

	// fgsfds :DDDD
	const fgs = {
	text: hex2rgb(colors.text),
	panelText: hex2rgb(colors.panelText),
	panelLink: hex2rgb(colors.panelLink),
	btnText: hex2rgb(colors.btnText),
	topBarText: hex2rgb(colors.topBarText),
	inputText: hex2rgb(colors.inputText),

	link: hex2rgb(colors.link),
	topBarLink: hex2rgb(colors.topBarLink),

	red: hex2rgb(colors.cRed),
	green: hex2rgb(colors.cGreen),
	blue: hex2rgb(colors.cBlue),
	orange: hex2rgb(colors.cOrange)
	}

	const bgs = {
	bg: hex2rgb(colors.bg),
	+ underlay: hex2rgb(colors.underlay),
	btn: hex2rgb(colors.btn),
	panel: hex2rgb(colors.panel),
	topBar: hex2rgb(colors.topBar),
	input: hex2rgb(colors.input),
	alertError: hex2rgb(colors.alertError),
	alertWarning: hex2rgb(colors.alertWarning),
	badgeNotification: hex2rgb(colors.badgeNotification)
	}

	- /* This is a bit confusing because "bottom layer" used is text color
	- * This is done to get worst case scenario when background below transparent
	- * layer matches text color, making it harder to read the lower alpha is.
	- */
	- const ratios = {
	- bgText: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.text), fgs.text),
	- bgLink: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.link), fgs.link),
	- bgRed: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.red), fgs.red),
	- bgGreen: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.green), fgs.green),
	- bgBlue: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.blue), fgs.blue),
	- bgOrange: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.orange), fgs.orange),
	+ const bg = [bgs.bg, opacity.bg]
	+ const underlay = [bgs.underlay, opacity.underlay]

	+ const panel = [underlay, bg]
	+
	+ const ratios = {
	+ bgText: getContrastRatioLayers(fgs.text, panel, fgs.text),
	+ bgLink: getContrastRatioLayers(fgs.link, panel, fgs.link),
	+ bgRed: getContrastRatioLayers(fgs.red, panel, fgs.red),
	+ bgGreen: getContrastRatioLayers(fgs.green, panel, fgs.green),
	+ bgBlue: getContrastRatioLayers(fgs.blue, panel, fgs.blue),
	+ bgOrange: getContrastRatioLayers(fgs.orange, panel, fgs.orange),
	+
	+ // TODO what's this?
	tintText: getContrastRatio(alphaBlend(bgs.bg, 0.5, fgs.panelText), fgs.text),

	- panelText: getContrastRatio(alphaBlend(bgs.panel, opacity.panel, fgs.panelText), fgs.panelText),
	- panelLink: getContrastRatio(alphaBlend(bgs.panel, opacity.panel, fgs.panelLink), fgs.panelLink),
	+ panelText: getContrastRatioLayers(fgs.text, [...panel, [bgs.panel, opacity.panel]], fgs.panelText),
	+ panelLink: getContrastRatioLayers(fgs.link, [...panel, [bgs.panel, opacity.panel]], fgs.panelLink),

	- btnText: getContrastRatio(alphaBlend(bgs.btn, opacity.btn, fgs.btnText), fgs.btnText),
	+ btnText: getContrastRatioLayers(fgs.text, [...panel, [bgs.btn, opacity.btn]], fgs.btnText),

	- inputText: getContrastRatio(alphaBlend(bgs.input, opacity.input, fgs.inputText), fgs.inputText),
	+ inputText: getContrastRatioLayers(fgs.text, [...panel, [bgs.input, opacity.input]], fgs.inputText),

	- topBarText: getContrastRatio(alphaBlend(bgs.topBar, opacity.topBar, fgs.topBarText), fgs.topBarText),
	- topBarLink: getContrastRatio(alphaBlend(bgs.topBar, opacity.topBar, fgs.topBarLink), fgs.topBarLink)
	+ topBarText: getContrastRatioLayers(fgs.text, [...panel, [bgs.topBar, opacity.topBar]], fgs.topBarText),
	+ topBarLink: getContrastRatioLayers(fgs.link, [...panel, [bgs.topBar, opacity.topBar]], fgs.topBarLink)
	}

	return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
	},
	previewRules () {
	if (!this.preview.rules) return ''
	return [
	...Object.values(this.preview.rules),
	'color: var(--text)',
	'font-family: var(--interfaceFont, sans-serif)'
	].join(';')
	},
	shadowsAvailable () {
	return Object.keys(this.previewTheme.shadows).sort()
	},
	currentShadowOverriden: {
	get () {
	return !!this.currentShadow
	},
	set (val) {
	if (val) {
	set(this.shadowsLocal, this.shadowSelected, this.currentShadowFallback.map(_ => Object.assign({}, _)))
	} else {
	del(this.shadowsLocal, this.shadowSelected)
	}
	}
	},
	currentShadowFallback () {
	return this.previewTheme.shadows[this.shadowSelected]
	},
	currentShadow: {
	get () {
	return this.shadowsLocal[this.shadowSelected]
	},
	set (v) {
	set(this.shadowsLocal, this.shadowSelected, v)
	}
	},
	themeValid () {
	return !this.shadowsInvalid && !this.colorsInvalid && !this.radiiInvalid
	},
	exportedTheme () {
	const saveEverything = (
	!this.keepFonts &&
	!this.keepShadows &&
	!this.keepOpacity &&
	!this.keepRoundness &&
	!this.keepColor
	)

	const theme = {}

	if (this.keepFonts \|\| saveEverything) {
	theme.fonts = this.fontsLocal
	}
	if (this.keepShadows \|\| saveEverything) {
	theme.shadows = this.shadowsLocal
	}
	if (this.keepOpacity \|\| saveEverything) {
	theme.opacity = this.currentOpacity
	}
	if (this.keepColor \|\| saveEverything) {
	theme.colors = this.currentColors
	}
	if (this.keepRoundness \|\| saveEverything) {
	theme.radii = this.currentRadii
	}

	return {
	// To separate from other random JSON files and possible future theme formats
	_pleroma_theme_version: 2, theme: merge(theme, this.currentCompat)
	}
	}
	},
	components: {
	ColorInput,
	OpacityInput,
	RangeInput,
	ContrastRatio,
	ShadowControl,
	FontControl,
	TabSwitcher,
	Preview,
	ExportImport,
	Checkbox
	},
	methods: {
	setCustomTheme () {
	this.$store.dispatch('setOption', {
	name: 'customTheme',
	value: {
	shadows: this.shadowsLocal,
	fonts: this.fontsLocal,
	opacity: this.currentOpacity,
	colors: this.currentColors,
	radii: this.currentRadii
	}
	})
	},
	onImport (parsed) {
	if (parsed._pleroma_theme_version === 1) {
	this.normalizeLocalState(parsed, 1)
	} else if (parsed._pleroma_theme_version >= 2) {
	this.normalizeLocalState(parsed.theme, 2)
	}
	},
	importValidator (parsed) {
	const version = parsed._pleroma_theme_version
	return version >= 1 \|\| version <= 2
	},
	clearAll () {
	const state = this.$store.getters.mergedConfig.customTheme
	const version = state.colors ? 2 : 'l1'
	this.normalizeLocalState(this.$store.getters.mergedConfig.customTheme, version)
	},

	// Clears all the extra stuff when loading V1 theme
	clearV1 () {
	Object.keys(this.$data)
	.filter(_ => _.endsWith('ColorLocal') \|\| _.endsWith('OpacityLocal'))
	.filter(_ => !v1OnlyNames.includes(_))
	.forEach(key => {
	set(this.$data, key, undefined)
	})
	},

	clearRoundness () {
	Object.keys(this.$data)
	.filter(_ => _.endsWith('RadiusLocal'))
	.forEach(key => {
	set(this.$data, key, undefined)
	})
	},

	clearOpacity () {
	Object.keys(this.$data)
	.filter(_ => _.endsWith('OpacityLocal'))
	.forEach(key => {
	set(this.$data, key, undefined)
	})
	},

	clearShadows () {
	this.shadowsLocal = {}
	},

	clearFonts () {
	this.fontsLocal = {}
	},

	/**
	* This applies stored theme data onto form. Supports three versions of data:
	* v3 (version = 3) - same as 2 but with some incompatible changes
	* v2 (version = 2) - newer version of themes.
	* v1 (version = 1) - older version of themes (import from file)
	* v1l (version = l1) - older version of theme (load from local storage)
	* v1 and v1l differ because of way themes were stored/exported.
	* @param {Object} input - input data
	* @param {Number} version - version of data. 0 means try to guess based on data. "l1" means v1, locastorage type
	*/
	normalizeLocalState (originalInput, version = 0) {
	let input
	if (typeof originalInput.v3compat !== undefined) {
	version = 3
	input = merge(originalInput, originalInput.v3compat)
	} else {
	input = originalInput
	}

	const compat = input.v3compat
	const radii = input.radii \|\| input
	const opacity = input.opacity
	const shadows = input.shadows \|\| {}
	const fonts = input.fonts \|\| {}
	const colors = input.colors \|\| input

	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
	}
	}

	// Stuff that differs between V1 and V2
	if (version === 1) {
	this.fgColorLocal = rgb2hex(colors.btn)
	this.textColorLocal = rgb2hex(colors.fg)
	}

	if (!this.keepColor) {
	this.clearV1()
	const keys = new Set(version !== 1 ? Object.keys(colors) : [])
	if (version === 1 \|\| version === 'l1') {
	keys
	.add('bg')
	.add('link')
	.add('cRed')
	.add('cBlue')
	.add('cGreen')
	.add('cOrange')
	}

	keys.forEach(key => {
	this[key + 'ColorLocal'] = rgb2hex(colors[key])
	})
	}

	if (!this.keepRoundness) {
	this.clearRoundness()
	Object.entries(radii).forEach(([k, v]) => {
	// 'Radius' is kept mostly for v1->v2 localstorage transition
	const key = k.endsWith('Radius') ? k.split('Radius')[0] : k
	this[key + 'RadiusLocal'] = v
	})
	}

	if (!this.keepShadows) {
	this.clearShadows()
	this.shadowsLocal = shadows
	this.shadowSelected = this.shadowsAvailable[0]
	}

	if (!this.keepFonts) {
	this.clearFonts()
	this.fontsLocal = fonts
	}

	if (opacity && !this.keepOpacity) {
	this.clearOpacity()
	Object.entries(opacity).forEach(([k, v]) => {
	if (typeof v === 'undefined' \|\| v === null \|\| Number.isNaN(v)) return
	this[k + 'OpacityLocal'] = v
	})
	}
	}
	},
	watch: {
	currentRadii () {
	try {
	this.previewRadii = generateRadii({ radii: this.currentRadii })
	this.radiiInvalid = false
	} catch (e) {
	this.radiiInvalid = true
	console.warn(e)
	}
	},
	shadowsLocal: {
	handler () {
	try {
	this.previewShadows = generateShadows({ shadows: this.shadowsLocal })
	this.shadowsInvalid = false
	} catch (e) {
	this.shadowsInvalid = true
	console.warn(e)
	}
	},
	deep: true
	},
	fontsLocal: {
	handler () {
	try {
	this.previewFonts = generateFonts({ fonts: this.fontsLocal })
	this.fontsInvalid = false
	} catch (e) {
	this.fontsInvalid = true
	console.warn(e)
	}
	},
	deep: true
	},
	currentColors () {
	try {
	this.previewColors = generateColors({
	v3compat: this.currentCompat,
	opacity: this.currentOpacity,
	colors: this.currentColors
	})
	this.colorsInvalid = false
	} catch (e) {
	this.colorsInvalid = true
	console.warn(e)
	}
	},
	currentOpacity () {
	try {
	this.previewColors = generateColors({
	v3compat: this.currentCompat,
	opacity: this.currentOpacity,
	colors: this.currentColors,
	})
	} catch (e) {
	console.warn(e)
	}
	},
	selected () {
	if (this.selectedVersion === 1) {
	if (!this.keepRoundness) {
	this.clearRoundness()
	}

	if (!this.keepShadows) {
	this.clearShadows()
	}

	if (!this.keepOpacity) {
	this.clearOpacity()
	}

	if (!this.keepColor) {
	this.clearV1()

	this.bgColorLocal = this.selected[1]
	this.fgColorLocal = this.selected[2]
	this.textColorLocal = this.selected[3]
	this.linkColorLocal = this.selected[4]
	this.cRedColorLocal = this.selected[5]
	this.cGreenColorLocal = this.selected[6]
	this.cBlueColorLocal = this.selected[7]
	this.cOrangeColorLocal = this.selected[8]
	}
	} else if (this.selectedVersion >= 2) {
	this.normalizeLocalState(this.selected.theme, 2)
	}
	}
	}
	}
	diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
	index 2ecd275a47..38ca2017a0 100644
	--- a/src/components/style_switcher/style_switcher.vue
	+++ b/src/components/style_switcher/style_switcher.vue
	@@ -1,596 +1,610 @@
	<template>
	<div class="style-switcher">
	<div class="presets-container">
	<div class="save-load">
	<ExportImport
	:export-object="exportedTheme"
	:export-label="$t("settings.export_theme")"
	:import-label="$t("settings.import_theme")"
	:import-failed-text="$t("settings.invalid_theme_imported")"
	:on-import="onImport"
	:validator="importValidator"
	>
	<template slot="before">
	<div class="presets">
	{{ $t('settings.presets') }}
	<label
	for="preset-switcher"
	class="select"
	>
	<select
	id="preset-switcher"
	v-model="selected"
	class="preset-switcher"
	>
	<option
	v-for="style in availableStyles"
	:key="style.name"
	:value="style"
	:style="{
	backgroundColor: style[1] \|\| style.theme.colors.bg,
	color: style[3] \|\| style.theme.colors.text
	}"
	>
	{{ style[0] \|\| style.name }}
	</option>
	</select>
	<i class="icon-down-open" />
	</label>
	</div>
	</template>
	</ExportImport>
	</div>
	<div class="save-load-options">
	<span class="keep-option">
	<Checkbox v-model="keepColor">
	{{ $t('settings.style.switcher.keep_color') }}
	</Checkbox>
	</span>
	<span class="keep-option">
	<Checkbox v-model="keepShadows">
	{{ $t('settings.style.switcher.keep_shadows') }}
	</Checkbox>
	</span>
	<span class="keep-option">
	<Checkbox v-model="keepOpacity">
	{{ $t('settings.style.switcher.keep_opacity') }}
	</Checkbox>
	</span>
	<span class="keep-option">
	<Checkbox v-model="keepRoundness">
	{{ $t('settings.style.switcher.keep_roundness') }}
	</Checkbox>
	</span>
	<span class="keep-option">
	<Checkbox v-model="keepFonts">
	{{ $t('settings.style.switcher.keep_fonts') }}
	</Checkbox>
	</span>
	<p>{{ $t('settings.style.switcher.save_load_hint') }}</p>
	</div>
	</div>

	<div class="preview-container">
	<preview :style="previewRules" />
	</div>

	<keep-alive>
	<tab-switcher key="style-tweak">
	<div
	:label="$t('settings.style.common_colors._tab_label')"
	class="color-container"
	>
	<div class="tab-header">
	<p>{{ $t('settings.theme_help') }}</p>
	<button
	class="btn"
	@click="clearOpacity"
	>
	{{ $t('settings.style.switcher.clear_opacity') }}
	</button>
	<button
	class="btn"
	@click="clearV1"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	<p>{{ $t('settings.theme_help_v2_1') }}</p>
	<h4>{{ $t('settings.style.common_colors.main') }}</h4>
	<div class="color-item">
	<ColorInput
	v-model="bgColorLocal"
	name="bgColor"
	:label="$t('settings.background')"
	/>
	<OpacityInput
	v-model="bgOpacityLocal"
	name="bgOpacity"
	:fallback="previewTheme.opacity.bg \|\| 1"
	/>
	<ColorInput
	v-model="textColorLocal"
	name="textColor"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.bgText" />
	<ColorInput
	v-model="accentColorLocal"
	name="accentColor"
	:fallback="previewTheme.colors.link"
	:showOptionalTickbox="typeof linkColorLocal !== 'undefined'"
	:label="$t('settings.accent')"
	/>
	<ColorInput
	v-model="linkColorLocal"
	name="linkColor"
	:fallback="previewTheme.colors.accent"
	:showOptionalTickbox="typeof accentColorLocal !== 'undefined'"
	:label="$t('settings.links')"
	/>
	<ContrastRatio :contrast="previewContrast.bgLink" />
	</div>
	<div class="color-item">
	<ColorInput
	v-model="fgColorLocal"
	name="fgColor"
	:label="$t('settings.foreground')"
	/>
	<ColorInput
	v-model="fgTextColorLocal"
	name="fgTextColor"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors.fgText"
	/>
	<ColorInput
	v-model="fgLinkColorLocal"
	name="fgLinkColor"
	:label="$t('settings.links')"
	:fallback="previewTheme.colors.fgLink"
	/>
	<p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
	</div>
	<h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
	<div class="color-item">
	<ColorInput
	v-model="cRedColorLocal"
	name="cRedColor"
	:label="$t('settings.cRed')"
	/>
	<ContrastRatio :contrast="previewContrast.bgRed" />
	<ColorInput
	v-model="cBlueColorLocal"
	name="cBlueColor"
	:label="$t('settings.cBlue')"
	/>
	<ContrastRatio :contrast="previewContrast.bgBlue" />
	</div>
	<div class="color-item">
	<ColorInput
	v-model="cGreenColorLocal"
	name="cGreenColor"
	:label="$t('settings.cGreen')"
	/>
	<ContrastRatio :contrast="previewContrast.bgGreen" />
	<ColorInput
	v-model="cOrangeColorLocal"
	name="cOrangeColor"
	:label="$t('settings.cOrange')"
	/>
	<ContrastRatio :contrast="previewContrast.bgOrange" />
	</div>
	<p>{{ $t('settings.theme_help_v2_2') }}</p>
	</div>

	<div
	:label="$t('settings.style.advanced_colors._tab_label')"
	class="color-container"
	>
	<div class="tab-header">
	<p>{{ $t('settings.theme_help') }}</p>
	<button
	class="btn"
	@click="clearOpacity"
	>
	{{ $t('settings.style.switcher.clear_opacity') }}
	</button>
	<button
	class="btn"
	@click="clearV1"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
	<ColorInput
	v-model="alertErrorColorLocal"
	name="alertError"
	:label="$t('settings.style.advanced_colors.alert_error')"
	:fallback="previewTheme.colors.alertError"
	/>
	<ContrastRatio :contrast="previewContrast.alertError" />
	<ColorInput
	v-model="alertWarningColorLocal"
	name="alertWarning"
	:label="$t('settings.style.advanced_colors.alert_warning')"
	:fallback="previewTheme.colors.alertWarning"
	/>
	<ContrastRatio :contrast="previewContrast.alertWarning" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
	<ColorInput
	v-model="badgeNotificationColorLocal"
	name="badgeNotification"
	:label="$t('settings.style.advanced_colors.badge_notification')"
	:fallback="previewTheme.colors.badgeNotification"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
	<ColorInput
	v-model="panelColorLocal"
	name="panelColor"
	:fallback="fgColorLocal"
	:label="$t('settings.background')"
	/>
	<OpacityInput
	v-model="panelOpacityLocal"
	name="panelOpacity"
	:fallback="previewTheme.opacity.panel \|\| 1"
	/>
	<ColorInput
	v-model="panelTextColorLocal"
	name="panelTextColor"
	:fallback="previewTheme.colors.panelText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio
	:contrast="previewContrast.panelText"
	large="1"
	/>
	<ColorInput
	v-model="panelLinkColorLocal"
	name="panelLinkColor"
	:fallback="previewTheme.colors.panelLink"
	:label="$t('settings.links')"
	/>
	<ContrastRatio
	:contrast="previewContrast.panelLink"
	large="1"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>
	<ColorInput
	v-model="topBarColorLocal"
	name="topBarColor"
	:fallback="fgColorLocal"
	:label="$t('settings.background')"
	/>
	<ColorInput
	v-model="topBarTextColorLocal"
	name="topBarTextColor"
	:fallback="previewTheme.colors.topBarText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.topBarText" />
	<ColorInput
	v-model="topBarLinkColorLocal"
	name="topBarLinkColor"
	:fallback="previewTheme.colors.topBarLink"
	:label="$t('settings.links')"
	/>
	<ContrastRatio :contrast="previewContrast.topBarLink" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4>
	<ColorInput
	v-model="inputColorLocal"
	name="inputColor"
	:fallback="fgColorLocal"
	:label="$t('settings.background')"
	/>
	<OpacityInput
	v-model="inputOpacityLocal"
	name="inputOpacity"
	:fallback="previewTheme.opacity.input \|\| 1"
	/>
	<ColorInput
	v-model="inputTextColorLocal"
	name="inputTextColor"
	:fallback="previewTheme.colors.inputText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.inputText" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4>
	<ColorInput
	v-model="btnColorLocal"
	name="btnColor"
	:fallback="fgColorLocal"
	:label="$t('settings.background')"
	/>
	<OpacityInput
	v-model="btnOpacityLocal"
	name="btnOpacity"
	:fallback="previewTheme.opacity.btn \|\| 1"
	/>
	<ColorInput
	v-model="btnTextColorLocal"
	name="btnTextColor"
	:fallback="previewTheme.colors.btnText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.btnText" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
	<ColorInput
	v-model="borderColorLocal"
	name="borderColor"
	:fallback="previewTheme.colors.border"
	:label="$t('settings.style.common.color')"
	/>
	<OpacityInput
	v-model="borderOpacityLocal"
	name="borderOpacity"
	:fallback="previewTheme.opacity.border \|\| 1"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4>
	<ColorInput
	v-model="faintColorLocal"
	name="faintColor"
	:fallback="previewTheme.colors.faint"
	:label="$t('settings.text')"
	/>
	<ColorInput
	v-model="faintLinkColorLocal"
	name="faintLinkColor"
	:fallback="previewTheme.colors.faintLink"
	:label="$t('settings.links')"
	/>
	<ColorInput
	v-model="panelFaintColorLocal"
	name="panelFaintColor"
	:fallback="previewTheme.colors.panelFaint"
	:label="$t('settings.style.advanced_colors.panel_header')"
	/>
	<OpacityInput
	v-model="faintOpacityLocal"
	name="faintOpacity"
	:fallback="previewTheme.opacity.faint \|\| 0.5"
	/>
	</div>
	+ <div class="color-item">
	+ <h4>{{ $t('settings.style.advanced_colors.underlay') }}</h4>
	+ <ColorInput
	+ v-model="underlayColorLocal"
	+ name="underlay"
	+ :label="$t('settings.style.advanced_colors.underlay')"
	+ fallback='#000000'
	+ />
	+ <OpacityInput
	+ v-model="underlayOpacityLocal"
	+ name="underlayOpacity"
	+ :fallback="previewTheme.opacity.underlay \|\| 0.15"
	+ />
	+ </div>
	</div>

	<div
	:label="$t('settings.style.radii._tab_label')"
	class="radius-container"
	>
	<div class="tab-header">
	<p>{{ $t('settings.radii_help') }}</p>
	<button
	class="btn"
	@click="clearRoundness"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	<RangeInput
	v-model="btnRadiusLocal"
	name="btnRadius"
	:label="$t('settings.btnRadius')"
	:fallback="previewTheme.radii.btn"
	max="16"
	hard-min="0"
	/>
	<RangeInput
	v-model="inputRadiusLocal"
	name="inputRadius"
	:label="$t('settings.inputRadius')"
	:fallback="previewTheme.radii.input"
	max="9"
	hard-min="0"
	/>
	<RangeInput
	v-model="checkboxRadiusLocal"
	name="checkboxRadius"
	:label="$t('settings.checkboxRadius')"
	:fallback="previewTheme.radii.checkbox"
	max="16"
	hard-min="0"
	/>
	<RangeInput
	v-model="panelRadiusLocal"
	name="panelRadius"
	:label="$t('settings.panelRadius')"
	:fallback="previewTheme.radii.panel"
	max="50"
	hard-min="0"
	/>
	<RangeInput
	v-model="avatarRadiusLocal"
	name="avatarRadius"
	:label="$t('settings.avatarRadius')"
	:fallback="previewTheme.radii.avatar"
	max="28"
	hard-min="0"
	/>
	<RangeInput
	v-model="avatarAltRadiusLocal"
	name="avatarAltRadius"
	:label="$t('settings.avatarAltRadius')"
	:fallback="previewTheme.radii.avatarAlt"
	max="28"
	hard-min="0"
	/>
	<RangeInput
	v-model="attachmentRadiusLocal"
	name="attachmentRadius"
	:label="$t('settings.attachmentRadius')"
	:fallback="previewTheme.radii.attachment"
	max="50"
	hard-min="0"
	/>
	<RangeInput
	v-model="tooltipRadiusLocal"
	name="tooltipRadius"
	:label="$t('settings.tooltipRadius')"
	:fallback="previewTheme.radii.tooltip"
	max="50"
	hard-min="0"
	/>
	</div>

	<div
	:label="$t('settings.style.shadows._tab_label')"
	class="shadow-container"
	>
	<div class="tab-header shadow-selector">
	<div class="select-container">
	{{ $t('settings.style.shadows.component') }}
	<label
	for="shadow-switcher"
	class="select"
	>
	<select
	id="shadow-switcher"
	v-model="shadowSelected"
	class="shadow-switcher"
	>
	<option
	v-for="shadow in shadowsAvailable"
	:key="shadow"
	:value="shadow"
	>
	{{ $t('settings.style.shadows.components.' + shadow) }}
	</option>
	</select>
	<i class="icon-down-open" />
	</label>
	</div>
	<div class="override">
	<label
	for="override"
	class="label"
	>
	{{ $t('settings.style.shadows.override') }}
	</label>
	<input
	id="override"
	v-model="currentShadowOverriden"
	name="override"
	class="input-override"
	type="checkbox"
	>
	<label
	class="checkbox-label"
	for="override"
	/>
	</div>
	<button
	class="btn"
	@click="clearShadows"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	<shadow-control
	v-model="currentShadow"
	:ready="!!currentShadowFallback"
	:fallback="currentShadowFallback"
	/>
	<div v-if="shadowSelected === 'avatar' \|\| shadowSelected === 'avatarStatus'">
	<i18n
	path="settings.style.shadows.filter_hint.always_drop_shadow"
	tag="p"
	>
	<code>filter: drop-shadow()</code>
	</i18n>
	<p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
	<i18n
	path="settings.style.shadows.filter_hint.drop_shadow_syntax"
	tag="p"
	>
	<code>drop-shadow</code>
	<code>spread-radius</code>
	<code>inset</code>
	</i18n>
	<i18n
	path="settings.style.shadows.filter_hint.inset_classic"
	tag="p"
	>
	<code>box-shadow</code>
	</i18n>
	<p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
	</div>
	</div>

	<div
	:label="$t('settings.style.fonts._tab_label')"
	class="fonts-container"
	>
	<div class="tab-header">
	<p>{{ $t('settings.style.fonts.help') }}</p>
	<button
	class="btn"
	@click="clearFonts"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	<FontControl
	v-model="fontsLocal.interface"
	name="ui"
	:label="$t('settings.style.fonts.components.interface')"
	:fallback="previewTheme.fonts.interface"
	no-inherit="1"
	/>
	<FontControl
	v-model="fontsLocal.input"
	name="input"
	:label="$t('settings.style.fonts.components.input')"
	:fallback="previewTheme.fonts.input"
	/>
	<FontControl
	v-model="fontsLocal.post"
	name="post"
	:label="$t('settings.style.fonts.components.post')"
	:fallback="previewTheme.fonts.post"
	/>
	<FontControl
	v-model="fontsLocal.postCode"
	name="postCode"
	:label="$t('settings.style.fonts.components.postCode')"
	:fallback="previewTheme.fonts.postCode"
	/>
	</div>
	</tab-switcher>
	</keep-alive>

	<div class="apply-container">
	<button
	class="btn submit"
	:disabled="!themeValid"
	@click="setCustomTheme"
	>
	{{ $t('general.apply') }}
	</button>
	<button
	class="btn"
	@click="clearAll"
	>
	{{ $t('settings.style.switcher.reset') }}
	</button>
	</div>
	</div>
	</template>

	<script src="./style_switcher.js"></script>

	<style src="./style_switcher.scss" lang="scss"></style>
	diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
	index d1b17c61a2..757a36bdd2 100644
	--- a/src/services/color_convert/color_convert.js
	+++ b/src/services/color_convert/color_convert.js
	@@ -1,130 +1,153 @@
	import { map } from 'lodash'

	+// useful for visualizing color when debugging
	+export const consoleColor = (color) => console.log('%c##########', 'background: ' + color + '; color: ' + color)
	+
	const rgb2hex = (r, g, b) => {
	if (r === null \|\| typeof r === 'undefined') {
	return undefined
	}
	if (r[0] === '#') {
	return r
	}
	if (typeof r === 'object') {
	({ r, g, b } = r)
	}
	[r, g, b] = map([r, g, b], (val) => {
	val = Math.ceil(val)
	val = val < 0 ? 0 : val
	val = val > 255 ? 255 : val
	return val
	})
	return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
	}

	/**
	* Converts 8-bit RGB component into linear component
	* https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
	* https://www.w3.org/TR/2008/REC-WCAG20-20081211/relative-luminance.xml
	* https://en.wikipedia.org/wiki/SRGB#The_reverse_transformation
	*
	* @param {Number} bit - color component [0..255]
	* @returns {Number} linear component [0..1]
	*/
	const c2linear = (bit) => {
	// W3C gives 0.03928 while wikipedia states 0.04045
	// what those magical numbers mean - I don't know.
	// something about gamma-correction, i suppose.
	// Sticking with W3C example.
	const c = bit / 255
	if (c < 0.03928) {
	return c / 12.92
	} else {
	return Math.pow((c + 0.055) / 1.055, 2.4)
	}
	}

	/**
	* Converts sRGB into linear RGB
	* @param {Object} srgb - sRGB color
	* @returns {Object} linear rgb color
	*/
	const srgbToLinear = (srgb) => {
	return 'rgb'.split('').reduce((acc, c) => { acc[c] = c2linear(srgb[c]); return acc }, {})
	}

	/**
	* Calculates relative luminance for given color
	* https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
	* https://www.w3.org/TR/2008/REC-WCAG20-20081211/relative-luminance.xml
	*
	* @param {Object} srgb - sRGB color
	* @returns {Number} relative luminance
	*/
	const relativeLuminance = (srgb) => {
	const { r, g, b } = srgbToLinear(srgb)
	return 0.2126 * r + 0.7152 * g + 0.0722 * b
	}

	/**
	* Generates color ratio between two colors. Order is unimporant
	* https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
	*
	* @param {Object} a - sRGB color
	* @param {Object} b - sRGB color
	* @returns {Number} color ratio
	*/
	const getContrastRatio = (a, b) => {
	const la = relativeLuminance(a)
	const lb = relativeLuminance(b)
	const [l1, l2] = la > lb ? [la, lb] : [lb, la]

	return (l1 + 0.05) / (l2 + 0.05)
	}
	+/**
	+ * Same as `getContrastRatio` but for multiple layers in-between
	+ *
	+ * @param {Object} text - text color (topmost layer)
	+ * @param {[Object, Number]} layers[] - layers between text and bedrock
	+ * @param {Object} bedrock - layer at the very bottom
	+ */
	+export const getContrastRatioLayers = (text, layers, bedrock) => {
	+ return getContrastRatio(alphaBlendLayers(bedrock, layers), text)
	+}

	/**
	* This performs alpha blending between solid background and semi-transparent foreground
	*
	* @param {Object} fg - top layer color
	* @param {Number} fga - top layer's alpha
	* @param {Object} bg - bottom layer color
	* @returns {Object} sRGB of resulting color
	*/
	const alphaBlend = (fg, fga, bg) => {
	if (fga === 1 \|\| typeof fga === 'undefined') return fg
	return 'rgb'.split('').reduce((acc, c) => {
	// Simplified https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending
	// for opaque bg and transparent fg
	acc[c] = (fg[c] * fga + bg[c] * (1 - fga))
	return acc
	}, {})
	}

	+/**
	+ * Same as `alphaBlend` but for multiple layers in-between
	+ *
	+ * @param {Object} bedrock - layer at the very bottom
	+ * @param {[Object, Number]} layers[] - layers between text and bedrock
	+ */
	+export const alphaBlendLayers = (bedrock, layers) => layers.reduce((acc, [color, opacity]) => {
	+ return alphaBlend(color, opacity, acc)
	+}, bedrock)
	+
	const invert = (rgb) => {
	return 'rgb'.split('').reduce((acc, c) => {
	acc[c] = 255 - rgb[c]
	return acc
	}, {})
	}

	const hex2rgb = (hex) => {
	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
	return result ? {
	r: parseInt(result[1], 16),
	g: parseInt(result[2], 16),
	b: parseInt(result[3], 16)
	} : null
	}

	const mixrgb = (a, b) => {
	return Object.keys(a).reduce((acc, k) => {
	acc[k] = (a[k] + b[k]) / 2
	return acc
	}, {})
	}

	export {
	rgb2hex,
	hex2rgb,
	mixrgb,
	invert,
	getContrastRatio,
	alphaBlend
	}
	diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
	index 19a0658770..8740fc552f 100644
	--- a/src/services/style_setter/style_setter.js
	+++ b/src/services/style_setter/style_setter.js
	@@ -1,575 +1,588 @@
	import { times } from 'lodash'
	import { brightness, invertLightness, convert, contrastRatio } from 'chromatism'
	-import { rgb2hex, hex2rgb, mixrgb, getContrastRatio, alphaBlend } from '../color_convert/color_convert.js'
	+import { rgb2hex, hex2rgb, mixrgb, getContrastRatio, alphaBlend, alphaBlendLayers } from '../color_convert/color_convert.js'

	// While this is not used anymore right now, I left it in if we want to do custom
	// styles that aren't just colors, so user can pick from a few different distinct
	// styles as well as set their own colors in the future.

	const setStyle = (href, commit) => {
	/***
	What's going on here?
	I want to make it easy for admins to style this application. To have
	a good set of default themes, I chose the system from base16
	(https://chriskempson.github.io/base16/) to style all elements. They
	all have the base00..0F classes. So the only thing an admin needs to
	do to style Pleroma is to change these colors in that one css file.
	Some default things (body text color, link color) need to be set dy-
	namically, so this is done here by waiting for the stylesheet to be
	loaded and then creating an element with the respective classes.

	It is a bit weird, but should make life for admins somewhat easier.
	***/
	const head = document.head
	const body = document.body
	body.classList.add('hidden')
	const cssEl = document.createElement('link')
	cssEl.setAttribute('rel', 'stylesheet')
	cssEl.setAttribute('href', href)
	head.appendChild(cssEl)

	const setDynamic = () => {
	const baseEl = document.createElement('div')
	body.appendChild(baseEl)

	let colors = {}
	times(16, (n) => {
	const name = `base0${n.toString(16).toUpperCase()}`
	baseEl.setAttribute('class', name)
	const color = window.getComputedStyle(baseEl).getPropertyValue('color')
	colors[name] = color
	})

	body.removeChild(baseEl)

	const styleEl = document.createElement('style')
	head.appendChild(styleEl)
	// const styleSheet = styleEl.sheet

	body.classList.remove('hidden')
	}

	cssEl.addEventListener('load', setDynamic)
	}

	const rgb2rgba = function (rgba) {
	return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`
	}

	const getTextColor = function (bg, text, preserve) {
	const bgIsLight = convert(bg).hsl.l > 50
	const textIsLight = convert(text).hsl.l > 50

	if ((bgIsLight && textIsLight) \|\| (!bgIsLight && !textIsLight)) {
	const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
	const result = Object.assign(base, invertLightness(text).rgb)
	if (!preserve && getContrastRatio(bg, result) < 4.5) {
	+ // B&W
	return contrastRatio(bg, text).rgb
	}
	+ // Inverted color
	return result
	}
	return text
	}

	const applyTheme = (input, commit) => {
	const { rules, theme } = generatePreset(input)
	const head = document.head
	const body = document.body
	body.classList.add('hidden')

	const styleEl = document.createElement('style')
	head.appendChild(styleEl)
	const styleSheet = styleEl.sheet

	styleSheet.toString()
	styleSheet.insertRule(`body { ${rules.radii} }`, 'index-max')
	styleSheet.insertRule(`body { ${rules.colors} }`, 'index-max')
	styleSheet.insertRule(`body { ${rules.shadows} }`, 'index-max')
	styleSheet.insertRule(`body { ${rules.fonts} }`, 'index-max')
	body.classList.remove('hidden')

	// commit('setOption', { name: 'colors', value: htmlColors })
	// commit('setOption', { name: 'radii', value: radii })
	commit('setOption', { name: 'customTheme', value: input })
	commit('setOption', { name: 'colors', value: theme.colors })
	}

	const getCssShadow = (input, usesDropShadow) => {
	if (input.length === 0) {
	return 'none'
	}

	return input
	.filter(_ => usesDropShadow ? _.inset : _)
	.map((shad) => [
	shad.x,
	shad.y,
	shad.blur,
	shad.spread
	].map(_ => _ + 'px').concat([
	getCssColor(shad.color, shad.alpha),
	shad.inset ? 'inset' : ''
	]).join(' ')).join(', ')
	}

	const getCssShadowFilter = (input) => {
	if (input.length === 0) {
	return 'none'
	}

	return input
	// drop-shadow doesn't support inset or spread
	.filter((shad) => !shad.inset && Number(shad.spread) === 0)
	.map((shad) => [
	shad.x,
	shad.y,
	// drop-shadow's blur is twice as strong compared to box-shadow
	shad.blur / 2
	].map(_ => _ + 'px').concat([
	getCssColor(shad.color, shad.alpha)
	]).join(' '))
	.map(_ => `drop-shadow(${_})`)
	.join(' ')
	}

	const getCssColor = (input, a) => {
	let rgb = {}
	if (typeof input === 'object') {
	rgb = input
	} else if (typeof input === 'string') {
	if (input.startsWith('#')) {
	rgb = hex2rgb(input)
	} else if (input.startsWith('--')) {
	return `var(${input})`
	} else {
	return input
	}
	}
	return rgb2rgba({ ...rgb, a })
	}

	// Generates a "patch" for theme to make it compatible with v2
	export const generateCompat = (input) => {
	const { colors } = input
	const v3compat = {
	colors: {}
	}
	const v2colorsPatch = {}

	// # Link became optional in v3
	if (typeof colors.link === 'undefined') {
	v2colorsPatch.link = colors.accent
	v3compat.colors.link = null
	}

	return {
	v3compat,
	colors: v2colorsPatch
	}
	}

	const generateColors = (input) => {
	const colors = {}
	const opacity = Object.assign({
	alert: 0.5,
	input: 0.5,
	- faint: 0.5
	+ faint: 0.5,
	+ underlay: 0.15
	}, Object.entries(input.opacity \|\| {}).reduce((acc, [k, v]) => {
	if (typeof v !== 'undefined') {
	acc[k] = v
	}
	return acc
	}, {}))

	const inputColors = input.colors \|\| input

	const compat = input.v3compat \|\| {}
	const compatColors = Object.entries(compat.colors \|\| {}).reduce((acc, [key, value]) => {
	const newVal = value === null ? undefined : value
	return { ...acc, [key]: newVal }
	}, {})

	const col = Object.entries({ ...inputColors, ...compatColors }).reduce((acc, [k, v]) => {
	if (typeof v === 'object') {
	acc[k] = v
	} else {
	acc[k] = hex2rgb(v)
	}
	return acc
	}, {})

	const isLightOnDark = convert(col.bg).hsl.l < convert(col.text).hsl.l
	const mod = isLightOnDark ? 1 : -1

	colors.text = col.text
	colors.lightText = brightness(20 * mod, colors.text).rgb

	colors.accent = col.accent \|\| col.link
	colors.link = col.link \|\| col.accent

	colors.faint = col.faint \|\| Object.assign({}, col.text)

	colors.bg = col.bg
	- colors.lightBg = col.lightBg \|\| brightness(5, colors.bg).rgb
	+ colors.lightBg = col.lightBg \|\| brightness(5 * mod, colors.bg).rgb
	+
	+ const underlay = [col.underlay, opacity.underlay]
	+ const fg = [col.fg, opacity.fg]
	+ const bg = [col.bg, opacity.bg]

	colors.fg = col.fg
	- colors.fgText = col.fgText \|\| getTextColor(colors.fg, colors.text)
	- colors.fgLink = col.fgLink \|\| getTextColor(colors.fg, colors.link, true)
	+ colors.fgText = col.fgText \|\| getTextColor(alphaBlendLayers(colors.text, [underlay, bg, fg]), colors.text)
	+ colors.fgLink = col.fgLink \|\| getTextColor(alphaBlendLayers(colors.link, [underlay, bg, fg]), colors.link, true)
	+ colors.underlay = col.underlay \|\| hex2rgb('#000000')

	colors.border = col.border \|\| brightness(2 * mod, colors.fg).rgb

	colors.btn = col.btn \|\| Object.assign({}, col.fg)
	- colors.btnText = col.btnText \|\| getTextColor(colors.btn, colors.fgText)
	+ const btn = [colors.btn, opacity.btn \|\| 1]
	+ colors.btnText = col.btnText \|\| getTextColor(alphaBlendLayers(colors.fgText, [underlay, bg, fg, btn]), colors.fgText)

	colors.input = col.input \|\| Object.assign({}, col.fg)
	- colors.inputText = col.inputText \|\| getTextColor(colors.input, colors.lightText)
	+ const inputCol = [colors.input, opacity.input]
	+ colors.inputText = col.inputText \|\| getTextColor(alphaBlendLayers(colors.lightText, [underlay, bg, fg, inputCol]), colors.lightText)

	colors.panel = col.panel \|\| Object.assign({}, col.fg)
	- colors.panelText = col.panelText \|\| getTextColor(colors.panel, colors.fgText)
	- colors.panelLink = col.panelLink \|\| getTextColor(colors.panel, colors.fgLink)
	- colors.panelFaint = col.panelFaint \|\| getTextColor(colors.panel, colors.faint)
	+ const panel = [colors.panel, opacity.panel]
	+ colors.panelText = col.panelText \|\| getTextColor(alphaBlendLayers(colors.fgText, [underlay, bg, panel]), colors.fgText)
	+ colors.panelLink = col.panelLink \|\| getTextColor(alphaBlendLayers(colors.fgLink, [underlay, bg, panel]), colors.fgLink)
	+ colors.panelFaint = col.panelFaint \|\| getTextColor(alphaBlendLayers(colors.faint, [underlay, bg, panel]), colors.faint)

	colors.topBar = col.topBar \|\| Object.assign({}, col.fg)
	- colors.topBarText = col.topBarText \|\| getTextColor(colors.topBar, colors.fgText)
	- colors.topBarLink = col.topBarLink \|\| getTextColor(colors.topBar, colors.fgLink)
	+ const topBar = [colors.topBar, opacity.topBar]
	+ colors.topBarText = col.topBarText \|\| getTextColor(alphaBlendLayers(colors.fgText, [topBar]), colors.fgText)
	+ colors.topBarLink = col.topBarLink \|\| getTextColor(alphaBlendLayers(colors.fgLink, [topBar]), colors.fgLink)

	colors.faintLink = col.faintLink \|\| Object.assign({}, col.link \|\| col.accent)
	colors.linkBg = alphaBlend(colors.link, 0.4, colors.bg)

	colors.icon = mixrgb(colors.bg, colors.text)

	colors.cBlue = col.cBlue \|\| hex2rgb('#0000FF')
	colors.cRed = col.cRed \|\| hex2rgb('#FF0000')
	colors.cGreen = col.cGreen \|\| hex2rgb('#00FF00')
	colors.cOrange = col.cOrange \|\| hex2rgb('#E3FF00')

	colors.alertError = col.alertError \|\| Object.assign({}, colors.cRed)
	colors.alertErrorText = getTextColor(alphaBlend(colors.alertError, opacity.alert, colors.bg), colors.text)
	colors.alertErrorPanelText = getTextColor(alphaBlend(colors.alertError, opacity.alert, colors.panel), colors.panelText)

	colors.alertWarning = col.alertWarning \|\| Object.assign({}, colors.cOrange)
	colors.alertWarningText = getTextColor(alphaBlend(colors.alertWarning, opacity.alert, colors.bg), colors.text)
	colors.alertWarningPanelText = getTextColor(alphaBlend(colors.alertWarning, opacity.alert, colors.panel), colors.panelText)

	colors.badgeNotification = col.badgeNotification \|\| Object.assign({}, colors.cRed)
	colors.badgeNotificationText = contrastRatio(colors.badgeNotification).rgb

	Object.entries(opacity).forEach(([ k, v ]) => {
	+ console.log(k)
	if (typeof v === 'undefined') return
	if (k === 'alert') {
	colors.alertError.a = v
	colors.alertWarning.a = v
	return
	}
	if (k === 'faint') {
	colors[k + 'Link'].a = v
	colors['panelFaint'].a = v
	}
	if (k === 'bg') {
	colors['lightBg'].a = v
	}
	if (colors[k]) {
	colors[k].a = v
	} else {
	console.error('Wrong key ' + k)
	}
	})

	const htmlColors = Object.entries(colors)
	.reduce((acc, [k, v]) => {
	if (!v) return acc
	acc.solid[k] = rgb2hex(v)
	acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v)
	return acc
	}, { complete: {}, solid: {} })
	return {
	rules: {
	colors: Object.entries(htmlColors.complete)
	.filter(([k, v]) => v)
	.map(([k, v]) => `--${k}: ${v}`)
	.join(';')
	},
	theme: {
	colors: htmlColors.solid,
	opacity
	}
	}
	}

	const generateRadii = (input) => {
	let inputRadii = input.radii \|\| {}
	// v1 -> v2
	if (typeof input.btnRadius !== 'undefined') {
	inputRadii = Object
	.entries(input)
	.filter(([k, v]) => k.endsWith('Radius'))
	.reduce((acc, e) => { acc[e[0].split('Radius')[0]] = e[1]; return acc }, {})
	}
	const radii = Object.entries(inputRadii).filter(([k, v]) => v).reduce((acc, [k, v]) => {
	acc[k] = v
	return acc
	}, {
	btn: 4,
	input: 4,
	checkbox: 2,
	panel: 10,
	avatar: 5,
	avatarAlt: 50,
	tooltip: 2,
	attachment: 5
	})

	return {
	rules: {
	radii: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}Radius: ${v}px`).join(';')
	},
	theme: {
	radii
	}
	}
	}

	const generateFonts = (input) => {
	const fonts = Object.entries(input.fonts \|\| {}).filter(([k, v]) => v).reduce((acc, [k, v]) => {
	acc[k] = Object.entries(v).filter(([k, v]) => v).reduce((acc, [k, v]) => {
	acc[k] = v
	return acc
	}, acc[k])
	return acc
	}, {
	interface: {
	family: 'sans-serif'
	},
	input: {
	family: 'inherit'
	},
	post: {
	family: 'inherit'
	},
	postCode: {
	family: 'monospace'
	}
	})

	return {
	rules: {
	fonts: Object
	.entries(fonts)
	.filter(([k, v]) => v)
	.map(([k, v]) => `--${k}Font: ${v.family}`).join(';')
	},
	theme: {
	fonts
	}
	}
	}

	const generateShadows = (input) => {
	const border = (top, shadow) => ({
	x: 0,
	y: top ? 1 : -1,
	blur: 0,
	spread: 0,
	color: shadow ? '#000000' : '#FFFFFF',
	alpha: 0.2,
	inset: true
	})
	const buttonInsetFakeBorders = [border(true, false), border(false, true)]
	const inputInsetFakeBorders = [border(true, true), border(false, false)]
	const hoverGlow = {
	x: 0,
	y: 0,
	blur: 4,
	spread: 0,
	color: '--faint',
	alpha: 1
	}

	const shadows = {
	panel: [{
	x: 1,
	y: 1,
	blur: 4,
	spread: 0,
	color: '#000000',
	alpha: 0.6
	}],
	topBar: [{
	x: 0,
	y: 0,
	blur: 4,
	spread: 0,
	color: '#000000',
	alpha: 0.6
	}],
	popup: [{
	x: 2,
	y: 2,
	blur: 3,
	spread: 0,
	color: '#000000',
	alpha: 0.5
	}],
	avatar: [{
	x: 0,
	y: 1,
	blur: 8,
	spread: 0,
	color: '#000000',
	alpha: 0.7
	}],
	avatarStatus: [],
	panelHeader: [],
	button: [{
	x: 0,
	y: 0,
	blur: 2,
	spread: 0,
	color: '#000000',
	alpha: 1
	}, ...buttonInsetFakeBorders],
	buttonHover: [hoverGlow, ...buttonInsetFakeBorders],
	buttonPressed: [hoverGlow, ...inputInsetFakeBorders],
	input: [...inputInsetFakeBorders, {
	x: 0,
	y: 0,
	blur: 2,
	inset: true,
	spread: 0,
	color: '#000000',
	alpha: 1
	}],
	...(input.shadows \|\| {})
	}

	return {
	rules: {
	shadows: Object
	.entries(shadows)
	// TODO for v2.1: if shadow doesn't have non-inset shadows with spread > 0 - optionally
	// convert all non-inset shadows into filter: drop-shadow() to boost performance
	.map(([k, v]) => [
	`--${k}Shadow: ${getCssShadow(v)}`,
	`--${k}ShadowFilter: ${getCssShadowFilter(v)}`,
	`--${k}ShadowInset: ${getCssShadow(v, true)}`
	].join(';'))
	.join(';')
	},
	theme: {
	shadows
	}
	}
	}

	const composePreset = (colors, radii, shadows, fonts) => {
	return {
	rules: {
	...shadows.rules,
	...colors.rules,
	...radii.rules,
	...fonts.rules
	},
	theme: {
	...shadows.theme,
	...colors.theme,
	...radii.theme,
	...fonts.theme
	}
	}
	}

	const generatePreset = (input) => {
	const shadows = generateShadows(input)
	const colors = generateColors(input)
	const radii = generateRadii(input)
	const fonts = generateFonts(input)

	return composePreset(colors, radii, shadows, fonts)
	}

	const getThemes = () => {
	return window.fetch('/static/styles.json')
	.then((data) => data.json())
	.then((themes) => {
	return Promise.all(Object.entries(themes).map(([k, v]) => {
	if (typeof v === 'object') {
	return Promise.resolve([k, v])
	} else if (typeof v === 'string') {
	return window.fetch(v)
	.then((data) => data.json())
	.then((theme) => {
	return [k, theme]
	})
	.catch((e) => {
	console.error(e)
	return []
	})
	}
	}))
	})
	.then((promises) => {
	return promises
	.filter(([k, v]) => v)
	.reduce((acc, [k, v]) => {
	acc[k] = v
	return acc
	}, {})
	})
	}

	const setPreset = (val, commit) => {
	return getThemes().then((themes) => {
	const theme = themes[val] ? themes[val] : themes['pleroma-dark']
	const isV1 = Array.isArray(theme)
	const data = isV1 ? {} : theme.theme

	if (isV1) {
	const bgRgb = hex2rgb(theme[1])
	const fgRgb = hex2rgb(theme[2])
	const textRgb = hex2rgb(theme[3])
	const linkRgb = hex2rgb(theme[4])

	const cRedRgb = hex2rgb(theme[5] \|\| '#FF0000')
	const cGreenRgb = hex2rgb(theme[6] \|\| '#00FF00')
	const cBlueRgb = hex2rgb(theme[7] \|\| '#0000FF')
	const cOrangeRgb = hex2rgb(theme[8] \|\| '#E3FF00')

	data.colors = {
	bg: bgRgb,
	fg: fgRgb,
	text: textRgb,
	link: linkRgb,
	cRed: cRedRgb,
	cBlue: cBlueRgb,
	cGreen: cGreenRgb,
	cOrange: cOrangeRgb
	}
	}

	// This is a hack, this function is only called during initial load.
	// We want to cancel loading the theme from config.json if we're already
	// loading a theme from the persisted state.
	// Needed some way of dealing with the async way of things.
	// load config -> set preset -> wait for styles.json to load ->
	// load persisted state -> set colors -> styles.json loaded -> set colors
	if (!window.themeLoaded) {
	applyTheme(data, commit)
	}
	})
	}

	export {
	setStyle,
	setPreset,
	applyTheme,
	getTextColor,
	generateColors,
	generateRadii,
	generateShadows,
	generateFonts,
	generatePreset,
	getThemes,
	composePreset,
	getCssShadow,
	getCssShadowFilter
	}

File Metadata

Mime Type: text/x-diff
Expires: Sat, Aug 8, 2:21 PM (1 d, 18 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1723578
Default Alt Text: (81 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions