feat: add overlay scrollbar for body and code block

package.json

@@ -35,7 +35,7 @@
     "@antfu/eslint-config": "^4.11.0",
     "@astrojs/check": "^0.9.4",
     "@types/markdown-it": "^14.1.2",
-    "@types/node": "^22.13.13",
+    "@types/node": "^22.13.14",
     "@types/sanitize-html": "^2.13.0",
     "@unocss/eslint-plugin": "66.1.0-beta.7",
     "@unocss/preset-attributify": "66.1.0-beta.7",

pnpm-lock.yaml

@@ -10,7 +10,7 @@ importers:
     dependencies:
       '@astrojs/mdx':
         specifier: ^4.2.2
-        version: 4.2.2(astro@5.5.5(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0))
+        version: 4.2.2(astro@5.5.5(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0))
       '@astrojs/partytown':
         specifier: ^2.1.4
         version: 2.1.4
@@ -25,13 +25,13 @@ importers:
         version: 3.5.6(typescript@5.8.2)
       astro:
         specifier: ^5.5.5
-        version: 5.5.5(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
+        version: 5.5.5(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
       astro-compress:
         specifier: ^2.3.6
-        version: 2.3.6(@types/node@22.13.13)(jiti@2.4.2)(rollup@4.37.0)(typescript@5.8.2)(yaml@2.7.0)
+        version: 2.3.6(@types/node@22.13.14)(jiti@2.4.2)(rollup@4.37.0)(typescript@5.8.2)(yaml@2.7.0)
       astro-og-canvas:
         specifier: ^0.7.0
-        version: 0.7.0(astro@5.5.5(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0))
+        version: 0.7.0(astro@5.5.5(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0))
       astro-robots-txt:
         specifier: ^1.0.0
         version: 1.0.0
@@ -70,8 +70,8 @@ importers:
         specifier: ^14.1.2
         version: 14.1.2
       '@types/node':
-        specifier: ^22.13.13
+        specifier: ^22.13.14
-        version: 22.13.13
+        version: 22.13.14
       '@types/sanitize-html':
         specifier: ^2.13.0
         version: 2.13.0
@@ -110,7 +110,7 @@ importers:
         version: 5.8.2
       unocss:
         specifier: 66.1.0-beta.7
-        version: 66.1.0-beta.7(postcss@8.5.3)(vite@6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
+        version: 66.1.0-beta.7(postcss@8.5.3)(vite@6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
       unocss-preset-theme:
         specifier: ^0.14.1
         version: 0.14.1(@unocss/core@66.1.0-beta.7)
@@ -907,8 +907,8 @@ packages:
   '@types/node@22.10.5':
     resolution: {integrity: sha512-F8Q+SeGimwOo86fiovQh8qiXfFEh2/ocYv7tU5pJ3EXMSSxk1Joj5wefpFK2fHTf/N6HKGSxIDBT9f3gCxXPkQ==}
 
-  '@types/node@22.13.13':
+  '@types/node@22.13.14':
-    resolution: {integrity: sha512-ClsL5nMwKaBRwPcCvH8E7+nU4GxHVx1axNvMZTFHMEfNI7oahimt26P5zjVCRrjiIWj6YFXfE1v3dEp94wLcGQ==}
+    resolution: {integrity: sha512-Zs/Ollc1SJ8nKUAgc7ivOEdIBM8JAKgrqqUYi2J997JuKO7/tpQC+WCetQ1sypiKCQWHdvdg9wBNpUPEWZae7w==}
 
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
@@ -1682,8 +1682,8 @@ packages:
   duplexer@0.1.2:
     resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
 
-  electron-to-chromium@1.5.124:
+  electron-to-chromium@1.5.125:
-    resolution: {integrity: sha512-riELkpDUqBi00gqreV3RIGoowxGrfueEKBd6zPdOk/I8lvuFpBGNkYoHof3zUHbiTBsIU8oxdIIL/WNrAG1/7A==}
+    resolution: {integrity: sha512-A2+qEsSUc95QvyFDl7PNwkDDNphIKBVfBBtWWkPGRbiWEgzLo0SvLygYF6HgzVduHd+4WGPB/WD64POFgwzY3g==}
 
   emmet@2.4.11:
     resolution: {integrity: sha512-23QPJB3moh/U9sT4rQzGgeyyGIrcM+GH5uVYg2C6wZIxAIJq7Ng3QLT79tl8FUwDXhyq9SusfknOrofAKqvgyQ==}
@@ -3912,12 +3912,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/mdx@4.2.2(astro@5.5.5(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0))':
+  '@astrojs/mdx@4.2.2(astro@5.5.5(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0))':
     dependencies:
       '@astrojs/markdown-remark': 6.3.1
       '@mdx-js/mdx': 3.1.0(acorn@8.14.1)
       acorn: 8.14.1
-      astro: 5.5.5(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
+      astro: 5.5.5(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
       es-module-lexer: 1.6.0
       estree-util-visit: 2.0.0
       hast-util-to-html: 9.0.5
@@ -4572,7 +4572,7 @@ snapshots:
     dependencies:
       undici-types: 6.20.0
 
-  '@types/node@22.13.13':
+  '@types/node@22.13.14':
     dependencies:
       undici-types: 6.20.0
 
@@ -4584,7 +4584,7 @@ snapshots:
 
   '@types/sax@1.2.7':
     dependencies:
-      '@types/node': 22.13.13
+      '@types/node': 22.13.14
 
   '@types/unist@2.0.11': {}
 
@@ -4671,13 +4671,13 @@ snapshots:
 
   '@ungap/structured-clone@1.3.0': {}
 
-  '@unocss/astro@66.1.0-beta.7(vite@6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
+  '@unocss/astro@66.1.0-beta.7(vite@6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
     dependencies:
       '@unocss/core': 66.1.0-beta.7
       '@unocss/reset': 66.1.0-beta.7
-      '@unocss/vite': 66.1.0-beta.7(vite@6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
+      '@unocss/vite': 66.1.0-beta.7(vite@6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
     optionalDependencies:
-      vite: 6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)
+      vite: 6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - vue
 
@@ -4828,7 +4828,7 @@ snapshots:
     dependencies:
       '@unocss/core': 66.1.0-beta.7
 
-  '@unocss/vite@66.1.0-beta.7(vite@6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
+  '@unocss/vite@66.1.0-beta.7(vite@6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@unocss/config': 66.1.0-beta.7
@@ -4838,7 +4838,7 @@ snapshots:
       magic-string: 0.30.17
       tinyglobby: 0.2.12
       unplugin-utils: 0.2.4
-      vite: 6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)
+      vite: 6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - vue
 
@@ -5086,12 +5086,12 @@ snapshots:
 
   astring@1.9.0: {}
 
-  astro-compress@2.3.6(@types/node@22.13.13)(jiti@2.4.2)(rollup@4.37.0)(typescript@5.8.2)(yaml@2.7.0):
+  astro-compress@2.3.6(@types/node@22.13.14)(jiti@2.4.2)(rollup@4.37.0)(typescript@5.8.2)(yaml@2.7.0):
     dependencies:
       '@playform/pipe': 0.1.2
       '@types/csso': 5.0.4
       '@types/html-minifier-terser': 7.0.2
-      astro: 5.5.5(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
+      astro: 5.5.5(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
       commander: 13.0.0
       csso: 5.0.5
       deepmerge-ts: 7.1.3
@@ -5151,9 +5151,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  astro-og-canvas@0.7.0(astro@5.5.5(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)):
+  astro-og-canvas@0.7.0(astro@5.5.5(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)):
     dependencies:
-      astro: 5.5.5(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
+      astro: 5.5.5(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
       canvaskit-wasm: 0.39.1
       deterministic-object-hash: 2.0.2
       entities: 4.5.0
@@ -5163,7 +5163,7 @@ snapshots:
       valid-filename: 4.0.0
       zod: 3.24.2
 
-  astro@5.5.5(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0):
+  astro@5.5.5(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0):
     dependencies:
       '@astrojs/compiler': 2.11.0
       '@astrojs/internal-helpers': 0.6.1
@@ -5214,8 +5214,8 @@ snapshots:
       unist-util-visit: 5.0.0
       unstorage: 1.15.0
       vfile: 6.0.3
-      vite: 6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)
+      vite: 6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)
-      vitefu: 1.0.6(vite@6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))
+      vitefu: 1.0.6(vite@6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))
       xxhash-wasm: 1.1.0
       yargs-parser: 21.1.1
       yocto-spinner: 0.2.1
@@ -5304,7 +5304,7 @@ snapshots:
   browserslist@4.24.4:
     dependencies:
       caniuse-lite: 1.0.30001707
-      electron-to-chromium: 1.5.124
+      electron-to-chromium: 1.5.125
       node-releases: 2.0.19
       update-browserslist-db: 1.1.3(browserslist@4.24.4)
 
@@ -5563,7 +5563,7 @@ snapshots:
 
   duplexer@0.1.2: {}
 
-  electron-to-chromium@1.5.124: {}
+  electron-to-chromium@1.5.125: {}
 
   emmet@2.4.11:
     dependencies:
@@ -7886,9 +7886,9 @@ snapshots:
       '@unocss/core': 66.1.0-beta.7
       '@unocss/rule-utils': 0.63.6
 
-  unocss@66.1.0-beta.7(postcss@8.5.3)(vite@6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2)):
+  unocss@66.1.0-beta.7(postcss@8.5.3)(vite@6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2)):
     dependencies:
-      '@unocss/astro': 66.1.0-beta.7(vite@6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
+      '@unocss/astro': 66.1.0-beta.7(vite@6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
       '@unocss/cli': 66.1.0-beta.7
       '@unocss/core': 66.1.0-beta.7
       '@unocss/postcss': 66.1.0-beta.7(postcss@8.5.3)
@@ -7906,9 +7906,9 @@ snapshots:
       '@unocss/transformer-compile-class': 66.1.0-beta.7
       '@unocss/transformer-directives': 66.1.0-beta.7
       '@unocss/transformer-variant-group': 66.1.0-beta.7
-      '@unocss/vite': 66.1.0-beta.7(vite@6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
+      '@unocss/vite': 66.1.0-beta.7(vite@6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
     optionalDependencies:
-      vite: 6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)
+      vite: 6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)
     transitivePeerDependencies:
       - postcss
       - supports-color
@@ -7984,22 +7984,22 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  vite@6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0):
+  vite@6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0):
     dependencies:
       esbuild: 0.25.1
       postcss: 8.5.3
       rollup: 4.37.0
     optionalDependencies:
-      '@types/node': 22.13.13
+      '@types/node': 22.13.14
       fsevents: 2.3.3
       jiti: 2.4.2
       lightningcss: 1.28.2
       terser: 5.37.0
       yaml: 2.7.0
 
-  vitefu@1.0.6(vite@6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)):
+  vitefu@1.0.6(vite@6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)):
     optionalDependencies:
-      vite: 6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)
+      vite: 6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)
 
   volar-service-css@0.0.62(@volar/language-service@2.4.12):
     dependencies:

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 = [],

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()
+setupScrollbar()
-document.addEventListener('astro:after-swap', initScrollbar)
+document.addEventListener('astro:after-swap', setupScrollbar)
 </script>
 
 <style is:global>
 @import 'overlayscrollbars/overlayscrollbars.css';
 
-.scrollbar-light,
+.scrollbar-body {
-.scrollbar-dark {
+  --os-size: 0.9rem;
-  --os-size: 1rem;
   --os-padding-perpendicular: 0.2rem;
   --os-padding-axis: 0.4rem;
-  --os-handle-border-radius: 0.7rem;
+  --os-handle-border-radius: 99rem;
-  --os-handle-perpendicular-size-hover: 160%;
+  --os-handle-perpendicular-size: 75%;
-  --os-handle-perpendicular-size-active: 160%;
+  --os-handle-perpendicular-size-hover: 100%;
-  --os-handle-interactive-area-offset: 3px;
+  --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 {
+.scrollbar-code {
-  --os-handle-bg: #CFC5BD;
+  --os-size: 0.6rem;
-  --os-handle-bg-hover: #ADA49E;
+  --os-padding-perpendicular: 0.1rem;
-  --os-handle-bg-active: #ADA49E;
+  --os-padding-axis: 0.2rem;
-}
+  --os-handle-border-radius: 99rem;
-
+  --os-handle-perpendicular-size: 75%;
-.scrollbar-dark {
+  --os-handle-perpendicular-size-hover: 100%;
-  --os-handle-bg: #2C2C2C;
+  --os-handle-perpendicular-size-active: 100%;
-  --os-handle-bg-hover: #3C3C3C;
+  --os-handle-interactive-area-offset: 0.1rem;
-  --os-handle-bg-active: #3C3C3C;
+  --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>