feat: themeConfig frontmatter options

packages/client/env.ts

@@ -1,5 +1,15 @@
 import { SlidevConfig } from '@slidev/types'
+import { computed } from '@vue/runtime-core'
+import { objectMap } from '@antfu/utils'
 // @ts-ignore
 import _configs from '/@slidev/configs'
 
 export const configs = _configs as SlidevConfig
+
+export const slideAspect = configs.aspectRatio ?? (16 / 9)
+export const slideWidth = configs.canvasWidth ?? 980
+export const slideHeight = Math.round(slideWidth / slideAspect)
+
+export const themeVars = computed(() => {
+  return objectMap(configs.themeConfig || {}, (k, v) => [`--slidev-theme-${k}`, v])
+})

packages/client/internals/Play.vue

@@ -3,6 +3,7 @@ import { ref, computed, shallowRef } from 'vue'
 import { showEditor, windowSize, isScreenVertical, slideScale } from '../state'
 import { isPrintMode, next, prev, useSwipeControls } from '../logic/nav'
 import { registerShotcuts } from '../logic/shortcuts'
+import { themeVars } from '../env'
 import Controls from './Controls.vue'
 import SlideContainer from './SlideContainer.vue'
 import NavControls from './NavControls.vue'
@@ -34,7 +35,7 @@ if (__DEV__)
 </script>
 
 <template>
-  <div id="page-root" ref="root" class="grid grid-cols-[1fr,max-content]">
+  <div id="page-root" ref="root" class="grid grid-cols-[1fr,max-content]" :style="themeVars">
     <SlideContainer
       class="w-full h-full"
       :style="{ background: 'var(--slidev-slide-container-background, black)'}"

packages/client/internals/Presenter.vue

@@ -4,7 +4,7 @@ import { ref, computed } from 'vue'
 import { useTimestamp } from '@vueuse/core'
 import { total, currentPage, currentRoute, nextRoute, clicks, useSwipeControls, clicksTotal, hasNext } from '../logic/nav'
 import { showOverview } from '../state'
-import { configs } from '../env'
+import { configs, themeVars } from '../env'
 import { registerShotcuts } from '../logic/shortcuts'
 import { getSlideClass } from '../utils'
 import SlideContainer from './SlideContainer.vue'
@@ -79,7 +79,7 @@ useSwipeControls(main)
           {{ timer }}
         </div>
       </div>
-      <div ref="main" class="grid-section main flex flex-col p-4">
+      <div ref="main" class="grid-section main flex flex-col p-4" :style="themeVars">
         <SlideContainer
           key="main"
           class="h-full w-full"

packages/client/internals/SlideContainer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useElementSize } from '@vueuse/core'
 import { computed, defineProps, ref, watchEffect } from 'vue'
-import { slideAspect, slideWidth, slideHeight } from '../constants'
+import { slideAspect, slideWidth, slideHeight } from '../env'
 
 const props = defineProps({
   width: {

packages/parser/src/core.ts

@@ -148,6 +148,7 @@ export function parse(
     routerMode: 'history',
     aspectRatio: 16 / 9,
     canvasWidth: 980,
+    themeConfig: {},
   }
   const config: SlidevConfig = Object.assign(
     defaultConfig,

packages/types/src/types.ts

@@ -13,6 +13,8 @@ export interface SlideInfoExtended extends SlideInfo {
   notesHTML: string
 }
 
+export type SlidevThemeConfig = Record<string, string | number>
+
 export interface SlidevConfig {
   title: string
   /**
@@ -78,6 +80,17 @@ export interface SlidevConfig {
    * @default '980'
    */
   canvasWidth: number
+
+  /**
+   * Configure for themes, will inject intro root styles as
+   * `--slidev-theme-x` for attribute `x`
+   *
+   * This allows themes to have customization options in frontmatter
+   * Refer to themes' document for options avaliable
+   *
+   * @default {}
+   */
+  themeConfig: SlidevThemeConfig
 }
 
 export interface SlidevFeatureFlags {