🐛 Correction du bug de darkmode

🔖 version(package.json) : mettre à jour la version de l'application à 1.0.1 🎨 style(Layout.astro) : changer le thème de monochrome à polychrome et le mode de dark à light, changer la couleur de la scrollbar 🎨 style(base.css) : ajouter une classe utilitaire pour la scrollbar 🎨 style(.prettierrc) : ajouter la configuration de fin de ligne automatique
alexisdechiara · May 28, 2023 · 014bd1f · 014bd1f · vercel · May 28, 2023
1 parent 561058d
commit 014bd1f
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 15 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -3,6 +3,7 @@
     "semi": true,
     "singleQuote": false,
     "printWidth": 120,
+    "endOfLine":"auto",
     "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
     "pluginSearchDirs": false
 }
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "dico-du-geek",
     "type": "module",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "scripts": {
         "dev": "astro dev",
         "start": "astro dev",

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -13,9 +13,9 @@ import "../styles/base.css";
 <!DOCTYPE html>
 <html
     lang="fr"
-    data-theme="monochrome"
-    data-mode="dark"
-    class="scrollbar-track--transparent scroll-smooth scrollbar scrollbar-thumb-slate-400 scrollbar-thumb-rounded-full scrollbar-w-6 hover:scrollbar-thumb-slate-500"
+    data-theme="polychrome"
+    data-mode="light"
+    class="scrollbar-track--transparent scroll-smooth scrollbar scrollbar-thumb-gray-500 scrollbar-thumb-rounded-full scrollbar-w-4 hover:scrollbar-thumb-gray-400"
 >
     <head>
         <script is:inline>
@@ -34,10 +34,9 @@ import "../styles/base.css";
             changeDarkmode();
             function changeDarkmode() {
                 if (
-                    localStorage.darkmode === "dark" ||
-                    ("darkmode" in localStorage &&
-                        localStorage.darkmode === "auto" &&
-                        "(prefers-color-scheme: dark)".matches)
+                    "darkmode" in localStorage &&
+                    (localStorage.darkmode === "dark" ||
+                        (localStorage.darkmode === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches))
                 ) {
                     document.documentElement.setAttribute("data-mode", "dark");
                 } else {
@@ -70,6 +69,9 @@ import "../styles/base.css";
             }}
         />
 
+        <!-- Vercel analytics -->
+        <script defer src="/_vercel/insights/script.js" type="text/partytown"></script>
+
         <!-- PWA -->
         <link rel="apple-touch-icon" href="/favicon/apple-touch-icon.png" sizes="128x128" />
         <link rel="mask-icon" href="/favicon/pwa-icon.png" color="#121C40" />
@@ -85,12 +87,5 @@ import "../styles/base.css";
     </head>
     <body class="flex min-h-screen flex-col bg-base">
         <slot />
-        <style>
-            .scrollbar::-webkit-scrollbar-thumb {
-                border: 6px solid transparent;
-                background-clip: padding-box;
-                padding-right: 6px;
-            }
-        </style>
     </body>
 </html>
diff --git a/src/styles/base.css b/src/styles/base.css
@@ -153,3 +153,10 @@
         --font-header: "Source Serif 4";
     }
 }
+
+@layer utilities {
+    .scrollbar::-webkit-scrollbar-thumb {
+        border: 4px solid transparent;
+        background-clip: padding-box;
+    }
+}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -339,5 +339,8 @@ module.exports = {
             variants: ["sm", "md", "lg", "xl", "hover", "dark", "peer-checked:dark", "group-checked:dark"],
         },
     ],
+    variants: {
+        scrollbar: ["dark"],
+    },
     plugins: [require("@tailwindcss/typography"), require("tailwind-scrollbar")({ nocompatible: true })],
 };