No OneTemporary
Actions

Size

72 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
	index e6f9a9d3ed..aa2950ce8b 100644
	--- a/src/components/emoji_input/emoji_input.vue
	+++ b/src/components/emoji_input/emoji_input.vue
	@@ -1,185 +1,185 @@
	<template>
	<div
	+ ref="root"
	v-click-outside="onClickOutside"
	class="emoji-input"
	:class="{ 'with-picker': !hideEmojiButton }"
	- ref='root'
	>
	<slot />
	<template v-if="enableEmojiPicker">
	<button
	v-if="!hideEmojiButton"
	class="button-unstyled emoji-picker-icon"
	type="button"
	@click.prevent="togglePicker"
	>
	<FAIcon :icon="['far', 'smile-beam']" />
	</button>
	<EmojiPicker
	v-if="enableEmojiPicker"
	ref="picker"
	:class="{ hide: !showPicker }"
	:enable-sticker-picker="enableStickerPicker"
	class="emoji-picker-panel"
	@emoji="insert"
	@sticker-uploaded="onStickerUploaded"
	@sticker-upload-failed="onStickerUploadFailed"
	/>
	</template>
	<div
	ref="panel"
	class="autocomplete-panel"
	:class="{ hide: !showSuggestions }"
	>
	<div
	ref="panel-body"
	class="autocomplete-panel-body"
	>
	<div
	v-for="(suggestion, index) in suggestions"
	:key="index"
	class="autocomplete-item"
	:class="{ highlighted: index === highlighted }"
	@click.stop.prevent="onClick($event, suggestion)"
	>
	<span class="image">
	<img
	v-if="suggestion.img"
	:src="suggestion.img"
	>
	<span v-else>{{ suggestion.replacement }}</span>
	</span>
	<div class="label">
	<span class="displayText">{{ suggestion.displayText }}</span>
	<span class="detailText">{{ suggestion.detailText }}</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</template>

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

	<style lang="scss">
	@import '../../_variables.scss';

	.emoji-input {
	display: flex;
	flex-direction: column;
	position: relative;

	&.with-picker input {
	padding-right: 30px;
	}

	.emoji-picker-icon {
	position: absolute;
	top: 0;
	right: 0;
	margin: .2em .25em;
	font-size: 16px;
	cursor: pointer;
	line-height: 24px;

	&:hover i {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	}
	.emoji-picker-panel {
	position: absolute;
	z-index: 20;
	margin-top: 2px;

	&.hide {
	display: none
	}
	}

	.autocomplete {
	&-panel {
	position: absolute;
	z-index: 20;
	margin-top: 2px;

	&.hide {
	display: none
	}

	&-body {
	margin: 0 0.5em 0 0.5em;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
	box-shadow: var(--popupShadow);
	min-width: 75%;
	background-color: $fallback--bg;
	background-color: var(--popover, $fallback--bg);
	color: $fallback--link;
	color: var(--popoverText, $fallback--link);
	--faint: var(--popoverFaintText, $fallback--faint);
	--faintLink: var(--popoverFaintLink, $fallback--faint);
	--lightText: var(--popoverLightText, $fallback--lightText);
	--postLink: var(--popoverPostLink, $fallback--link);
	--postFaintLink: var(--popoverPostFaintLink, $fallback--link);
	--icon: var(--popoverIcon, $fallback--icon);
	}
	}

	&-item {
	display: flex;
	cursor: pointer;
	padding: 0.2em 0.4em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	height: 32px;

	.image {
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 32px;

	margin-right: 4px;

	img {
	width: 32px;
	height: 32px;
	object-fit: contain;
	}
	}

	.label {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 0.1em 0 0.2em;

	.displayText {
	line-height: 1.5;
	}

	.detailText {
	font-size: 9px;
	line-height: 9px;
	}
	}

	&.highlighted {
	background-color: $fallback--fg;
	background-color: var(--selectedMenuPopover, $fallback--fg);
	color: var(--selectedMenuPopoverText, $fallback--text);
	--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
	--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
	--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
	--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
	}
	}
	}

	input, textarea {
	flex: 1 0 auto;
	}
	}
	</style>
	diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
	index 1388f74b02..8b81db5d49 100644
	--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
	+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
	@@ -1,779 +1,790 @@
	import { set, delete as del } from 'vue'
	import {
	rgb2hex,
	hex2rgb,
	getContrastRatioLayers
	} from 'src/services/color_convert/color_convert.js'
	import {
	DEFAULT_SHADOWS,
	generateColors,
	generateShadows,
	generateRadii,
	generateFonts,
	composePreset,
	getThemes,
	shadows2to3,
	colors2to3
	} from 'src/services/style_setter/style_setter.js'
	import {
	newImporter,
	newExporter
	} from 'src/services/export_import/export_import.js'
	import {
	SLOT_INHERITANCE
	} from 'src/services/theme_data/pleromafe.js'
	import {
	CURRENT_VERSION,
	OPACITIES,
	getLayers,
	getOpacitySlot
	} from 'src/services/theme_data/theme_data.service.js'
	import ColorInput from 'src/components/color_input/color_input.vue'
	import RangeInput from 'src/components/range_input/range_input.vue'
	import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
	import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
	import FontControl from 'src/components/font_control/font_control.vue'
	import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import Select from 'src/components/select/select.vue'

	import Preview from './preview.vue'

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

	const colorConvert = (color) => {
	if (color.startsWith('--') \|\| color === 'transparent') {
	return color
	} else {
	return hex2rgb(color)
	}
	}

	export default {
	data () {
	return {
	themeImporter: newImporter({
	validator: this.importValidator,
	onImport: this.onImport,
	onImportFailure: this.onImportFailure
	}),
	themeExporter: newExporter({
	filename: 'pleroma_theme',
	getExportedObject: () => this.exportedTheme
	}),
	availableStyles: [],
	- selected: this.$store.getters.mergedConfig.theme,
	+ selected: '',
	+ selectedTheme: this.$store.getters.mergedConfig.theme,
	themeWarning: undefined,
	tempImportFile: undefined,
	engineVersion: 0,

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

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

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

	...Object.keys(SLOT_INHERITANCE)
	.map(key => [key, ''])
	.reduce((acc, [key, val]) => ({ ...acc, [ key + 'ColorLocal' ]: val }), {}),

	...Object.keys(OPACITIES)
	.map(key => [key, ''])
	.reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}),

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

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

	getThemes()
	.then((promises) => {
	return Promise.all(
	Object.entries(promises)
	.map(([k, v]) => v.then(res => [k, res]))
	)
	})
	.then(themes => themes.reduce((acc, [k, v]) => {
	if (v) {
	return {
	...acc,
	[k]: v
	}
	} else {
	return acc
	}
	}, {}))
	.then((themesComplete) => {
	self.availableStyles = themesComplete
	})
	},
	mounted () {
	this.loadThemeFromLocalStorage()
	if (typeof this.shadowSelected === 'undefined') {
	this.shadowSelected = this.shadowsAvailable[0]
	}
	},
	computed: {
	themeWarningHelp () {
	if (!this.themeWarning) return
	const t = this.$t
	const pre = 'settings.style.switcher.help.'
	const {
	origin,
	themeEngineVersion,
	type,
	noActionsPossible
	} = this.themeWarning
	if (origin === 'file') {
	// Loaded v2 theme from file
	if (themeEngineVersion === 2 && type === 'wrong_version') {
	return t(pre + 'v2_imported')
	}
	if (themeEngineVersion > CURRENT_VERSION) {
	return t(pre + 'future_version_imported') + ' ' +
	(
	noActionsPossible
	? t(pre + 'snapshot_missing')
	: t(pre + 'snapshot_present')
	)
	}
	if (themeEngineVersion < CURRENT_VERSION) {
	return t(pre + 'future_version_imported') + ' ' +
	(
	noActionsPossible
	? t(pre + 'snapshot_missing')
	: t(pre + 'snapshot_present')
	)
	}
	} else if (origin === 'localStorage') {
	if (type === 'snapshot_source_mismatch') {
	return t(pre + 'snapshot_source_mismatch')
	}
	// FE upgraded from v2
	if (themeEngineVersion === 2) {
	return t(pre + 'upgraded_from_v2')
	}
	// Admin downgraded FE
	if (themeEngineVersion > CURRENT_VERSION) {
	return t(pre + 'fe_downgraded') + ' ' +
	(
	noActionsPossible
	? t(pre + 'migration_snapshot_ok')
	: t(pre + 'migration_snapshot_gone')
	)
	}
	// Admin upgraded FE
	if (themeEngineVersion < CURRENT_VERSION) {
	return t(pre + 'fe_upgraded') + ' ' +
	(
	noActionsPossible
	? t(pre + 'migration_snapshot_ok')
	: t(pre + 'migration_snapshot_gone')
	)
	}
	}
	},
	selectedVersion () {
	- return Array.isArray(this.selected) ? 1 : 2
	+ return Array.isArray(this.selectedTheme) ? 1 : 2
	},
	currentColors () {
	return Object.keys(SLOT_INHERITANCE)
	.map(key => [key, this[key + 'ColorLocal']])
	.reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
	},
	currentOpacity () {
	return Object.keys(OPACITIES)
	.map(key => [key, this[key + 'OpacityLocal']])
	.reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
	},
	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,
	chatMessage: this.chatMessageRadiusLocal
	}
	},
	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 () {
	try {
	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
	})
	const colorsConverted = Object.entries(colors).reduce((acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }), {})

	const ratios = Object.entries(SLOT_INHERITANCE).reduce((acc, [key, value]) => {
	const slotIsBaseText = key === 'text' \|\| key === 'link'
	const slotIsText = slotIsBaseText \|\| (
	typeof value === 'object' && value !== null && value.textColor
	)
	if (!slotIsText) return acc
	const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
	const background = variant \|\| layer
	const opacitySlot = getOpacitySlot(background)
	const textColors = [
	key,
	...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])
	]

	const layers = getLayers(
	layer,
	variant \|\| layer,
	opacitySlot,
	colorsConverted,
	opacity
	)

	return {
	...acc,
	...textColors.reduce((acc, textColorKey) => {
	const newKey = slotIsBaseText
	? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)
	: textColorKey
	return {
	...acc,
	[newKey]: getContrastRatioLayers(
	colorsConverted[textColorKey],
	layers,
	colorsConverted[textColorKey]
	)
	}
	}, {})
	}
	}, {})

	return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
	} catch (e) {
	console.warn('Failure computing contrasts', e)
	}
	},
	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(DEFAULT_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 source = {
	themeEngineVersion: CURRENT_VERSION
	}

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

	const theme = {
	themeEngineVersion: CURRENT_VERSION,
	...this.previewTheme
	}

	return {
	// To separate from other random JSON files and possible future source formats
	_pleroma_theme_version: 2, theme, source
	}
	}
	},
	components: {
	ColorInput,
	OpacityInput,
	RangeInput,
	ContrastRatio,
	ShadowControl,
	FontControl,
	TabSwitcher,
	Preview,
	Checkbox,
	Select
	},
	methods: {
	loadTheme (
	{
	theme,
	source,
	_pleroma_theme_version: fileVersion
	},
	origin,
	forceUseSource = false
	) {
	this.dismissWarning()
	if (!source && !theme) {
	throw new Error('Can\'t load theme: empty')
	}
	const version = (origin === 'localStorage' && !theme.colors)
	? 'l1'
	: fileVersion
	const snapshotEngineVersion = (theme \|\| {}).themeEngineVersion
	const themeEngineVersion = (source \|\| {}).themeEngineVersion \|\| 2
	const versionsMatch = themeEngineVersion === CURRENT_VERSION
	const sourceSnapshotMismatch = (
	theme !== undefined &&
	source !== undefined &&
	themeEngineVersion !== snapshotEngineVersion
	)
	// Force loading of source if user requested it or if snapshot
	// is unavailable
	const forcedSourceLoad = (source && forceUseSource) \|\| !theme
	if (!(versionsMatch && !sourceSnapshotMismatch) &&
	!forcedSourceLoad &&
	version !== 'l1' &&
	origin !== 'defaults'
	) {
	if (sourceSnapshotMismatch && origin === 'localStorage') {
	this.themeWarning = {
	origin,
	themeEngineVersion,
	type: 'snapshot_source_mismatch'
	}
	} else if (!theme) {
	this.themeWarning = {
	origin,
	noActionsPossible: true,
	themeEngineVersion,
	type: 'no_snapshot_old_version'
	}
	} else if (!versionsMatch) {
	this.themeWarning = {
	origin,
	noActionsPossible: !source,
	themeEngineVersion,
	type: 'wrong_version'
	}
	}
	}
	this.normalizeLocalState(theme, version, source, forcedSourceLoad)
	},
	forceLoadLocalStorage () {
	this.loadThemeFromLocalStorage(true)
	},
	dismissWarning () {
	this.themeWarning = undefined
	this.tempImportFile = undefined
	},
	forceLoad () {
	const { origin } = this.themeWarning
	switch (origin) {
	case 'localStorage':
	this.loadThemeFromLocalStorage(true)
	break
	case 'file':
	this.onImport(this.tempImportFile, true)
	break
	}
	this.dismissWarning()
	},
	forceSnapshot () {
	const { origin } = this.themeWarning
	switch (origin) {
	case 'localStorage':
	this.loadThemeFromLocalStorage(false, true)
	break
	case 'file':
	console.err('Forcing snapshout from file is not supported yet')
	break
	}
	this.dismissWarning()
	},
	loadThemeFromLocalStorage (confirmLoadSource = false, forceSnapshot = false) {
	const {
	customTheme: theme,
	customThemeSource: source
	} = this.$store.getters.mergedConfig
	if (!theme && !source) {
	// Anon user or never touched themes
	this.loadTheme(
	this.$store.state.instance.themeData,
	'defaults',
	confirmLoadSource
	)
	} else {
	this.loadTheme(
	{
	theme,
	source: forceSnapshot ? theme : source
	},
	'localStorage',
	confirmLoadSource
	)
	}
	},
	setCustomTheme () {
	this.$store.dispatch('setOption', {
	name: 'customTheme',
	value: {
	themeEngineVersion: CURRENT_VERSION,
	...this.previewTheme
	}
	})
	this.$store.dispatch('setOption', {
	name: 'customThemeSource',
	value: {
	themeEngineVersion: CURRENT_VERSION,
	shadows: this.shadowsLocal,
	fonts: this.fontsLocal,
	opacity: this.currentOpacity,
	colors: this.currentColors,
	radii: this.currentRadii
	}
	})
	},
	updatePreviewColorsAndShadows () {
	this.previewColors = generateColors({
	opacity: this.currentOpacity,
	colors: this.currentColors
	})
	this.previewShadows = generateShadows(
	{ shadows: this.shadowsLocal, opacity: this.previewTheme.opacity, themeEngineVersion: this.engineVersion },
	this.previewColors.theme.colors,
	this.previewColors.mod
	)
	},
	importTheme () { this.themeImporter.importData() },
	exportTheme () { this.themeExporter.exportData() },
	onImport (parsed, forceSource = false) {
	this.tempImportFile = parsed
	this.loadTheme(parsed, 'file', forceSource)
	},
	onImportFailure (result) {
	this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_theme_imported', level: 'error' })
	},
	importValidator (parsed) {
	const version = parsed._pleroma_theme_version
	return version >= 1 \|\| version <= 2
	},
	clearAll () {
	this.loadThemeFromLocalStorage()
	},

	// 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) - newest version of themes which supports snapshots for better compatiblity
	* 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} theme - theme data (snapshot)
	* @param {Number} version - version of data. 0 means try to guess based on data. "l1" means v1, locastorage type
	* @param {Object} source - theme source - this will be used if compatible
	* @param {Boolean} source - by default source won't be used if version doesn't match since it might render differently
	* this allows importing source anyway
	*/
	normalizeLocalState (theme, version = 0, source, forceSource = false) {
	let input
	if (typeof source !== 'undefined') {
	if (forceSource \|\| source.themeEngineVersion === CURRENT_VERSION) {
	input = source
	version = source.themeEngineVersion
	} else {
	input = theme
	}
	} else {
	input = theme
	}

	const radii = input.radii \|\| input
	const opacity = input.opacity
	const shadows = input.shadows \|\| {}
	const fonts = input.fonts \|\| {}
	const colors = !input.themeEngineVersion
	? colors2to3(input.colors \|\| input)
	: 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
	}
	}

	this.engineVersion = version

	// 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(SLOT_INHERITANCE) : [])
	if (version === 1 \|\| version === 'l1') {
	keys
	.add('bg')
	.add('link')
	.add('cRed')
	.add('cBlue')
	.add('cGreen')
	.add('cOrange')
	}

	keys.forEach(key => {
	const color = colors[key]
	const hex = rgb2hex(colors[key])
	this[key + 'ColorLocal'] = hex === '#aN' ? color : hex
	})
	}

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

	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()
	if (version === 2) {
	this.shadowsLocal = shadows2to3(shadows, this.previewTheme.opacity)
	} else {
	this.shadowsLocal = shadows
	}
	this.shadowSelected = this.shadowsAvailable[0]
	}

	if (!this.keepFonts) {
	this.clearFonts()
	this.fontsLocal = fonts
	}
	}
	},
	watch: {
	currentRadii () {
	try {
	this.previewRadii = generateRadii({ radii: this.currentRadii })
	this.radiiInvalid = false
	} catch (e) {
	this.radiiInvalid = true
	console.warn(e)
	}
	},
	shadowsLocal: {
	handler () {
	if (Object.getOwnPropertyNames(this.previewColors).length === 1) return
	try {
	this.updatePreviewColorsAndShadows()
	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.updatePreviewColorsAndShadows()
	this.colorsInvalid = false
	this.shadowsInvalid = false
	} catch (e) {
	this.colorsInvalid = true
	this.shadowsInvalid = true
	console.warn(e)
	}
	},
	currentOpacity () {
	try {
	this.updatePreviewColorsAndShadows()
	} catch (e) {
	console.warn(e)
	}
	},
	selected () {
	+ this.selectedTheme = Object.entries(this.availableStyles).find(([k, s]) => {
	+ if (Array.isArray(s)) {
	+ console.log(s[0] === this.selected, this.selected)
	+ return s[0] === this.selected
	+ } else {
	+ return s.name === this.selected
	+ }
	+ })[1]
	+ },
	+ selectedTheme () {
	this.dismissWarning()
	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]
	+ this.bgColorLocal = this.selectedTheme[1]
	+ this.fgColorLocal = this.selectedTheme[2]
	+ this.textColorLocal = this.selectedTheme[3]
	+ this.linkColorLocal = this.selectedTheme[4]
	+ this.cRedColorLocal = this.selectedTheme[5]
	+ this.cGreenColorLocal = this.selectedTheme[6]
	+ this.cBlueColorLocal = this.selectedTheme[7]
	+ this.cOrangeColorLocal = this.selectedTheme[8]
	}
	} else if (this.selectedVersion >= 2) {
	- this.normalizeLocalState(this.selected.theme, 2, this.selected.source)
	+ this.normalizeLocalState(this.selectedTheme.theme, 2, this.selectedTheme.source)
	}
	}
	}
	}
	diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
	index 548dc85233..c02986edde 100644
	--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
	+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
	@@ -1,1039 +1,1039 @@
	<template>
	<div class="theme-tab">
	<div class="presets-container">
	<div class="save-load">
	<div
	v-if="themeWarning"
	class="theme-warning"
	>
	<div class="alert warning">
	{{ themeWarningHelp }}
	</div>
	<div class="buttons">
	<template v-if="themeWarning.type === 'snapshot_source_mismatch'">
	<button
	class="btn button-default"
	@click="forceLoad"
	>
	{{ $t('settings.style.switcher.use_source') }}
	</button>
	<button
	class="btn button-default"
	@click="forceSnapshot"
	>
	{{ $t('settings.style.switcher.use_snapshot') }}
	</button>
	</template>
	<template v-else-if="themeWarning.noActionsPossible">
	<button
	class="btn button-default"
	@click="dismissWarning"
	>
	{{ $t('general.dismiss') }}
	</button>
	</template>
	<template v-else>
	<button
	class="btn button-default"
	@click="forceLoad"
	>
	{{ $t('settings.style.switcher.load_theme') }}
	</button>
	<button
	class="btn button-default"
	@click="dismissWarning"
	>
	{{ $t('settings.style.switcher.keep_as_is') }}
	</button>
	</template>
	</div>
	</div>
	<div class="top">
	<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"
	+ :value="style.name \|\| style[0]"
	:style="{
	backgroundColor: style[1] \|\| (style.theme \|\| style.source).colors.bg,
	color: style[3] \|\| (style.theme \|\| style.source).colors.text
	}"
	>
	{{ style[0] \|\| style.name }}
	</option>
	</Select>
	</label>
	</div>
	<div class="export-import">
	<button
	class="btn button-default"
	@click="importTheme"
	>
	{{ $t("settings.import_theme") }}
	</button>
	<button
	class="btn button-default"
	@click="exportTheme"
	>
	{{ $t("settings.export_theme") }}
	</button>
	</div>
	</div>
	</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>

	<preview :style="previewRules" />

	<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>
	<div class="tab-header-buttons">
	<button
	class="btn button-default"
	@click="clearOpacity"
	>
	{{ $t('settings.style.switcher.clear_opacity') }}
	</button>
	<button
	class="btn button-default"
	@click="clearV1"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	</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"
	/>
	<ColorInput
	v-model="textColorLocal"
	name="textColor"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.bgText" />
	<ColorInput
	v-model="accentColorLocal"
	name="accentColor"
	:fallback="previewTheme.colors.link"
	:label="$t('settings.accent')"
	:show-optional-tickbox="typeof linkColorLocal !== 'undefined'"
	/>
	<ColorInput
	v-model="linkColorLocal"
	name="linkColor"
	:fallback="previewTheme.colors.accent"
	:label="$t('settings.links')"
	:show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
	/>
	<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.bgCRed" />
	<ColorInput
	v-model="cBlueColorLocal"
	name="cBlueColor"
	:label="$t('settings.cBlue')"
	/>
	<ContrastRatio :contrast="previewContrast.bgCBlue" />
	</div>
	<div class="color-item">
	<ColorInput
	v-model="cGreenColorLocal"
	name="cGreenColor"
	:label="$t('settings.cGreen')"
	/>
	<ContrastRatio :contrast="previewContrast.bgCGreen" />
	<ColorInput
	v-model="cOrangeColorLocal"
	name="cOrangeColor"
	:label="$t('settings.cOrange')"
	/>
	<ContrastRatio :contrast="previewContrast.bgCOrange" />
	</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 button-default"
	@click="clearOpacity"
	>
	{{ $t('settings.style.switcher.clear_opacity') }}
	</button>
	<button
	class="btn button-default"
	@click="clearV1"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.post') }}</h4>
	<ColorInput
	v-model="postLinkColorLocal"
	name="postLinkColor"
	:fallback="previewTheme.colors.accent"
	:label="$t('settings.links')"
	/>
	<ContrastRatio :contrast="previewContrast.postLink" />
	<ColorInput
	v-model="postGreentextColorLocal"
	name="postGreentextColor"
	:fallback="previewTheme.colors.cGreen"
	:label="$t('settings.greentext')"
	/>
	<ContrastRatio :contrast="previewContrast.postGreentext" />
	<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"
	/>
	<ColorInput
	v-model="alertErrorTextColorLocal"
	name="alertErrorText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors.alertErrorText"
	/>
	<ContrastRatio
	:contrast="previewContrast.alertErrorText"
	large
	/>
	<ColorInput
	v-model="alertWarningColorLocal"
	name="alertWarning"
	:label="$t('settings.style.advanced_colors.alert_warning')"
	:fallback="previewTheme.colors.alertWarning"
	/>
	<ColorInput
	v-model="alertWarningTextColorLocal"
	name="alertWarningText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors.alertWarningText"
	/>
	<ContrastRatio
	:contrast="previewContrast.alertWarningText"
	large
	/>
	<ColorInput
	v-model="alertNeutralColorLocal"
	name="alertNeutral"
	:label="$t('settings.style.advanced_colors.alert_neutral')"
	:fallback="previewTheme.colors.alertNeutral"
	/>
	<ColorInput
	v-model="alertNeutralTextColorLocal"
	name="alertNeutralText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors.alertNeutralText"
	/>
	<ContrastRatio
	:contrast="previewContrast.alertNeutralText"
	large
	/>
	<OpacityInput
	v-model="alertOpacityLocal"
	name="alertOpacity"
	:fallback="previewTheme.opacity.alert"
	/>
	</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"
	/>
	<ColorInput
	v-model="badgeNotificationTextColorLocal"
	name="badgeNotificationText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors.badgeNotificationText"
	/>
	<ContrastRatio
	:contrast="previewContrast.badgeNotificationText"
	large
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
	<ColorInput
	v-model="panelColorLocal"
	name="panelColor"
	:fallback="previewTheme.colors.panel"
	:label="$t('settings.background')"
	/>
	<OpacityInput
	v-model="panelOpacityLocal"
	name="panelOpacity"
	:fallback="previewTheme.opacity.panel"
	:disabled="panelColorLocal === 'transparent'"
	/>
	<ColorInput
	v-model="panelTextColorLocal"
	name="panelTextColor"
	:fallback="previewTheme.colors.panelText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio
	:contrast="previewContrast.panelText"
	large
	/>
	<ColorInput
	v-model="panelLinkColorLocal"
	name="panelLinkColor"
	:fallback="previewTheme.colors.panelLink"
	:label="$t('settings.links')"
	/>
	<ContrastRatio
	:contrast="previewContrast.panelLink"
	large
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>
	<ColorInput
	v-model="topBarColorLocal"
	name="topBarColor"
	:fallback="previewTheme.colors.topBar"
	: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="previewTheme.colors.input"
	:label="$t('settings.background')"
	/>
	<OpacityInput
	v-model="inputOpacityLocal"
	name="inputOpacity"
	:fallback="previewTheme.opacity.input"
	:disabled="inputColorLocal === 'transparent'"
	/>
	<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="previewTheme.colors.btn"
	:label="$t('settings.background')"
	/>
	<OpacityInput
	v-model="btnOpacityLocal"
	name="btnOpacity"
	:fallback="previewTheme.opacity.btn"
	:disabled="btnColorLocal === 'transparent'"
	/>
	<ColorInput
	v-model="btnTextColorLocal"
	name="btnTextColor"
	:fallback="previewTheme.colors.btnText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.btnText" />
	<ColorInput
	v-model="btnPanelTextColorLocal"
	name="btnPanelTextColor"
	:fallback="previewTheme.colors.btnPanelText"
	:label="$t('settings.style.advanced_colors.panel_header')"
	/>
	<ContrastRatio :contrast="previewContrast.btnPanelText" />
	<ColorInput
	v-model="btnTopBarTextColorLocal"
	name="btnTopBarTextColor"
	:fallback="previewTheme.colors.btnTopBarText"
	:label="$t('settings.style.advanced_colors.top_bar')"
	/>
	<ContrastRatio :contrast="previewContrast.btnTopBarText" />
	<h5>{{ $t('settings.style.advanced_colors.pressed') }}</h5>
	<ColorInput
	v-model="btnPressedColorLocal"
	name="btnPressedColor"
	:fallback="previewTheme.colors.btnPressed"
	:label="$t('settings.background')"
	/>
	<ColorInput
	v-model="btnPressedTextColorLocal"
	name="btnPressedTextColor"
	:fallback="previewTheme.colors.btnPressedText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.btnPressedText" />
	<ColorInput
	v-model="btnPressedPanelTextColorLocal"
	name="btnPressedPanelTextColor"
	:fallback="previewTheme.colors.btnPressedPanelText"
	:label="$t('settings.style.advanced_colors.panel_header')"
	/>
	<ContrastRatio :contrast="previewContrast.btnPressedPanelText" />
	<ColorInput
	v-model="btnPressedTopBarTextColorLocal"
	name="btnPressedTopBarTextColor"
	:fallback="previewTheme.colors.btnPressedTopBarText"
	:label="$t('settings.style.advanced_colors.top_bar')"
	/>
	<ContrastRatio :contrast="previewContrast.btnPressedTopBarText" />
	<h5>{{ $t('settings.style.advanced_colors.disabled') }}</h5>
	<ColorInput
	v-model="btnDisabledColorLocal"
	name="btnDisabledColor"
	:fallback="previewTheme.colors.btnDisabled"
	:label="$t('settings.background')"
	/>
	<ColorInput
	v-model="btnDisabledTextColorLocal"
	name="btnDisabledTextColor"
	:fallback="previewTheme.colors.btnDisabledText"
	:label="$t('settings.text')"
	/>
	<ColorInput
	v-model="btnDisabledPanelTextColorLocal"
	name="btnDisabledPanelTextColor"
	:fallback="previewTheme.colors.btnDisabledPanelText"
	:label="$t('settings.style.advanced_colors.panel_header')"
	/>
	<ColorInput
	v-model="btnDisabledTopBarTextColorLocal"
	name="btnDisabledTopBarTextColor"
	:fallback="previewTheme.colors.btnDisabledTopBarText"
	:label="$t('settings.style.advanced_colors.top_bar')"
	/>
	<h5>{{ $t('settings.style.advanced_colors.toggled') }}</h5>
	<ColorInput
	v-model="btnToggledColorLocal"
	name="btnToggledColor"
	:fallback="previewTheme.colors.btnToggled"
	:label="$t('settings.background')"
	/>
	<ColorInput
	v-model="btnToggledTextColorLocal"
	name="btnToggledTextColor"
	:fallback="previewTheme.colors.btnToggledText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.btnToggledText" />
	<ColorInput
	v-model="btnToggledPanelTextColorLocal"
	name="btnToggledPanelTextColor"
	:fallback="previewTheme.colors.btnToggledPanelText"
	:label="$t('settings.style.advanced_colors.panel_header')"
	/>
	<ContrastRatio :contrast="previewContrast.btnToggledPanelText" />
	<ColorInput
	v-model="btnToggledTopBarTextColorLocal"
	name="btnToggledTopBarTextColor"
	:fallback="previewTheme.colors.btnToggledTopBarText"
	:label="$t('settings.style.advanced_colors.top_bar')"
	/>
	<ContrastRatio :contrast="previewContrast.btnToggledTopBarText" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.tabs') }}</h4>
	<ColorInput
	v-model="tabColorLocal"
	name="tabColor"
	:fallback="previewTheme.colors.tab"
	:label="$t('settings.background')"
	/>
	<ColorInput
	v-model="tabTextColorLocal"
	name="tabTextColor"
	:fallback="previewTheme.colors.tabText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.tabText" />
	<ColorInput
	v-model="tabActiveTextColorLocal"
	name="tabActiveTextColor"
	:fallback="previewTheme.colors.tabActiveText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.tabActiveText" />
	</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"
	:disabled="borderColorLocal === 'transparent'"
	/>
	</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"
	/>
	</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="previewTheme.colors.underlay"
	/>
	<OpacityInput
	v-model="underlayOpacityLocal"
	name="underlayOpacity"
	:fallback="previewTheme.opacity.underlay"
	:disabled="underlayOpacityLocal === 'transparent'"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.wallpaper') }}</h4>
	<ColorInput
	v-model="wallpaperColorLocal"
	name="wallpaper"
	:label="$t('settings.style.advanced_colors.wallpaper')"
	:fallback="previewTheme.colors.wallpaper"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.poll') }}</h4>
	<ColorInput
	v-model="pollColorLocal"
	name="poll"
	:label="$t('settings.background')"
	:fallback="previewTheme.colors.poll"
	/>
	<ColorInput
	v-model="pollTextColorLocal"
	name="pollText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors.pollText"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.icons') }}</h4>
	<ColorInput
	v-model="iconColorLocal"
	name="icon"
	:label="$t('settings.style.advanced_colors.icons')"
	:fallback="previewTheme.colors.icon"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.highlight') }}</h4>
	<ColorInput
	v-model="highlightColorLocal"
	name="highlight"
	:label="$t('settings.background')"
	:fallback="previewTheme.colors.highlight"
	/>
	<ColorInput
	v-model="highlightTextColorLocal"
	name="highlightText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors.highlightText"
	/>
	<ContrastRatio :contrast="previewContrast.highlightText" />
	<ColorInput
	v-model="highlightLinkColorLocal"
	name="highlightLink"
	:label="$t('settings.links')"
	:fallback="previewTheme.colors.highlightLink"
	/>
	<ContrastRatio :contrast="previewContrast.highlightLink" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.popover') }}</h4>
	<ColorInput
	v-model="popoverColorLocal"
	name="popover"
	:label="$t('settings.background')"
	:fallback="previewTheme.colors.popover"
	/>
	<OpacityInput
	v-model="popoverOpacityLocal"
	name="popoverOpacity"
	:fallback="previewTheme.opacity.popover"
	:disabled="popoverOpacityLocal === 'transparent'"
	/>
	<ColorInput
	v-model="popoverTextColorLocal"
	name="popoverText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors.popoverText"
	/>
	<ContrastRatio :contrast="previewContrast.popoverText" />
	<ColorInput
	v-model="popoverLinkColorLocal"
	name="popoverLink"
	:label="$t('settings.links')"
	:fallback="previewTheme.colors.popoverLink"
	/>
	<ContrastRatio :contrast="previewContrast.popoverLink" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.selectedPost') }}</h4>
	<ColorInput
	v-model="selectedPostColorLocal"
	name="selectedPost"
	:label="$t('settings.background')"
	:fallback="previewTheme.colors.selectedPost"
	/>
	<ColorInput
	v-model="selectedPostTextColorLocal"
	name="selectedPostText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors.selectedPostText"
	/>
	<ContrastRatio :contrast="previewContrast.selectedPostText" />
	<ColorInput
	v-model="selectedPostLinkColorLocal"
	name="selectedPostLink"
	:label="$t('settings.links')"
	:fallback="previewTheme.colors.selectedPostLink"
	/>
	<ContrastRatio :contrast="previewContrast.selectedPostLink" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.selectedMenu') }}</h4>
	<ColorInput
	v-model="selectedMenuColorLocal"
	name="selectedMenu"
	:label="$t('settings.background')"
	:fallback="previewTheme.colors.selectedMenu"
	/>
	<ColorInput
	v-model="selectedMenuTextColorLocal"
	name="selectedMenuText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors.selectedMenuText"
	/>
	<ContrastRatio :contrast="previewContrast.selectedMenuText" />
	<ColorInput
	v-model="selectedMenuLinkColorLocal"
	name="selectedMenuLink"
	:label="$t('settings.links')"
	:fallback="previewTheme.colors.selectedMenuLink"
	/>
	<ContrastRatio :contrast="previewContrast.selectedMenuLink" />
	</div>
	<div class="color-item">
	<h4>{{ $t('chats.chats') }}</h4>
	<ColorInput
	v-model="chatBgColorLocal"
	name="chatBgColor"
	:fallback="previewTheme.colors.bg"
	:label="$t('settings.background')"
	/>
	<h5>{{ $t('settings.style.advanced_colors.chat.incoming') }}</h5>
	<ColorInput
	v-model="chatMessageIncomingBgColorLocal"
	name="chatMessageIncomingBgColor"
	:fallback="previewTheme.colors.bg"
	:label="$t('settings.background')"
	/>
	<ColorInput
	v-model="chatMessageIncomingTextColorLocal"
	name="chatMessageIncomingTextColor"
	:fallback="previewTheme.colors.text"
	:label="$t('settings.text')"
	/>
	<ColorInput
	v-model="chatMessageIncomingLinkColorLocal"
	name="chatMessageIncomingLinkColor"
	:fallback="previewTheme.colors.link"
	:label="$t('settings.links')"
	/>
	<ColorInput
	v-model="chatMessageIncomingBorderColorLocal"
	name="chatMessageIncomingBorderLinkColor"
	:fallback="previewTheme.colors.fg"
	:label="$t('settings.style.advanced_colors.chat.border')"
	/>
	<h5>{{ $t('settings.style.advanced_colors.chat.outgoing') }}</h5>
	<ColorInput
	v-model="chatMessageOutgoingBgColorLocal"
	name="chatMessageOutgoingBgColor"
	:fallback="previewTheme.colors.bg"
	:label="$t('settings.background')"
	/>
	<ColorInput
	v-model="chatMessageOutgoingTextColorLocal"
	name="chatMessageOutgoingTextColor"
	:fallback="previewTheme.colors.text"
	:label="$t('settings.text')"
	/>
	<ColorInput
	v-model="chatMessageOutgoingLinkColorLocal"
	name="chatMessageOutgoingLinkColor"
	:fallback="previewTheme.colors.link"
	:label="$t('settings.links')"
	/>
	<ColorInput
	v-model="chatMessageOutgoingBorderColorLocal"
	name="chatMessageOutgoingBorderLinkColor"
	:fallback="previewTheme.colors.bg"
	:label="$t('settings.style.advanced_colors.chat.border')"
	/>
	</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 button-default"
	@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"
	/>
	<RangeInput
	v-model="chatMessageRadiusLocal"
	name="chatMessageRadius"
	:label="$t('settings.chatMessageRadius')"
	:fallback="previewTheme.radii.chatMessage \|\| 2"
	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') }}
	<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>
	</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 button-default"
	@click="clearShadows"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	<ShadowControl
	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 button-default"
	@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 button-default submit"
	:disabled="!themeValid"
	@click="setCustomTheme"
	>
	{{ $t('general.apply') }}
	</button>
	<button
	class="btn button-default"
	@click="clearAll"
	>
	{{ $t('settings.style.switcher.reset') }}
	</button>
	</div>
	</div>
	</template>

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

	<style src="./theme_tab.scss" lang="scss"></style>
	diff --git a/src/modules/config.js b/src/modules/config.js
	index bdab3f4dbb..33e2cb50f8 100644
	--- a/src/modules/config.js
	+++ b/src/modules/config.js
	@@ -1,150 +1,151 @@
	import { set, delete as del } from 'vue'
	import { setPreset, applyTheme } from '../services/style_setter/style_setter.js'
	import messages from '../i18n/messages'

	const browserLocale = (window.navigator.language \|\| 'en').split('-')[0]

	/* TODO this is a bit messy.
	* We need to declare settings with their types and also deal with
	* instance-default settings in some way, hopefully try to avoid copy-pasta
	* in general.
	*/
	export const multiChoiceProperties = [
	'postContentType',
	'subjectLineBehavior'
	]

	export const defaultState = {
	colors: {},
	theme: undefined,
	customTheme: undefined,
	customThemeSource: undefined,
	hideISP: false,
	hideInstanceWallpaper: false,
	hideShoutbox: false,
	// bad name: actually hides posts of muted USERS
	hideMutedPosts: undefined, // instance default
	collapseMessageWithSubject: undefined, // instance default
	padEmoji: true,
	hideAttachments: false,
	hideAttachmentsInConv: false,
	maxThumbnails: 16,
	hideNsfw: true,
	preloadImage: true,
	loopVideo: true,
	loopVideoSilentOnly: true,
	streaming: false,
	emojiReactionsOnTimeline: true,
	autohideFloatingPostButton: false,
	pauseOnUnfocused: true,
	stopGifs: false,
	replyVisibility: 'all',
	notificationVisibility: {
	follows: true,
	mentions: true,
	likes: true,
	repeats: true,
	moves: true,
	emojiReactions: true,
	followRequest: true,
	chatMention: true
	},
	webPushNotifications: false,
	muteWords: [],
	highlight: {},
	interfaceLanguage: browserLocale,
	hideScopeNotice: false,
	useStreamingApi: false,
	sidebarRight: undefined, // instance default
	scopeCopy: undefined, // instance default
	subjectLineBehavior: undefined, // instance default
	alwaysShowSubjectInput: undefined, // instance default
	postContentType: undefined, // instance default
	minimalScopesMode: undefined, // instance default
	// This hides statuses filtered via a word filter
	hideFilteredStatuses: undefined, // instance default
	playVideosInModal: false,
	useOneClickNsfw: false,
	useContainFit: false,
	greentext: undefined, // instance default
	hidePostStats: undefined, // instance default
	hideUserStats: undefined, // instance default
	virtualScrolling: undefined, // instance default
	sensitiveByDefault: undefined // instance default
	}

	// caching the instance default properties
	export const instanceDefaultProperties = Object.entries(defaultState)
	.filter(([key, value]) => value === undefined)
	.map(([key, value]) => key)

	const config = {
	state: { ...defaultState },
	getters: {
	defaultConfig (state, getters, rootState, rootGetters) {
	const { instance } = rootState
	return {
	...defaultState,
	...Object.fromEntries(
	instanceDefaultProperties.map(key => [key, instance[key]])
	)
	}
	},
	mergedConfig (state, getters, rootState, rootGetters) {
	const { defaultConfig } = rootGetters
	return {
	...defaultConfig,
	- ...state
	+ // Do not override with undefined
	+ ...Object.fromEntries(Object.entries(state).filter(([k, v]) => v !== undefined))
	}
	}
	},
	mutations: {
	setOption (state, { name, value }) {
	set(state, name, value)
	},
	setHighlight (state, { user, color, type }) {
	const data = this.state.config.highlight[user]
	if (color \|\| type) {
	set(state.highlight, user, { color: color \|\| data.color, type: type \|\| data.type })
	} else {
	del(state.highlight, user)
	}
	}
	},
	actions: {
	loadSettings ({ dispatch }, data) {
	const knownKeys = new Set(Object.keys(defaultState))
	const presentKeys = new Set(Object.keys(data))
	const intersection = new Set()
	for (let elem of presentKeys) {
	if (knownKeys.has(elem)) {
	intersection.add(elem)
	}
	}

	intersection.forEach(
	name => dispatch('setOption', { name, value: data[name] })
	)
	},
	setHighlight ({ commit, dispatch }, { user, color, type }) {
	commit('setHighlight', { user, color, type })
	},
	setOption ({ commit, dispatch }, { name, value }) {
	commit('setOption', { name, value })
	switch (name) {
	case 'theme':
	setPreset(value)
	break
	case 'customTheme':
	case 'customThemeSource':
	applyTheme(value)
	break
	case 'interfaceLanguage':
	messages.setLanguage(this.getters.i18n, value)
	break
	}
	}
	}
	}

	export default config

File Metadata

Mime Type: text/x-diff
Expires: Sat, Aug 29, 2:39 AM (1 d, 6 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1736758
Default Alt Text: (72 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions