I'm trying to show some documentation in my Vue application. Since they are based on markdown format, I have already included the markdown-it-vue plugin.
However, the plugin does not support the vuetify dark mode. Is there any way to support that? Below is a minimal example. I want to highlight the text in white and the table background in gray. Maybe the markdown-it-vue.css needs to be changed, but I'm not sure how to do that. Thank you in advance!
const vm = new Vue({
el: "#app",
data() {
return {
content: "This needs to be white\n| Item | Price | # In stock |\n|--------------|-----------|------------|\n| Juicy Apples | 1.99 | *7* |\n| Bananas | **1.89** | 5234 |"
}
}
})<link href="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/markdown-it-vue@1.1.6/dist/markdown-it-vue.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/markdown-it-vue@1.1.6/dist/markdown-it-vue.css">
<div id="app">
<v-app :dark="true">
<markdown-it-vue :content="content"></markdown-it-vue>
</v-app>
</div>markdown-it-vue's contents can be styled with CSS, so you can apply your own dark theme to the Markdown contents. Vuetify sets the .theme--dark class on the app root element, and the markdown-it-vue's element has the .markdown-body class.
On .theme--dark .markdown-body, apply a color with !important to override Vuetify's theme:
.theme--dark .markdown-body {
color: white !important;
}
Also on all its table children (i.e., on table *), apply a background color::
.theme--dark .markdown-body table * {
background: gray;
}
const vm = new Vue({
el: "#app",
data() {
return {
dark: true,
content: "This needs to be white\n| Item | Price | # In stock |\n|--------------|-----------|------------|\n| Juicy Apples | 1.99 | *7* |\n| Bananas | **1.89** | 5234 |"
}
}
}).theme--dark .markdown-body {
color: white !important;
}
.theme--dark .markdown-body table * {
background: gray;
}<link href="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/markdown-it-vue@1.1.6/dist/markdown-it-vue.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/markdown-it-vue@1.1.6/dist/markdown-it-vue.css">
<div id="app">
<v-app :dark="dark">
<v-btn @click="dark = !dark">Toggle dark mode</v-btn>
<markdown-it-vue :content="content"></markdown-it-vue>
</v-app>
</div>