How to add global classes (or any other html attribute) to every layout

[teleskop150750]

My css works if the root element contains a certain class. Can I set a custom class for each layout

[cesarm-meyersound]

This one should be easy to implement by the maintainers. We already have a way to use a custom GlobalComponent for all the Stories with:

import { defineSetupVue3 } from '@histoire/plugin-vue'
import GlobalComponent from './GlobalComponent.vue'

export const setup = defineSetupVue3(({ app }) => {
  app.component('GlobalComponent', GlobalComponent)
})

However, when I tried adding a script there, it never ran. I tried doing this to add my custom theme class to the #app element:

<script setup lang="ts">
console.log('Doesn't run on GlobalComponent. But runs in individual stories') // <= Note
import { ref, watch } from 'vue'
import { isDark } from 'histoire/client'

const app = document.getElementById('app')
const darkValue = ref(isDark())

watch(
  darkValue,
  (value) => {
    // console.log(value) // <= Note: not running when we change the theme in Histoire
    if (app) {
      if (value) {
        app.classList.add('dark-mode')
        app.classList.remove('light-mode')
      } else {
        app.classList.add('light-mode')
        app.classList.remove('dark-mode')
      }
    }
  },
  { immediate: true }
)
</script>

[hrishikesh-k]

This should now be possible using Wrappers: https://histoire.dev/guide/vue3/wrapper.html