hunk.code_window: const root = ref<HTMLDivElement>()
   const element = useElementSize(root)
   const width = computed(() => props.width ? props.width : element.width.value)
   const height = computed(() => props.width ? props.width / slideAspect : element.height.value)
   if (props.width) {
     watchEffect(() => {
  
hunk.labels: keep keep keep keep keep replace keep keep keep
hunk.after_edit: const height = computed(() => props.width ? props.width / slideAspect.value : element.height.value)
  
hunk.file_path: packages/client/internals/SlideContainer.vue
hunk.type: replace
file: <script setup lang="ts">
  import { isDark, toggleDark } from '@slidev/client/logic/dark.ts'
  </script>
  
  <template>
    <button
      class="bg-primary rounded border-b-2 border-green-900 text-sm px-2 pt-1.5 pb-1 inline-block !outline-none hover:bg-opacity-85"
      @click="toggleDark"
    >
      <div class="flex">
        <carbon:moon v-if="isDark" />
        <carbon:sun v-else />
        <span class="mr-1 ml-2">{{ isDark ? 'Dark' : 'Light' }}</span>
      </div>
    </button>
  </template>
  