Web Inspector: Dark Mode: use the same CSS variables for dark and light modes

• Component: Web Inspector
• Status: RESOLVED FIXED

[Nikita Vasilyev]

With the dark mode, I added several dozen CSS variables. Currently, they are *only* used by the dark mode. The goal was to not break anything in the light mode while working on the dark mode.

This is what it often looks like in the code:

.cm-s-default {
    color: black;
}

@media (prefers-dark-interface) {
    :root {
        --text-color: hsl(0, 0%, 88%);
    }
    .cm-s-default {
        color: var(--text-color);
    }
}

Now that we don't expect many changes in the dark mode, it makes sense to start using the same variables for the light mode as well:

:root {
    --text-color: black;
}

@media (prefers-dark-interface) {
    :root {
        --text-color: hsl(0, 0%, 88%);
    }
}

.cm-s-default {
    color: var(--text-color);
}

[Radar WebKit Bug Importer]

<rdar://problem/44619650>

[Nikita Vasilyev]

Created attachment 350543 [details]
Patch

This patch focuses on --text-color and --background-color.
There's more to be done, but I plan to complete the refactoring in 3-4 patches.

[Nikita Vasilyev]

*** Bug 190181 has been marked as a duplicate of this bug. ***

[Matt Baker]

Comment on attachment 350543 [details]
Patch

r=me

[WebKit Commit Bot]

Comment on attachment 350543 [details]
Patch

Clearing flags on attachment: 350543

Committed r236705: <https://trac.webkit.org/changeset/236705>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.