diff --git a/css/dashboard.css b/css/dashboard.css
new file mode 100644
index 000000000..ceca5421d
--- /dev/null
+++ b/css/dashboard.css
@@ -0,0 +1,8 @@
+.app-icon-calendar {
+	background-image: url('../img/calendar-dark.svg');
+}
+
+/* for NC <= 24 */
+body.theme--dark .app-icon-calendar {
+	background-image: url('../img/calendar.svg');
+}
diff --git a/img/calendar-dark.svg b/img/calendar-dark.svg
new file mode 100644
index 000000000..8b87413d4
--- /dev/null
+++ b/img/calendar-dark.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" version="1.1" viewBox="0 0 32 32" fill="#000">
+ <g transform="translate(580.71 -1.5765)">
+  <path d="m-572.71 3.5765c-1.108 0-2 0.892-2 2v4c0 1.108 0.892 2 2 2s2-0.892 2-2v-4c0-1.108-0.892-2-2-2zm16 0c-1.108 0-2 0.892-2 2v4c0 1.108 0.892 2 2 2s2-0.892 2-2v-4c0-1.108-0.892-2-2-2zm-13 4v2c0 1.662-1.338 3-3 3s-3-1.338-3-3v-1.875c-1.728 0.44254-3 2.0052-3 3.875v16c0 2.216 1.784 4 4 4h20c2.216 0 4-1.784 4-4v-16c0-1.8698-1.272-3.4325-3-3.875v1.875c0 1.662-1.338 3-3 3s-3-1.338-3-3v-2h-10zm-5.9062 9h21.812c0.0554 0 0.0937 0.03835 0.0937 0.09375v11.812c0 0.0554-0.0384 0.09375-0.0937 0.09375h-21.812c-0.0554 0-0.0937-0.03835-0.0937-0.09375v-11.812c0-0.0554 0.0384-0.09375 0.0937-0.09375z" />
+ </g>
+</svg>
diff --git a/img/calendar.svg b/img/calendar.svg
index 74d810cb7..0942427fd 100644
--- a/img/calendar.svg
+++ b/img/calendar.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" version="1.1" viewBox="0 0 32 32">
+<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" version="1.1" viewBox="0 0 32 32" fill="#FFF">
  <g transform="translate(580.71 -1.5765)">
-  <path d="m-572.71 3.5765c-1.108 0-2 0.892-2 2v4c0 1.108 0.892 2 2 2s2-0.892 2-2v-4c0-1.108-0.892-2-2-2zm16 0c-1.108 0-2 0.892-2 2v4c0 1.108 0.892 2 2 2s2-0.892 2-2v-4c0-1.108-0.892-2-2-2zm-13 4v2c0 1.662-1.338 3-3 3s-3-1.338-3-3v-1.875c-1.728 0.44254-3 2.0052-3 3.875v16c0 2.216 1.784 4 4 4h20c2.216 0 4-1.784 4-4v-16c0-1.8698-1.272-3.4325-3-3.875v1.875c0 1.662-1.338 3-3 3s-3-1.338-3-3v-2h-10zm-5.9062 9h21.812c0.0554 0 0.0937 0.03835 0.0937 0.09375v11.812c0 0.0554-0.0384 0.09375-0.0937 0.09375h-21.812c-0.0554 0-0.0937-0.03835-0.0937-0.09375v-11.812c0-0.0554 0.0384-0.09375 0.0937-0.09375z" fill="#FFF"/>
+  <path d="m-572.71 3.5765c-1.108 0-2 0.892-2 2v4c0 1.108 0.892 2 2 2s2-0.892 2-2v-4c0-1.108-0.892-2-2-2zm16 0c-1.108 0-2 0.892-2 2v4c0 1.108 0.892 2 2 2s2-0.892 2-2v-4c0-1.108-0.892-2-2-2zm-13 4v2c0 1.662-1.338 3-3 3s-3-1.338-3-3v-1.875c-1.728 0.44254-3 2.0052-3 3.875v16c0 2.216 1.784 4 4 4h20c2.216 0 4-1.784 4-4v-16c0-1.8698-1.272-3.4325-3-3.875v1.875c0 1.662-1.338 3-3 3s-3-1.338-3-3v-2h-10zm-5.9062 9h21.812c0.0554 0 0.0937 0.03835 0.0937 0.09375v11.812c0 0.0554-0.0384 0.09375-0.0937 0.09375h-21.812c-0.0554 0-0.0937-0.03835-0.0937-0.09375v-11.812c0-0.0554 0.0384-0.09375 0.0937-0.09375z" />
  </g>
 </svg>
diff --git a/lib/Dashboard/CalendarWidget.php b/lib/Dashboard/CalendarWidget.php
index 7a8e0dd17..3c09fa0d5 100644
--- a/lib/Dashboard/CalendarWidget.php
+++ b/lib/Dashboard/CalendarWidget.php
@@ -30,6 +30,7 @@ use OCA\Calendar\Service\JSDataService;
 use OCP\Dashboard\IWidget;
 use OCP\IInitialStateService;
 use OCP\IL10N;
+use OCP\Util;
 
 class CalendarWidget implements IWidget {
 
@@ -87,7 +88,7 @@ class CalendarWidget implements IWidget {
 	 * @inheritDoc
 	 */
 	public function getIconClass(): string {
-		return 'icon-calendar-dark';
+		return 'app-icon-calendar';
 	}
 
 	/**
@@ -101,7 +102,8 @@ class CalendarWidget implements IWidget {
 	 * @inheritDoc
 	 */
 	public function load(): void {
-		\OCP\Util::addScript('calendar', 'calendar-dashboard');
+		Util::addScript(Application::APP_ID, 'calendar-dashboard');
+		Util::addStyle(Application::APP_ID, 'dashboard');
 
 		$this->initialStateService->provideLazyInitialState(Application::APP_ID, 'dashboard_data', function () {
 			return $this->dataService;