Problem

I am trying to change the color of Youtubes Like-button from the default color to blue:

I easily managed to do it with the browser developer tools:

via Console

However, now I am trying to do it programmatically, for example via the console. But I am not sure what exactly to put in there to correctly identify the Like-button.

I tried the following but it did not work, it had no effect at all:

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

What is the correct way to identify the Like-button and to change its color?

Details

The Like-button appears to be coded like this:

<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>

Where the actual button I want to change is this line here

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

I am using the latest Firefox (91.0.2), Desktop version.