How to enable dark mode for markdown-it-vue plugin with vuetify-CodePudding

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/[email protected]/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/[email protected]/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/markdown-it-vue.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/markdown-it-vue.css">

<div id="app">
  <v-app :dark="true">
    <markdown-it-vue :content="content"></markdown-it-vue>
  </v-app>
</div>

CodePudding user response：

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/[email protected]/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/[email protected]/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/markdown-it-vue.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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>