How to disable colour scheme and enable colour scheme when slider slides to specified year?

Question

I'm new to vegalite and I have this charts created using facet. Problem is I want to grey out my charts and only apply the colour range on the specified year in the slider? But this is working in the opposite way where the specified year is in black and the rest have a correct colour scheme? Any help is appreciated.Thanks.Viz here

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple grid of bar charts to compare performance data.",
  "background": "#e6f4fd",
  "data": {
   "url": "https://raw.githubusercontent.com/sookyee/FIT3179/main/TheTimesRanking.json"
  },
   "transform": [
    {

      "filter": "(datum.university_name === 'Harvard University' || datum.university_name ==='Massachusetts Institute of Technology' || datum.university_name ==='Stanford University' || datum.university_name ==='California Institute of Technology' || datum.university_name ==='University of Cambridge' || datum.university_name ==='Princeton University') "

    }
  ],
   "selection": {
    "Yr": {
      "type": "single",
      "fields": ["year"],
      "bind": {
        "year": {"input": "range", "min": 2011, "max": 2015, "step": 1}
      }
    }
   },
  "width": 200,
  "height": {"step": 8},
  "spacing": 60,
  "mark": "bar",
  "encoding": {
    "y": {"field": "research", "type": "quantitative", "title": "Research"},
    "x": {
      "field": "university_name",
      "type": "ordinal",
      "title": null
    },
    "color": {
      "field": "teaching",
      "type": "quantitative",
      "legend": {"orient": "bottom", "titleOrient": "left"},
      "title": "Teaching quality (%)",
      "scale": { "scheme": "lighttealblue"},
      "condition": {"selection": "Yr", "field": "year", "type": "ordinal"} 
    },
    "column": {"field": "year", "title": "Year", "header": {"labelAngle": 0}}
  }

}

Answer 1

Your color condition currently says "color by teaching, unless the value is selected, and then color by year". What you want to say is something like "color light gray, unless the value is selected, and then color by teaching". In terms of the chart specification, it would look something like this:

    "color": {
      "value": "lightgray",
      "condition": {
        "selection": "Yr",
        "field": "teaching",
        "legend": {"orient": "bottom", "titleOrient": "left"},
        "scale": {"scheme": "lighttealblue"},
        "title": "Teaching quality (%)",
        "type": "ordinal"
      }
    },

View the full chart in the editor here.