Better visuals for Vextab plugin

Share & showcase
,
1

The aesthetics of Vextab usually wont match well your theme, specially in dark mode.

So I made a CSS snippet that removes the background and also will invert the colors on dark mode.

.block-language-vextab, .block-language-quicktab{
  background-color: transparent !important;
}

.theme-dark .block-language-vextab, .theme-dark .block-language-quicktab {
  -webkit-filter: invert(100%);
    filter: invert(100%);
}

Before:

After:

btw you can also remove the “vexflow.com” watermark with the following:

.block-language-vextab svg text[x="275"], .block-language-quicktab svg text[x="275"] {
  display:none;
}
1 Like
2

Add these if you use the “tab” notation instead of “vextab”

.block-language-vextab, .block-language-tab, .block-language-quicktab{
  background-color: transparent !important;
}

.theme-dark .block-language-vextab, .theme-dark .block-language-tab, .theme-dark .block-language-quicktab {
  -webkit-filter: invert(100%);
    filter: invert(100%);
}

.block-language-vextab svg text[x="275"], .block-language-tab svg text[x="275"], .block-language-quicktab svg text[x="275"] {
  display:none;
}
1 Like