diff --git a/css/notes.css b/css/notes.scss
similarity index 89%
rename from css/notes.css
rename to css/notes.scss
index 4d2fe485..59034413 100644
--- a/css/notes.css
+++ b/css/notes.scss
@@ -1,5 +1,6 @@
 /**
  * Copyright (c) 2013, Jan-Christoph Borchardt http://jancborchardt.net
+ *                     and others
  * This file is licensed under the Affero General Public License version 3 or later.
  * See the COPYING file.
  */
@@ -12,7 +13,7 @@
 }
 
 #app-navigation > ul > li.has-error a{
-    color:#f00;
+    color: var(--color-error);
 }
 .app-content-list-button {
 	display: block;
@@ -30,7 +31,7 @@
 	box-sizing: border-box;
 	white-space: nowrap;
 	text-overflow: ellipsis;
-	color: #000;
+	color: var(--color-main-text);
 	opacity: .57;
 }
 
@@ -95,6 +96,7 @@
     padding-top: 2ex;
 }
 
+/* old style search (before NC14) */
 .note-search span {
     background-position: 0 center;
     background-origin: content-box;
@@ -142,6 +144,7 @@
 /* enable clickthrough for links */
 .CodeMirror-cursor {
     pointer-events: none;
+    border-color: var(--color-main-text);
 }
 
 #app-content .note-meta {
@@ -150,7 +153,7 @@
     width: 100%;
     padding: 0 45px 0px 45px;
     margin: -10px 0 0;
-    background-color: white; /* TODO Theming! */
+    background-color: var(--color-main-background);
     -ms-user-select: none;
     -moz-user-select: none;
     -webkit-user-select: none;
@@ -166,8 +169,8 @@
 
 #app-content .note-meta > .note-error {
     opacity: 1;
-    background-color: #e00;
-    color: #fff;
+    background-color: var(--color-error);
+    color: var(--color-primary-text);
     border-radius: 0.5ex;
     padding: 0.5ex 1ex;
 }
@@ -242,6 +245,10 @@ form.category .icon-confirm {
 
 
 /* markdown styling */
+.CodeMirror {
+	background: transparent;
+	color: inherit;
+}
 
 .CodeMirror .CodeMirror-code {
 	width: 100%;
@@ -316,36 +323,17 @@ form.category .icon-confirm {
 }
 
 /* distraction free styles */
-:-webkit-full-screen {
-	width: 100%;
-	background-color: white;
-}
-:-moz-full-screen {
-	width: 100%;
-	background-color: white;
-}
-:-ms-fullscreen {
-	width: 100%;
-	background-color: white;
-}
+:-webkit-full-screen,
+:-moz-full-screen,
+:-ms-fullscreen,
 :fullscreen {
 	width: 100%;
-	background-color: white;
-}
+	background-color: var(--color-main-background);
 
-:-webkit-full-screen #app-content-container {
-	margin: 0 auto;
+	#app-content-container {
+		margin: 0 auto;
+	}
 }
-:-moz-full-screen #app-content-container {
-	margin: 0 auto;
-}
-:-ms-fullscreen #app-content-container {
-	margin: 0 auto;
-}
-:fullscreen #app-content-container {
-	margin: 0 auto;
-}
-
 
 /* larger screen sizes */
 @media only screen and (min-width: 769px) {
@@ -358,20 +346,17 @@ form.category .icon-confirm {
 
 
 /* icons for sidebar */
-.nav-icon-emptyfolder {
-        background-image: url('../img/folder-empty.svg?v=1');
-}
 .nav-icon-files {
-        background-image: url('../img/folder.svg?v=1');
+	@include icon-color('folder', 'notes', $color-black);
+}
+.nav-icon-emptyfolder {
+	@include icon-color('folder-empty', 'notes', $color-black);
 }
 .nav-icon-recent {
-        background-image: url('../img/recent.svg?v=1');
+	@include icon-color('recent', 'notes', $color-black);
 }
 .nav-icon-search {
-        background-image: url('../img/search.svg?v=1');
-}
-.nav-icon-favorites {
-        background-image: url('../img/star.svg?v=1');
+	@include icon-color('search', 'notes', $color-black);
 }
 
 
diff --git a/img/folder-empty.svg b/img/folder-empty.svg
index 01807277..6fefe1d2 100644
--- a/img/folder-empty.svg
+++ b/img/folder-empty.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1"><path d="M1.457 1.997c-.25 0-.46.21-.46.46v11.08c0 .26.202.46.46.46h13.08c.258 0 .46-.2.46-.46V4.46c0-.25-.21-.463-.46-.463h-6.54l-2-2z" fill-rule="evenodd" /><path style="fill:#ffffff;fill-rule:evenodd;stroke-width:0.84413958" d="m 2.4220964,2.9363347 c -0.2142587,0 -0.4237777,0.1169727 -0.4231396,0.324831 l 0.028903,9.4140373 c 6.638e-4,0.216175 0.1731212,0.382462 0.3942362,0.382462 h 11.210022 c 0.221116,0 0.394236,-0.166286 0.394236,-0.382462 V 5.128242 c 0,-0.2078594 -0.179977,-0.3849557 -0.394236,-0.3849557 L 7.5405756,4.8009163 5.742203,2.9363343 Z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" version="1.1" height="16"><path d="M1.46 2c-.25 0-.46.21-.46.46v11.08c0 .258.202.46.46.46h13.08c.258 0 .46-.202.46-.46V4.462c0-.25-.21-.463-.46-.463H8L6 2H1.46zM2 5h12v8H2V5z" fill="#0082c9"/></svg>
diff --git a/img/folder.svg b/img/folder.svg
index 7c277915..b58c3e23 100644
--- a/img/folder.svg
+++ b/img/folder.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1"><path d="M1.457 1.997c-.25 0-.46.21-.46.46v11.08c0 .26.202.46.46.46h13.08c.258 0 .46-.2.46-.46V4.46c0-.25-.21-.463-.46-.463h-6.54l-2-2z" fill-rule="evenodd"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1"><path d="M1.457 1.997c-.25 0-.46.21-.46.46v11.08c0 .26.202.46.46.46h13.08c.258 0 .46-.2.46-.46V4.46c0-.25-.21-.463-.46-.463h-6.54l-2-2z" /></svg>
diff --git a/img/star.svg b/img/star.svg
deleted file mode 100644
index 949850f6..00000000
--- a/img/star.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="22" width="22"><path d="M11.017.06l2.946 7.384L22 8.077l-6.11 5.082L17.77 21l-6.72-4.242-6.876 4.213 1.957-7.703L0 8.03l7.932-.52z"/></svg>
\ No newline at end of file
diff --git a/templates/note.php b/templates/note.php
index fee3ee86..36fefb10 100644
--- a/templates/note.php
+++ b/templates/note.php
@@ -2,10 +2,10 @@
 	<div class="note-meta" ng-if="note!==false">
 		<span class="note-category" ng-class="{ uncategorized: !note.category }" title="<?php p($l->t('Category')); ?>" ng-show="!editCategory" ng-click="showEditCategory()">{{ note.category || '<?php p($l->t('Uncategorized')) ?>' | categoryTitle}} <input type="button" class="edit icon icon-rename" title="<?php p($l->t('Edit category')); ?>"></span>
 		<span class="note-category" title="<?php p($l->t('Edit category')); ?>" ng-show="editCategory"><form class="category" ng-submit="closeCategory()"><input type="text" id="category" name="category" ng-blur="closeCategory()" placeholder="<?php p($l->t('Uncategorized')); ?>"><input type="submit" class="icon-confirm" value=""></form></span>
-		<span class="note-word-count" ng-if="note.content.length > 0">{{note.content | wordCount}}</span>
-		<span class="note-unsaved" ng-if="note.unsaved" title="<?php p($l->t('The note has unsaved changes.')); ?>">*</span>
-		<span class="note-error" ng-if="note.error" ng-click="manualSave()" title="<?php p($l->t('Click here to try again')); ?>"><?php p($l->t('Saving failed!')); ?></span>
-		<span class="saving" ng-if="isManualSaving()" title="<?php p($l->t('Note saved')); ?>"></span>
+		<span class="note-word-count" ng-show="note.content.length > 0">{{note.content | wordCount}}</span>
+		<span class="note-unsaved" ng-show="note.unsaved" title="<?php p($l->t('The note has unsaved changes.')); ?>">*</span>
+		<span class="note-error" ng-show="note.error" ng-click="manualSave()" title="<?php p($l->t('Click here to try again')); ?>"><?php p($l->t('Saving failed!')); ?></span>
+		<span class="saving" ng-show="isManualSaving()" title="<?php p($l->t('Note saved')); ?>"></span>
 		<span class="note-meta-right">
 			<button class="icon-fullscreen has-tooltip btn-fullscreen" notes-tooltip ng-click="toggleDistractionFree()"></button>
 		</span>