Dark Color Theme for Code Element in Bricks

Bricks’ Code element uses CodeMirror for the editor component.

When “Builder mode” setting is Dark (it is by default), CodeMirror’s “One Dark” theme will be used/applied.

When “Builder mode” setting is Light or Custom, CodeMirror’s default theme will be used/applied.

The “Code Theme” select dropdown’s option for the code element in a sitewide Theme Style does not change or apply to the code elements in the builder.

If you would like to apply the One Dark theme when the Builder mode is Custom, add the following at Bricks → Settings → Builder → Builder mode (custom):

/* --- Dark color theme for Code element */

.cm-s-default {
	background-color: #282c34;
	background-color: var(--builder-bg-2);
	color: #abb2bf;
	font-family: Menlo,Consolas,DejaVu Sans Mono,monospace;
	font-size: 14px;
	font-weight: 350
}

.cm-s-default .CodeMirror-selected {
	background-color: #5c6370
}

.cm-s-default .CodeMirror-gutter,.cm-s-default .CodeMirror-gutters {
	background-color: #282c34;
	border: none
}

.cm-s-default .CodeMirror-linenumber,.cm-s-default .CodeMirror-linenumbers {
	background-color: transparent;
	color: #5c6370!important
}

.cm-s-default .CodeMirror-lines {
	background-color: transparent;
	color: #abb2bf!important
}

.cm-s-default .CodeMirror-cursor {
	border-left: 2px solid #56b6c2!important
}

.cm-s-default .CodeMirror-matchingbracket,.cm-s-default .CodeMirror-matchingtag {
	background-color: transparent;
	border-bottom: 2px solid #56b6c2;
	color: #abb2bf!important
}

.cm-s-default .CodeMirror-nonmatchingbracket {
	background-color: transparent;
	border-bottom: 2px solid #e06c75;
	color: #abb2bf!important
}

.cm-s-default .CodeMirror-foldgutter,.cm-s-default .CodeMirror-foldgutter-folded,.cm-s-default .CodeMirror-foldgutter-open,.cm-s-default .CodeMirror-foldmarker {
	background-color: transparent;
	border: none;
	color: #5c6370!important;
	text-shadow: none
}

.cm-s-default .CodeMirror-activeline-background {
	background-color: rgba(153,187,255,.04)
}

.cm-s-default .cm-builtin,.cm-s-default .cm-error,.cm-s-default .cm-header,.cm-s-default .cm-negative,.cm-s-default .cm-positive,.cm-s-default .cm-string-2,.cm-s-default .cm-tag,.cm-s-default .cm-variable {
	color: #e06c75
}

.cm-s-default .cm-comment,.cm-s-default .cm-quote {
	color: #5c6370;
	font-style: italic
}

.cm-s-default .cm-header .cm-strong,.cm-s-default .cm-strong {
	color: #d19a66;
	font-weight: 700
}

.cm-s-default .cm-em,.cm-s-default .cm-header .cm-em {
	color: #c678dd;
	font-style: italic
}

.cm-s-default .cm-atom,.cm-s-default .cm-attribute,.cm-s-default .cm-number,.cm-s-default .cm-qualifier {
	color: #d19a66
}

.cm-s-default .cm-link {
	border-bottom: 1px solid #98c379;
	color: #98c379
}

.cm-s-default .cm-keyword {
	color: #c678dd
}

.cm-s-default .cm-def {
	color: #e5c07b
}

.cm-s-default .cm-m-css.cm-atom,.cm-s-default .cm-m-css.cm-builtin,.cm-s-default .cm-m-lua.cm-variable,.cm-s-default .cm-operator,.cm-s-default .cm-property {
	color: #56b6c2
}

.cm-s-default .cm-string {
	color: #98c379
}

.cm-s-default .cm-bracket,.cm-s-default .cm-m-css.cm-property,.cm-s-default .cm-meta,.cm-s-default .cm-punctuation {
	color: #abb2bf
}

.cm-s-default .cm-m-css.cm-variable {
	color: #828997
}