Set CodeMirror Theme #390

New Issue

OVERLORD · 2026-02-04T19:22:39+03:00

OVERLORD commented

2026-02-04 19:22:39 +03:00

Originally created by @Shackelford-Arden on GitHub (Jul 30, 2017).

So, I'm not overly familiar with CodeMirror but...

How would I go about setting the theme for code blocks? I see CodeMirror has quite a few themes and I'd like to be able to make use of them if possible. Is this something that I need to do on the backend?

If it s a backend option... is this something that would be added that we can change in the admin settings? Personally I'm looking at global setting as I don't really want to have to do this page to page.

Originally created by @Shackelford-Arden on GitHub (Jul 30, 2017). So, I'm not overly familiar with CodeMirror but... How would I go about setting the theme for code blocks? I see CodeMirror has quite a few themes and I'd like to be able to make use of them if possible. Is this something that I need to do on the backend? If it s a backend option... is this something that would be added that we can change in the admin settings? Personally I'm looking at global setting as I don't really want to have to do this page to page.

OVERLORD added the 🛠️ Enhancement 📖 Docs Update labels 2026-02-04 19:22:39 +03:00

OVERLORD closed this issue

2026-02-04 19:22:51 +03:00

OVERLORD commented

2026-02-04 19:22:55 +03:00

@ssddanbrown commented on GitHub (Aug 1, 2017):

Hi @Shackelford-Arden,

Currently the codemirror theme is hardcoded in this file with the theme styles located here.

At the moment, you could override the styles if you wanted but you can't change the codemirror theme directly. For the purpose of keeping release CSS/JS sizes low I'd prefer not to embed all possible themes but what we could do is update the theme references in the JS files so they can be overridden using the 'custom head content' setting. Think we'd need to add some documentation at bookstackapp.com as well with an example of how someone could do this.

@ssddanbrown commented on GitHub (Aug 1, 2017): Hi @Shackelford-Arden, Currently the codemirror theme is hardcoded [in this file](https://github.com/BookStackApp/BookStack/blob/9126da629925a9dd7a637f3280d7e9614f48a45e/resources/assets/js/code.js#L125) with the [theme styles located here](https://github.com/BookStackApp/BookStack/blob/9126da629925a9dd7a637f3280d7e9614f48a45e/resources/assets/sass/_codemirror.scss#L357). At the moment, you could override the styles if you wanted but you can't change the codemirror theme directly. For the purpose of keeping release CSS/JS sizes low I'd prefer not to embed all possible themes but what we could do is update the theme references in the JS files so they can be overridden using the 'custom head content' setting. Think we'd need to add some documentation at bookstackapp.com as well with an example of how someone could do this.

OVERLORD commented

2026-02-04 19:23:05 +03:00

@domainzero commented on GitHub (Aug 4, 2017):

@Shackelford-Arden This can currently be done with pretty low effort, but it's a little hacky. Codemirror has a repo of all their themes here.

I snagged the dracula theme, changed all the instances of dracula to base16-light and loaded it into the custom head content. This way avoids a lot of fussing with the scss and other materials.

Viewing a page:

The editor:

Here's my entire stylesheet:

.cm-s-base16-light.CodeMirror, .cm-s-base16-light .CodeMirror-gutters {
  background-color: #282a36 !important;
  color: #f8f8f2 !important;
  border: none;
}
.cm-s-base16-light .CodeMirror-gutters { color: #282a36; }
.cm-s-base16-light .CodeMirror-cursor { border-left: solid thin #f8f8f0; }
.cm-s-base16-light .CodeMirror-linenumber { color: #6D8A88; }
.cm-s-base16-light .CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
.cm-s-base16-light .CodeMirror-line::selection, .cm-s-base16-light .CodeMirror-line > span::selection, .cm-s-base16-light .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.1)!important; }
.cm-s-base16-light .CodeMirror-line::-moz-selection, .cm-s-base16-light .CodeMirror-line > span::-moz-selection, .cm-s-base16-light .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.1)!important; }
.cm-s-base16-light span.cm-comment { color: #6272a4; }
.cm-s-base16-light span.cm-string, .cm-s-base16-light span.cm-string-2 { color: #f1fa8c; }
.cm-s-base16-light span.cm-number { color: #bd93f9; }
.cm-s-base16-light span.cm-variable { color: #50fa7b; }
.cm-s-base16-light span.cm-variable-2 { color: white; }
.cm-s-base16-light span.cm-def { color: #50fa7b; }
.cm-s-base16-light span.cm-operator { color: #ff79c6; }
.cm-s-base16-light span.cm-keyword { color: #ff79c6; }
.cm-s-base16-light span.cm-atom { color: #bd93f9; }
.cm-s-base16-light span.cm-meta { color: #f8f8f2; }
.cm-s-base16-light span.cm-tag { color: #ff79c6; }
.cm-s-base16-light span.cm-attribute { color: #50fa7b; }
.cm-s-base16-light span.cm-qualifier { color: #50fa7b; }
.cm-s-base16-light span.cm-property { color: #66d9ef; }
.cm-s-base16-light span.cm-builtin { color: #50fa7b; }
.cm-s-base16-light span.cm-variable-3, .cm-s-base16-light span.cm-type { color: #ffb86c; }

.cm-s-base16-light .CodeMirror-activeline-background { background: rgba(255,255,255,0.1); }
.cm-s-base16-light .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }

YMMV.

@domainzero commented on GitHub (Aug 4, 2017): @Shackelford-Arden This can currently be done with pretty low effort, but it's a little hacky. Codemirror has a repo of all their themes [here](https://codemirror.net/theme/). I snagged the [dracula](https://codemirror.net/theme/dracula.css) theme, changed all the instances of `dracula` to `base16-light` and loaded it into the custom head content. This way avoids a lot of fussing with the scss and other materials. **Viewing a page:** ![voila](http://i.imgur.com/sEUt8VI.png) **The editor:** ![timestwo](http://i.imgur.com/pM2pT5L.png) Here's my entire stylesheet: ```css .cm-s-base16-light.CodeMirror, .cm-s-base16-light .CodeMirror-gutters { background-color: #282a36 !important; color: #f8f8f2 !important; border: none; } .cm-s-base16-light .CodeMirror-gutters { color: #282a36; } .cm-s-base16-light .CodeMirror-cursor { border-left: solid thin #f8f8f0; } .cm-s-base16-light .CodeMirror-linenumber { color: #6D8A88; } .cm-s-base16-light .CodeMirror-selected { background: rgba(255, 255, 255, 0.10); } .cm-s-base16-light .CodeMirror-line::selection, .cm-s-base16-light .CodeMirror-line > span::selection, .cm-s-base16-light .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.1)!important; } .cm-s-base16-light .CodeMirror-line::-moz-selection, .cm-s-base16-light .CodeMirror-line > span::-moz-selection, .cm-s-base16-light .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.1)!important; } .cm-s-base16-light span.cm-comment { color: #6272a4; } .cm-s-base16-light span.cm-string, .cm-s-base16-light span.cm-string-2 { color: #f1fa8c; } .cm-s-base16-light span.cm-number { color: #bd93f9; } .cm-s-base16-light span.cm-variable { color: #50fa7b; } .cm-s-base16-light span.cm-variable-2 { color: white; } .cm-s-base16-light span.cm-def { color: #50fa7b; } .cm-s-base16-light span.cm-operator { color: #ff79c6; } .cm-s-base16-light span.cm-keyword { color: #ff79c6; } .cm-s-base16-light span.cm-atom { color: #bd93f9; } .cm-s-base16-light span.cm-meta { color: #f8f8f2; } .cm-s-base16-light span.cm-tag { color: #ff79c6; } .cm-s-base16-light span.cm-attribute { color: #50fa7b; } .cm-s-base16-light span.cm-qualifier { color: #50fa7b; } .cm-s-base16-light span.cm-property { color: #66d9ef; } .cm-s-base16-light span.cm-builtin { color: #50fa7b; } .cm-s-base16-light span.cm-variable-3, .cm-s-base16-light span.cm-type { color: #ffb86c; } .cm-s-base16-light .CodeMirror-activeline-background { background: rgba(255,255,255,0.1); } .cm-s-base16-light .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; } ``` YMMV.

OVERLORD commented

2026-02-04 19:23:17 +03:00

@Shackelford-Arden commented on GitHub (Aug 4, 2017):

@domainzero Thank you! Your idea made me wonder...

@ssddanbrown Based on what @domainzero said, does that tie into your comment at all? Sorry... I didn't understand what your comment was.

Though, I do wonder if it would be possible to simply let users change the theme by using the files that are hosted by code mirror. This would allow you to keep your file sizes small but still allow for customizing the theme. If the user for whatever reason (intranet access only) can't access the codemirror site, it would just default to what is included in BookStack.

Just thoughts, regardless of what you end up implementing, I look forward to it. I can't imagine what I would do at this point without BookStack.

@Shackelford-Arden commented on GitHub (Aug 4, 2017): @domainzero Thank you! Your idea made me wonder... @ssddanbrown Based on what @domainzero said, does that tie into your comment at all? Sorry... I didn't understand what your comment was. Though, I do wonder if it would be possible to simply let users change the theme by using the files that are hosted by code mirror. This would allow you to keep your file sizes small but still allow for customizing the theme. If the user for whatever reason (intranet access only) can't access the codemirror site, it would just default to what is included in BookStack. Just thoughts, regardless of what you end up implementing, I look forward to it. I can't imagine what I would do at this point without BookStack.

OVERLORD commented

2026-02-04 19:23:19 +03:00

@ssddanbrown commented on GitHub (Aug 4, 2017):

@Shackelford-Arden Yeah, That's basically what I mean but you'll be able to define the theme as well so you don't have to find & replace the theme name in the CSS.

To be honest, I'd prefer not to add another setting for this or depend on an external site for just code styles. Doing the above is a fairly simple process, Especially once we have it fully documented on the docs site.

@ssddanbrown commented on GitHub (Aug 4, 2017): @Shackelford-Arden Yeah, That's basically what I mean but you'll be able to define the theme as well so you don't have to find & replace the theme name in the CSS. To be honest, I'd prefer not to add another setting for this or depend on an external site for just code styles. Doing the above is a fairly simple process, Especially once we have it fully documented on the docs site.

OVERLORD commented

2026-02-04 19:23:25 +03:00

@Shackelford-Arden commented on GitHub (Aug 5, 2017):

I respect not wanting to add an additional setting.

Sounds like I'll watch for some documentation :) 👍

Thanks!

@Shackelford-Arden commented on GitHub (Aug 5, 2017): I respect not wanting to add an additional setting. Sounds like I'll watch for some documentation :) :+1: Thanks!

OVERLORD commented

2026-02-04 19:23:33 +03:00

@ssddanbrown commented on GitHub (Sep 2, 2017):

This functionality is now in master, Ready for the next release. Documentation update also ready.

The documentation page here will be updated upon release with details of changing the theme.

@ssddanbrown commented on GitHub (Sep 2, 2017): This functionality is now in master, Ready for the next release. Documentation update also ready. The [documentation page here](https://www.bookstackapp.com/docs/admin/visual-customisation/) will be updated upon release with details of changing the theme.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#390