What's the color scheme applied for the demo code in "A Minimal Dash App"?

[oat]

Does anyone know the dark color scheme used for the demo code in A Minimal Dash App?

I like the contrast of the colors as applied that highlights different code components quite effectively, especially for people like me who have color-vision-deficiency.

Thanks.

[AnnMarieW]

Hi @oat

Are you looking for a way to display code in an app, or in your IDE?

If it’s in an app, here is how to to customize the theme of the code using a dcc.Markdown component:

How to change the theme of code highlights in dcc.Markdown

If you want to show code in your app, you can use the dcc.Markdown component like this: dcc.Markdown("""```python put your code here ```""") I just figured out how to change the theme of the code highlights, so I thought I would share (The highlight_config prop in dcc.Markdown doesn’t seem to work) You can get a preview of all the different themes here: highlight.js demo Highlighting is taken care of automatically in Dash by highlight.js . You can change the theme by adding the URL of th…

Note that the style in the docs is set with the Dash Enterprise Dash Design Kit. If you inspect the code element in the browser you can see it’s the GitHub light theme with some extra CSS applied.

If you are looking to apply that theme in an IDE, I’m not sure you can duplicate it easily, however most IDEs have a way to customize the theme.

[David22]

Yep, as mentioned by @AnnMarieW , if you want a similar colorscheme in Pycharm, for instance, you can install the Atom Dark, or “One Dark” theme.

One Dark theme - IntelliJ IDEs Plugin | Marketplace

Or many others available here:

Search Results | JetBrains Marketplace