+
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 1efe1b04f8..4e242b91b9 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -174,6 +174,7 @@
font-size: 1em;
font-family: var(--font);
border-radius: var(--roundness);
+ background-color: var(--background);
position: relative;
white-space: nowrap;
padding: 6px 1em;
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 90daaf7df3..70a76d54c5 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -204,6 +204,11 @@
--emoji-size: 1.7em;
+ .RichContent {
+ /* stylelint-disable-next-line declaration-no-important */
+ --link: var(--text) !important;
+ }
+
.top-line,
.bottom-line {
display: flex;
diff --git a/src/modules/instance.js b/src/modules/instance.js
index c7a2cad1fd..76269eceae 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -386,6 +386,7 @@ const instance = {
} else {
applyTheme(themeData.theme)
}
+ commit('setThemeApplied')
})
},
fetchEmoji ({ dispatch, state }) {
diff --git a/src/modules/interface.js b/src/modules/interface.js
index f8d62d87cc..39242b9d6b 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -1,4 +1,5 @@
const defaultState = {
+ themeApplied: false,
settingsModalState: 'hidden',
settingsModalLoadedUser: false,
settingsModalLoadedAdmin: false,
@@ -35,6 +36,9 @@ const interfaceMod = {
state.settings.currentSaveStateNotice = { error: true, errorData: error }
}
},
+ setThemeApplied (state) {
+ state.themeApplied = true
+ },
setNotificationPermission (state, permission) {
state.notificationPermission = permission
},
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 0a6b9428bf..95198ec7c9 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -6,7 +6,13 @@ import { getCssRules } from '../theme_data/css_utils.js'
import { defaultState } from '../../modules/config.js'
import { chunk } from 'lodash'
-export const applyTheme = async (input) => {
+export const generateTheme = async (input, callbacks) => {
+ const {
+ onNewRule = (rule, isLazy) => {},
+ onLazyFinished = () => {},
+ onEagerFinished = () => {}
+ } = callbacks
+
let extraRules
if (input.themeFileVersion === 1) {
extraRules = convertTheme2To3(input)
@@ -17,11 +23,6 @@ export const applyTheme = async (input) => {
// Assuming that "worst case scenario background" is panel background since it's the most likely one
const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim())
- const body = document.body
-
- const styleSheet = new CSSStyleSheet()
- document.adoptedStyleSheets = [styleSheet]
- body.classList.add('hidden')
getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
// Hacks to support multiple selectors on same component
@@ -37,13 +38,12 @@ export const applyTheme = async (input) => {
parts[1],
'}'
].join('')
- styleSheet.insertRule(newRule, 'index-max')
+ onNewRule(newRule, false)
} else {
- styleSheet.insertRule(rule, 'index-max')
+ onNewRule(rule, false)
}
})
-
- body.classList.remove('hidden')
+ onEagerFinished()
// Optimization - instead of processing all lazy rules in one go, process them in small chunks
// so that UI can do other things and be somewhat responsive while less important rules are being
@@ -61,13 +61,15 @@ export const applyTheme = async (input) => {
parts[0],
', ',
parts[0].replace(/\.modal-view/, '#modal'),
+ ', ',
+ parts[0].replace(/\.modal-view/, '.shout-panel'),
' {',
parts[1],
'}'
].join('')
- styleSheet.insertRule(newRule, 'index-max')
+ onNewRule(newRule, true)
} else {
- styleSheet.insertRule(rule, 'index-max')
+ onNewRule(rule, true)
}
})
// const t1 = performance.now()
@@ -76,10 +78,39 @@ export const applyTheme = async (input) => {
counter += 1
if (counter < chunks.length) {
setTimeout(processChunk, 0)
+ } else {
+ onLazyFinished()
}
})
}
- setTimeout(processChunk, 0)
+
+ return { lazyProcessFunc: processChunk }
+}
+
+export const applyTheme = async (input) => {
+ const styleSheet = new CSSStyleSheet()
+ const lazyStyleSheet = new CSSStyleSheet()
+
+ const { lazyProcessFunc } = await generateTheme(
+ input,
+ {
+ onNewRule (rule, isLazy) {
+ if (isLazy) {
+ lazyStyleSheet.insertRule(rule, 'index-max')
+ } else {
+ styleSheet.insertRule(rule, 'index-max')
+ }
+ },
+ onEagerFinished () {
+ document.adoptedStyleSheets = [styleSheet]
+ },
+ onLazyFinished () {
+ document.adoptedStyleSheets = [styleSheet, lazyStyleSheet]
+ }
+ }
+ )
+
+ setTimeout(lazyProcessFunc, 0)
return Promise.resolve()
}
diff --git a/src/services/theme_data/theme2_keys.js b/src/services/theme_data/theme2_keys.js
index 69089e1363..ffc5627c43 100644
--- a/src/services/theme_data/theme2_keys.js
+++ b/src/services/theme_data/theme2_keys.js
@@ -158,12 +158,12 @@ export default [
'alertPopupNeutral',
'alertPopupNeutralText',
- 'badgeNotification',
- 'badgeNotificationText',
-
'badgeNeutral',
'badgeNeutralText',
+ 'badgeNotification',
+ 'badgeNotificationText',
+
'chatBg',
'chatMessageIncomingBg',
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index e150369f27..6ea128369e 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -517,6 +517,8 @@ export const convertTheme2To3 = (data) => {
} else if (newRule.component === 'Badge') {
if (newRule.variant === 'notification') {
return [newRule, { component: 'Root', directives: { '--badgeNotification': 'color | ' + newRule.directives.background } }]
+ } else if (newRule.variant === 'neutral') {
+ return [{ ...newRule, variant: 'normal' }]
} else {
return [newRule]
}