fix the fixes....

pages/_app.tsx

@@ -152,9 +152,12 @@ export default function App({ Component, pageProps }: AppProps) {
       {/* Inline script to restore light/dark theme preference ASAP */}
       <Script id="restore_theme" strategy="afterInteractive">{`
 try {
-  var pref = localStorage.getItem("dark_mode"),
-      dark = pref === "true" || (!pref && window.matchMedia("(prefers-color-scheme: dark)").matches);
-  document.documentElement.setAttribute("data-theme", dark ? "dark" : "light");
+  var root = document.documentElement,
+      pref = localStorage.getItem("dark_mode"),
+      theme = pref === "true" || (!pref && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+
+  root.setAttribute("data-theme", theme);
+  root.style.colorScheme = theme;
 } catch (e) {}`}</Script>
 
       <Component {...pageProps} />

styles/_colors.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-duplicate-selectors */
-
 :root {
   --background-inner: #ffffff;
   --background-outer: #fcfcfc;
@@ -35,13 +33,3 @@
   --success: #78df55;
   --error: #ff5151;
 }
-
-// https://web.dev/color-scheme/#the-color-scheme-css-property
-
-:root {
-  color-scheme: light;
-}
-
-[data-theme="dark"] {
-  color-scheme: dark;
-}

styles/_reset.scss

@@ -0,0 +1 @@
+@import "~modern-normalize/modern-normalize.css";

styles/index.scss

@@ -1,7 +1,4 @@
-// Browser reset:
-// https://github.com/sindresorhus/modern-normalize
-@import "~modern-normalize/modern-normalize.css";
-
+@use "reset";
 @use "typography";
 @use "colors";
 @use "syntax";