Use dark class for color mode selector

[wackerow]

Description

• Refactors to use .dark class for color mode management
• Fixes syncing of color theme between in-app toggling and system color preference changes

Preview URL

• https://deploy-preview-13661--ethereumorg.netlify.app/

Related Issue

Tailwind migration

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	0942da2
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/66bea5dcb6f5fe0008ddaaeb
😎 Deploy Preview	https://deploy-preview-13661--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 39 (🔴 down 11 from production) Accessibility: 93 (no change from production) Best Practices: 83 (🔴 down 9 from production) SEO: 93 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[wackerow]

Removed usage of theme which was not always responding appropriately to system color preference changes.

In it's place, resolvedTheme is a more reliable "light" or "dark" string that the theme will resolve to. Also, systemTheme taps into the color mode preference of the system, and updates on change.

[wackerow]

When observing this in the Application dev tools, the "system" is automatically parsed (by the embedded next-theme I believe*) to "light" or "dark". Using this approach seems to make sure the html[class] is updated by the NextThemeProvider.

*embedded `next-theme` script

!(function () {
  try {
    var d = document.documentElement,
      c = d.classList;
    c.remove('light', 'dark');
    var e = localStorage.getItem('theme');
    if ('system' === e || (!e && true)) {
      var t = '(prefers-color-scheme: dark)',
        m = window.matchMedia(t);
      if (m.media !== t || m.matches) {
        d.style.colorScheme = 'dark';
        c.add('dark');
      } else {
        d.style.colorScheme = 'light';
        c.add('light');
      }
    } else if (e) {
      c.add(e || '');
    }
    if (e === 'light' || e === 'dark') d.style.colorScheme = e;
  } catch (e) {}
})();

[pettinarip]

@wackerow a few things related to this PR and the color theme mechanism

1. I pushed a new PR Fix color themes sync #13676 to sync the color themes between chakra and next-themes. Maybe this PR will clarify a bit what is going on between the two color theme syncs.

2. Left a comment/question/opinion here about the manual system color selection.

3. On choosing the class method, would you explain again why we would prefer this over the data- attr? question because chakra will automatically detect the latter but not the class and that might save us from manually sync the color themes.

=====
Saw this issue in the preview deploy

1. Load the page in incognito
2. Switch your system color mode
3. Visual diff
   

I guess this issue is related to the usage of theme instead of resolvedTheme (fixed in #13663) as this branch is outdated.

[pettinarip]

I understand the intention here to be aligned with the behavior we had before with Chakra but we are getting 2 issues from this:

• An extra render
• Forcing the user to system color every time the page is loaded which IMO is not a good UX

IMO we should consider adding a new option in our toggle button to consider the system preference (as this is how next-themes was designed https://next-themes-example.vercel.app/). For some users, it might be weird that the color mode changes automatically if they manually choose a specific color mode.

[wackerow]

Closing out; avoiding .dark solution at th time as it doesn't seem to provide benefit over existing selector. We'll also plan to add a "system" option for color modes instead of one-off-solutions.