Support for dark theme?

[psi-4ward]

I've setup your great addon with:

addParameters({ options: { theme: themes.dark }});

but some elements like div.src-components-Header-subtitle-v58S sets it's color to #333 wich is not readable anymore.

Can you give us a hint how to overwrite these styles?

[pocka]

@psi-4ward There is no easy way to do that. Though you can archive it by creating your own doc component, it requires a lot of work...

We can respect user's theme by using @storybook/theming, but the module is available from SB5(this addon supports both v4 and v5)

[psi-4ward]

Huh that's bad and not usable with dark theme. I've tried docsInPanel=false and there I can import my custom styles in the config.js but using this method your styles influences the preview a lot which is bad.

So creating a custom wrapperComponent could be a way but

import VuInfo from './VueInfo.vue';
setDefaults({
  wrapperComponent: VuInfo
});

does nothing

[pocka]

@psi-4ward wrapperComponent only works with docsInPanel: false. Please try this.

import VuInfo from './VueInfo.vue';
setDefaults({
  wrapperComponent: VuInfo,
  docsInPanel: false
});

[psi-4ward]

Ah a see, so there's still the problem with the style impact. Thx.

[psi-4ward]

Just for the record:

<template>
  <div>
    <slot/>
    <div class="vueinfo-body">
      <story-source class="story-source" :source="info.storySource" :lang="info.jsxStory ? 'jsx' : 'html'" />
      <x-component v-for="c in info.components" :key="c.name" :component="c" />
    </div>
  </div>
</template>
<script>
  import { StorySource, Component as XComponent } from 'storybook-addon-vue-info';
  import 'highlight.js/styles/atom-one-dark-reasonable.css';

  export default {
    name: "VueInfo",
    components: {
      StorySource,
      XComponent
    },
    props: {
      info: {
        type: Object,
        required: true
      },
      options: {
        type: Object,
        required: true
      }
    }
  }
</script>

<style lang="stylus">
  body
    background #2f2f2f

  .vueinfo-header
    margin-bottom 2rem
    h1
      color white
      font-size 30px
      line-height 30px
      margin 0

  .vueinfo-body
    color white
    margin-top 3rem
    label
      font-weight bold
    .hljs
      background #282C34 !important
    .story-source
      margin-bottom 1.5rem
    h2
      font-size 22px
      line-height 22px
      margin-bottom 2rem

</style>

[pocka]

Closing due to version compatibility (no implementation planned).

NOTE: There is the new documentation tool, addon-docs in Storybook v5.2.0-alpha, which uses @storybook/components (I'm not sure it supports theming at now). #65