Merge pull request #1308 from asaadmahmoodspin/plt-960

Plt 960 - Moving code themes into custom themes

web/react/utils/constants.jsx

@@ -159,7 +159,8 @@ module.exports = {
             buttonBg: '#2389d7',
             buttonColor: '#FFFFFF',
             mentionHighlightBg: '#fff2bb',
-            mentionHighlightLink: '#2f81b7'
+            mentionHighlightLink: '#2f81b7',
+            codeTheme: 'github'
         },
         organization: {
             type: 'Organization',
@@ -181,7 +182,8 @@ module.exports = {
             buttonBg: '#1dacfc',
             buttonColor: '#FFFFFF',
             mentionHighlightBg: '#fff2bb',
-            mentionHighlightLink: '#2f81b7'
+            mentionHighlightLink: '#2f81b7',
+            codeTheme: 'github'
         },
         mattermostDark: {
             type: 'Mattermost Dark',
@@ -203,7 +205,8 @@ module.exports = {
             buttonBg: '#4CBBA4',
             buttonColor: '#FFFFFF',
             mentionHighlightBg: '#984063',
-            mentionHighlightLink: '#A4FFEB'
+            mentionHighlightLink: '#A4FFEB',
+            codeTheme: 'solarized_dark'
         },
         windows10: {
             type: 'Windows Dark',
@@ -225,7 +228,8 @@ module.exports = {
             buttonBg: '#0177e7',
             buttonColor: '#FFFFFF',
             mentionHighlightBg: '#784098',
-            mentionHighlightLink: '#A4FFEB'
+            mentionHighlightLink: '#A4FFEB',
+            codeTheme: 'monokai'
         }
     },
     THEME_ELEMENTS: [
@@ -304,14 +308,30 @@ module.exports = {
         {
             id: 'mentionHighlightLink',
             uiName: 'Mention Highlight Link'
+        },
+        {
+            id: 'codeTheme',
+            uiName: 'Code Theme',
+            themes: [
+                {
+                    id: 'solarized_dark',
+                    uiName: 'Solarized Dark'
+                },
+                {
+                    id: 'solarized_light',
+                    uiName: 'Solarized Light'
+                },
+                {
+                    id: 'github',
+                    uiName: 'GitHub'
+                },
+                {
+                    id: 'monokai',
+                    uiName: 'Monokai'
+                }
+            ]
         }
     ],
-    CODE_THEMES: {
-        github: 'GitHub',
-        solarized_light: 'Solarized light',
-        monokai: 'Monokai',
-        solarized_dark: 'Solarized Dark'
-    },
     DEFAULT_CODE_THEME: 'github',
     Preferences: {
         CATEGORY_DIRECT_CHANNEL_SHOW: 'direct_channel_show',

web/react/utils/utils.jsx

@@ -438,11 +438,6 @@ export function toTitleCase(str) {
 }
 
 export function applyTheme(theme) {
-    if (!theme.codeTheme) {
-        theme.codeTheme = Constants.DEFAULT_CODE_THEME;
-    }
-    updateCodeTheme(theme.codeTheme);
-
     if (theme.sidebarBg) {
         changeCss('.sidebar--left, .settings-modal .settings-table .settings-links, .sidebar--menu', 'background:' + theme.sidebarBg, 1);
     }
@@ -598,6 +593,11 @@ export function applyTheme(theme) {
     if (theme.mentionHighlightLink) {
         changeCss('.mention-highlight .mention-link', 'color:' + theme.mentionHighlightLink, 1);
     }
+
+    if (!theme.codeTheme) {
+        theme.codeTheme = Constants.DEFAULT_CODE_THEME;
+    }
+    updateCodeTheme(theme.codeTheme);
 }
 export function changeCss(className, classValue, classRepeat) {
     // we need invisible container to store additional css definitions