Theme for a custom vue component

[DrakoPOD]

I'm trying to make a component tab, for code code block:

How I can use the default theme of the page? For example, when I use button, is appear as simple text, only the mouse point have hovere effect.

Does vitepress has a list of css tags? like default colors, also, access to theme variable for light and dark mode.

[brc-dd]

https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css

[erondpowell]

@brc-dd I feel like there might be a "style bug" here 🤔

I'm trying to build the exact same type of component right now, buttons to toggle display between code/API snippets.
On a custom component, the full Vitepress theme css (as well as our project's overrides.css) are all inherited....

Except the button. The button was sanitized of even default HTML styling. (I added that green background myself)

---

---

---

Is this the original intention with the css? or am I missing something?

Thanks! 🙏

[brc-dd]

Except the button. The button was sanitized of even default HTML styling. (I added that green background myself)

There is nothing like "default HTML styling". You probably are referring to useragent stylesheets which make button look like a weird box. Those won't be applied as we are resetting the css.

Also, we haven't done any styling to buttons. I mean all those button styles are scoped and won't be applied to the buttons you add using md/vue. You need to style them manually. So what you're seeing is expected behavior.

Here is our button component BTW: https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/components/VPButton.vue, you can copy, modify and use it for your buttons.

[erondpowell]

@brc-dd Thanks for the reply!

Yes, I was talking about useragent style sheets.

By the way, my little "toggle API Style" component is almost done.
If there is an appropriate place to share it, I'm happy to do that.
I would guess toggling API styles content is a fairly common use case.

[brc-dd]

If there is an appropriate place to share it, I'm happy to do that.

We have a Discord channel at https://chat.vuejs.org 🙌

[erondpowell]

Sweet, I'll post a link whenever its ready.