Fix theme apply button so it updates instantly

I tried to do this while keeping the CSP changes but it seems like it is impossible, however, the themes do with with these enabled still and the CSP changes still working, so I am not sure why they were even implemented.
This commit is contained in:
Chizu 2023-03-13 17:56:48 +09:00
parent 9e98ace04f
commit 6b180d30b3
5 changed files with 9 additions and 6 deletions

1
.gitignore vendored
View file

@ -10,3 +10,4 @@ config/local.json
config/local.*.json config/local.*.json
docs/site/ docs/site/
.vscode/ .vscode/
*.log

View file

@ -10,7 +10,6 @@
<link rel="stylesheet" href="/static/font/css/lato.css"> <link rel="stylesheet" href="/static/font/css/lato.css">
<link rel="stylesheet" href="/static/mfm.css"> <link rel="stylesheet" href="/static/mfm.css">
<link rel="stylesheet" href="/static/custom.css"> <link rel="stylesheet" href="/static/custom.css">
<link rel="stylesheet" href="/static/theme-holder.css" id="theme-holder">
<!--server-generated-meta--> <!--server-generated-meta-->
<link rel="icon" type="image/png" href="/favicon.png"> <link rel="icon" type="image/png" href="/favicon.png">
<link rel="manifest" href="/manifest.json"> <link rel="manifest" href="/manifest.json">

View file

@ -115,7 +115,8 @@ export default {
avatarRadiusLocal: '', avatarRadiusLocal: '',
avatarAltRadiusLocal: '', avatarAltRadiusLocal: '',
attachmentRadiusLocal: '', attachmentRadiusLocal: '',
tooltipRadiusLocal: '' tooltipRadiusLocal: '',
chatMessageRadiusLocal: ''
} }
}, },
created () { created () {
@ -230,7 +231,8 @@ export default {
avatar: this.avatarRadiusLocal, avatar: this.avatarRadiusLocal,
avatarAlt: this.avatarAltRadiusLocal, avatarAlt: this.avatarAltRadiusLocal,
tooltip: this.tooltipRadiusLocal, tooltip: this.tooltipRadiusLocal,
attachment: this.attachmentRadiusLocal attachment: this.attachmentRadiusLocal,
chatMessage: this.chatMessageRadiusLocal
} }
}, },
preview () { preview () {

View file

@ -4,10 +4,12 @@ import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/th
export const applyTheme = (input) => { export const applyTheme = (input) => {
const { rules } = generatePreset(input) const { rules } = generatePreset(input)
const head = document.head
const body = document.body const body = document.body
body.classList.add('hidden') body.classList.add('hidden')
const styleEl = document.getElementById('theme-holder') const styleEl = document.createElement('style')
head.appendChild(styleEl)
const styleSheet = styleEl.sheet const styleSheet = styleEl.sheet
styleSheet.toString() styleSheet.toString()

View file

@ -1 +0,0 @@
// This file intentionally left blank