Support workspace theme option as JSON (#3379)

* Allow passing in a theme as JSON

core/options.js

@@ -23,6 +23,8 @@
 
 goog.provide('Blockly.Options');
 
+goog.require('Blockly.Theme');
+goog.require('Blockly.Themes.Classic');
 goog.require('Blockly.utils.userAgent');
 goog.require('Blockly.Xml');
 
@@ -114,7 +116,6 @@ Blockly.Options = function(options) {
   } else {
     var oneBasedIndex = !!options['oneBasedIndex'];
   }
-  var theme = options['theme'];
   var keyMap = options['keyMap'] || Blockly.user.keyMap.createDefaultKeyMap();
 
   var renderer = options['renderer'] || 'geras';
@@ -141,7 +142,7 @@ Blockly.Options = function(options) {
   this.gridOptions = Blockly.Options.parseGridOptions_(options);
   this.zoomOptions = Blockly.Options.parseZoomOptions_(options);
   this.toolboxPosition = toolboxPosition;
-  this.theme = theme;
+  this.theme = Blockly.Options.parseThemeOptions_(options);
   this.keyMap = keyMap;
   this.renderer = renderer;
 };
@@ -273,6 +274,22 @@ Blockly.Options.parseGridOptions_ = function(options) {
   return gridOptions;
 };
 
+/**
+ * Parse the user-specified theme options, using the classic theme as a default.
+ *   https://developers.google.com/blockly/guides/configure/web/themes
+ * @param {!Object} options Dictionary of options.
+ * @return {!Blockly.Theme} A Blockly Theme.
+ * @private
+ */
+Blockly.Options.parseThemeOptions_ = function(options) {
+  var theme = options['theme'] || Blockly.Themes.Classic;
+  if (theme instanceof Blockly.Theme) {
+    return /** @type {!Blockly.Theme} */ (theme);
+  }
+  return new Blockly.Theme(
+      theme['blockStyles'], theme['categoryStyles'], theme['componentStyles']);
+};
+
 /**
  * Parse the provided toolbox tree into a consistent DOM format.
  * @param {Node|string} tree DOM tree of blocks, or text representation of same.

core/theme.js

@@ -204,6 +204,15 @@ Blockly.Theme.prototype.setCategoryStyle = function(categoryStyleName,
   this.categoryStyles_[categoryStyleName] = categoryStyle;
 };
 
+/**
+ * Gets a map of all the category style names.
+ * @return {!Object.<string, Blockly.Theme.CategoryStyle>} Map of category
+ *     styles.
+ */
+Blockly.Theme.prototype.getAllCategoryStyles = function() {
+  return this.categoryStyles_;
+};
+
 /**
  * Gets the style for a given Blockly UI component.  If the style value is a
  * string, we attempt to find the value of any named references.

typings/parts/blockly-interfaces.d.ts

@@ -16,7 +16,7 @@ declare module Blockly {
     css?: boolean;
     oneBasedIndex?: boolean;
     media?: string;
-    theme?: Blockly.BlocklyTheme;
+    theme?: Blockly.Theme | BlocklyThemeOptions;
     move?: {
       scrollbars?: boolean;
       drag?: boolean;
@@ -38,9 +38,10 @@ declare module Blockly {
     };
   }
 
-  interface BlocklyTheme {
-    defaultBlockStyles?: {[blocks: string]: Blockly.Theme.BlockStyle;};
+  interface BlocklyThemeOptions {
+    blockStyles?: {[blocks: string]: Blockly.Theme.BlockStyle;};
     categoryStyles?: {[category: string]: Blockly.Theme.CategoryStyle;};
+    componentStyles?: {[component: string]: any;};
   }
 
   interface Metrics {