@slidev/client 0.48.0-beta.8 → 0.48.0-beta.9

package/internals/DrawingControls.vue

@@ -40,8 +40,7 @@ function setBrushColor(color: typeof brush.color) {
 
 <template>
   <Draggable
-    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200 z-20"
-    dark="border border-gray-400 border-opacity-10"
+    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200 z-20 border border-main"
     :class="drawingEnabled ? '' : drawingPinned ? 'opacity-40 hover:opacity-90' : 'opacity-0 pointer-events-none'"
     storage-key="slidev-drawing-pos"
     :initial-x="10"

package/internals/Editor.vue

@@ -172,13 +172,13 @@ throttledWatch(
     <div class="flex pb-2 text-xl -mt-1">
       <div class="mr-4 rounded flex">
         <IconButton
-          title="Switch to content tab" :class="tab === 'content' ? 'text-$slidev-theme-primary' : ''"
+          title="Switch to content tab" :class="tab === 'content' ? 'text-primary' : ''"
           @click="switchTab('content')"
         >
           <carbon:account />
         </IconButton>
         <IconButton
-          title="Switch to notes tab" :class="tab === 'note' ? 'text-$slidev-theme-primary' : ''"
+          title="Switch to notes tab" :class="tab === 'note' ? 'text-primary' : ''"
           @click="switchTab('note')"
         >
           <carbon:align-box-bottom-right />

package/internals/IconButton.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 defineProps<{
   title: string
+  icon?: string
 }>()
 </script>
 
 <template>
   <button class="slidev-icon-btn" :title="title" v-bind="$attrs">
     <span class="sr-only">{{ title }}</span>
-    <slot />
+    <slot>
+      <div :class="icon" />
+    </slot>
   </button>
 </template>

package/internals/NavControls.vue

@@ -34,7 +34,7 @@ function onMouseLeave() {
 
 const barStyle = computed(() => props.persist
   ? 'text-$slidev-controls-foreground bg-transparent'
-  : 'rounded-md bg-main shadow dark:border dark:border-gray-400 dark:border-opacity-10')
+  : 'rounded-md bg-main shadow dark:border dark:border-main')
 
 const RecordingControls = shallowRef<any>()
 if (__SLIDEV_FEATURE_RECORD__)

package/internals/NoteDisplay.vue

@@ -27,7 +27,7 @@ defineEmits(['click'])
   </div>
   <div
     v-else
-    class="prose overflow-auto outline-none opacity-50 italic"
+    class="prose overflow-auto outline-none opacity-50 italic select-none"
     :class="props.class"
     @click="$emit('click')"
   >

package/internals/NoteEditor.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { ignorableWatch, onClickOutside, useVModel } from '@vueuse/core'
 import { ref, watch, watchEffect } from 'vue'
-import { currentSlideId } from '../logic/nav'
 import { useDynamicSlideInfo } from '../logic/note'
 import NoteDisplay from './NoteDisplay.vue'
 
 const props = defineProps({
+  no: {
+    type: Number,
+  },
   class: {
     default: '',
   },
@@ -25,7 +27,7 @@ const emit = defineEmits([
 ])
 const editing = useVModel(props, 'editing', emit, { passive: true })
 
-const { info, update } = useDynamicSlideInfo(currentSlideId)
+const { info, update } = useDynamicSlideInfo(props.no)
 
 const note = ref('')
 let timer: any
@@ -33,7 +35,7 @@ let timer: any
 const { ignoreUpdates } = ignorableWatch(
   note,
   (v) => {
-    const id = currentSlideId.value
+    const id = props.no
     clearTimeout(timer)
     timer = setTimeout(() => {
       update({ note: v }, id)
@@ -44,6 +46,8 @@ const { ignoreUpdates } = ignorableWatch(
 watch(
   info,
   (v) => {
+    if (editing.value)
+      return
     clearTimeout(timer)
     ignoreUpdates(() => {
       note.value = v?.note || ''
@@ -68,7 +72,7 @@ onClickOutside(input, () => {
   <NoteDisplay
     v-if="!editing"
     class="my--4 border-transparent border-2"
-    :class="[props.class, note ? '' : 'opacity-50']"
+    :class="[props.class, note ? '' : 'opacity-25 italic select-none']"
     :style="props.style"
     :note="note || placeholder"
     :note-html="info?.noteHTML"
@@ -77,7 +81,7 @@ onClickOutside(input, () => {
     v-else
     ref="input"
     v-model="note"
-    class="prose resize-none overflow-auto outline-none bg-transparent block border-green border-2"
+    class="prose resize-none overflow-auto outline-none bg-transparent block border-primary border-2"
     style="line-height: 1.75;"
     :style="props.style"
     :class="props.class"

package/internals/NoteStatic.vue

@@ -1,20 +1,19 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { currentRoute } from '../logic/nav'
+import { useSlideInfo } from '../logic/note'
 import NoteDisplay from './NoteDisplay.vue'
 
 const props = defineProps<{
+  no?: number
   class?: string
 }>()
 
-const note = computed(() => currentRoute.value?.meta?.slide?.note)
-const noteHtml = computed(() => currentRoute.value?.meta?.slide?.noteHTML)
+const { info } = useSlideInfo(props.no)
 </script>
 
 <template>
   <NoteDisplay
     :class="props.class"
-    :note="note"
-    :note-html="noteHtml"
+    :note="info?.note"
+    :note-html="info?.noteHTML"
   />
 </template>

package/internals/RecordingDialog.vue

@@ -109,7 +109,7 @@ async function start() {
   }
 
   input[type="text"] {
-    @apply border border-gray-400 rounded px-2 py-1;
+    @apply border border-main rounded px-2 py-1;
   }
 
   button {
@@ -118,8 +118,7 @@ async function start() {
   }
 
   button.cancel {
-    @apply bg-gray-400 text-white px-4 py-1 rounded border-b-2 border-gray-500;
-    @apply bg-opacity-50 border-opacity-50;
+    @apply bg-gray-400 bg-opacity-50 text-white px-4 py-1 rounded border-b-2 border-main;
     @apply hover:(bg-opacity-75 border-opacity-75)
   }
 }

package/internals/SlidesOverview.vue

@@ -112,7 +112,7 @@ watchEffect(() => {
   >
     <div
       v-show="value"
-      class="bg-main !bg-opacity-75 p-16 overflow-y-auto backdrop-blur-5px fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)]"
+      class="bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)]"
       @click="close()"
     >
       <div
@@ -125,8 +125,8 @@ watchEffect(() => {
           class="relative"
         >
           <div
-            class="inline-block border rounded border-opacity-50 overflow-hidden bg-main hover:border-$slidev-theme-primary transition"
-            :class="(focus(idx + 1) || currentOverviewPage === idx + 1) ? 'border-$slidev-theme-primary' : 'border-gray-400'"
+            class="inline-block border rounded overflow-hidden bg-main hover:border-primary transition"
+            :class="(focus(idx + 1) || currentOverviewPage === idx + 1) ? 'border-primary' : 'border-main'"
             :style="themeVars"
             @click="go(+route.path)"
           >
@@ -163,7 +163,17 @@ watchEffect(() => {
       </div>
     </div>
   </Transition>
-  <IconButton v-if="value" title="Close" class="fixed text-2xl top-4 right-4 text-gray-400" @click="close">
-    <carbon:close />
-  </IconButton>
+  <div class="fixed top-4 right-4 text-gray-400 flex items-center gap-4">
+    <RouterLink
+      v-if="__DEV__"
+      to="/overview"
+      tab-index="-1"
+      class="border-main border px3 py1 rounded hover:bg-gray/5 hover:text-primary"
+    >
+      List overview
+    </RouterLink>
+    <IconButton v-if="value" title="Close" class="text-2xl" @click="close">
+      <carbon:close />
+    </IconButton>
+  </div>
 </template>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.0-beta.8",
+  "version": "0.48.0-beta.9",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -54,8 +54,8 @@
     "unocss": "^0.58.5",
     "vue": "^3.4.19",
     "vue-router": "^4.3.0",
-    "@slidev/parser": "0.48.0-beta.8",
-    "@slidev/types": "0.48.0-beta.8"
+    "@slidev/parser": "0.48.0-beta.9",
+    "@slidev/types": "0.48.0-beta.9"
   },
   "devDependencies": {
     "vite": "^5.1.4"

package/{internals/EntrySelect.vue → pages/entry.vue}

@@ -21,5 +21,12 @@
       <carbon:catalog class="text-3em op50" />
       Notes
     </RouterLink>
+    <RouterLink
+      to="/overview"
+      class="flex flex-col gap-2 items-center justify-center h-40 min-w-40 rounded bg-gray:10 p4 hover:bg-gray/20"
+    >
+      <carbon:list-boxes class="text-3em op50" />
+      Overview
+    </RouterLink>
   </div>
 </template>

package/{internals/NotesView.vue → pages/notes.vue}

@@ -7,8 +7,8 @@ import { sharedState } from '../state/shared'
 import { fullscreen } from '../state'
 import { total } from '../logic/nav'
 import { rawRoutes } from '../routes'
-import NoteDisplay from './NoteDisplay.vue'
-import IconButton from './IconButton.vue'
+import NoteDisplay from '../internals/NoteDisplay.vue'
+import IconButton from '../internals/IconButton.vue'
 
 const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
 useHead({
@@ -53,7 +53,7 @@ function decreaseFontSize() {
         :placeholder="`No notes for Slide ${pageNo}.`"
       />
     </div>
-    <div class="flex-none border-t border-gray-400 border-opacity-20">
+    <div class="flex-none border-t border-main">
       <div class="flex gap-1 items-center px-6 py-3">
         <IconButton :title="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" @click="toggleFullscreen">
           <carbon:minimize v-if="isFullscreen" />

package/pages/overview.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import { themeVars } from '../env'
+import { rawRoutes } from '../logic/nav'
+import { useFixedClicks } from '../composables/useClicks'
+import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
+import { getSlideClass } from '../utils'
+import SlideContainer from '../internals/SlideContainer.vue'
+import SlideWrapper from '../internals/SlideWrapper'
+import DrawingPreview from '../internals/DrawingPreview.vue'
+import IconButton from '../internals/IconButton.vue'
+import NoteEditor from '../internals/NoteEditor.vue'
+
+const cardWidth = 450
+
+const blocks: Map<number, HTMLElement> = reactive(new Map())
+const activeBlocks = ref<number[]>([])
+const edittingNote = ref<string | null>(null)
+
+function isElementInViewport(el: HTMLElement) {
+  const rect = el.getBoundingClientRect()
+  const delta = 20
+  return (
+    rect.top >= 0 - delta
+    && rect.left >= 0 - delta
+    && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + delta
+    && rect.right <= (window.innerWidth || document.documentElement.clientWidth) + delta
+  )
+}
+
+function checkActiveBlocks() {
+  const active: number[] = []
+  Array.from(blocks.entries())
+    .forEach(([idx, el]) => {
+      if (isElementInViewport(el))
+        active.push(idx)
+    })
+  activeBlocks.value = active
+}
+
+function openSlideInNewTab(path: string) {
+  const a = document.createElement('a')
+  a.target = '_blank'
+  a.href = path
+  a.click()
+}
+
+function scrollToSlide(idx: number) {
+  const el = blocks.get(idx)
+  if (el)
+    el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}
+
+onMounted(() => {
+  nextTick(() => {
+    checkActiveBlocks()
+  })
+})
+</script>
+
+<template>
+  <div class="h-screen w-screen of-hidden flex">
+    <nav class="h-full flex flex-col border-r border-main p2 select-none">
+      <div class="of-auto flex flex-col flex-auto items-center">
+        <button
+          v-for="(route, idx) of rawRoutes"
+          :key="route.path"
+          class="relative transition duration-300 w-8 h-8 rounded hover:bg-gray:10 hover:op100"
+          :class="[
+            activeBlocks.includes(idx) ? 'op100 text-primary' : 'op20',
+          ]"
+          @click="scrollToSlide(idx)"
+        >
+          <div>{{ idx + 1 }}</div>
+        </button>
+      </div>
+      <IconButton
+        v-if="!isColorSchemaConfigured"
+        :title="isDark ? 'Switch to light mode theme' : 'Switch to dark mode theme'"
+        @click="toggleDark()"
+      >
+        <carbon-moon v-if="isDark" />
+        <carbon-sun v-else />
+      </IconButton>
+    </nav>
+    <main
+      class="flex-1 h-full of-auto"
+      :style="`grid-template-columns: repeat(auto-fit,minmax(${cardWidth}px,1fr))`"
+      @scroll="checkActiveBlocks"
+    >
+      <div class="px4 py2 text-orange bg-orange:5 select-none">
+        <span font-bold>List Overview</span> is in beta, feedback is welcome!
+      </div>
+      <div
+        v-for="(route, idx) of rawRoutes"
+        :key="route.path"
+        :ref="el => blocks.set(idx, el)"
+        class="relative border-t border-main of-hidden flex gap-4 min-h-50 group"
+      >
+        <div class="select-none text-3xl op20 w-13 my4 text-right">
+          {{ idx + 1 }}
+        </div>
+        <div
+          class="border rounded border-main overflow-hidden bg-main my5 select-none"
+          :style="themeVars"
+          @dblclick="openSlideInNewTab(route.path)"
+        >
+          <SlideContainer
+            :key="route.path"
+            :width="cardWidth"
+            :clicks-disabled="true"
+            class="pointer-events-none important:[&_*]:select-none"
+          >
+            <SlideWrapper
+              :is="route.component"
+              v-if="route?.component"
+              :clicks-context="useFixedClicks(route, 99999)[1]"
+              :class="getSlideClass(route)"
+              :route="route"
+              render-context="overview"
+            />
+            <DrawingPreview :page="+route.path" />
+          </SlideContainer>
+        </div>
+        <div class="py3 mt-0.5 mr--8 ml--4 op0 transition group-hover:op100">
+          <IconButton
+            title="Edit Note"
+            class="rounded-full w-9 h-9 text-sm"
+            :class="edittingNote === idx ? 'important:op0' : ''"
+            @click="edittingNote = idx"
+          >
+            <carbon:pen />
+          </IconButton>
+        </div>
+        <NoteEditor
+          :no="idx"
+          class="max-w-250 w-250 text-lg rounded p3"
+          :editing="edittingNote === idx"
+          @update:editing="edittingNote = null"
+        />
+      </div>
+    </main>
+  </div>
+</template>

package/{internals/Play.vue → pages/play.vue}

@@ -5,11 +5,11 @@ import { isEmbedded, isPrintMode, next, prev, useSwipeControls } from '../logic/
 import { isDrawing } from '../logic/drawings'
 import { registerShortcuts } from '../logic/shortcuts'
 import { configs, themeVars } from '../env'
-import Controls from './Controls.vue'
-import SlideContainer from './SlideContainer.vue'
-import NavControls from './NavControls.vue'
-import SlidesShow from './SlidesShow.vue'
-import PrintStyle from './PrintStyle.vue'
+import Controls from '../internals/Controls.vue'
+import SlideContainer from '../internals/SlideContainer.vue'
+import NavControls from '../internals/NavControls.vue'
+import SlidesShow from '../internals/SlidesShow.vue'
+import PrintStyle from '../internals/PrintStyle.vue'
 
 registerShortcuts()
 
@@ -33,11 +33,11 @@ const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 
 const Editor = shallowRef<any>()
 if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
-  import('./Editor.vue').then(v => Editor.value = v.default)
+  import('../internals/Editor.vue').then(v => Editor.value = v.default)
 
 const DrawingControls = shallowRef<any>()
 if (__SLIDEV_FEATURE_DRAWINGS__)
-  import('./DrawingControls.vue').then(v => DrawingControls.value = v.default)
+  import('../internals/DrawingControls.vue').then(v => DrawingControls.value = v.default)
 </script>
 
 <template>

package/{internals/PresenterPrint.vue → pages/presenter/print.vue}

@@ -2,9 +2,9 @@
 import { computed } from 'vue'
 import { useStyleTag } from '@vueuse/core'
 import { useHead } from '@unhead/vue'
-import { configs, themeVars } from '../env'
-import { rawRoutes, total } from '../logic/nav'
-import NoteDisplay from './NoteDisplay.vue'
+import { configs, themeVars } from '../../env'
+import { rawRoutes, total } from '../../logic/nav'
+import NoteDisplay from '../../internals/NoteDisplay.vue'
 
 useStyleTag(`
 @page {
@@ -24,7 +24,9 @@ html #page-root {
 }
 `)
 
-useHead({ title: `Notes - ${configs.title}` })
+useHead({
+  title: `Notes - ${configs.title}`,
+})
 
 const slidesWithNote = computed(() => rawRoutes
   .map(route => route.meta?.slide)
@@ -56,7 +58,7 @@ const slidesWithNote = computed(() => rawRoutes
           </h2>
           <NoteDisplay :note-html="slide!.noteHTML" class="max-w-full" />
         </div>
-        <hr v-if="index < slidesWithNote.length - 1" class="border-gray-400/50 mb-8">
+        <hr v-if="index < slidesWithNote.length - 1" class="border-main mb-8">
       </div>
     </div>
   </div>

package/{internals/Presenter.vue → pages/presenter.vue}

@@ -2,7 +2,7 @@
 import { useHead } from '@unhead/vue'
 import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
-import { clicksContext, currentPage, currentRoute, hasNext, nextRoute, queryClicks, rawRoutes, total, useSwipeControls } from '../logic/nav'
+import { clicksContext, currentPage, currentRoute, currentSlideId, hasNext, nextRoute, queryClicks, rawRoutes, total, useSwipeControls } from '../logic/nav'
 import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showOverview, showPresenterCursor } from '../state'
 import { configs, themeVars } from '../env'
 import { sharedState } from '../state/shared'
@@ -11,16 +11,16 @@ import { getSlideClass } from '../utils'
 import { useTimer } from '../logic/utils'
 import { isDrawing } from '../logic/drawings'
 import { useFixedClicks } from '../composables/useClicks'
-import SlideContainer from './SlideContainer.vue'
-import NavControls from './NavControls.vue'
-import SlidesOverview from './SlidesOverview.vue'
-import NoteEditor from './NoteEditor.vue'
-import NoteStatic from './NoteStatic.vue'
-import Goto from './Goto.vue'
-import SlidesShow from './SlidesShow.vue'
-import SlideWrapper from './SlideWrapper'
-import DrawingControls from './DrawingControls.vue'
-import IconButton from './IconButton.vue'
+import SlideWrapper from '../internals/SlideWrapper'
+import SlideContainer from '../internals/SlideContainer.vue'
+import NavControls from '../internals/NavControls.vue'
+import SlidesOverview from '../internals/SlidesOverview.vue'
+import NoteEditor from '../internals/NoteEditor.vue'
+import NoteStatic from '../internals/NoteStatic.vue'
+import Goto from '../internals/Goto.vue'
+import SlidesShow from '../internals/SlidesShow.vue'
+import DrawingControls from '../internals/DrawingControls.vue'
+import IconButton from '../internals/IconButton.vue'
 
 const main = ref<HTMLDivElement>()
 
@@ -54,7 +54,7 @@ watch([currentRoute, queryClicks], () => {
 
 const Editor = shallowRef<any>()
 if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
-  import('./Editor.vue').then(v => Editor.value = v.default)
+  import('../internals/Editor.vue').then(v => Editor.value = v.default)
 
 // sync presenter cursor
 onMounted(() => {
@@ -140,12 +140,16 @@ onMounted(() => {
       <div v-else class="grid-section note grid grid-rows-[1fr_min-content] overflow-hidden">
         <NoteEditor
           v-if="__DEV__"
+          :key="`edit-${currentSlideId}`"
+          :no="currentSlideId"
           class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
           :editing="notesEditing"
           :style="{ fontSize: `${presenterNotesFontSize}em` }"
         />
         <NoteStatic
           v-else
+          :key="`static-${currentSlideId}`"
+          :no="currentSlideId"
           class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
           :style="{ fontSize: `${presenterNotesFontSize}em` }"
         />

package/{internals/Print.vue → pages/print.vue}

@@ -3,8 +3,8 @@ import { watchEffect } from 'vue'
 import { windowSize } from '../state'
 import { isPrintMode } from '../logic/nav'
 import { themeVars } from '../env'
-import PrintContainer from './PrintContainer.vue'
-import PrintStyle from './PrintStyle.vue'
+import PrintContainer from '../internals/PrintContainer.vue'
+import PrintStyle from '../internals/PrintStyle.vue'
 
 watchEffect(() => {
   if (isPrintMode)

package/routes.ts

@@ -15,13 +15,19 @@ export const routes: RouteRecordRaw[] = [
   {
     name: 'play',
     path: '/',
-    component: () => import('./internals/Play.vue'),
+    component: () => import('./pages/play.vue'),
     children: [
       ...rawRoutes,
       ...redirects,
     ],
   },
-  { name: 'print', path: '/print', component: () => import('./internals/Print.vue') },
+  {
+    name: 'print',
+    path: '/print',
+    component: () => import('./pages/print.vue'),
+  },
+
+  // Redirects
   { path: '', redirect: { path: '/1' } },
   { path: '/:pathMatch(.*)', redirect: { path: '/1' } },
 ]
@@ -40,24 +46,33 @@ if (__SLIDEV_FEATURE_PRESENTER__) {
       return { path: `/${to.params.no}` }
     return { path: '' }
   }
-  routes.push({ path: '/presenter/print', component: () => import('./internals/PresenterPrint.vue') })
+
+  routes.push({
+    path: '/presenter/print',
+    component: () => import('./pages/presenter/print.vue'),
+  })
   if (__SLIDEV_HAS_SERVER__) {
     routes.push({
       name: 'entry',
       path: '/entry',
-      component: () => import('./internals/EntrySelect.vue'),
+      component: () => import('./pages/entry.vue'),
+    })
+    routes.push({
+      name: 'overview',
+      path: '/overview',
+      component: () => import('./pages/overview.vue'),
     })
     routes.push({
       name: 'notes',
       path: '/notes',
-      component: () => import('./internals/NotesView.vue'),
+      component: () => import('./pages/notes.vue'),
       beforeEnter: passwordGuard,
     })
   }
   routes.push({
     name: 'presenter',
     path: '/presenter/:no',
-    component: () => import('./internals/Presenter.vue'),
+    component: () => import('./pages/presenter.vue'),
     beforeEnter: passwordGuard,
   })
   routes.push({

package/styles/layouts-base.css

@@ -54,7 +54,9 @@
   }
 
   blockquote {
-    @apply text-sm px-2 py-1 bg-$prism-background text-$prism-foreground border-$slidev-theme-primary border-l rounded;
+    background: var(--slidev-code-background);
+    color: var(--slidev-code-foreground);
+    @apply text-sm px-2 py-1 border-primary border-l rounded;
   }
 
   blockquote > * {
@@ -66,7 +68,7 @@
   }
 
   tr {
-    @apply border-b border-gray-400 border-opacity-20;
+    @apply border-b border-main;
   }
 
   th {
@@ -74,7 +76,7 @@
   }
 
   a {
-    @apply border-current border-b border-dashed hover:text-$slidev-theme-primary hover:border-solid;
+    @apply border-current border-b border-dashed hover:text-primary hover:border-solid;
   }
 
   td, th {
@@ -86,7 +88,7 @@
   }
 
   kbd {
-    @apply border border-gray-400 border-b-2 border-opacity-20 rounded;
+    @apply border border-main border-b-2 rounded;
     @apply bg-gray-400 bg-opacity-5 py-0.5 px-1 text-xs font-mono;
   }
 }

package/styles/vars.css

@@ -7,6 +7,7 @@
   --slidev-code-line-height: 18px;
   --slidev-code-radius: 4px;
   --slidev-code-margin: 4px 0;
+  --slidev-theme-primary: #3AB9D5;
 
   --slidev-transition-duration: 0.5s;
   --slidev-slide-container-background: black;

package/uno.config.ts

@@ -17,7 +17,10 @@ export default defineConfig({
   shortcuts: {
     'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
     'bg-active': 'bg-gray-400/10',
-    'border-main': 'border-gray-400/20',
+    'border-main': 'border-gray/20',
+    'text-primary': 'color-$slidev-theme-primary',
+    'bg-primary': 'bg-$slidev-theme-primary',
+    'border-primary': 'border-$slidev-theme-primary',
     'abs-tl': 'absolute top-0 left-0',
     'abs-tr': 'absolute top-0 right-0',
     'abs-b': 'absolute bottom-0 left-0 right-0',