feat: theme configuration

Signed-off-by: ZTL-UwU <[email protected]>
ZTL-UwU · Jun 18, 2024 · a84a6c8 · a84a6c8
1 parent 4d96392
commit a84a6c8
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 55 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -5,14 +5,18 @@ export default defineAppConfig({
       description: 'Beautifully designed Nuxt Content template built with shadcn-vue. Customizable. Compatible. Open Source.',
       ogImage: '/hero.png',
     },
+    theme: {
+      customizable: true,
+      color: 'zinc',
+      radius: 0.5,
+    },
     header: {
       title: 'shadcn-docs',
       showTitle: true,
       logo: {
         light: '/logo.svg',
         dark: '/logo-dark.svg',
       },
-      themeCustomize: true,
       darkModeToggle: true,
       nav: [
         {
@@ -21,12 +25,10 @@ export default defineAppConfig({
             title: 'Getting Started',
             to: '/getting-started',
             description: 'Start building your document with shadcn-docs-nuxt',
-            target: undefined,
           }, {
             title: 'API',
             to: '/api',
             description: 'Discover the configurations and exposed APIs.',
-            target: undefined,
           }],
         },
         {
@@ -56,7 +58,6 @@ export default defineAppConfig({
         {
           title: 'Use This Template',
           to: '/getting-started/installation',
-          target: undefined,
         },
       ],
       links: [{

diff --git a/app.vue b/app.vue
@@ -1,6 +1,6 @@
 <template>
   <ConfigProvider :use-id="useIdFunction">
-    <NuxtLoadingIndicator :color="false" class="z-100 bg-primary" />
+    <NuxtLoadingIndicator :color="false" class="z-100 bg-primary80" />
     <NuxtPage />
     <Toaster />
   </ConfigProvider>

diff --git a/bun.lockb b/bun.lockb
diff --git a/components/ThemeCustomizer.vue b/components/ThemeCustomizer.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="grid gap-6">
     <div class="grid space-y-1">
-      <h1 class="text-md text-foreground font-semibold">
+      <h1 class="text-lg text-foreground font-semibold">
         Customize
-      </h1><p class="text-xs text-muted-foreground">
-        Pick a style and color for your components.
+      </h1>
+      <p class="text-sm text-muted-foreground">
+        Pick a style and color for the docs.
       </p>
     </div>
     <div class="space-y-1.5">
@@ -18,7 +19,7 @@
             @click="setTheme(color)"
           >
             <span class="h-5 w-5 flex items-center justify-center rounded-full" :style="{ backgroundColor: backgroundColor(color) }">
-              <Icon v-if="theme === color" name="i-radix-icons-check" size="16" class="text-white" />
+              <Icon v-if="theme === color" name="lucide:check" size="16" class="text-white" />
             </span>
             <span class="text-xs capitalize">{{ color }}</span>
           </UiButton>
@@ -49,7 +50,7 @@
           :class="{ 'border-primary border-2': colorMode.preference === 'light' }"
           @click="colorMode.preference = 'light'"
         >
-          <Icon name="i-ph-sun-dim-duotone" size="16" />
+          <Icon name="lucide:sun" size="16" />
           <span class="text-xs capitalize">Light</span>
         </UiButton>
         <UiButton
@@ -58,7 +59,7 @@
           :class="{ 'border-primary border-2': colorMode.preference === 'dark' }"
           @click="colorMode.preference = 'dark'"
         >
-          <Icon name="i-ph-moon-stars-duotone" size="16" />
+          <Icon name="lucide:moon" size="16" />
           <span class="text-xs capitalize">Dark</span>
         </UiButton>
         <UiButton
@@ -67,7 +68,7 @@
           :class="{ 'border-primary border-2': colorMode.preference === 'system' }"
           @click="colorMode.preference = 'system'"
         >
-          <Icon name="i-lucide-monitor" size="16" />
+          <Icon name="lucide:monitor" size="16" />
           <span class="text-xs capitalize">System</span>
         </UiButton>
       </div>
@@ -126,7 +127,3 @@ function backgroundColor(color: Color) {
 
 const colorMode = useColorMode();
 </script>
-
-<style scoped>
-
-</style>
diff --git a/components/ThemePopover.vue b/components/ThemePopover.vue
@@ -2,11 +2,20 @@
   <UiPopover>
     <UiPopoverTrigger as-child>
       <UiButton variant="ghost" size="icon">
-        <Icon name="i-lucide-paintbrush" size="16" />
+        <Icon name="lucide:paintbrush" size="16" />
       </UiButton>
     </UiPopoverTrigger>
-    <UiPopoverContent class="w-[23rem]" align="end">
+    <UiPopoverContent
+      class="w-[23rem]"
+      :align="breakpoints.isGreaterOrEqual('md') ? 'end' : 'center'"
+    >
       <ThemeCustomizer />
     </UiPopoverContent>
   </UiPopover>
 </template>
+
+<script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
+
+const breakpoints = useBreakpoints(breakpointsTailwind);
+</script>
diff --git a/components/layout/Header.vue b/components/layout/Header.vue
@@ -7,7 +7,7 @@
       <div class="flex flex-1 justify-end gap-2">
         <LayoutSearchButton v-if="!config.search.inAside" />
         <div class="flex">
-          <ThemePopover v-if="config.header.themeCustomize" />
+          <ThemePopover v-if="config.theme.customizable" />
           <DarkModeToggle v-if="config.header.darkModeToggle" />
           <NuxtLink
             v-for="(link, i) in config.header.links"

diff --git a/composables/useConfig.ts b/composables/useConfig.ts
@@ -6,14 +6,18 @@ const defaultConfig: DefaultConfig = {
     description: 'Beautifully designed Nuxt Content template built with shadcn-vue. Customizable. Compatible. Open Source.',
     ogImage: '/hero.png',
   },
+  theme: {
+    customizable: true,
+    color: 'zinc',
+    radius: 0.5,
+  },
   header: {
     title: 'shadcn-docs',
     showTitle: true,
     logo: {
       light: '/logo.svg',
       dark: '/logo-dark.svg',
     },
-    themeCustomize: true,
     darkModeToggle: true,
     nav: [],
     links: [],

diff --git a/composables/useThemes.ts b/composables/useThemes.ts
@@ -9,10 +9,11 @@ export function useThemes() {
   const { value: color } = useColorMode();
   const isDark = color === 'dark';
 
+  const defaultTheme = useConfig().value.theme;
   const config = useCookie<Config>('theme', {
     default: () => ({
-      theme: 'zinc',
-      radius: 0.5,
+      theme: defaultTheme.color as Color,
+      radius: defaultTheme.radius,
     }),
   });
 

diff --git a/content/2.api/1.configuration.md b/content/2.api/1.configuration.md
@@ -57,6 +57,20 @@ interface INav {
   ::
 ::
 
+### `theme`
+
+::field-group
+  ::field{name="customizable" type="boolean" defaultValue="true"}
+  Whether the theme can be customized by the user (show the customize button in the header).
+  ::
+  ::field{name="color" type="Color" defaultValue="zinc"}
+  The default color theme. https://www.shadcn-vue.com/themes.html
+  ::
+  ::field{name="radius" type="string" defaultValue="0.5"}
+  The default radius.
+  ::
+::
+
 ### `header`
 
 ::field-group

diff --git a/content/2.api/2.themes.md b/content/2.api/2.themes.md
@@ -4,36 +4,6 @@ icon: 'lucide:palette'
 description: Add colors. Make it yours.
 ---
 
-Pick a theme from the [shadcn-vue website](https://www.shadcn-vue.com/themes.html).
-
-Copy the code and put them into `assets/css/tailwind.css` by replacing the `@layer base` part.
-
-```css[assets/css/tailwind.css]{5-13}
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    <xxx>
-  }
-
-  .dark {
-    <xxx>
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-```
-
-::alert{type="success" icon="lucide:circle-check"}
-That's it, enjoy your theme!
+::Alert{to="http://localhost:3000/api/configuration#theme"}
+See how to customize the theme in **Configuration**.
 ::
diff --git a/types/index.d.ts b/types/index.d.ts
@@ -4,14 +4,18 @@ interface DefaultConfig {
     description: string;
     ogImage: string;
   };
+  theme: {
+    customizable: boolean;
+    color: Color;
+    radius: number;
+  };
   header: {
     title: string;
     showTitle: boolean;
     logo: {
       light: string;
       dark: string;
     };
-    themeCustomize: boolean;
     darkModeToggle: boolean;
     nav: ({
       title: string;