Problema

Estoy tratando de cambiar el color del botón Me gusta de Youtube del color predeterminado a azul:

Me las arreglé para hacerlo fácilmente con las herramientas de desarrollo del navegador:

a través de la consola

Sin embargo, ahora estoy tratando de hacerlo mediante programación, por ejemplo, a través de la consola . Pero no estoy seguro de qué poner exactamente allí para identificar correctamente el botón Me gusta.

Intenté lo siguiente pero no funcionó, no tuvo ningún efecto:

 document.querySelector('.style-scope .ytd-toggle-button-renderer') .querySelector(".style-scope .yt-icon") .getElementsByTagName("path")[0] .style.color = "blue"

¿Cuál es la forma correcta de identificar el botón Me gusta y cambiar su color?

Detalles

El botón Me gusta parece estar codificado así:

 <yt-icon-button id="button" class="style-scope ytd-toggle-button-renderer style-text" touch-feedback=""> <button id="button" class="style-scope yt-icon-button" aria-label="Ich mag das Video (wie 11.598.005 andere auch)" aria-pressed="false"> <yt-icon class="style-scope ytd-toggle-button-renderer"> <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;" class="style-scope yt-icon"> <g class="style-scope yt-icon"> <path ...>...</path> </g> </svg> </yt-icon> </button> <yt-interaction id="interaction" class="circular style-scope yt-icon-button"> <div class="stroke style-scope yt-interaction"> </div> <div class="fill style-scope yt-interaction"> </div> </yt-interaction> </yt-icon-button>

Donde el botón real que quiero cambiar es esta línea aquí

 <yt-icon class="style-scope ytd-toggle-button-renderer">

Estoy usando la última versión de Firefox (91.0.2), versión de escritorio.