#app.darkMode #codePanel #codeTabs {
	background-color: #111;
}

#app.darkMode #codeTabs .icon_x_small,
#app.darkMode #codeTabs.active .icon_settings_small {
	background-image: url('/assets/img/icons/x_small_white@2x.png');
}

#app.darkMode #codeTabs .icon_settings_small {
	background-image: url('/assets/img/icons/settings_small_white@2x.png');
}

#app.darkMode #tabControls::before {
	background: linear-gradient(to right, #11111100 0%, #111 100%);
	height: 100%;
}

#app.darkMode #codeTabs .icon_plus_small {
	background-image: url('/assets/img/icons/plus_small_white@2x.png');
}

#app.darkMode #codePanel #codeTabs li.selected,
#app.darkMode #codePanel #addCodeButton {
	border-bottom-color: #f5f5f5;
}

/* dark mode updates */
.darkMode #codeTabs .tabTitle,
.darkMode #codeTabs li input {
	color: #f5f5f5;
}

#app.darkMode #codeTabs li.edit {
	background: #555;
}

#app.darkMode #codePanel.showComments .commentMarker {
	background: rgb(255 249 0 / 24%);
}

.cm-s-dark {
	--bg: #222;
	--white: #f5f5f5;
	--black: #333;
	--blue: #73c1e8;
	--blue-light: #b7e8fe;
	--blue-dark: #73c1e8;
	--pink: #ed7b7b;
	--grey-light: #989898;
	--grey: #5e5e5e;
	--grey-dark: #4d4d4d;
}

.cm-s-dark.CodeMirror {
	background-color: var(--bg) !important;
	color: #f5f5f5;
	/* text-shadow: 0 -1px 1px #262626; */
}

#app.layout_split.darkMode #sketch {
	border-color: var(--black);
}

.darkMode .CodeMirror pre.CodeMirror-line,
.darkMode .CodeMirror pre.CodeMirror-line-like {
	color: var(--white);
}

.darkMode #tutorial {
	background-color: #111;
	border-right: 1px solid #333;
}

.darkMode #tutorial {
	background-color: #111;
	border-right: 1px solid #333;
	color: var(--white);
}

.darkMode .codeBlot *,
.darkMode code,
.darkMode code {
	/* background-color: #111; */
	color: inherit;
}
.darkMode #tutorial .ql-toolbar {
	background-color: #000a;
	border-bottom-color: #333;
}
.darkMode #tutorial .ql-toolbar .ql-fill {
	fill: var(--white);
}

.darkMode #tutorial .ql-toolbar .ql-stroke {
	stroke: var(--white);
}

.darkMode #tutorial .ql-toolbar .ql-addcode {
	background-image: url('/assets/img/icons/code_small_white@2x.png');
}




.darkMode #tutorial .CodeMirror,
.darkMode #tutorial code {
	background: var(--grey6);
}

.darkMode #tutorialButtons {
	background-color: #000a;
	border-top-color: #333;
}

.darkMode .icon_x_circle {
	background-image: url('/assets/img/icons/x_circle_white@2x.png');
}

.darkMode .icon_arrow_circle_left_dark {
	background-image: url('/assets/img/icons/arrow_circle_left_white@2x.png');
}

.darkMode .icon_arrow_circle_right_dark {
	background-image: url('/assets/img/icons/arrow_circle_right_white@2x.png');
}

.darkMode .icon_plus_circle_dark {
	background-image: url('/assets/img/icons/plus_circle_white@2x.png');
}

.darkMode .resizer::after {
	background: #555;
}

.darkMode .resizer:hover::after {
	background: #f5f5f5;
}

#app.darkMode .cm-highlight {
	background-color: #ffea001a;
	/* position: relative; */
	/* display: inline-block; */
}

#app.darkMode .cm-emphasizeHighlight {
	background-color: #978c1998;
}