Merge pull request #98 from Yoshino-Yukitaro/develop

ダークモードをライトモードのリファクタ
Yoshino-Yukitaro · Mar 15, 2024 · 38207d6 · 38207d6
2 parents 017d174 + ad07f6f
commit 38207d6
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/src/components/organisms/LightDarkButton.astro b/src/components/organisms/LightDarkButton.astro
@@ -1,7 +1,7 @@
 
 <span class="ml-auto md:pr-8">
     <script>
-        document.getElementById("light-and-dark-button").addEventListener("click", handleBtnClick)
+        document.getElementById("light-and-dark-button")!.addEventListener("click", handleBtnClick)
         function handleBtnClick() {
             toggleLightAndDarkButton();
         }

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -36,12 +36,13 @@ const { title, description, ogType } = Astro.props;
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preload" as="style" fetchpriority="high" href="https://fonts.googleapis.com/css2?family=Reggae+One&display=swap&text=ゆっきーの砂場" >
-    <link href="https://fonts.googleapis.com/css2?family=Reggae+One&display=swap&text=ゆっきーの砂場" rel="stylesheet" media="print" onload='this.media="all"'>
-    <script>
+    <link href="https://fonts.googleapis.com/css2?family=Reggae+One&display=swap&text=ゆっきーの砂場" rel="stylesheet" media="print" onload='this.media=""'>
+    <script defer>
       if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-        document.documentElement.classList.add('dark')
-      } else {
-        document.documentElement.classList.remove('dark')
+          document.documentElement.classList.add('dark')
+          localStorage.theme = 'dark';
+      }else {
+        localStorage.theme = 'light';
       }
     </script>
   </head>