feat: add custom scrollbar (#534)

nuxt-themes · Jul 5, 2021 · d39e15e · d39e15e
1 parent 866e62e
commit d39e15e
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -62,6 +62,7 @@
     "@vitejs/plugin-vue": "^1.2.4",
     "@vue/composition-api": "^1.0.0-rc.12",
     "@vueuse/integrations": "^5.0.3",
+    "@windicss/plugin-scrollbar": "^1.2.3",
     "@windicss/plugin-utils": "^1.2.0",
     "clear-module": "^4.1.1",
     "clipboard": "^2.0.8",

diff --git a/src/defaultTheme/components/molecules/AsideNavigation.vue b/src/defaultTheme/components/molecules/AsideNavigation.vue
@@ -48,6 +48,7 @@
           font-medium
           lg:h-[reset]
           h-(full-header)
+          d-scrollbar
         "
       >
         <div class="py-4 pl-4 pr-24 sm:pl-6 lg:pr-0 lg:pt-10">

diff --git a/src/defaultTheme/components/organisms/page/PagePrevNext.vue b/src/defaultTheme/components/organisms/page/PagePrevNext.vue
@@ -53,7 +53,7 @@
           rounded-xl
           group
           xs:mb-0 xs:w-auto
-          hover:d-text-primary hover:border-primary-200
+          hover:d-text-primary
         "
       >
         <span class="relative flex flex-col items-start truncate">

diff --git a/src/defaultTheme/components/organisms/page/PageToc.vue b/src/defaultTheme/components/organisms/page/PageToc.vue
@@ -34,6 +34,7 @@
         flex-col
         justify-between
         overflow-y-auto
+        d-scrollbar
         sticky
         max-h-(screen-header)
         -mt-10

diff --git a/src/defaultTheme/index.ts b/src/defaultTheme/index.ts
@@ -18,7 +18,7 @@ const themeConfig: NuxtConfig = nuxtConfig({
       { rel: 'preconnect', href: 'https://fonts.gstatic.com' }
     ],
     bodyAttrs: {
-      class: ['d-body-bg d-body-text-color text-root min-w-base antialiased tracking-semitight']
+      class: ['d-body-bg d-body-text-color text-root min-w-base antialiased tracking-semitight d-scrollbar']
     }
   },
   colorMode: {

diff --git a/src/defaultTheme/settings.ts b/src/defaultTheme/settings.ts
@@ -93,7 +93,8 @@ const defaultThemeSettings = {
     // Heading
     'd-heading-title': '!mb-0 !mt-0 flex-1 !text-4xl font-semibold tracking-tight',
     'd-heading-description': '!mt-2 !mb-0 text-lg font-medium d-secondary-text',
-    'd-heading-hr': '!mt-4 !mb-0 d-border'
+    'd-heading-hr': '!mt-4 !mb-0 d-border',
+    'd-scrollbar': 'scrollbar-thin scrollbar-thumb-gray-200 dark:scrollbar-thumb-gray-800 scrollbar-thumb-rounded'
   }
 }
 

diff --git a/src/defaultTheme/windi.config.ts b/src/defaultTheme/windi.config.ts
@@ -7,11 +7,12 @@ import colors from 'windicss/colors'
 import defaultTheme from 'windicss/defaultTheme'
 import aspectRatio from 'windicss/plugin/aspect-ratio'
 import filters from 'windicss/plugin/filters'
+import scrollbar from '@windicss/plugin-scrollbar'
 import { defineConfig } from 'windicss/helpers'
 
 export default defineConfig({
   darkMode: 'class',
-  plugins: [filters, aspectRatio],
+  plugins: [filters, aspectRatio, scrollbar],
   // Include Docus node_module when used this way
   extract: {
     include: ['node_modules/docus/dist/**/*.{html,vue,md,mdx,pug,jsx,tsx,svelte,css,ts,js}']
@@ -99,5 +100,8 @@ export default defineConfig({
         18: '4.5rem'
       }
     }
+  },
+  variants: {
+    scrollbar: ['dark', 'rounded']
   }
 })
diff --git a/yarn.lock b/yarn.lock
@@ -2856,6 +2856,11 @@
     "@webassemblyjs/wast-parser" "1.9.0"
     "@xtuc/long" "4.2.2"
 
+"@windicss/plugin-scrollbar@^1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@windicss/plugin-scrollbar/-/plugin-scrollbar-1.2.3.tgz#4796e999e98a4bca6c269fa1faffd2e9b5452cac"
+  integrity sha512-+cqv1pEmaNPITeBJ/lO6tc8IjBzRhQ+V9G8r249MMXivYoxUO4DtModBrRGHVvBgsYZgPXDsIv2jqtxc4NqYEg==
+
 "@windicss/plugin-utils@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-1.1.0.tgz#c0834165f40142bf52f24eced1bbf68cbf8bd506"