[gatsby-theme-minimal-blog]: Adding gatsby-theme-notes breaks the Color-Mode button

[aniqatc]

First, I'd like to thank you for consistently creating such stunning themes! I've looked around a whole lot before settling but nothing fit my vision more than your Minimal-Blog theme, so thank you for creating it and maintaining it!

Color Mode Toggle & gatsby-theme-notes Conflict

I've successfully been able to create lots of changes to the theme, gatsby-theme-minimal-blog to personalize it. However, I wanted to add support for the gatsby-theme-notes plugin to my website so that I can separate note posts and blog posts. Now, the plugin works perfectly fine and I am able to produce a separate section holding my notes. The plugin itself works as it should.

However, adding the gatsby-theme-notes to the gatsby-config.js file breaks the Color-Mode toggle and doesn't allow switching between themes. The color-mode button just stops working and the theme only changes upon reloading (otherwise, the theme doesn't change at all upon clicking). After some testing, I really can't find an issue to fix on my own.

Here is what I'm adding to the config file:

  {
      resolve: `gatsby-theme-notes`,
      options: {
        mdxOtherwiseConfigured: `false`,
        basePath: `/notes`,
      },
    },

Whenever I remove this information from the gatsby-config.js file, the color-mode toggle starts working again. Apart from that, I haven't changed anything else to the theme code.

I'd really appreciate some guidance on what I should do here so that I can still use the color-mode toggle and use the Note plugin. Let me know if I should add any other details here.

[Sugar-Coder]

I got the a similar problem like this. I want to use gatsby-theme-blog as a plugin of the original theme gatsby-theme-cara. And I turn off one of the mdx configure in the project gatsby-config.js as shown bellow.

{
      resolve: `gatsby-theme-blog`,
      options: {
        basePath: `/blog`,
        mdxOtherwiseConfigured: true,
      },
    },
    {
      resolve: `@lekoarts/gatsby-theme-cara`,
      // See the theme's README for all available options
      options: { mdx: true, },
    },
...

When I run, the blog theme is disturbed.

I read the doc of Using multiple Theme and it point out that "the last theme in the config will override the theme-ui context from other themes".

I would like to know if there is a way to separate the two theme-ui context?

[Sugar-Coder]

I got the a similar problem like this. I want to use gatsby-theme-blog as a plugin of the original theme gatsby-theme-cara. And I turn off one of the mdx configure in the project gatsby-config.js as shown bellow.

{
      resolve: `gatsby-theme-blog`,
      options: {
        basePath: `/blog`,
        mdxOtherwiseConfigured: true,
      },
    },
    {
      resolve: `@lekoarts/gatsby-theme-cara`,
      // See the theme's README for all available options
      options: { mdx: true, },
    },
...

When I run, the blog theme is disturbed.

I read the doc of Using multiple Theme and it point out that "the last theme in the config will override the theme-ui context from other themes".

I would like to know if there is a way to separate the two theme-ui context?

I solve this problem. The two gatsby-plugin-theme-ui/components.js files in node_modules/@lekoarts/gatsby-theme-cara and node_modules/gatsby-theme-blog got conflict. Leaving only one components.js work.
So I create in my project root directory a gatsby-plugin-theme-ui/components.js to shadow the theme-ui and and merge contents of two files.

I adjust the order of plugin in gatsby-config.js to make sure the blog theme appear normal

{
      resolve: `@lekoarts/gatsby-theme-cara`,
      // See the theme's README for all available options
      options: { mdx: false, },
    },
    {
      resolve: `gatsby-theme-blog`,
      options: {
        basePath: `/blog`,
        mdxOtherwiseConfigured: false,
      },
    },