Is there a dracula color scheme?

[jonaprieto]

Does the material theme have some easy way to get this popular colour scheme? https://draculatheme.com/mkdocs

[squidfunk]

This is a separate theme and has nothing to do with Material for MkDocs.

[jonaprieto]

I got it, but maybe as part of schemes provided by material like stale, or default?

[squidfunk]

Definitely doable, but no plans ☺️ If somebody decides to build a color theme, feel free to share it here!

[jonaprieto]

I found that Python Extension website uses material theme but has the Dracula colour scheme. So, I formatted it since is compressed and got this. I'm sure I should include something else, but it's definitely something.

https://gist.github.com/jonaprieto/32e6f0cb82ed2897ae76fee989202647

[lightzane]

I also so that website (https://facelessuser.github.io/pymdown-extensions/extensions/highlight/#syntax-highlighting) that material theme with Dracula colour scheme.

However, when I applied this css and js that you provided, which is helpful, but what's missing is, it's only in Dark mode.
Unlike the website, link provided above, it's able to switch between dark and light or system preferences (but it's not configured in their mkdocs.yml).

Also, I tried not using the javascript file, and the dracula scheme seems to be working alone.

Overall, the dracula scheme is good, but it's not prepared for everything such as code highlighting for a jsx. And the code blocks are missing some syntax highlighting even after I set the following:

- pymdownx.highlight:
      pygments_lang_class: true

Sample jsx or tsx that does not have a proper syntax highlighting:

function Counter() {
  const [count, setCount] = createSignal(0);
  const doubleCount = () => count() * 2;
  
  console.log("The body of the function runs once...");

  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>
        {doubleCount()}
      </button>
    </>
  );
}

render(Counter, document.getElementById("app")!);

Please let me know if there is a way in mkdocs-material to pass a code syntax highlighter style such as Dracula style in Pygments. (Reference: https://pygments.org/styles/)

[devleaks]

I think we are looking for the same thing... a material theme with Dracula color scheme.
The gentleman pointed above has another repo that does exactly what we are looking for... Juste a plugin to add and color scheme to adjust to our favorite vampire.
Best regards. P.

[facelessuser]

@devleaks Keep in mind, the you repo linked is basically my own personal modifications. It's an opinionated approach that currently suits my own personal needs and desires for my project documentation. It is not just a recolor, but I make various, specific style changes based on personal opinion.

While others are free to use it, users outside of my projects are not usually my focus when I make changes. Styles and such are subject to change based on my own personal preference. I say this not to discourage use, but to set expectations. Some projects I support are specifically done with an external user focus, the MkDocs Dracula mod is mainly to satisfy my own personal desires.

With that said, if it also happens to align with what you are looking for, and you like the stylistic changes, then feel free to use 🙂.