feat: add overlay scrollbar for body and code block

src/components/Comments/Waline.astro

@@ -2,11 +2,6 @@
 import { defaultLocale, themeConfig } from '@/config'
 import { walineLocaleMap } from '@/i18n/config'
 
-const {
-  light: { primary: lightPrimary, secondary: lightSecondary, background: lightBackground },
-  dark: { primary: darkPrimary, secondary: darkSecondary, background: darkBackground },
-} = themeConfig.color
-
 const {
   serverURL = '',
   emoji = [],
@@ -207,4 +202,4 @@ document.addEventListener('astro:after-swap', initWaline)
     /* Rendering Options */
     --waline-avatar-radius: 0.5rem;
   }
-  </style>
+  </style>

src/components/Widgets/Scrollbar.astro

@@ -1,59 +1,83 @@
 <script>
 import { OverlayScrollbars } from 'overlayscrollbars'
 
-function initScrollbar() {
+function setupScrollbar() {
   const bodyElement = document.body
-  const scrollbarTheme = document.documentElement.classList.contains('dark') ? 'scrollbar-dark' : 'scrollbar-light'
   if (!bodyElement.hasAttribute('data-scrollbar-initialized')) {
     OverlayScrollbars({
       target: bodyElement,
       cancel: {
-        // don't initialize the overlay scrollbar if there is a native one
         nativeScrollbarsOverlaid: true,
       },
     }, {
       scrollbars: {
-        theme: scrollbarTheme,
+        theme: 'scrollbar-body',
         autoHide: 'scroll',
         autoHideDelay: 800,
       },
-      overflow: {
-        x: 'hidden',
-      },
     })
 
     bodyElement.setAttribute('data-scrollbar-initialized', 'true')
   }
+
+  const preElements = document.querySelectorAll('pre')
+  preElements.forEach((pre) => {
+    if (!pre.hasAttribute('data-scrollbar-initialized')) {
+      OverlayScrollbars({
+        target: pre,
+        cancel: {
+          nativeScrollbarsOverlaid: true,
+        },
+      }, {
+        scrollbars: {
+          theme: 'scrollbar-code',
+          autoHide: 'leave',
+          autoHideDelay: 500,
+        },
+      })
+
+      pre.setAttribute('data-scrollbar-initialized', 'true')
+    }
+  })
 }
 
-initScrollbar()
-document.addEventListener('astro:after-swap', initScrollbar)
+setupScrollbar()
+document.addEventListener('astro:after-swap', setupScrollbar)
 </script>
 
 <style is:global>
 @import 'overlayscrollbars/overlayscrollbars.css';
 
-.scrollbar-light,
-.scrollbar-dark {
-  --os-size: 1rem;
+.scrollbar-body {
+  --os-size: 0.9rem;
   --os-padding-perpendicular: 0.2rem;
   --os-padding-axis: 0.4rem;
-  --os-handle-border-radius: 0.7rem;
-  --os-handle-perpendicular-size-hover: 160%;
-  --os-handle-perpendicular-size-active: 160%;
-  --os-handle-interactive-area-offset: 3px;
+  --os-handle-border-radius: 99rem;
+  --os-handle-perpendicular-size: 75%;
+  --os-handle-perpendicular-size-hover: 100%;
+  --os-handle-perpendicular-size-active: 100%;
+  --os-handle-interactive-area-offset: 0.2rem;
+  --os-handle-bg: oklch(var(--un-preset-theme-colors-secondary) / 0.25);
+  --os-handle-bg-hover: oklch(var(--un-preset-theme-colors-secondary) / 0.40);
+  --os-handle-bg-active: oklch(var(--un-preset-theme-colors-secondary) / 0.40);
+  --os-handle-max-size: 60%;
+  --os-handle-min-size: 12%;
 }
 
-.scrollbar-light {
-  --os-handle-bg: #CFC5BD;
-  --os-handle-bg-hover: #ADA49E;
-  --os-handle-bg-active: #ADA49E;
-}
-
-.scrollbar-dark {
-  --os-handle-bg: #2C2C2C;
-  --os-handle-bg-hover: #3C3C3C;
-  --os-handle-bg-active: #3C3C3C;
+.scrollbar-code {
+  --os-size: 0.6rem;
+  --os-padding-perpendicular: 0.1rem;
+  --os-padding-axis: 0.2rem;
+  --os-handle-border-radius: 99rem;
+  --os-handle-perpendicular-size: 75%;
+  --os-handle-perpendicular-size-hover: 100%;
+  --os-handle-perpendicular-size-active: 100%;
+  --os-handle-interactive-area-offset: 0.1rem;
+  --os-handle-bg: oklch(var(--un-preset-theme-colors-secondary) / 0.20);
+  --os-handle-bg-hover: oklch(var(--un-preset-theme-colors-secondary) / 0.35);
+  --os-handle-bg-active: oklch(var(--un-preset-theme-colors-secondary) / 0.35);
+  --os-handle-max-size: 60%;
+  --os-handle-min-size: 12%;
 }
 
 @media (max-width: 1023px) {

src/layouts/Layout.astro

@@ -3,6 +3,7 @@ import Button from '@/components/Button.astro'
 import Footer from '@/components/Footer.astro'
 import Header from '@/components/Header.astro'
 import Navbar from '@/components/Navbar.astro'
+import Scrollbar from '@/components/Widgets/Scrollbar.astro'
 import themeConfig from '@/config'
 import Head from '@/layouts/Head.astro'
 import { getPageInfo } from '@/utils/page'
@@ -45,6 +46,7 @@ const MarginBottom = isPost && themeConfig.comment?.enabled
       </main>
       <Footer />
     </div>
+    <Scrollbar />
     <Button supportedLangs={supportedLangs} />
   </body>
 </html>

src/styles/heti.css

@@ -300,4 +300,4 @@ html.dark .heti u {
 }
 .heti details summary::marker {
   content: '';
-} */
+} */