48 files changed, 124 insertions, 47 deletions
diff --git a/.gitignore b/.gitignore
index fa74bb69..a05e8fe1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,8 +1,10 @@
 ######################
 ## Files build by make
 ######################
-/css/src/sprites.scss
-/img/sprites.svg
+/css/src/sprites-bw.scss
+/css/src/sprites-color.scss
+/img/bw.svg
+/img/color.svg
 /js/
 
 #################
diff --git a/css/src/style.scss b/css/src/style.scss
index 621ae26c..68d1ce0d 100644
--- a/css/src/style.scss
+++ b/css/src/style.scss
@@ -18,7 +18,7 @@
 				z-index: -1;
 				width: 16px;
 				height: 16px;
-				background: url('../../../apps/tasks/css/../img/sprites.svg') no-repeat;
+				background: var(--icon-tasks-bw-000) no-repeat;
 				margin: 14px;
 				margin-left: -30px;
 				background-position: inherit;
@@ -721,7 +721,13 @@
 				.icon {
 					height: 24px;
 					width: 24px;
-					background-size: 144px 144px;
+					&.icon-color {
+						background-size: 96px 72px;
+					}
+
+					&.icon-bw {
+						background-size: 120px 120px;
+					}
 				}
 			}
 
@@ -798,7 +804,8 @@
 				&.date .icon {
 					&.icon-calendar-due,
 					&.icon-calendar-overdue,
-					&.icon-percent {
+					&.icon-percent,
+					&.icon-percent-active {
 						opacity: 1;
 					}
 				}
diff --git a/css/tasks.scss b/css/tasks.scss
index f57ba033..6813755e 100644
--- a/css/tasks.scss
+++ b/css/tasks.scss
@@ -21,5 +21,6 @@
 
 @import './src/vars';
 @import './src/nc12';
-@import './src/sprites';
+@import './src/sprites-color';
+@import './src/sprites-bw';
 @import './src/style';
diff --git a/img/sprites.svg b/img/sprites.svg
new file mode 100644
index 00000000..bbdd523f
--- /dev/null
+++ b/img/sprites.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg width="64" height="48" viewBox="0 0 64 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><svg width="16" height="16" version="1.1" viewbox="0 0 16 16" viewBox="0 0 16 16" id="calendar-due" xmlns="http://www.w3.org/2000/svg"><path d="m4 1c-0.554 0-1 0.446-1 1v2c0 0.554 0.446 1 1 1s1-0.446 1-1v-2c0-0.554-0.446-1-1-1zm8 0c-0.554 0-1 0.446-1 1v2c0 0.554 0.446 1 1 1s1-0.446 1-1v-2c0-0.554-0.446-1-1-1zm-6.5 2v1c0 0.831-0.669 1.5-1.5 1.5s-1.5-0.669-1.5-1.5v-0.9375c-0.8841 0.227-1.5017 1.0247-1.5 1.9375v8c0 1.108 0.892 2 2 2h10c1.108 0 2-0.892 2-2v-8c0.0017-0.9128-0.61588-1.7105-1.5-1.9375v0.9375c0 0.831-0.669 1.5-1.5 1.5s-1.5-0.669-1.5-1.5v-1zm-2.453 4h9.906c0.02644-0.0012 0.0482 0.02056 0.047 0.047v5.906c0.0012 0.02644-0.02056 0.0482-0.047 0.047h-9.906c-0.02644 0.0012-0.048204-0.02056-0.047-0.047v-5.906c-0.0012-0.02644 0.02056-0.048205 0.047-0.047z" fill="#4574A9"/></svg><svg width="16" height="16" version="1.1" viewbox="0 0 16 16" viewBox="0 0 16 16" id="calendar-overdue" x="16" xmlns="http://www.w3.org/2000/svg"><path d="m4 1c-0.554 0-1 0.446-1 1v2c0 0.554 0.446 1 1 1s1-0.446 1-1v-2c0-0.554-0.446-1-1-1zm8 0c-0.554 0-1 0.446-1 1v2c0 0.554 0.446 1 1 1s1-0.446 1-1v-2c0-0.554-0.446-1-1-1zm-6.5 2v1c0 0.831-0.669 1.5-1.5 1.5s-1.5-0.669-1.5-1.5v-0.9375c-0.8841 0.227-1.5017 1.0247-1.5 1.9375v8c0 1.108 0.892 2 2 2h10c1.108 0 2-0.892 2-2v-8c0.0017-0.9128-0.61588-1.7105-1.5-1.9375v0.9375c0 0.831-0.669 1.5-1.5 1.5s-1.5-0.669-1.5-1.5v-1zm-2.453 4h9.906c0.02644-0.0012 0.0482 0.02056 0.047 0.047v5.906c0.0012 0.02644-0.02056 0.0482-0.047 0.047h-9.906c-0.02644 0.0012-0.048204-0.02056-0.047-0.047v-5.906c-0.0012-0.02644 0.02056-0.048205 0.047-0.047z" fill="#CE3433"/></svg><svg width="16" height="16" version="1.1" viewBox="0 0 16 16" id="checkmark-color" y="16" xmlns="http://www.w3.org/2000/svg"><path d="m7.1754 13.693c2.5618-5.7886 5.8526-9.6003 7.3076-11.335 1.183-1.401 0.719-1.177 0.199-0.8234-2.137 1.4563-6.1287 6.1399-7.6559 7.7638-0.2793 0.299-0.9223 1.0036-1.067 1.0036-0.1596 0-0.7052-0.263-1.0197-0.4552-1.1895-0.7316-2.3298-1.4514-3.0451-1.7203-1.5226-0.5738-1.0921-0.0263-1.0048 0.1568 0.2709 0.5679 3.9479 3.6637 5.1652 5.1237 0.66413 0.7746 0.72507 1.2925 1.1207 0.286z" fill="#71b73d" stroke="#71b73d" stroke-miterlimit="10" stroke-width=".535"/></svg><svg width="16" height="16" version="1.1" viewBox="0 0 16 16" id="clock-due" x="16" y="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#4574A9" stroke-width="1.5"><circle cx="8" cy="8" r="5"/><path d="m5.1005 12.027-1.5 2.5981"/><path d="m10.9 12.027 1.5 2.5981"/><path d="m4.9731 1.6495-2.5981 1.5"/><path d="m11.027 1.6495 2.5981 1.5"/><path d="m8 5v3h2"/></g></svg><svg width="16" height="16" version="1.1" viewBox="0 0 16 16" id="clock-overdue" x="32" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#CE3433" stroke-width="1.5"><circle cx="8" cy="8" r="5"/><path d="m5.1005 12.027-1.5 2.5981"/><path d="m10.9 12.027 1.5 2.5981"/><path d="m4.9731 1.6495-2.5981 1.5"/><path d="m11.027 1.6495 2.5981 1.5"/><path d="m8 5v3h2"/></g></svg><svg width="16" height="16" version="1.1" viewBox="0 0 16 16" id="percent-active" x="32" y="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#4574a9" stroke-linecap="round" stroke-width="1.5"><circle cx="4" cy="4" r="2.25" fill="none"/><path d="m11.603 1.7597-7.206 12.481"/><circle cx="12" cy="12" r="2.25"/></g></svg><svg width="16" height="16" version="1.1" viewBox="0 0 16 16" id="tag-active" y="32" xmlns="http://www.w3.org/2000/svg"><path d="m1.3594 1c-0.2723 0-0.3584 0.2237-0.3594 0.3594v4.791l8.7012 8.7016c0.1946 0.197 0.5048 0.197 0.6988 0l4.454-4.452c0.197-0.194 0.196-0.5051 0-0.7008l-8.7036-8.6992h-4.791zm2.4648 1.5a1.325 1.325 0 0 1 1.3262 1.3242 1.325 1.325 0 0 1-1.3262 1.3262 1.325 1.325 0 0 1-1.3242-1.3262 1.325 1.325 0 0 1 1.3242-1.3242z" fill="#4574a9"/></svg><svg width="16" height="16" version="1.1" viewBox="0 0 16 16" id="task-star-high" x="16" y="32" xmlns="http://www.w3.org/2000/svg"><path d="m8 0.2 2.2 5.5 5.8 0.4-4.5 3.7 1.5 5.7-5-3.1-5 3.1 1.5-5.7-4.5-3.7 5.8-0.4z" fill="#CE3433"/></svg><svg width="16" height="16" version="1.1" viewBox="0 0 16 16" id="task-star-low" x="32" y="32" xmlns="http://www.w3.org/2000/svg"><path d="m8 0.2 2.2 5.5 5.8 0.4-4.5 3.7 1.5 5.7-5-3.1-5 3.1 1.5-5.7-4.5-3.7 5.8-0.4z" fill="#4574A9"/></svg><svg width="16" height="16" version="1.1" viewBox="0 0 16 16" id="task-star-medium" x="48" xmlns="http://www.w3.org/2000/svg"><path d="m8 0.2 2.2 5.5 5.8 0.4-4.5 3.7 1.5 5.7-5-3.1-5 3.1 1.5-5.7-4.5-3.7 5.8-0.4z" fill="#FFCC0C"/></svg></svg>
+\ No newline at end of file
diff --git a/img/src/add.svg b/img/src/bw/add.svg
index f49f3c8f..f49f3c8f 100644
--- a/img/src/add.svg
+++ b/img/src/bw/add.svg
diff --git a/img/src/all.svg b/img/src/bw/all.svg
index 28b0bfe3..28b0bfe3 100644
--- a/img/src/all.svg
+++ b/img/src/bw/all.svg
diff --git a/img/src/alphabetically.svg b/img/src/bw/alphabetically.svg
index fc11466a..fc11466a 100644
--- a/img/src/alphabetically.svg
+++ b/img/src/bw/alphabetically.svg
diff --git a/img/src/calendar.svg b/img/src/bw/calendar.svg
index 84748d91..84748d91 100644
--- a/img/src/calendar.svg
+++ b/img/src/bw/calendar.svg
diff --git a/img/src/checkmark.svg b/img/src/bw/checkmark.svg
index 78fd0a78..78fd0a78 100644
--- a/img/src/checkmark.svg
+++ b/img/src/bw/checkmark.svg
diff --git a/img/src/clock.svg b/img/src/bw/clock.svg
index d4bfcc47..d4bfcc47 100644
--- a/img/src/clock.svg
+++ b/img/src/bw/clock.svg
diff --git a/img/src/close.svg b/img/src/bw/close.svg
index 3cc6aa23..3cc6aa23 100644
--- a/img/src/close.svg
+++ b/img/src/bw/close.svg
diff --git a/img/src/current.svg b/img/src/bw/current.svg
index c1da0939..c1da0939 100644
--- a/img/src/current.svg
+++ b/img/src/bw/current.svg
diff --git a/img/src/hide.svg b/img/src/bw/hide.svg
index 0a5d22b1..0a5d22b1 100644
--- a/img/src/hide.svg
+++ b/img/src/bw/hide.svg
diff --git a/img/src/list.svg b/img/src/bw/list.svg
index a84f3787..a84f3787 100644
--- a/img/src/list.svg
+++ b/img/src/bw/list.svg
diff --git a/img/src/manual.svg b/img/src/bw/manual.svg
index 4fb2a835..4fb2a835 100644
--- a/img/src/manual.svg
+++ b/img/src/bw/manual.svg
diff --git a/img/src/note.svg b/img/src/bw/note.svg
index 2ef5580f..2ef5580f 100644
--- a/img/src/note.svg
+++ b/img/src/bw/note.svg
diff --git a/img/src/percent.svg b/img/src/bw/percent.svg
index 703b0497..703b0497 100644
--- a/img/src/percent.svg
+++ b/img/src/bw/percent.svg
diff --git a/img/src/random.svg b/img/src/bw/random.svg
index 99e9d1b7..99e9d1b7 100644
--- a/img/src/random.svg
+++ b/img/src/bw/random.svg
diff --git a/img/src/settings.svg b/img/src/bw/settings.svg
index 05cef055..05cef055 100644
--- a/img/src/settings.svg
+++ b/img/src/bw/settings.svg
diff --git a/img/src/sort-down.svg b/img/src/bw/sort-down.svg
index 1b9a1a20..1b9a1a20 100644
--- a/img/src/sort-down.svg
+++ b/img/src/bw/sort-down.svg
diff --git a/img/src/sort-up.svg b/img/src/bw/sort-up.svg
index 53bc523e..53bc523e 100644
--- a/img/src/sort-up.svg
+++ b/img/src/bw/sort-up.svg
diff --git a/img/src/subtasks-hidden.svg b/img/src/bw/subtasks-hidden.svg
index 0939e327..0939e327 100644
--- a/img/src/subtasks-hidden.svg
+++ b/img/src/bw/subtasks-hidden.svg
diff --git a/img/src/subtasks-hidden~hover.svg b/img/src/bw/subtasks-hidden~hover.svg
index 3a8ed2c5..3a8ed2c5 100644
--- a/img/src/subtasks-hidden~hover.svg
+++ b/img/src/bw/subtasks-hidden~hover.svg
diff --git a/img/src/subtasks-visible.svg b/img/src/bw/subtasks-visible.svg
index 3a8ed2c5..3a8ed2c5 100644
--- a/img/src/subtasks-visible.svg
+++ b/img/src/bw/subtasks-visible.svg
diff --git a/img/src/tag.svg b/img/src/bw/tag.svg
index cf1d2ced..cf1d2ced 100644
--- a/img/src/tag.svg
+++ b/img/src/bw/tag.svg
diff --git a/img/src/task-star.svg b/img/src/bw/task-star.svg
index dfd94ff1..dfd94ff1 100644
--- a/img/src/task-star.svg
+++ b/img/src/bw/task-star.svg
diff --git a/img/src/toggle.svg b/img/src/bw/toggle.svg
index b9200589..b9200589 100644
--- a/img/src/toggle.svg
+++ b/img/src/bw/toggle.svg
diff --git a/img/src/trash.svg b/img/src/bw/trash.svg
index bd55a861..bd55a861 100644
--- a/img/src/trash.svg
+++ b/img/src/bw/trash.svg
diff --git a/img/src/calendar-due.svg b/img/src/color/calendar-due.svg
index e7ba7ca8..e7ba7ca8 100644
--- a/img/src/calendar-due.svg
+++ b/img/src/color/calendar-due.svg
diff --git a/img/src/calendar-overdue.svg b/img/src/color/calendar-overdue.svg
index 838854c9..838854c9 100644
--- a/img/src/calendar-overdue.svg
+++ b/img/src/color/calendar-overdue.svg
diff --git a/img/src/checkmark-color.svg b/img/src/color/checkmark-color.svg
index bdf6fd97..bdf6fd97 100644
--- a/img/src/checkmark-color.svg
+++ b/img/src/color/checkmark-color.svg
diff --git a/img/src/clock-due.svg b/img/src/color/clock-due.svg
index 9a69c612..9a69c612 100644
--- a/img/src/clock-due.svg
+++ b/img/src/color/clock-due.svg
diff --git a/img/src/clock-overdue.svg b/img/src/color/clock-overdue.svg
index a81c59a6..a81c59a6 100644
--- a/img/src/clock-overdue.svg
+++ b/img/src/color/clock-overdue.svg
diff --git a/img/src/percent-active.svg b/img/src/color/percent-active.svg
index e57d8e25..e57d8e25 100644
--- a/img/src/percent-active.svg
+++ b/img/src/color/percent-active.svg
diff --git a/img/src/tag-active.svg b/img/src/color/tag-active.svg
index 979621f8..979621f8 100644
--- a/img/src/tag-active.svg
+++ b/img/src/color/tag-active.svg
diff --git a/img/src/task-star-high.svg b/img/src/color/task-star-high.svg
index 870ea011..870ea011 100644
--- a/img/src/task-star-high.svg
+++ b/img/src/color/task-star-high.svg
diff --git a/img/src/task-star-low.svg b/img/src/color/task-star-low.svg
index c89d4eb5..c89d4eb5 100644
--- a/img/src/task-star-low.svg
+++ b/img/src/color/task-star-low.svg
diff --git a/img/src/task-star-medium.svg b/img/src/color/task-star-medium.svg
index c5cee674..c5cee674 100644
--- a/img/src/task-star-medium.svg
+++ b/img/src/color/task-star-medium.svg
diff --git a/package.json b/package.json
index fd5dbcbb..d3295301 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
 		"lint": "eslint --ext .js,.vue src tests",
 		"lint:fix": "eslint --ext .js,.vue src tests --fix",
 		"test": "jest --verbose",
-		"svg_sprite": "svg-sprite --config svg-sprite.json img/src/**/*.svg"
+		"svg_sprite": "svg-sprite --config svg-sprite-color.json img/src/color/*.svg && svg-sprite --config svg-sprite-bw.json img/src/bw/*.svg"
 	},
 	"repository": {
 		"type": "git",
diff --git a/src/components/SortorderDropdown.vue b/src/components/SortorderDropdown.vue
index c3327cd0..ab4e8a24 100644
--- a/src/components/SortorderDropdown.vue
+++ b/src/components/SortorderDropdown.vue
@@ -24,8 +24,8 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 		<div v-click-outside="closeMenu" class="app-navigation-entry-utils" @click="toggleMenu">
 			<div :title="t('tasks', 'Change sort order')" class="app-navigation-entry-utils-menu-button">
 				<button class="sortorder-dropdown-button">
-					<span :class="sortOrderIcon" class="icon" />
-					<span :class="sortDirection ? 'icon-sort-up' : 'icon-sort-down'" class="icon sort-indicator" />
+					<span :class="sortOrderIcon" class="icon icon-bw" />
+					<span :class="sortDirection ? 'icon-sort-up' : 'icon-sort-down'" class="icon icon-bw sort-indicator" />
 				</button>
 			</div>
 		</div>
@@ -36,9 +36,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					:class="{active: sortOrder == order.id}"
 					@click="setSortOrder(order.id)">
 					<a>
-						<span :class="order.icon" class="icon" />
+						<span :class="order.icon" class="icon icon-bw" />
 						<span class="label">{{ order.text }}</span>
-						<span :class="sortDirection ? 'icon-sort-up' : 'icon-sort-down'" class="icon sort-indicator" />
+						<span :class="sortDirection ? 'icon-sort-up' : 'icon-sort-down'" class="icon icon-bw sort-indicator" />
 					</a>
 				</li>
 			</ul>
diff --git a/src/components/Task.vue b/src/components/Task.vue
index 12f89a16..3b1aefcc 100644
--- a/src/components/Task.vue
+++ b/src/components/Task.vue
@@ -40,30 +40,30 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				name="toggleCompleted"
 				role="checkbox"
 				@click="toggleCompleted(task)">
-				<span :class="{'icon-checkmark': task.completed}" class="icon task-checkbox reactive no-nav" />
+				<span :class="{'icon-checkmark': task.completed}" class="icon icon-bw task-checkbox reactive no-nav" />
 			</span>
 			<span class="icon task-separator" />
 			<span class="task-star" @click="toggleStarred(task.uri)">
-				<span :class="[iconStar]" class="icon icon-task-star right large reactive no-nav" />
+				<span :class="[iconStar]" class="icon right large reactive no-nav" />
 			</span>
 			<span v-if="!task.calendar.readOnly"
 				class="task-addsubtask add-subtask">
 				<span :taskId="task.uri"
-					:title="subtasksCreationPlaceholder" class="icon icon-add right large reactive no-nav"
+					:title="subtasksCreationPlaceholder" class="icon icon-bw icon-add right large reactive no-nav"
 					@click="showSubtaskInput = true" />
 			</span>
 			<span v-if="task.subTasks.length" @click="toggleSubtasks(task)">
 				<span :title="t('tasks', 'Toggle subtasks')"
 					:class="task.hideSubtasks ? 'icon-subtasks-hidden' : 'icon-subtasks-visible'"
-					class="icon right large subtasks reactive no-nav" />
+					class="icon icon-bw right large subtasks reactive no-nav" />
 			</span>
 			<span v-if="hasCompletedSubtasks" @click="toggleCompletedSubtasks(task)">
 				<span :title="t('tasks', 'Toggle completed subtasks')"
 					:class="{'active': !task.hideCompletedSubtasks}"
-					class="icon icon-toggle right large toggle-completed-subtasks reactive no-nav" />
+					class="icon icon-bw icon-toggle right large toggle-completed-subtasks reactive no-nav" />
 			</span>
 			<span v-if="task.note!=''">
-				<span class="icon icon-note right large" />
+				<span class="icon icon-bw icon-note right large" />
 			</span>
 			<span :class="{overdue: overdue(task.due)}" class="duedate">{{ task.due | formatDate }}</span>
 			<span v-if="$route.params.collectionId=='week'" class="listname">{{ task.calendar.displayName }}</span>
@@ -161,11 +161,13 @@ export default {
 
 		iconStar: function() {
 			if (this.task.priority > 5) {
-				return 'icon-task-star-low'
+				return 'icon-color icon-task-star-low'
 			} else if (this.task.priority === 5) {
-				return 'icon-task-star-medium'
+				return 'icon-color icon-task-star-medium'
 			} else if (this.task.priority > 0 && this.task.priority < 5) {
-				return 'icon-task-star-high'
+				return 'icon-color icon-task-star-high'
+			} else {
+				return 'icon-bw icon-task-star'
 			}
 		},
 
diff --git a/src/components/TheDetails.vue b/src/components/TheDetails.vue
index 8894cf58..ec8be0d7 100644
--- a/src/components/TheDetails.vue
+++ b/src/components/TheDetails.vue
@@ -30,11 +30,11 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					class="checkbox reactive"
 					role="checkbox"
 					@click="toggleCompleted(task.uri)">
-					<span :class="{'icon-checkmark': task.completed, 'disabled': task.calendar.readOnly}" class="icon detail-checkbox" />
+					<span :class="{'icon-checkmark': task.completed, 'disabled': task.calendar.readOnly}" class="icon icon-bw detail-checkbox" />
 				</a>
 				<a class="star reactive" @click="toggleStarred(task.uri)">
 					<span :class="[{'disabled': task.calendar.readOnly}, iconStar]"
-						class="icon icon-task-star" />
+						class="icon" />
 				</a>
 				<div v-click-outside="() => finishEditing('summary')">
 					<div :class="{'strike-through': task.completed}"
@@ -60,8 +60,8 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						class="section detail-start">
 						<div v-click-outside="() => finishEditing('start')"
 							@click="editProperty('start', $event)">
-							<span :class="{'icon-calendar-due': valid(task.start), 'icon-calendar-overdue': overdue(task.start)}"
-								class="icon icon-calendar" />
+							<span :class="[dateIcon(task.start)]"
+								class="icon" />
 							<span class="section-title">{{ task.start | startDate }}</span>
 							<div v-if="edit=='start'" class="section-edit">
 								<datetime-picker :value="startDate" :lang="lang"
@@ -76,10 +76,10 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						</div>
 						<div class="utils">
 							<a>
-								<span class="icon detail-save icon-checkmark-color end-edit reactive" />
+								<span class="icon icon-color detail-save icon-checkmark-color end-edit reactive" />
 							</a>
 							<a class="end-edit" @click="setProperty('start', '')">
-								<span class="icon icon-trash reactive" />
+								<span class="icon icon-bw icon-trash reactive" />
 							</a>
 						</div>
 					</li>
@@ -87,8 +87,8 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						class="section detail-date">
 						<div v-click-outside="() => finishEditing('due')"
 							@click="editProperty('due', $event)">
-							<span :class="{'icon-calendar-due': valid(task.due), 'icon-calendar-overdue': overdue(task.due)}"
-								class="icon icon-calendar" />
+							<span :class="[dateIcon(task.due)]"
+								class="icon" />
 							<span class="section-title">{{ task.due | dueDate }}</span>
 							<div v-if="edit=='due'" class="section-edit">
 								<datetime-picker :value="dueDate" :lang="lang"
@@ -103,10 +103,10 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						</div>
 						<div class="utils">
 							<a>
-								<span class="icon detail-save icon-checkmark-color end-edit reactive" />
+								<span class="icon icon-color detail-save icon-checkmark-color end-edit reactive" />
 							</a>
 							<a class="end-edit" @click="setProperty('due', '')">
-								<span class="icon icon-trash reactive" />
+								<span class="icon icon-bw icon-trash reactive" />
 							</a>
 						</div>
 					</li>
@@ -116,7 +116,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						role="checkbox"
 						@click="toggleAllDay(task.uri)">
 						<div>
-							<span :class="{'icon-checkmark': task.allDay, 'disabled': task.calendar.readOnly}" class="icon detail-checkbox" />
+							<span :class="{'icon-checkmark': task.allDay, 'disabled': task.calendar.readOnly}" class="icon icon-color detail-checkbox" />
 							<span class="section-title">{{ t('tasks', 'All day') }}</span>
 						</div>
 					</li>
@@ -125,7 +125,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						<div v-click-outside="() => finishEditing('priority')"
 							@click="editProperty('priority')">
 							<span :class="[iconStar]"
-								class="icon icon-task-star" />
+								class="icon" />
 							<span class="section-title">{{ task.priority | priority }}</span>
 							<div class="section-edit">
 								<input v-model="tmpTask.priority"
@@ -145,10 +145,10 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						</div>
 						<div class="utils">
 							<a>
-								<span class="icon detail-save icon-checkmark-color end-edit reactive" />
+								<span class="icon icon-color detail-save icon-checkmark-color end-edit reactive" />
 							</a>
 							<a class="end-edit" @click="setProperty('priority', 0)">
-								<span class="icon icon-trash reactive" />
+								<span class="icon icon-bw icon-trash reactive" />
 							</a>
 						</div>
 					</li>
@@ -156,7 +156,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						class="section detail-complete">
 						<div v-click-outside="() => finishEditing('complete')"
 							@click="editProperty('complete')">
-							<span :class="{'icon-percent-active': task.complete>0}" class="icon icon-percent" />
+							<span :class="[iconPercent]" class="icon" />
 							<span class="section-title">{{ task.complete | complete }}</span>
 							<div class="section-edit">
 								<input v-model="tmpTask.complete"
@@ -177,16 +177,16 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						</div>
 						<div class="utils">
 							<a>
-								<span class="icon detail-save icon-checkmark-color end-edit reactive" />
+								<span class="icon icon-color detail-save icon-checkmark-color end-edit reactive" />
 							</a>
 							<a class="end-edit" @click="setProperty('complete', 0)">
-								<span class="icon icon-trash reactive" />
+								<span class="icon icon-bw icon-trash reactive" />
 							</a>
 						</div>
 					</li>
 					<li :class="{'active': task.categories.length>0}" class="section detail-categories">
 						<div>
-							<span :class="{'icon-tag-active': task.categories.length>0}" class="icon icon-tag detail-categories" />
+							<span :class="[iconCategories]" class="icon detail-categories" />
 							<div class="detail-categories-container">
 								<multiselect v-if="task.categories"
 									v-model="task.categories"
@@ -226,10 +226,10 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				<a v-show="!task.calendar.readOnly"
 					class="left close-all reactive"
 					@click="deleteTask(task.uri)">
-					<span class="icon icon-trash" />
+					<span class="icon icon-bw icon-trash" />
 				</a>
 				<a class="right close-all reactive" @click="closeDetails">
-					<span class="icon icon-hide" />
+					<span class="icon icon-bw icon-hide" />
 				</a>
 			</div>
 		</div>
@@ -398,7 +398,23 @@ export default {
 		},
 		iconStar: function() {
 			if (this.task.priority) {
-				return 'icon-task-star-' + this.priorityString
+				return 'icon-color icon-task-star-' + this.priorityString
+			} else {
+				return 'icon-bw icon-task-star'
+			}
+		},
+		iconPercent: function() {
+			if (this.task.complete > 0) {
+				return 'icon-color icon-percent-active'
+			} else {
+				return 'icon-bw icon-percent'
+			}
+		},
+		iconCategories: function() {
+			if (this.task.categories.length > 0) {
+				return 'icon-color icon-tag-active'
+			} else {
+				return 'icon-bw icon-tag'
 			}
 		},
 		startDate: function() {
@@ -432,6 +448,18 @@ export default {
 				}
 			},
 
+			dateIcon: function(date) {
+				if (valid(date)) {
+					var c = 'icon-color icon-calendar-due'
+					if (overdue(date)) {
+						c += ' icon-calendar-overdue'
+					}
+					return c
+				} else {
+					return 'icon-bw icon-calendar'
+				}
+			},
+
 			/**
 			 * Checks if a date is overdue
 			 */
diff --git a/src/components/TheList.vue b/src/components/TheList.vue
index dffa19ac..f389e4f4 100644
--- a/src/components/TheList.vue
+++ b/src/components/TheList.vue
@@ -122,7 +122,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 			</div>
 		</router-link>
 		<li v-click-outside="cancelCreate" :class="{edit: creating}" class="newList icon-add reactive editing">
-			<a class="addlist icon sprite"
+			<a class="icon icon-bw addlist sprite"
 				@click="startCreate($event)">
 				<span class="title">{{ t('tasks', 'Add List...') }}</span>
 			</a>
diff --git a/src/components/TheSettings.vue b/src/components/TheSettings.vue
index 7d8cb574..9436800a 100644
--- a/src/components/TheSettings.vue
+++ b/src/components/TheSettings.vue
@@ -44,7 +44,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				<li v-for="collection in collections"
 					:key="collection.id">
 					<div class="label-container">
-						<span :class="collection.icon" class="icon">
+						<span :class="collection.icon" class="icon icon-bw">
 							<span v-if="collection.id=='today'">{{ dayOfMonth }}</span>
 						</span>
 						<label :for="'visibilityCollection-' + collection.id" class="title">{{ collection.displayName }}</label>
diff --git a/svg-sprite.json b/svg-sprite-bw.json
index b499e5fd..b4d778de 100644
--- a/svg-sprite.json
+++ b/svg-sprite-bw.json
@@ -8,13 +8,13 @@
 	"mode": {
 		"css": {
 			"bust": false,
-			"common": "icon",
+			"common": "icon-bw",
 			"prefix": ".icon-%s",
-			"sprite": "../img/sprites.svg",
+			"sprite": "../img/bw.svg",
 			"render": {
 				"scss": {
-					"template": "svg-sprite.tmpl",
-					"dest": "src/sprites.scss"
+					"template": "svg-sprite-bw.tmpl",
+					"dest": "src/sprites-bw.scss"
 				}
 			}
 		}
diff --git a/svg-sprite-bw.tmpl b/svg-sprite-bw.tmpl
new file mode 100644
index 00000000..6926de95
--- /dev/null
+++ b/svg-sprite-bw.tmpl
@@ -0,0 +1,14 @@
+{{#hasMixin}}
+{{#hasCommon}}.{{commonName}} {
+	@include {{mixinName}};
+}
+{{/hasCommon}}{{/hasMixin}}{{^hasMixin}}{{#hasCommon}}{{/hasCommon}}{{^hasCommon}}%{{/hasCommon}}
+@include icon-black-white('bw', 'tasks', 1, false);
+
+{{/hasMixin}}{{#shapes}}{{#selector.shape}}{{expression}}{{^last}},
+{{/last}}{{/selector.shape}} {
+	{{^hasCommon}}{{#hasMixin}}@include {{mixinName}};{{/hasMixin}}{{^hasMixin}}@extend %{{commonName}};{{/hasMixin}}
+	{{/hasCommon}}background-position: {{position.relative.xy}};
+}
+
+{{/shapes}}
diff --git a/svg-sprite-color.json b/svg-sprite-color.json
new file mode 100644
index 00000000..ad6f0948
--- /dev/null
+++ b/svg-sprite-color.json
@@ -0,0 +1,22 @@
+{
+	"shape": {
+		"dimension": {
+			"attributes": false
+		},
+		"transform": []
+	},
+	"mode": {
+		"css": {
+			"bust": false,
+			"common": "icon-color",
+			"prefix": ".icon-%s",
+			"sprite": "../img/color.svg",
+			"render": {
+				"scss": {
+					"template": "svg-sprite-color.tmpl",
+					"dest": "src/sprites-color.scss"
+				}
+			}
+		}
+	}
+}
diff --git a/svg-sprite.tmpl b/svg-sprite-color.tmpl
index e6fb6aeb..e6fb6aeb 100644
--- a/svg-sprite.tmpl
+++ b/svg-sprite-color.tmpl