Add theme import feature
This commit is contained in:
parent
f36984c4a4
commit
d2b79856c6
3 changed files with 24 additions and 0 deletions
|
@ -52,6 +52,28 @@ export default {
|
|||
document.body.removeChild(e)
|
||||
},
|
||||
|
||||
importTheme () {
|
||||
const filePicker = document.createElement('input')
|
||||
filePicker.setAttribute('type', 'file')
|
||||
filePicker.setAttribute('accept', '.json')
|
||||
|
||||
filePicker.addEventListener('change', event => {
|
||||
if (event.target.files[0]) {
|
||||
// eslint-disable-next-line no-undef
|
||||
const reader = new FileReader()
|
||||
reader.onload = ({target}) => {
|
||||
const parsed = JSON.parse(target.result)
|
||||
this.normalizeLocalState(parsed.colors, parsed.radii)
|
||||
}
|
||||
reader.readAsText(event.target.files[0])
|
||||
}
|
||||
})
|
||||
|
||||
document.body.appendChild(filePicker)
|
||||
filePicker.click()
|
||||
document.body.removeChild(filePicker)
|
||||
},
|
||||
|
||||
setCustomTheme () {
|
||||
if (!this.bgColorLocal && !this.btnColorLocal && !this.linkColorLocal) {
|
||||
// reset to picked themes
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button>
|
||||
<button class="btn" @click="importTheme">{{ $t('settings.import_theme') }}</button>
|
||||
</div>
|
||||
<div class="color-container">
|
||||
<p>{{$t('settings.theme_help')}}</p>
|
||||
|
|
|
@ -289,6 +289,7 @@ const en = {
|
|||
theme: 'Theme',
|
||||
presets: 'Presets',
|
||||
export_theme: 'Export current theme',
|
||||
import_theme: 'Load saved theme',
|
||||
theme_help: 'Use hex color codes (#rrggbb) to customize your color theme.',
|
||||
radii_help: 'Set up interface edge rounding (in pixels)',
|
||||
background: 'Background',
|
||||
|
|
Loading…
Reference in a new issue