Fix dark mode script

.idea/prettier.xml

@@ -3,5 +3,6 @@
   <component name="PrettierConfiguration">
     <option name="myRunOnSave" value="true" />
     <option name="myRunOnReformat" value="true" />
+    <option name="myFilesPattern" value="{**/*,*}.{js,ts,jsx,tsx,css,scss}" />
   </component>
 </project>

pages/_app.tsx

@@ -8,7 +8,6 @@ import Head from 'next/head';
 import { MDXProvider } from '@mdx-js/react';
 import dynamic from 'next/dynamic';
 import RUAStore from '../lib/store';
-import Script from 'next/script';
 
 const H2 = dynamic(() => import('components/MDX/MDXH2'));
 
@@ -36,10 +35,24 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
         <meta name="keywords" content="Blog RUA" />
         <meta name="description" content="Personal blog." />
         <meta name="author" content="Arthur,i@rua.plus" />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+            if (
+              localStorage.getItem('rua-theme') === 'dark' ||
+              (!('rua-theme' in localStorage) &&
+                window.matchMedia('(prefers-color-scheme: dark)').matches)
+            ) {
+              document.documentElement.classList.add('dark');
+              localStorage.setItem('rua-theme', 'dark');
+            } else {
+              document.documentElement.classList.remove('dark');
+              localStorage.setItem('rua-theme', 'light');
+            }`,
+          }}
+        />
       </Head>
 
-      <Script src={'/js/darkMode.js'} strategy={'beforeInteractive'} />
-
       <RUAStore>
         <MDXProvider components={mdxComponents}>
           {getLayout(<Component {...pageProps} />)}

public/js/darkMode.js

@@ -1,12 +0,0 @@
-(() => {
-  const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-  const isDark = localStorage.getItem('rua-theme') === 'dark';
-
-  if (isDark || (!('rua-theme' in localStorage) && preferDark)) {
-    document.documentElement.classList.add('dark');
-    localStorage.setItem('rua-theme', 'dark');
-  } else {
-    document.documentElement.classList.remove('dark');
-    localStorage.setItem('rua-theme', 'light');
-  }
-})();

styles/globals.css

@@ -8,12 +8,14 @@
 
 @layer base {
   body {
-    @apply bg-bluish-gray dark:bg-rua-gray-900 dark:text-gray-200 transition-colors;
-    font-family: "-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,'PingFang SC',miui,'Hiragino Sans GB','Microsoft Yahei',sans-serif", sans-serif;
+    @apply bg-bluish-gray dark:bg-rua-gray-900 dark:text-gray-200;
+    font-family: "-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,'PingFang SC',miui,'Hiragino Sans GB','Microsoft Yahei',sans-serif",
+      sans-serif;
   }
 
-  img, iframe {
-    @apply dark:brightness-75
+  img,
+  iframe {
+    @apply dark:brightness-75;
   }
 
   /* 滚动槽 */
@@ -40,4 +42,4 @@
 .dark [data-rmiz-overlay] {
   --tw-bg-opacity: 0.95;
   background-color: rgb(35 38 38 / var(--tw-bg-opacity)) !important;
-}
+}

styles/rua.css

@@ -97,7 +97,7 @@
 }
 
 #write p code {
-  @apply mx-1 rounded
+  @apply mx-1 rounded;
 }
 
 #write blockquote::before {
@@ -114,7 +114,7 @@
 }
 
 #write em {
-  @apply mx-0.5
+  @apply mx-0.5;
 }
 
 @media (min-width: 575px) {