A step-by-step guide on activating dark mode for the markdown-it-vue plugin while incorporating Vuetify styling

I'm looking to display some documentation in my Vue application. The documentation is in markdown format, so I have already integrated the markdown-it-vue plugin.

However, I've run into an issue where the plugin doesn't support vuetify dark mode. Is there a way to enable this feature? Below is a simple example of what I want to achieve: highlighting the text in white and setting the table background to gray. It's possible that adjustments need to be made to the markdown-it-vue.css file, but I'm not sure how to go about it. Any guidance would be greatly appreciated!

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="106665756479766950213e223e22">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="56202333223f302f166778647864">[email protected]</a>/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3beb2a1b8b7bca4bdfebaa7fea5a6b693e2fde2fde5">[email protected]</a>/dist/markdown-it-vue.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d404c5f4649425a43004459005b58486d1c031c031b">[email protected]</a>/dist/markdown-it-vue.css">

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

javascriptvue.jsvuetify.jsdarkmodemarkdown-it

Answer №1

markdown-it-vue allows for custom styling using CSS, enabling you to create a dark theme for your Markdown content. When Vuetify applies the .theme--dark class to the root element of the app, the markdown-it-vue element is assigned the .markdown-body class.

To override Vuetify's default theme, target .theme--dark .markdown-body and set a color property with !important:

.theme--dark .markdown-body {
  color: white !important;
}

In addition, apply a background color to all table children within the .theme--dark .markdown-body context:

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="106665756479766950213e223e22">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15636070617c736c55243b273b27">[email protected]</a>/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="305d51425b545f475e1d59441d46455570011e011e06">[email protected]</a>/dist/markdown-it-vue.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a474b58414e455d4407435e075c5f4f6a1b041b041c">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to send a non-JSON value to an angular.js http.post function?

Struggling to send two parameters using the HTTP POST method in Angular.js. Here is the code I have implemented: Controller var installerApp = angular.module('installerApp', []); installerApp.controller('InstallerCntlr',function($scop ...

javascriptphphttpangularjspost

Utilizing the jQuery plugin 'cookie' to retain the current tab selection on a webpage

Is it possible to provide a detailed explanation on how I can utilize the jQuery Cookie plugin to maintain the selected tab throughout my entire website? Here is the current JavaScript code in JSFiddle format: http://jsfiddle.net/mcgarriers/RXkyC/ Even i ...

javascriptjquerycookiestabstabbed

Attempting to instruct my chrome extension to execute a click action on a specific element found within the webpage

I am currently working on developing a unique chrome extension that has the capability to download mp3s specifically from hiphopdx. I have discovered a potential solution, where once the play button on the website is clicked, it becomes possible to extract ...

javascriptgoogle-chromegoogle-chrome-extension

Challenge with Updating React Components When Switching Themes

In my React application, I'm facing a challenge with theme switching. There are two themes available: Theme One and Theme Two. To dynamically load theme components, lazy loading has been implemented based on the selected theme. Each theme has its own ...

javascriptcssreactjstypescript

React component failing to render even when event is triggered

For my latest project, I am creating a blog using react, next.js, and json-server. The blog is coming along nicely with dynamically loaded blog posts and UI elements. However, I've hit a roadblock when it comes to loading comments dynamically. The sp ...

javascriptreactjsnext.js

Check out the latest enhancements to React and Flask Fullstack right from your web browser

Recently, I ventured into the world of React and Flask development by following a tutorial found at this link. After completing the example fullstack website project, I realized that my code mirrored exactly what was provided by the author on their Github ...

javascriptreactjsreact-nativeflasknpm

The ValidationMessageFor tag is failing to function on the view page

I am currently in the process of updating the styling from bootstrap 3 to bootstrap 5. The issue I am facing is that in the bootstrap 3 version, when I click the "save" button without filling any text boxes, the page displays a validation message like this ...

javascriptc#asp.net-mvctwitter-bootstrap-3bootstrap-5

Having trouble deploying a Heroku app using Hyper? Here's a step-by-step guide to

After running the following commands: https://i.stack.imgur.com/WZN35.png I encountered the following errors: error: src refspec main does not match any error: failed to push some refs to 'https://git.heroku.com/young-brook-98064.git' Can anyon ...

javascriptnode.jsgitwebheroku

Expand and collapse dynamically while scrolling

// Closing Button for Main Navigation $('button#collapse-button').click(function () { $('nav#main-nav').toggleClass('closed'); }); $(window).on('scroll', function () { if ($(wind ...

javascriptjqueryhtmlcssscroll

Utilizing Jquery for comparing and retrieving string arrays

Hey there! I'm currently working on a jQuery application and I'm facing an issue with comparing two arrays. Here is an example: FirstArray=["Mike","Jack"]; SecondArray=["Mike","Jack","Andy","Cruz"]; I want to find out which strings are common i ...

javascriptjqueryarrays

Autonomous JQuery Modules

Is it possible to separate the functions in JQuery and use only the ones needed by splitting the file with PHP? By doing this, I aim to improve page speed, save bandwidth, and have more control over the functions used through the backend. Can the functio ...

javascriptphpjquerycompression

Fill out FormBuilder using data from a service within Angular2

I am working with an Angular2 model that I'm filling with data from a service. My goal is to use this model to update a form (created using FormBuilder) so that users can easily edit the information. Although my current approach works, I encounter er ...

javascriptangulartypescript

The CORS policy is blocking Django Vue Js Axios from functioning as expected

Utilizing Django as the backend and Vue as the frontend, I am using axios to send a request from Vue to Django. I have encountered CORS policy blocking even after trying various solutions. I have spent approximately 4 hours Googling and still facing this ...

djangovue.jsdjango-rest-frameworkaxioscors

Guide on organizing an array of objects by the sub-part of their property values

Is there a way to order the elements in the given array based on a custom criteria related to the last 3 letters of 'prop2' in descending order? The specific order should be 'ABR', 'FDE', 'ZFR'. Another array needs t ...

javascriptarrays

Schema for Monogo Database

My goal was to have a property that could give me the timestamp of when a specific task was created. I decided to add a timestamp property and set it to true, but now my code won't compile. The code is functioning perfectly fine without the timestamp ...

javascriptnode.js

Encountering a Mongoose issue while attempting to load model files from a separate Mean.js project using the require function

I am currently working on a Mean.js project and in the process of familiarizing myself with this environment. To conduct some experiments, I created a parallel project for testing purposes in a separate folder where I am not using the Mean.js framework but ...

javascriptnode.jsmongoose

Transforming identical elements in an arrayt array into distinct elements without eliminating any element in Javascript

Looking for a solution to remove duplicates from an array? You may have come across using track by $index in ng-repeat of angularjs, but you want to stick with a regular ng-repeat. Here's the scenario: Array=[ { name:'john',salary:& ...

javascriptarraysangularjs

Running a Jest test that triggers process.exit within an eternal setInterval loop with a latency of 0, all while utilizing Single

In the original project, there is a class that performs long-running tasks in separate processes on servers. These processes occasionally receive 'SIGINT' signals to stop, and I need to persist the state when this happens. To achieve this, I wrap ...

javascripttypescriptjestjssetintervalts-jest

Using Angular's ng-repeat alongside a bootstrap input checkbox, make sure to incorporate a dynamic ng-model and utilize ng-

This particular issue is proving to be a bit challenging for me to articulate, but I'll give it my best shot. I'm currently working on implementing Angular checkboxes with their ng-true-value attribute in conjunction with a dynamic ng-model. < ...

javascriptangularjstwitter-bootstrapcheckbox

When encountering an issue while invoking a function in Vue.js, an internal error may occur, as evidenced by the message: "new Http

Currently, I am in the process of developing an application and encountering an issue where I am unable to comprehend a cryptic error message that keeps popping up. If you'd like to see the error itself, you can check it out here. Below is my form.vu ...

javascriptfirebasevue.jsgoogle-cloud-functions