fix: presistNav detection on custom aspect ratio

Author: antfu

packages/client/internals/Play.vue

@@ -54,7 +54,7 @@ if (__DEV__)
           <NavControls
             class="m-auto"
             :class="presistNav
-              ? 'text-white bg-transparent'
+              ? 'text-$slidev-controls-foreground bg-transparent'
               : 'rounded-md bg-main shadow dark:(border border-gray-400 border-opacity-10)'"
           />
         </div>

packages/client/state/index.ts

@@ -1,5 +1,6 @@
 import { useMagicKeys, useActiveElement, useStorage, useBreakpoints, breakpointsTailwind, useWindowSize, useFullscreen, useToggle, isClient } from '@vueuse/core'
 import { computed, ref } from 'vue'
+import { slideAspect } from '../env'
 
 export const showOverview = ref(false)
 export const showRecordingDialog = ref(false)
@@ -10,7 +11,7 @@ export const shortcutsEnabled = ref(true)
 export const breakpoints = useBreakpoints(breakpointsTailwind)
 export const windowSize = useWindowSize()
 export const magicKeys = useMagicKeys()
-export const isScreenVertical = computed(() => windowSize.width.value <= windowSize.height.value)
+export const isScreenVertical = computed(() => windowSize.height.value - windowSize.width.value / slideAspect > 180)
 export const fullscreen = useFullscreen(isClient ? document.body : null)
 
 export const activeElement = useActiveElement()

packages/client/styles/vars.css

@@ -6,5 +6,7 @@
   --slidev-code-line-height: 18px;
   --slidev-code-radius: 4px;
   --slidev-code-margin: 4px 0;
+
   --slidev-slide-container-background: black;
+  --slidev-controls-foreground: white;
 }