How do I update the color scheme for a grouped bar chart in Vega for only 1 of the groups?

Question

Below I have a vega chart that doesn't render because I am trying to make one of the grouped categories, US Gross, to be encoded as "category10" instead of assigning it one specific color. Any thoughts on whether or not this is possible in Vega?

  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/movies.json"},
  "repeat": {"layer": ["Worldwide Gross", "US Gross"]},
  "spec": {
    "mark": "bar",
    "encoding": {
      "x": {"field": "Major Genre", "type": "nominal"},
      "y": {
        "aggregate": "sum",
        "field": {"repeat": "layer"},
        "type": "quantitative",
        "title": "Total Gross"
      },
      "color": {
        "datum": {"repeat": "layer"},
        "title": "Gross",
        "scale": {"range": ["#2a9d8f", {"scheme": "category20"}]}
      },
      "xOffset": {"datum": {"repeat": "layer"}}
    }
  },
  "config": {"mark": {"invalid": null}}
}```

A verson of the code can be found [here] which represents a verson where I've set US Gross to teal, but ideally it'd be category 10 so that each value for US Gross across the x-axis is different[1]


  [1]: https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JAKyUAVhDYA7EABoQAEySYUqUAwBOgtCrVICCNsRpwIUmfIC+S7XBxw1aUIKQBPONrQBtEADqbLrKAO40ynAABADi2mwQEIogAKoAyrHxiSAAunYgEE5QriDI2gDW+kxIPkpwslBsyjSyZCUAHiUAZuaCyvoAskiSwbH1DsmYHk76smwILUh6+R4lSGRkDhSYcPoQDAjJPXB9JQ5OLujuXj75UzPoAI4MSLKYdGo0pJN0grvoABU2OpBJkEkl8o1BMESqpMAczo5nJh9NdvCA7r9-iA4uDktAlv9QNpXmR-v4AMQAJiQAE5lAAOLqTZx6PL5doAeS6XQgcBRmgM8MOgvOyNRnnRNmlkLkPTagrKlUFLWISwiaFkDEEghlQA

Answer 1

Option 1: Hard-coded colors:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/movies.json"},
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "y": {
          "field": "Major Genre",
          "type": "nominal",
          "sort": {"op": "sum", "field": "US Gross", "order": "descending"}
        },
        "x": {
          "aggregate": "sum",
          "field": "Worldwide Gross",
          "type": "quantitative",
          "title": "Total Gross"
        },
        "color": {"value": "#DDDDDD"}
      }
    },
    {
      "mark": "bar",
      "encoding": {
        "y": {
          "field": "Major Genre",
          "type": "nominal",
          "sort": {"op": "sum", "field": "US Gross", "order": "descending"}
        },
        "x": {
          "aggregate": "sum",
          "field": "US Gross",
          "type": "quantitative",
          "title": "Total Gross"
        },
        "color": {
          "field": "Major Genre",
          "type": "nominal",
          "scale": {
            "range": [
              "#1f77b4",
              "#ff7f0e",
              "#2ca02c",
              "#d62728",
              "#9467bd",
              "#8c564b",
              "#e377c2",
              "#7f7f7f",
              "#bcbd22",
              "#17becf",
              "#9edae5",
              "#dbdb8d",
              "#c49c94"
            ]
          }
        }
      }
    }
  ],
  "config": {"mark": {"invalid": null}}
}

Option 2: Color scheme (I used category20 since we have more than 10 colors) https://vega.github.io/vega/docs/schemes/

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/movies.json"},
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "y": {
          "field": "Major Genre",
          "type": "nominal",
          "sort": {"op": "sum", "field": "US Gross", "order": "descending"}
        },
        "x": {
          "aggregate": "sum",
          "field": "Worldwide Gross",
          "type": "quantitative",
          "title": "Total Gross"
        },
        "color": {"value": "#DDDDDD"}
      }
    },
    {
      "mark": "bar",
      "encoding": {
        "y": {
          "field": "Major Genre",
          "type": "nominal",
          "sort": {"op": "sum", "field": "US Gross", "order": "descending"}
        },
        "x": {
          "aggregate": "sum",
          "field": "US Gross",
          "type": "quantitative",
          "title": "Total Gross"
        },
        "color": {"field": "Major Genre", "scale": {"scheme": "category20"}}
      }
    }
  ],
  "config": {"mark": {"invalid": null}}
}

Option 3: Color based on a sequential gradient:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/movies.json"},
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "y": {
          "field": "Major Genre",
          "type": "nominal",
          "sort": {"op": "sum", "field": "US Gross", "order": "descending"}
        },
        "x": {
          "aggregate": "sum",
          "field": "Worldwide Gross",
          "type": "quantitative",
          "title": "Total Gross"
        },
        "color": {"value": "#DDDDDD"}
      }
    },
    {
      "mark": "bar",
      "encoding": {
        "y": {
          "field": "Major Genre",
          "type": "nominal",
          "sort": {"op": "sum", "field": "US Gross", "order": "descending"}
        },
        "x": {
          "aggregate": "sum",
          "field": "US Gross",
          "type": "quantitative",
          "title": "Total Gross"
        },
        "color": {
          "legend": null,
          "field": "US Gross",
          "aggregate": "sum",
          "type": "quantitative",
          "scale": {"range": ["#3489FF", "#0748A2"], "type": "sequential"}
        }
      }
    }
  ],
  "config": {"mark": {"invalid": null}}
}