Update color scheme to match rocketadmin.com (#1537)

Replace hardcoded dark-mode hex values with centralized --ra-* CSS custom
properties and update the Material palette to blue/teal branding.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: gugu

frontend/src/app/app.component.css

@@ -12,9 +12,9 @@
 
 @media (prefers-color-scheme: dark) {
 	.main-menu-container {
-		--mat-sidenav-content-background-color: #191919;
-		--mat-sidenav-container-background-color: #191919;
-		--mat-sidenav-container-divider-color: #303030;
+		--mat-sidenav-content-background-color: var(--ra-bg);
+		--mat-sidenav-container-background-color: var(--ra-bg);
+		--mat-sidenav-container-divider-color: var(--ra-border);
 	}
 }
 
@@ -26,13 +26,13 @@
 	position: sticky;
 	top: 0;
 	flex-shrink: 0;
-	background-color: #212121;
+	background-color: var(--ra-nav-bg);
 	z-index: 3;
 }
 
 @media (prefers-color-scheme: dark) {
 	.nav-bar {
-		border-bottom: 1px solid #303030;
+		border-bottom: 1px solid var(--ra-nav-border);
 	}
 }
 
@@ -311,22 +311,16 @@
 
 @media (prefers-color-scheme: dark) {
 	.footer {
-		background: #212121;
-		border-top: 1px solid #303030;
+		background: var(--ra-nav-bg);
+		border-top: 1px solid var(--ra-border);
 	}
 }
 
 .footer__text {
-	color: rgba(0, 0, 0, 0.5);
+	color: var(--ra-text-muted);
 	font-size: 0.875em;
 }
 
-@media (prefers-color-scheme: dark) {
-	.footer__text {
-		color: #fff;
-	}
-}
-
 ::ng-deep .visually-hidden {
 	position: absolute !important;
 	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
@@ -351,12 +345,6 @@
 }
 
 .user-email {
-	color: rgba(0, 0, 0, 0.54);
+	color: var(--ra-text-muted);
 	font-size: 12px;
 }
-
-@media (prefers-color-scheme: dark) {
-	.user-email {
-		color: rgba(255, 255, 255, 0.7);
-	}
-}

frontend/src/app/components/connect-db/db-connection-confirm-dialog/db-connection-confirm-dialog.component.css

@@ -1,53 +1,45 @@
 .connection-error-message {
-    display: block;
-    color: var(--mat-sidenav-content-text-color);
-    margin-bottom: 20px;
+	display: block;
+	color: var(--mat-sidenav-content-text-color);
+	margin-bottom: 20px;
 }
 
 .docs-notification {
-    display: block;
-    background-color: var(--bg-color);
-    color: var(--mat-sidenav-content-text-color);
-    margin-bottom: 20px;
-    padding: 8px 12px;
+	display: block;
+	background-color: var(--bg-color);
+	color: var(--mat-sidenav-content-text-color);
+	margin-bottom: 20px;
+	padding: 8px 12px;
 }
 
-@media (prefers-color-scheme: dark) {
-    .docs-notification {
-        --bg-color: #292929;
-    }
-}
-
-@media (prefers-color-scheme: light) {
-    .docs-notification {
-        --bg-color: #F4F4F4;
-    }
+.docs-notification {
+	--bg-color: var(--ra-surface);
 }
 
 .docs-link {
-    color: #EF6C00;
-    font-weight: 500;
-    text-decoration: none;
+	color: #ef6c00;
+	font-weight: 500;
+	text-decoration: none;
 }
 
 .connection-error__actions {
-    display: flex;
-    justify-content: space-between;
+	display: flex;
+	justify-content: space-between;
 }
 
 .main-actions {
-    display: flex;
-    gap: 12px;
+	display: flex;
+	gap: 12px;
 }
 
 .link {
-    display: inline-block;
-    color: var(--color-primaryPalette-500);
-    margin-top: 15px;
+	display: inline-block;
+	color: var(--color-primaryPalette-500);
+	margin-top: 15px;
 }
 
 @media (prefers-color-scheme: dark) {
-    .link {
-        color: var(--color-whitePalette-500);
-    }
-}
+	.link {
+		color: var(--color-whitePalette-500);
+	}
+}

frontend/src/app/components/connect-db/master-encryption-password/master-encryption-password.component.css

@@ -1,58 +1,50 @@
 .encription-setting {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    margin-bottom: 20px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-wrap: wrap;
+	margin-bottom: 20px;
 }
 
 .encription-password {
-    display: flex;
-    flex-direction: column;
-    margin-top: 32px;
-    width: 100%;
+	display: flex;
+	flex-direction: column;
+	margin-top: 32px;
+	width: 100%;
 }
 
 .encription-password__field {
-    display: flex;
-    align-items: center;
-    width: 100%;
+	display: flex;
+	align-items: center;
+	width: 100%;
 }
 
 .encription-password__copy-button {
-    margin-top: -20px;
-    margin-left: -40px;
+	margin-top: -20px;
+	margin-left: -40px;
 }
 
 .docs-notification {
-    display: flex;
-    gap: 8px;
-    background-color: var(--bg-color);
-    border-left: 12px solid #FF6F00;
-    color: var(--mat-sidenav-content-text-color);
-    margin-top: -8px;
-    padding: 16px 12px;
+	display: flex;
+	gap: 8px;
+	background-color: var(--bg-color);
+	border-left: 12px solid #ff6f00;
+	color: var(--mat-sidenav-content-text-color);
+	margin-top: -8px;
+	padding: 16px 12px;
 }
 
-@media (prefers-color-scheme: dark) {
-    .docs-notification {
-        --bg-color: #292929;
-    }
-}
-
-@media (prefers-color-scheme: light) {
-    .docs-notification {
-        --bg-color: #F4F4F4;
-    }
+.docs-notification {
+	--bg-color: var(--ra-surface);
 }
 
 .docs-notification__warning {
-    line-height: 1.55em;
-    margin-bottom: 8px;
+	line-height: 1.55em;
+	margin-bottom: 8px;
 }
 
 .docs-link {
-    color: #EF6C00;
-    font-weight: 500;
-    text-decoration: none;
-}
+	color: #ef6c00;
+	font-weight: 500;
+	text-decoration: none;
+}