Use custom theme colors for in-world UI

.storybook/main.js

@@ -7,7 +7,8 @@ if (fs.existsSync(themesPath)) {
   const appConfig = {};
 
   const themesString = fs.readFileSync(themesPath).toString();
-  appConfig.themes = JSON.parse(themesString);
+  appConfig.theme = {};
+  appConfig.theme.themes = JSON.parse(themesString);
 
   process.env.STORYBOOK_APP_CONFIG = JSON.stringify(appConfig);
 }

admin/src/react-components/service-editor.js

@@ -355,6 +355,7 @@ class ConfigurationEditor extends Component {
   renderTree(schema, category, config) {
     const configurables = getDescriptors(schema[category])
       .filter(([, descriptor]) => qs.get("show_internal_configs") !== null || descriptor.internal !== "true")
+      .filter(([, descriptor]) => qs.get("show_deprecated_configs") !== null || descriptor.deprecated !== "true")
       .map(([path, descriptor]) => this.renderConfigurable(path, descriptor, getConfigValue(config, path)));
 
     return (

admin/src/utils/ita.js

@@ -10,7 +10,6 @@ const schemaCategories = [
   "rooms",
   "images",
   "theme",
-  "themes",
   "links",
   "auth"
 ];
@@ -40,8 +39,6 @@ function getCategoryDisplayName(category) {
     case "images":
       return "Images";
     case "theme":
-      return "Theme";
-    case "themes":
       return "Themes";
     case "links":
       return "Links";

src/react-components/styles/theme.js

@@ -13,13 +13,13 @@ if (!config) {
   config = window.APP_CONFIG;
 }
 
-if (config && config.themes_failed_to_load) {
+if (config && config.theme && config.theme.failed_to_load) {
   console.error("Custom themes failed to load. If you are an admin, reconfigure your themes in the admin panel.");
 }
 
 export const defaultTheme = "default";
 
-export const themes = (config && config.themes) || [];
+export const themes = (config && config.theme && config.theme.themes) || [];
 
 function useDarkMode() {
   const [darkMode, setDarkMode] = useState(false);

src/schema.toml

@@ -59,19 +59,18 @@ images.landing_rooms_thumb = { category = "images", type = "file", internal = "t
 images.landing_communicate_thumb = { category = "images", type = "file", internal = "true" }
 images.landing_media_thumb = { category = "images", type = "file", internal = "true" }
 
-theme.dark-theme = { category = "theme", type = "boolean", name = "Dark Mode", description = "Use dark UI styling.", deprecated="true" }
-theme.action-color = { category = "theme", type = "color", name = "Primary Color", description = "Call to action button color.", deprecated="true" }
-theme.action-color-highlight = { category = "theme", type = "color", name = "Highlighted Primary Color", description = "Highlighted call to action color.", deprecated="true" }
-theme.action-color-disabled = { category = "theme", type = "color", name = "Disabled Primary Color", description = "Disabled call to action color.", deprecated="true" }
-theme.action-text-color = { category = "theme", type = "color", name = "Primary Text Color", description = "Call to action button text color.", deprecated="true" }
-theme.action-subtitle-color = { category = "theme", type = "color", name = "Primary Subtitle Color", description = "Call to action button subtitle text color.", deprecated="true" }
-theme.action-label-color = { category = "theme", type = "color", name = "Primary Label Color", description = "Call to action label color.", deprecated="true" }
-theme.notice-background-color = { category = "theme", type = "color", name = "Secondary Color", description = "Notice and indicator color.", deprecated="true" }
-theme.notice-text-color = { category = "theme", type = "color", name = "Secondary Text Color", description = "Notice and indicator text color.", deprecated="true" }
-theme.notice-widget-color = { category = "theme", type = "color", name = "Secondary Widget Color", description = "Notice and indicator UI widget color.", deprecated="true" }
-theme.favorited-color = { category = "theme", type = "color", name = "Favorited Color", description = "Favorited Color" }
-
-themes = { category = "themes", type = "longstring", name = "Themes", description = "A json array describing custom client themes.", json="true"}
+theme.dark-theme = { category = "theme", type = "boolean", name = "Dark Mode", description = "[deprecated] Use dark UI styling.", deprecated="true" }
+theme.action-color = { category = "theme", type = "color", name = "Primary Color", description = "[deprecated] Call to action button color.", deprecated="true" }
+theme.action-color-highlight = { category = "theme", type = "color", name = "Highlighted Primary Color", description = "[deprecated] Highlighted call to action color.", deprecated="true" }
+theme.action-color-disabled = { category = "theme", type = "color", name = "Disabled Primary Color", description = "[deprecated] Disabled call to action color.", deprecated="true" }
+theme.action-text-color = { category = "theme", type = "color", name = "Primary Text Color", description = "[deprecated] Call to action button text color.", deprecated="true" }
+theme.action-subtitle-color = { category = "theme", type = "color", name = "Primary Subtitle Color", description = "[deprecated] Call to action button subtitle text color.", deprecated="true" }
+theme.action-label-color = { category = "theme", type = "color", name = "Primary Label Color", description = "[deprecated] Call to action label color.", deprecated="true" }
+theme.notice-background-color = { category = "theme", type = "color", name = "Secondary Color", description = "[deprecated] Notice and indicator color.", deprecated="true" }
+theme.notice-text-color = { category = "theme", type = "color", name = "Secondary Text Color", description = "[deprecated] Notice and indicator text color.", deprecated="true" }
+theme.notice-widget-color = { category = "theme", type = "color", name = "Secondary Widget Color", description = "[deprecated] Notice and indicator UI widget color.", deprecated="true" }
+theme.favorited-color = { category = "theme", type = "color", name = "Favorited Color", description = "[deprecated] Favorited Color", deprecated = "true" }
+theme.themes = { category = "theme", type = "longstring", name = "Themes", description = "A json array describing custom client themes.", json="true"}
 
 links.terms_of_use = { category = "links", type = "string", name = "Terms of Use", description = "Link to your terms of use page."}
 links.privacy_notice = { category = "links", type = "string", name = "Privacy Notice", description = "Link to your privacy page."}

src/utils/theme.js

@@ -18,19 +18,22 @@ const DEFAULT_COLORS = {
 };
 
 function getThemeColor(name) {
-  if (configs.APP_CONFIG && configs.APP_CONFIG.theme && configs.APP_CONFIG.theme[name])
-    return configs.APP_CONFIG.theme[name];
+  const themeId = window.APP?.store?.state?.preferences?.theme;
+
+  const theme =
+    themeId &&
+    configs.APP_CONFIG &&
+    configs.APP_CONFIG.theme &&
+    configs.APP_CONFIG.theme.themes &&
+    configs.APP_CONFIG.theme.themes.find(theme => theme.id === themeId);
+  if (theme && theme.variables && theme.variables[name]) {
+    return theme.variables[name];
+  }
 
   return DEFAULT_COLORS[name];
 }
 
-waitForDOMContentLoaded().then(() => {
-  if (configs.APP_CONFIG && configs.APP_CONFIG.theme && configs.APP_CONFIG.theme["dark-theme"]) {
-    document.body.classList.add("dark-theme");
-  } else {
-    document.body.classList.add("light-theme");
-  }
-
+function activateTheme() {
   const actionColor = getThemeColor("action-color");
   const actionHoverColor = getThemeColor("action-color-highlight");
 
@@ -66,6 +69,27 @@ waitForDOMContentLoaded().then(() => {
         `textHoverColor: #fff; textColor: #fff; backgroundColor: ${actionColor}; backgroundHoverColor: ${actionHoverColor}`
       );
   }
+}
+
+const onStoreChanged = (function() {
+  let themeId;
+  return function onStoreChanged() {
+    const newThemeId = window.APP?.store?.state?.preferences?.theme;
+    if (themeId !== newThemeId) {
+      themeId = newThemeId;
+      activateTheme();
+    }
+  };
+})();
+
+waitForDOMContentLoaded().then(() => {
+  if (configs.APP_CONFIG && configs.APP_CONFIG.theme && configs.APP_CONFIG.theme["dark-theme"]) {
+    document.body.classList.add("dark-theme");
+  } else {
+    document.body.classList.add("light-theme");
+  }
+  activateTheme();
+  window.APP?.store?.addEventListener("statechanged", onStoreChanged);
 });
 
 function applyThemeToTextButton(el, highlighted) {

themes.json

@@ -35,7 +35,11 @@
       "border1-color": "#3A4048",
       "border2-color": "#5D646C",
       "border3-color": "#5D646C",
-      "outline-color": "#ffffff"
+      "outline-color": "#ffffff",
+      "action-color": "#ff3464",
+      "action-color-highlight": "#ff74a4",
+      "background-hover-color": "#aaaaaa",
+      "notice-background-color": "#2f80ed"
     }
   }
-]
+]