Picking the default theme from the user preferences on reload when it is a plugin (#923)

Co-authored-by: Hossein <hahmadia@users.noreply.github.com>

mattermost-plugin/webapp/src/index.tsx

@@ -6,6 +6,7 @@ import {Provider as ReduxProvider} from 'react-redux'
 import {useHistory} from 'mm-react-router-dom'
 
 import {GlobalState} from 'mattermost-redux/types/store'
+import {getTheme} from 'mattermost-redux/selectors/entities/preferences'
 
 const windowAny = (window as any)
 windowAny.baseURL = '/plugins/focalboard'
@@ -16,6 +17,7 @@ import App from '../../../webapp/src/app'
 import store from '../../../webapp/src/store'
 import GlobalHeader from '../../../webapp/src/components/globalHeader/globalHeader'
 import FocalboardIcon from '../../../webapp/src/widgets/icons/logo'
+import {setMattermostTheme} from '../../../webapp/src/theme'
 
 import '../../../webapp/src/styles/focalboard-variables.scss'
 import '../../../webapp/src/styles/main.scss'
@@ -81,6 +83,16 @@ export default class Plugin {
     public async initialize(registry: PluginRegistry, store: Store<GlobalState, Action<Record<string, unknown>>>) {
         this.registry = registry
 
+        let theme = getTheme(store.getState())
+        setMattermostTheme(theme)
+        store.subscribe(() => {
+            const currentTheme = getTheme(store.getState())
+            if (currentTheme !== theme && currentTheme) {
+                setMattermostTheme(currentTheme)
+                theme = currentTheme
+            }
+        })
+
         if (this.registry.registerProduct) {
             windowAny.frontendBaseURL = '/boards'
             const goToFocalboardWorkspace = () => {

webapp/src/theme.ts

@@ -169,6 +169,29 @@ export function setTheme(theme: Theme | null): Theme {
     return consolidatedTheme
 }
 
+export function setMattermostTheme(theme: any): Theme {
+    document.documentElement.style.setProperty('--center-channel-bg-rgb', color(theme.centerChannelBg).rgb().array().join(', '))
+    document.documentElement.style.setProperty('--center-channel-color-rgb', color(theme.centerChannelColor).rgb().array().join(', '))
+    document.documentElement.style.setProperty('--button-bg-rgb', color(theme.buttonBg).rgb().array().join(', '))
+    document.documentElement.style.setProperty('--button-color-rgb', color(theme.buttonColor).rgb().array().join(', '))
+    document.documentElement.style.setProperty('--sidebar-bg-rgb', color(theme.sidebarBg).rgb().array().join(', '))
+    document.documentElement.style.setProperty('--sidebar-text-rgb', color(theme.sidebarText).rgb().array().join(', '))
+    document.documentElement.style.setProperty('--link-color-rgb', color(theme.linkColor).rgb().array().join(', '))
+    document.documentElement.style.setProperty('--sidebar-text-active-border', color(theme.sidebarTextActiveBorder).rgb().array().join(', '))
+
+    return setTheme({
+        ...defaultTheme,
+        mainBg: color(theme.centerChannelBg).rgb().array().join(', '),
+        mainFg: color(theme.centerChannelColor).rgb().array().join(', '),
+        buttonBg: color(theme.buttonBg).rgb().array().join(', '),
+        buttonFg: color(theme.buttonColor).rgb().array().join(', '),
+        sidebarBg: color(theme.sidebarBg).rgb().array().join(', '),
+        sidebarFg: color(theme.sidebarColor || '#ffffff').rgb().array().join(', '),
+        sidebarTextActiveBorder: color(theme.sidebarTextActiveBorder).rgb().array().join(', '),
+        link: color(theme.linkColor).rgb().array().join(', '),
+    })
+}
+
 function setActiveThemeName(consolidatedTheme: Theme, theme: Theme | null) {
     if (theme === null) {
         activeThemeName = systemThemeName