chore: remove unused dependencies, enhance scrollbar functionality, and update VSCode settings

- Removed unused `@types/mdast` dependency from package.json and pnpm-lock.yaml.
- Introduced a custom scrollbar component with theme support in Scrollbar.astro.
- Updated Layout.astro to include the new Scrollbar component.
- Enhanced ThemeToggle.astro to dispatch a theme-changed event on toggle.
- Added global scrollbar styles to global.css and created a new scrollbar.css for custom scrollbar styling.
- Updated VSCode settings to improve editor experience and added recommendations for new extensions.

src/styles/global.css

@@ -14,6 +14,13 @@ body {
     --at-apply: 'transition-all duration-500 ease-in-out';
   }
 }
+* {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+*::-webkit-scrollbar {
+  display: none;
+}
 h1, h2, h3 {
     text-rendering: optimizeLegibility;
   }

src/styles/scrollbar.css

@@ -0,0 +1,30 @@
+@import 'overlayscrollbars/overlayscrollbars.css';
+
+.scrollbar-light,
+.scrollbar-dark {
+  --os-size: 1rem;
+  --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;
+}
+
+.scrollbar-light {
+  --os-handle-bg: #D1C6BE;
+  --os-handle-bg-hover: #C1B6AF;
+  --os-handle-bg-active: #C1B6AF;
+}
+
+.scrollbar-dark {
+  --os-handle-bg: #383838;
+  --os-handle-bg-hover: #464646;
+  --os-handle-bg-active: #464646;
+}
+
+@media (max-width: 1023px) {
+  .os-scrollbar {
+    display: none !important;
+  }
+}