Notebook theme

Hi folks, this is a theme inspired from Fred LeBlanc’s NoteBook TextMate theme.
It is designed to clearly display the different heading levels in a long document with a light background, while adding a nice touch of color.

It should look like this:

If unsure how to use the code below, please check how to install a theme.

@inkColor: black;
@indicatedColor: #7F755F;
@focusedSelectionBackgroundColor: mix(#7F755F, transparent, 30%);
@sidebarFontFamily: -apple-system, "Lucida Grande", Times;
@sidebarTextColor: black;
@sidebarBackgroundColor: #dbd3ba;

.nbheading() {
	padding: 5px;
}
.nbteal() {
	color: #2E6765;
	background-color: #8FE6D3A0;
}
.nbyellow() {
	color: #605C2B;
	background-color: #E9D92BA0;
}
.nbgreen() {
	color: #2F5D20;
	background-color: #9AFF42A0;
}
.nbbrown() {
	color: #493934;
	background-color: #ADA3898F;
}
.nbred() {
	color: #603546;
	background-color: #DA919BA0;
}
.nbblue() {
	color: #3E6566;
	background-color: #78D0C9A0;
}

.CodeMirror {
	.cm-heading-background {
		// background-color: #BEB69D;
	}
	.cm-heading {
		font-weight: normal;
		.cm-keyword {
			font-weight: bold;
		}
		> span {
			.nbheading();
		}
	}

	.cm-heading[cm-level="1"] {
		font-style: normal;
		font-weight: bold;
		line-height: @lineHeight * 1.5;
		font-size: @fontSize * 1.25;

		> span {
			.nbbrown();
		}
	}

	.cm-heading[cm-level="2"] {
		font-style: normal;
		font-weight: bold;

		> span {
			.nbyellow();
		}
	}
	.cm-heading[cm-level="3"] {
		font-style: italic;
		font-weight: bold;
		font-size: @fontSize * 0.95;

		> span {
			.nbgreen();
		}
	}
	.cm-heading[cm-level="4"] {
		font-style: normal;
		font-weight: bold;
		font-size: @fontSize * 0.85;

		> span {
			.nbred();
		}
	}
	.cm-heading[cm-level="5"] {
		font-style: normal;
		font-weight: normal;
		font-size: @fontSize * 0.75;

		> span {
			.nbblue();
		}
	}
	.cm-heading[cm-level="6"] {
		font-style: normal;
		font-weight: bold;
		font-size: @fontSize * 0.65;

		> span {
			.nbteal();
		}
	}
}
3 Likes

Thanks; very handy.