what about dark theme support?

[lospringliu]

current rendering does not seem to fit dark mode well.

What about make some global update to make it work with something like https://anu-vue.netlify.app/guide/features/theme.html ?
this does not require to set configurations on a lot of places

[lospringliu]

light them

[lospringliu]

dark theme

[lospringliu]

not a real issue as the configuration will show the same effect by default for both dark and regular theme. It would be good to make it responds to common dark theme though

[davay42]

Yeah, this feature is very needed, but I postponed it not to waste too much time on refining the visual part, focusing on the db and build system. We can sprinkle some "dark-..." classes everywhere to have the dark mode feature, but may be there's another way. I'm thinking of implementing some kind of theming. May be you have any ideas how to do that? 😄

[davay42]

Actually Anu seems to be a nice case! It uses the UnoCSS plugin system, which seems to be perfect for GunVue too. Need to explore this more. May be even integrate Anu as an underlying suitcase of basic components.

[lospringliu]

Anu has dark theme support by default and do not need to add dark- classes everywhere, but likely will not have your ideal visual expectations

[lospringliu]

I played half day with anu, it feels to be a good ui library, perhaps you can think of integrating it to gun-vue

[davay42]

Yeah! I'm just exploring it's docs and source to find ways to integrate into the components package. And still make them customizable. If you have a clue how to do it - please share )

[davay42]

Man, I just can't make it work with my current layered setup... How to manage styles not to be in need to build the components each time I need to check them in the app.

[lospringliu]

current version is a bit old (0.12.0), they have edge builds let me see if I can make it to work with your repo

[lospringliu]

I found need some options like below, it seems to be very flexible

      <ASelect optionsWrapperClasses="z-500"/>
      <AInput type="number" input-wrapper-classes="px-0" />

[davay42]

Seems doable! Like so we need a prop of classes for each wrapper in a component. And so the initial classes can be stored in props default. But idk how UnoCSS handles that. Will see 👀

[lospringliu]

markdown with light/dark

   // https://github.com/antfu/vite-plugin-vue-markdown
    // Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
    Markdown({
      wrapperClasses: 'prose prose-sm m-auto text-left',
      headEnabled: true,
      markdownItSetup(md) {
        // https://prismjs.com/
        md.use(Shiki, {
          theme: {
            light: 'vitesse-light',
            dark: 'vitesse-dark',
          },
        })
        md.use(LinkAttributes, {
          matcher: (link: string) => /^https?:\/\//.test(link),
          attrs: {
            target: '_blank',
            rel: 'noopener',
          },
        }) 
      },
    }),

[lospringliu]

I found it easy to work with anu by default if you do not set background color, or if you set a neutral color like gray

[lospringliu]

your gun-avatar seems to support dark, is it convenient to update useBackgroud to honor?

dark mode variable can get from @vueuse

[lospringliu]

#37

[davay42]

Good point! Yet in my experience it's better to have one isDark instance established somewhere and imported from all the places. I'll test your solution too.

[lospringliu]

yes, expose from your ui or styles composable is better

[davay42]

@lospringliu I've got you covered! Full dark mode support has landed with v.0.14.2!