Theme not changing
mustran opened this issue · comments
mustran commented
Recently I started to develop a site with Gatsby and I wanted the code highlight to match the one I use in vscode, that's why I downloaded gatsby-remark-vscode
, but I ran into a problem that is whatever theme I try to use, in the end I'm still getting the default dark theme from vscode.
The gatsby started I am using is gatsby-personal-starter-blog
This is my gatsby-config.js
configuration:
module.exports = {
siteMetadata: {
// edit below
title: `Gatsby Starter Personal Blog`,
author: `Kyle Matthews`,
description: `A starter personal blog with styled components, dark mode, and Netlify CMS.`,
siteUrl: `https://gatsby-starter-blog-demo.netlify.com/`,
social: {
twitter: `kylemathews`,
},
},
plugins: [
`gatsby-plugin-netlify-cms`,
`gatsby-plugin-styled-components`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-offline`,
`gatsby-plugin-react-helmet`,
`gatsby-plugin-feed-mdx`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-vscode`,
options: {
theme: "Monokai", // Or install your favorite theme from GitHub
},
},
],
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/blog`,
name: `blog`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/assets`,
name: `assets`,
},
},
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [".mdx", ".md"],
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 590,
},
},
{
resolve: `gatsby-remark-responsive-iframe`,
options: {
wrapperStyle: `margin-bottom: 1.0725rem`,
},
},
{
resolve: `gatsby-remark-copy-linked-files`,
},
{
resolve: `gatsby-remark-smartypants`,
},
],
},
},
{
resolve: `gatsby-plugin-google-analytics`,
options: {
// edit below
// trackingId: `ADD YOUR TRACKING ID HERE`,
},
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `Gatsby Starter Blog`,
short_name: `GatsbyJS`,
start_url: `/`,
background_color: `#ffffff`,
theme_color: `#663399`,
display: `minimal-ui`,
// edit below
icon: `content/assets/gatsby-icon.png`,
},
},
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`,
},
},
],
}
I am using these versions for gatsby-transformer-remark
and gatsby-remark-vscode
:
"gatsby-transformer-remark": "^2.8.14"
"gatsby-remark-vscode": "^2.1.1"