diff --git a/css/navigation.css b/css/navigation.css
index 708da6a..1bad12c 100644
--- a/css/navigation.css
+++ b/css/navigation.css
@@ -69,3 +69,70 @@
 		}
 	}
 }
+
+@media (prefers-color-scheme: dark) {
+	#body-user {
+		div[data-cy-files-navigation].app-navigation:has(nav#app-navigation-vue) {
+			background-color: var(--ion-color-surface-c8);
+			.app-navigation-entry {
+				&.active {
+					background-color: #2E4360 !important;
+					.app-navigation-entry-link {
+						color: var(--ion-color-cool-grey-c1) !important;
+					}
+				}
+				&:hover {
+					background-color: #465A75;
+				}
+	
+				/* fix Storage Quota color after click */
+				&:focus-within:not(:active) { 
+					background-color: var(--ion-color-surface-c8);
+				}
+
+				.app-navigation-entry-link {
+					color: var(--ion-color-cool-grey-c1);
+				}
+			}
+	
+			.app-navigation-entry--opened:has(.app-navigation-entry__children) {
+				background: var(--ion-color-surface-b9);
+				.app-navigation-entry__children {
+					.app-navigation-entry-wrapper {
+						background: var(--ion-color-surface-b9);
+					}
+				}
+			}
+
+			/* Navigation Toggle Button */
+			div.app-navigation-toggle-wrapper button {
+				background-color: #718095;
+				span[role=img]>svg {
+					color: #F4F7FA;
+				}
+				&:hover {
+					background-color: var(--ion-color-cool-grey-c3);
+					span[role=img]>svg {
+						color: var(--ion-color-secondary);
+					}
+				}
+			}
+
+			/* Sub Navigation Toggle Icon Button */
+			.button-vue--icon-only:not(.app-navigation-toggle) {
+				margin: 6px;
+				background-color: transparent;
+				span[role=img]>svg {
+					height: 16px;
+					color: var(--ion-color-cool-grey-c1);
+				}
+				&:hover {
+					background-color: transparent;
+					span[role=img]>svg {
+						color: var(--ion-color-cool-grey-c1);
+					}
+				}
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/lib/Themes/OverrideDefaultTheme.php b/lib/Themes/OverrideDefaultTheme.php
index 9a0dfb2..b9758ba 100644
--- a/lib/Themes/OverrideDefaultTheme.php
+++ b/lib/Themes/OverrideDefaultTheme.php
@@ -57,10 +57,6 @@ public function getDescription(): string {
 		return 'The default NC appearance.';
 	}
 
-	public function getMediaQuery(): string {
-		return '(prefers-color-scheme: light)';
-	}
-
 	public function getMeta(): array {
 		// https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme
 		return [[
@@ -82,12 +78,15 @@ public function getCSSVariables(): array {
 		$ionColorBlueB4 = '#1474c4';
 		$ionColorBlueB5 = '#095BB1';
 		$ionColorBlueB7 = '#0B2A63';
+		$ionColorBlueB9 = '#02102B';
 		$ionColorCoolGreyC1 = '#f4f7fa';
 		$ionColorCoolGreyC2 = '#dbe2e8';
 		$ionColorCoolGreyC3 = '#bcc8d4';
 		$ionColorCoolGreyC4 = '#97A3B4';
 		$ionColorCoolGreyC5 = '#718095';
 		$ionColorCoolGreyC6 = '#465A75';
+		$ionColorCoolGreyC7 = '#2E4360';
+		$ionColorCoolGreyC8 = '#0F1A2A';
 		$ionColorTypoMild = '#2e4360';
 		$ionColorLightGrey = '#d7d7d7';
 
@@ -105,18 +104,24 @@ public function getCSSVariables(): array {
 			'--ion-color-blue-b4' => $ionColorBlueB4,
 			'--ion-color-blue-b5' => $ionColorBlueB5,
 			'--ion-color-blue-b7' => $ionColorBlueB7,
+			'--ion-color-blue-b9' => $ionColorBlueB9,
 			'--ion-color-cool-grey-c1' => $ionColorCoolGreyC1,
 			'--ion-color-cool-grey-c2' => $ionColorCoolGreyC2,
 			'--ion-color-cool-grey-c3' => $ionColorCoolGreyC3,
 			'--ion-color-cool-grey-c4' => $ionColorCoolGreyC4,
 			'--ion-color-cool-grey-c5' => $ionColorCoolGreyC5,
 			'--ion-color-cool-grey-c6' => $ionColorCoolGreyC6,
+			'--ion-color-cool-grey-c7' => $ionColorCoolGreyC7,
+			'--ion-color-cool-grey-c8' => $ionColorCoolGreyC8,
 			'--ion-color-typo-mild' => $ionColorTypoMild,
 			'--ion-color-light-grey' => $ionColorLightGrey,
 			'--ion-color-green-g3' => $ionColorGreenG3,
 			'--ion-color-rose-r3' => $ionColorRoseR3,
 			'--ion-color-sky-s3' => $ionColorSkyS3,
 			'--ion-color-amber-y3' => $ionColorAmberY3,
+
+			'--ion-color-surface-c8' => 'var(--ion-color-cool-grey-c8)',
+			'--ion-color-surface-b9' => 'var(--ion-color-blue-b9)',
 		];
 
 		// COLOR MAPPING