Estoy tratando de mostrar algo de documentación en mi aplicación Vue. Dado que se basan en el formato de descuento, ya he incluido el complemento markdown-it-vue.
Sin embargo, el complemento no es compatible con el modo oscuro vuetify. ¿Hay alguna forma de apoyar eso? A continuación se muestra un ejemplo mínimo. Quiero resaltar el texto en blanco y el fondo de la tabla en gris. Tal vez sea necesario cambiar el markdown-it-vue.css, pero no estoy seguro de cómo hacerlo. ¡Gracias de antemano!
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>Los contenidos markdown-it-vue se pueden diseñar con CSS, por lo que puede aplicar su propio tema oscuro a los contenidos de Markdown. Vuetify establece la clase .theme--dark en el elemento raíz de la aplicación, y el elemento de markdown-it-vue tiene la clase .markdown-body .
En .theme--dark .markdown-body , aplica un color con !important para anular el tema de Vuetify:
.theme--dark .markdown-body { color: white !important; } También en todos sus elementos secundarios de la tabla (es decir, en table * ), aplique un color de background :
.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>