FIX (dark): Add dark theme image

Feature/pgpass escape

README.md

@@ -25,6 +25,8 @@
     <a href="https://postgresus.com" target="_blank"><strong>🌐 Postgresus website</strong></a>
   </p>
   
+  <img src="assets/dashboard-dark.svg" alt="Postgresus Dark Dashboard" width="800" style="margin-bottom: 10px;"/>
+
   <img src="assets/dashboard.svg" alt="Postgresus Dashboard" width="800"/>
   
  
@@ -72,6 +74,12 @@
 - **Audit logs**: Track all system activities and changes made by users
 - **User roles**: Assign viewer, member, admin or owner roles within workspaces
 
+### 🎨 **UX-Friendly**
+
+- **Designer-polished UI**: Clean, intuitive interface crafted with attention to detail
+- **Dark & light themes**: Choose the look that suits your workflow
+- **Mobile adaptive**: Check your backups from anywhere on any device
+
 ### 🐳 **Self-Hosted & Secure**
 
 - **Docker-based**: Easy deployment and management

backend/internal/features/backups/backups/usecases/postgresql/create_backup_uc.go

@@ -719,11 +719,15 @@ func (uc *CreatePostgresqlBackupUsecase) createTempPgpassFile(
 		return "", nil
 	}
 
+	escapedHost := tools.EscapePgpassField(pgConfig.Host)
+	escapedUsername := tools.EscapePgpassField(pgConfig.Username)
+	escapedPassword := tools.EscapePgpassField(password)
+
 	pgpassContent := fmt.Sprintf("%s:%d:*:%s:%s",
-		pgConfig.Host,
+		escapedHost,
 		pgConfig.Port,
-		pgConfig.Username,
-		password,
+		escapedUsername,
+		escapedPassword,
 	)
 
 	tempDir, err := os.MkdirTemp("", "pgpass")

backend/internal/features/restores/usecases/postgresql/restore_backup_uc.go

@@ -564,11 +564,15 @@ func (uc *RestorePostgresqlBackupUsecase) createTempPgpassFile(
 		return "", nil
 	}
 
+	escapedHost := tools.EscapePgpassField(pgConfig.Host)
+	escapedUsername := tools.EscapePgpassField(pgConfig.Username)
+	escapedPassword := tools.EscapePgpassField(password)
+
 	pgpassContent := fmt.Sprintf("%s:%d:*:%s:%s",
-		pgConfig.Host,
+		escapedHost,
 		pgConfig.Port,
-		pgConfig.Username,
-		password,
+		escapedUsername,
+		escapedPassword,
 	)
 
 	tempDir, err := os.MkdirTemp("", "pgpass")

backend/internal/util/tools/postgresql.go

@@ -6,6 +6,7 @@ import (
 	"os"
 	"path/filepath"
 	"runtime"
+	"strings"
 
 	env_utils "postgresus-backend/internal/util/env"
 )
@@ -151,6 +152,24 @@ func VerifyPostgresesInstallation(
 	logger.Info("All PostgreSQL version-specific client tools verification completed successfully!")
 }
 
+// EscapePgpassField escapes special characters in a field value for .pgpass file format.
+// According to PostgreSQL documentation, the .pgpass file format requires:
+// - Backslash (\) must be escaped as \\
+// - Colon (:) must be escaped as \:
+// Additionally, newlines and carriage returns are removed to prevent format corruption.
+func EscapePgpassField(field string) string {
+	// Remove newlines and carriage returns that would break .pgpass format
+	field = strings.ReplaceAll(field, "\r", "")
+	field = strings.ReplaceAll(field, "\n", "")
+
+	// Escape backslashes first (order matters!)
+	// Then escape colons
+	field = strings.ReplaceAll(field, "\\", "\\\\")
+	field = strings.ReplaceAll(field, ":", "\\:")
+
+	return field
+}
+
 func getPostgresqlBasePath(
 	version PostgresqlVersion,
 	envMode env_utils.EnvMode,

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { App as AntdApp, ConfigProvider } from 'antd';
+import { App as AntdApp, ConfigProvider, theme } from 'antd';
 import { useEffect, useState } from 'react';
 import { BrowserRouter, Route } from 'react-router';
 import { Routes } from 'react-router';
@@ -7,10 +7,12 @@ import { userApi } from './entity/users';
 import { AuthPageComponent } from './pages/AuthPageComponent';
 import { OAuthCallbackPage } from './pages/OAuthCallbackPage';
 import { OauthStorageComponent } from './pages/OauthStorageComponent';
+import { ThemeProvider, useTheme } from './shared/theme';
 import { MainScreenComponent } from './widgets/main/MainScreenComponent';
 
-function App() {
+function AppContent() {
   const [isAuthorized, setIsAuthorized] = useState(false);
+  const { resolvedTheme } = useTheme();
 
   useEffect(() => {
     const isAuthorized = userApi.isAuthorized();
@@ -24,6 +26,7 @@ function App() {
   return (
     <ConfigProvider
       theme={{
+        algorithm: resolvedTheme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
         token: {
           colorPrimary: '#155dfc', // Tailwind blue-600
         },
@@ -45,4 +48,12 @@ function App() {
   );
 }
 
+function App() {
+  return (
+    <ThemeProvider>
+      <AppContent />
+    </ThemeProvider>
+  );
+}
+
 export default App;

frontend/src/features/backups/ui/BackupsComponent.tsx

@@ -446,7 +446,9 @@ export const BackupsComponent = ({ database, isCanManageDBs, scrollContainerRef
       render: (createdAt: string) => (
         <div>
           {dayjs.utc(createdAt).local().format(getUserTimeFormat().format)} <br />
-          <span className="text-gray-500">({dayjs.utc(createdAt).local().fromNow()})</span>
+          <span className="text-gray-500 dark:text-gray-400">
+            ({dayjs.utc(createdAt).local().fromNow()})
+          </span>
         </div>
       ),
       sorter: (a, b) => dayjs(a.createdAt).unix() - dayjs(b.createdAt).unix(),
@@ -522,8 +524,8 @@ export const BackupsComponent = ({ database, isCanManageDBs, scrollContainerRef
   }
 
   return (
-    <div className="mt-5 w-full rounded-md bg-white p-3 shadow md:p-5">
-      <h2 className="text-lg font-bold md:text-xl">Backups</h2>
+    <div className="mt-5 w-full rounded-md bg-white p-3 shadow md:p-5 dark:bg-gray-800">
+      <h2 className="text-lg font-bold md:text-xl dark:text-white">Backups</h2>
 
       {!isBackupConfigLoading && !backupConfig?.isBackupsEnabled && (
         <div className="text-sm text-red-600 md:text-base">
@@ -558,16 +560,16 @@ export const BackupsComponent = ({ database, isCanManageDBs, scrollContainerRef
               {backups.map((backup) => (
                 <div
                   key={backup.id}
-                  className="mb-2 rounded-lg border border-gray-200 bg-white p-4 shadow-sm"
+                  className="mb-2 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800"
                 >
                   <div className="space-y-3">
                     <div className="flex items-start justify-between">
                       <div>
-                        <div className="text-xs text-gray-500">Created at</div>
+                        <div className="text-xs text-gray-500 dark:text-gray-400">Created at</div>
                         <div className="text-sm font-medium">
                           {dayjs.utc(backup.createdAt).local().format(getUserTimeFormat().format)}
                         </div>
-                        <div className="text-xs text-gray-500">
+                        <div className="text-xs text-gray-500 dark:text-gray-400">
                           ({dayjs.utc(backup.createdAt).local().fromNow()})
                         </div>
                       </div>
@@ -576,11 +578,11 @@ export const BackupsComponent = ({ database, isCanManageDBs, scrollContainerRef
 
                     <div className="grid grid-cols-2 gap-4">
                       <div>
-                        <div className="text-xs text-gray-500">Size</div>
+                        <div className="text-xs text-gray-500 dark:text-gray-400">Size</div>
                         <div className="text-sm font-medium">{formatSize(backup.backupSizeMb)}</div>
                       </div>
                       <div>
-                        <div className="text-xs text-gray-500">Duration</div>
+                        <div className="text-xs text-gray-500 dark:text-gray-400">Duration</div>
                         <div className="text-sm font-medium">
                           {formatDuration(backup.backupDurationMs)}
                         </div>
@@ -602,12 +604,12 @@ export const BackupsComponent = ({ database, isCanManageDBs, scrollContainerRef
             </div>
           )}
           {!hasMore && backups.length > 0 && (
-            <div className="mt-3 text-center text-sm text-gray-500">
+            <div className="mt-3 text-center text-sm text-gray-500 dark:text-gray-400">
               All backups loaded ({totalBackups} total)
             </div>
           )}
           {!isBackupsLoading && backups.length === 0 && (
-            <div className="py-8 text-center text-gray-500">No backups yet</div>
+            <div className="py-8 text-center text-gray-500 dark:text-gray-400">No backups yet</div>
           )}
         </div>
 
@@ -628,7 +630,7 @@ export const BackupsComponent = ({ database, isCanManageDBs, scrollContainerRef
             </div>
           )}
           {!hasMore && backups.length > 0 && (
-            <div className="mt-2 text-center text-gray-500">
+            <div className="mt-2 text-center text-gray-500 dark:text-gray-400">
               All backups loaded ({totalBackups} total)
             </div>
           )}

frontend/src/features/backups/ui/EditBackupConfigComponent.tsx

@@ -529,7 +529,7 @@ export const EditBackupConfigComponent = ({
           open={isShowCreateStorage}
           onCancel={() => setShowCreateStorage(false)}
         >
-          <div className="my-3 max-w-[275px] text-gray-500">
+          <div className="my-3 max-w-[275px] text-gray-500 dark:text-gray-400">
             Storage - is a place where backups will be stored (local disk, S3, Google Drive, etc.)
           </div>
 

frontend/src/features/databases/ui/DatabaseCardComponent.tsx

@@ -29,7 +29,7 @@ export const DatabaseCardComponent = ({
 
   return (
     <div
-      className={`mb-3 cursor-pointer rounded p-3 shadow ${selectedDatabaseId === database.id ? 'bg-blue-100' : 'bg-white'}`}
+      className={`mb-3 cursor-pointer rounded p-3 shadow ${selectedDatabaseId === database.id ? 'bg-blue-100 dark:bg-blue-800' : 'bg-white dark:bg-gray-800'}`}
       onClick={() => setSelectedDatabaseId(database.id)}
     >
       <div className="flex">
@@ -49,7 +49,7 @@ export const DatabaseCardComponent = ({
       </div>
 
       {storage && (
-        <div className="text-sm text-gray-500">
+        <div className="text-sm text-gray-500 dark:text-gray-400">
           <span>Storage: </span>
           <span className="inline-flex items-center">
             {storage.name}{' '}
@@ -65,11 +65,13 @@ export const DatabaseCardComponent = ({
       )}
 
       {database.lastBackupTime && (
-        <div className="text-gray-500">Last backup {dayjs(database.lastBackupTime).fromNow()}</div>
+        <div className="text-gray-500 dark:text-gray-400">
+          Last backup {dayjs(database.lastBackupTime).fromNow()}
+        </div>
       )}
 
       {database.lastBackupErrorMessage && (
-        <div className="mt-1 flex items-center text-sm text-red-600 underline">
+        <div className="mt-1 flex items-center text-sm text-red-600 underline dark:text-red-400">
           <InfoCircleOutlined className="mr-1" style={{ color: 'red' }} />
           Has backup error
         </div>

frontend/src/features/databases/ui/DatabaseComponent.tsx

@@ -51,14 +51,14 @@ export const DatabaseComponent = ({
     >
       <div className="flex">
         <div
-          className={`mr-2 cursor-pointer rounded-tl-md rounded-tr-md px-6 py-2 ${currentTab === 'config' ? 'bg-white' : 'bg-gray-200'}`}
+          className={`mr-2 cursor-pointer rounded-tl-md rounded-tr-md px-6 py-2 ${currentTab === 'config' ? 'bg-white dark:bg-gray-800' : 'bg-gray-200 dark:bg-gray-700'}`}
           onClick={() => setCurrentTab('config')}
         >
           Config
         </div>
 
         <div
-          className={`mr-2 cursor-pointer rounded-tl-md rounded-tr-md px-6 py-2 ${currentTab === 'backups' ? 'bg-white' : 'bg-gray-200'}`}
+          className={`mr-2 cursor-pointer rounded-tl-md rounded-tr-md px-6 py-2 ${currentTab === 'backups' ? 'bg-white dark:bg-gray-800' : 'bg-gray-200 dark:bg-gray-700'}`}
           onClick={() => setCurrentTab('backups')}
         >
           Backups

frontend/src/features/databases/ui/DatabaseConfigComponent.tsx

@@ -147,7 +147,7 @@ export const DatabaseConfigComponent = ({
   };
 
   return (
-    <div className="w-full rounded-tr-md rounded-br-md rounded-bl-md bg-white p-3 shadow sm:p-5">
+    <div className="w-full rounded-tr-md rounded-br-md rounded-bl-md bg-white p-3 shadow sm:p-5 dark:bg-gray-800">
       {!isEditName ? (
         <div className="mb-5 flex items-center text-xl font-bold sm:text-2xl">
           {database.name}
@@ -184,7 +184,7 @@ export const DatabaseConfigComponent = ({
                   setEditDatabase(undefined);
                 }}
               >
-                <CloseOutlined className="text-gray-500" />
+                <CloseOutlined className="text-gray-500 dark:text-gray-400" />
               </Button>
             </div>
           </div>
@@ -216,7 +216,7 @@ export const DatabaseConfigComponent = ({
             {database.lastBackupErrorMessage}
           </div>
 
-          <div className="mt-3 text-sm text-gray-500">
+          <div className="mt-3 text-sm text-gray-500 dark:text-gray-400">
             To clean this error (choose any):
             <ul>
               <li>- test connection via button below (even if you updated settings);</li>
@@ -370,7 +370,6 @@ export const DatabaseConfigComponent = ({
           <Button
             type="primary"
             className="w-full sm:mr-1 sm:w-auto"
-            ghost
             onClick={testConnection}
             loading={isTestingConnection}
             disabled={isTestingConnection}
@@ -381,7 +380,6 @@ export const DatabaseConfigComponent = ({
           <Button
             type="primary"
             className="w-full sm:mr-1 sm:w-auto"
-            ghost
             onClick={copyDatabase}
             loading={isCopying}
             disabled={isCopying}

frontend/src/features/databases/ui/DatabasesComponent.tsx

@@ -111,7 +111,7 @@ export const DatabasesComponent = ({ contentHeight, workspace, isCanManageDBs }:
                     placeholder="Search database"
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
-                    className="w-full border-b border-gray-300 p-1 text-gray-500 outline-none"
+                    className="w-full border-b border-gray-300 p-1 text-gray-500 outline-none dark:text-gray-400"
                   />
                 </div>
               </>
@@ -127,14 +127,14 @@ export const DatabasesComponent = ({ contentHeight, workspace, isCanManageDBs }:
                   />
                 ))
               : searchQuery && (
-                  <div className="mb-4 text-center text-sm text-gray-500">
+                  <div className="mb-4 text-center text-sm text-gray-500 dark:text-gray-400">
                     No databases found matching &quot;{searchQuery}&quot;
                   </div>
                 )}
 
             {databases.length < 5 && isCanManageDBs && addDatabaseButton}
 
-            <div className="mx-3 text-center text-xs text-gray-500">
+            <div className="mx-3 text-center text-xs text-gray-500 dark:text-gray-400">
               Database - is a thing we are backing up
             </div>
           </div>

frontend/src/features/databases/ui/edit/CreateReadOnlyComponent.tsx

@@ -98,7 +98,12 @@ export const CreateReadOnlyComponent = ({
 
         <p className="mb-2">
           Postgresus enforce enterprise-grade security (
-          <a href="https://postgresus.com/security" target="_blank" rel="noreferrer">
+          <a
+            href="https://postgresus.com/security"
+            target="_blank"
+            rel="noreferrer"
+            className="!text-blue-600 dark:!text-blue-400"
+          >
             read in details here
           </a>
           ). However, it is not possible to be covered from all possible risks.

frontend/src/features/databases/ui/edit/EditDatabaseNotifiersComponent.tsx

@@ -93,7 +93,7 @@ export const EditDatabaseNotifiersComponent = ({
 
   return (
     <div>
-      <div className="mb-5 max-w-[275px] text-gray-500">
+      <div className="mb-5 max-w-[275px] text-gray-500 dark:text-gray-400">
         Notifier - is a place where notifications will be sent (email, Slack, Telegram, etc.)
         <br />
         <br />
@@ -162,7 +162,7 @@ export const EditDatabaseNotifiersComponent = ({
           open={isShowCreateNotifier}
           onCancel={() => setShowCreateNotifier(false)}
         >
-          <div className="my-3 max-w-[275px] text-gray-500">
+          <div className="my-3 max-w-[275px] text-gray-500 dark:text-gray-400">
             Notifier - is a place where notifications will be sent (email, Slack, Telegram, etc.)
           </div>
 

frontend/src/features/databases/ui/edit/EditDatabaseSpecificDataComponent.tsx

@@ -177,12 +177,13 @@ export const EditDatabaseSpecificDataComponent = ({
           {isLocalhostDb && (
             <div className="mb-1 flex">
               <div className="min-w-[150px]" />
-              <div className="max-w-[200px] text-xs text-gray-500">
+              <div className="max-w-[200px] text-xs text-gray-500 dark:text-gray-400">
                 Please{' '}
                 <a
                   href="https://postgresus.com/faq#how-to-backup-localhost"
                   target="_blank"
                   rel="noreferrer"
+                  className="!text-blue-600 dark:!text-blue-400"
                 >
                   read this document
                 </a>{' '}

frontend/src/features/databases/ui/show/ShowDatabaseNotifiersComponent.tsx

@@ -23,7 +23,7 @@ export const ShowDatabaseNotifiersComponent = ({ database }: Props) => {
               </div>
             ))
           ) : (
-            <div className="text-gray-500">No notifiers configured</div>
+            <div className="text-gray-500 dark:text-gray-400">No notifiers configured</div>
           )}
         </div>
       </div>

frontend/src/features/healthcheck/ui/HealthckeckAttemptsComponent.tsx

@@ -118,7 +118,7 @@ export const HealthckeckAttemptsComponent = ({ database }: Props) => {
   }
 
   return (
-    <div className="w-full rounded-tr-md rounded-br-md rounded-bl-md bg-white p-3 shadow sm:p-5">
+    <div className="w-full rounded-tr-md rounded-br-md rounded-bl-md bg-white p-3 shadow sm:p-5 dark:bg-gray-800">
       <h2 className="text-lg font-bold sm:text-xl">Healthcheck attempts</h2>
 
       <div className="mt-3 flex flex-col gap-2 sm:mt-4 sm:flex-row sm:items-center">

frontend/src/features/notifiers/ui/NotifierCardComponent.tsx

@@ -17,13 +17,13 @@ export const NotifierCardComponent = ({
 }: Props) => {
   return (
     <div
-      className={`mb-3 cursor-pointer rounded p-3 shadow ${selectedNotifierId === notifier.id ? 'bg-blue-100' : 'bg-white'}`}
+      className={`mb-3 cursor-pointer rounded p-3 shadow ${selectedNotifierId === notifier.id ? 'bg-blue-100 dark:bg-blue-800' : 'bg-white dark:bg-gray-800'}`}
       onClick={() => setSelectedNotifierId(notifier.id)}
     >
       <div className="mb-1 font-bold">{notifier.name}</div>
 
       <div className="flex items-center">
-        <div className="text-sm text-gray-500">
+        <div className="text-sm text-gray-500 dark:text-gray-400">
           Notify to {getNotifierNameFromType(notifier.notifierType)}
         </div>
 
@@ -35,7 +35,7 @@ export const NotifierCardComponent = ({
       </div>
 
       {notifier.lastSendError && (
-        <div className="mt-1 flex items-center text-sm text-red-600 underline">
+        <div className="mt-1 flex items-center text-sm text-red-600 underline dark:text-red-400">
           <InfoCircleOutlined className="mr-1" style={{ color: 'red' }} />
           Has send error
         </div>

frontend/src/features/notifiers/ui/NotifierComponent.tsx

@@ -124,7 +124,7 @@ export const NotifierComponent = ({
 
   return (
     <div className="w-full">
-      <div className="grow overflow-y-auto rounded bg-white p-5 shadow">
+      <div className="grow overflow-y-auto rounded bg-white p-5 shadow dark:bg-gray-800">
         {!notifier ? (
           <div className="mt-10 flex justify-center">
             <Spin />
@@ -166,7 +166,7 @@ export const NotifierComponent = ({
                         setEditNotifier(undefined);
                       }}
                     >
-                      <CloseOutlined className="text-gray-500" />
+                      <CloseOutlined className="text-gray-500 dark:text-gray-400" />
                     </Button>
                   </div>
                 </div>
@@ -198,7 +198,7 @@ export const NotifierComponent = ({
                   {notifier.lastSendError}
                 </div>
 
-                <div className="mt-3 text-sm break-words whitespace-pre-wrap text-gray-500">
+                <div className="mt-3 text-sm break-words whitespace-pre-wrap text-gray-500 dark:text-gray-400">
                   To clean this error (choose any):
                   <ul>
                     <li>
@@ -246,7 +246,6 @@ export const NotifierComponent = ({
                 <Button
                   type="primary"
                   className="mr-1"
-                  ghost
                   onClick={sendTestNotification}
                   loading={isSendingTestNotification}
                   disabled={isSendingTestNotification}

frontend/src/features/notifiers/ui/NotifiersComponent.tsx

@@ -111,7 +111,7 @@ export const NotifiersComponent = ({ contentHeight, workspace, isCanManageNotifi
                     placeholder="Search notifier"
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
-                    className="w-full border-b border-gray-300 p-1 text-gray-500 outline-none"
+                    className="w-full border-b border-gray-300 p-1 text-gray-500 outline-none dark:text-gray-400"
                   />
                 </div>
               </>
@@ -127,14 +127,14 @@ export const NotifiersComponent = ({ contentHeight, workspace, isCanManageNotifi
                   />
                 ))
               : searchQuery && (
-                  <div className="mb-4 text-center text-sm text-gray-500">
+                  <div className="mb-4 text-center text-sm text-gray-500 dark:text-gray-400">
                     No notifiers found matching &quot;{searchQuery}&quot;
                   </div>
                 )}
 
             {notifiers.length < 5 && isCanManageNotifiers && addNotifierButton}
 
-            <div className="mx-3 text-center text-xs text-gray-500">
+            <div className="mx-3 text-center text-xs text-gray-500 dark:text-gray-400">
               Notifier - is a place where notifications will be sent (email, Slack, Telegram, etc.)
             </div>
           </div>
@@ -179,7 +179,7 @@ export const NotifiersComponent = ({ contentHeight, workspace, isCanManageNotifi
           open={isShowAddNotifier}
           onCancel={() => setIsShowAddNotifier(false)}
         >
-          <div className="my-3 max-w-[250px] text-gray-500">
+          <div className="my-3 max-w-[250px] text-gray-500 dark:text-gray-400">
             Notifier - is a place where notifications will be sent (email, Slack, Telegram, etc.)
           </div>
 

frontend/src/features/notifiers/ui/edit/notifiers/EditDiscordNotifierComponent.tsx

@@ -33,7 +33,7 @@ export function EditDiscordNotifierComponent({ notifier, setNotifier, setUnsaved
       </div>
 
       <div className="max-w-[250px] sm:ml-[150px]">
-        <div className="mt-1 text-xs text-gray-500">
+        <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
           <strong>How to get Discord webhook URL:</strong>
           <br />
           <br />

frontend/src/features/notifiers/ui/edit/notifiers/EditTelegramNotifierComponent.tsx

@@ -99,7 +99,7 @@ export function EditTelegramNotifierComponent({ notifier, setNotifier, setUnsave
             How to get Telegram chat ID?
           </div>
         ) : (
-          <div className="mt-1 text-xs text-gray-500">
+          <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
             To get your chat ID, message{' '}
             <a href="https://t.me/getmyid_bot" target="_blank" rel="noreferrer">
               @getmyid_bot
@@ -186,7 +186,7 @@ export function EditTelegramNotifierComponent({ notifier, setNotifier, setUnsave
           </div>
 
           <div className="max-w-[250px] sm:ml-[150px]">
-            <div className="mt-1 text-xs text-gray-500">
+            <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
               To get the thread ID, go to the thread in your Telegram group, tap on the thread name
               at the top, then tap &ldquo;Thread Info&rdquo;. Copy the thread link and take the last
               number from the URL.

frontend/src/features/restores/ui/RestoresComponent.tsx

@@ -211,7 +211,7 @@ export const RestoresComponent = ({ database, backup }: Props) => {
                       <div className="w-[75px] min-w-[75px]">Duration</div>
                       <div>
                         <div>{duration}</div>
-                        <div className="mt-2 text-xs text-gray-500">
+                        <div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
                           Expected restoration time usually 3x-5x longer than the backup duration
                           (sometimes less, sometimes more depending on data type)
                           <br />

frontend/src/features/settings/ui/AuditLogsComponent.tsx

@@ -105,7 +105,7 @@ export function AuditLogsComponent({ scrollContainerRef: externalScrollRef }: Pr
       render: (_, record: AuditLog) => {
         if (!record.userEmail && !record.userName) {
           return (
-            <span className="inline-block rounded-full bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-600">
+            <span className="inline-block rounded-full bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
               System
             </span>
           );
@@ -116,7 +116,7 @@ export function AuditLogsComponent({ scrollContainerRef: externalScrollRef }: Pr
           : record.userEmail;
 
         return (
-          <span className="inline-block rounded-full bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-800">
+          <span className="inline-block rounded-full bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200">
             {displayText}
           </span>
         );
@@ -126,7 +126,9 @@ export function AuditLogsComponent({ scrollContainerRef: externalScrollRef }: Pr
       title: 'Message',
       dataIndex: 'message',
       key: 'message',
-      render: (message: string) => <span className="text-xs text-gray-900">{message}</span>,
+      render: (message: string) => (
+        <span className="text-xs text-gray-900 dark:text-gray-100">{message}</span>
+      ),
     },
     {
       title: 'Workspace',
@@ -136,7 +138,9 @@ export function AuditLogsComponent({ scrollContainerRef: externalScrollRef }: Pr
       render: (workspaceId: string | undefined) => (
         <span
           className={`inline-block rounded-full px-1.5 py-0.5 text-xs font-medium ${
-            workspaceId ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-600'
+            workspaceId
+              ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
+              : 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300'
           }`}
         >
           {workspaceId || '-'}
@@ -152,7 +156,7 @@ export function AuditLogsComponent({ scrollContainerRef: externalScrollRef }: Pr
         const date = dayjs(createdAt);
         const timeFormat = getUserTimeFormat();
         return (
-          <span className="text-xs text-gray-700">
+          <span className="text-xs text-gray-700 dark:text-gray-300">
             {`${date.format(timeFormat.format)} (${date.fromNow()})`}
           </span>
         );
@@ -167,7 +171,7 @@ export function AuditLogsComponent({ scrollContainerRef: externalScrollRef }: Pr
     const getUserDisplay = () => {
       if (!log.userEmail && !log.userName) {
         return (
-          <span className="inline-block rounded-full bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-600">
+          <span className="inline-block rounded-full bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
             System
           </span>
         );
@@ -176,25 +180,28 @@ export function AuditLogsComponent({ scrollContainerRef: externalScrollRef }: Pr
       const displayText = log.userName ? `${log.userName} (${log.userEmail})` : log.userEmail;
 
       return (
-        <span className="inline-block rounded-full bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-800">
+        <span className="inline-block rounded-full bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200">
           {displayText}
         </span>
       );
     };
 
     return (
-      <div key={log.id} className="mb-3 rounded-lg border border-gray-200 bg-white p-3 shadow-sm">
+      <div
+        key={log.id}
+        className="mb-3 rounded-lg border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-800"
+      >
         <div className="flex items-start justify-between">
           <div className="flex-1">{getUserDisplay()}</div>
-          <div className="text-right text-xs text-gray-500">
+          <div className="text-right text-xs text-gray-500 dark:text-gray-400">
             <div>{date.format(timeFormat.format)}</div>
-            <div className="text-gray-400">{date.fromNow()}</div>
+            <div className="text-gray-400 dark:text-gray-500">{date.fromNow()}</div>
           </div>
         </div>
-        <div className="mt-2 text-sm text-gray-900">{log.message}</div>
+        <div className="mt-2 text-sm text-gray-900 dark:text-gray-100">{log.message}</div>
         {log.workspaceName && (
           <div className="mt-2">
-            <span className="inline-block rounded-full bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-800">
+            <span className="inline-block rounded-full bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200">
               {log.workspaceName}
             </span>
           </div>
@@ -206,8 +213,8 @@ export function AuditLogsComponent({ scrollContainerRef: externalScrollRef }: Pr
   return (
     <div className="max-w-[1200px]">
       <div className="mb-4 flex items-center justify-between">
-        <h2 className="text-xl font-bold">Audit Logs</h2>
-        <div className="text-sm text-gray-500">
+        <h2 className="text-xl font-bold dark:text-white">Audit Logs</h2>
+        <div className="text-sm text-gray-500 dark:text-gray-400">
           {isLoading ? (
             <Spin indicator={<LoadingOutlined spin />} />
           ) : (
@@ -221,7 +228,7 @@ export function AuditLogsComponent({ scrollContainerRef: externalScrollRef }: Pr
           <Spin indicator={<LoadingOutlined spin />} size="large" />
         </div>
       ) : auditLogs.length === 0 ? (
-        <div className="flex h-32 items-center justify-center text-gray-500">
+        <div className="flex h-32 items-center justify-center text-gray-500 dark:text-gray-400">
           No audit logs found.
         </div>
       ) : (
@@ -242,12 +249,14 @@ export function AuditLogsComponent({ scrollContainerRef: externalScrollRef }: Pr
           {isLoadingMore && (
             <div className="flex justify-center py-4">
               <Spin indicator={<LoadingOutlined spin />} />
-              <span className="ml-2 text-sm text-gray-500">Loading more logs...</span>
+              <span className="ml-2 text-sm text-gray-500 dark:text-gray-400">
+                Loading more logs...
+              </span>
             </div>
           )}
 
           {!hasMore && auditLogs.length > 0 && (
-            <div className="py-4 text-center text-sm text-gray-500">
+            <div className="py-4 text-center text-sm text-gray-500 dark:text-gray-400">
               All logs loaded ({auditLogs.length} total)
             </div>
           )}

frontend/src/features/settings/ui/SettingsComponent.tsx

@@ -95,10 +95,10 @@ export function SettingsComponent({ contentHeight }: Props) {
       <div className="w-full">
         <div
           ref={scrollContainerRef}
-          className="grow overflow-y-auto rounded bg-white p-5 shadow"
+          className="grow overflow-y-auto rounded bg-white p-5 shadow dark:bg-gray-800"
           style={{ height: contentHeight }}
         >
-          <h1 className="text-2xl font-bold">Postgresus settings</h1>
+          <h1 className="text-2xl font-bold dark:text-white">Postgresus settings</h1>
 
           <div className="mt-6">
             {isLoading ? (
@@ -109,10 +109,12 @@ export function SettingsComponent({ contentHeight }: Props) {
               <div className="max-w-lg text-sm">
                 <div className="space-y-6">
                   {/* External Registrations Setting */}
-                  <div className="flex items-start justify-between border-b border-gray-200 pb-4">
+                  <div className="flex items-start justify-between border-b border-gray-200 pb-4 dark:border-gray-700">
                     <div className="flex-1 pr-20">
-                      <div className="font-medium text-gray-900">Allow external registrations</div>
-                      <div className="mt-1 text-gray-500">
+                      <div className="font-medium text-gray-900 dark:text-white">
+                        Allow external registrations
+                      </div>
+                      <div className="mt-1 text-gray-500 dark:text-gray-400">
                         When enabled, new users can register accounts in Postgresus. If disabled,
                         new users can only register via invitation
                       </div>
@@ -135,11 +137,13 @@ export function SettingsComponent({ contentHeight }: Props) {
 
                   {/* Member Invitations Setting */}
                   {!formSettings.isAllowExternalRegistrations && (
-                    <div className="flex items-start justify-between border-b border-gray-200 pb-4">
+                    <div className="flex items-start justify-between border-b border-gray-200 pb-4 dark:border-gray-700">
                       <div className="flex-1 pr-20">
-                        <div className="font-medium text-gray-900">Allow member invitations</div>
+                        <div className="font-medium text-gray-900 dark:text-white">
+                          Allow member invitations
+                        </div>
 
-                        <div className="mt-1 text-gray-500">
+                        <div className="mt-1 text-gray-500 dark:text-gray-400">
                           When enabled, existing members can invite new users to join Postgresus. If
                           not - only admins can invite users.
                         </div>
@@ -162,11 +166,13 @@ export function SettingsComponent({ contentHeight }: Props) {
                   )}
 
                   {/* Member Workspace Creation Setting */}
-                  <div className="flex items-start justify-between border-b border-gray-200 pb-4">
+                  <div className="flex items-start justify-between border-b border-gray-200 pb-4 dark:border-gray-700">
                     <div className="flex-1 pr-20">
-                      <div className="font-medium text-gray-900">Members can create workspaces</div>
+                      <div className="font-medium text-gray-900 dark:text-white">
+                        Members can create workspaces
+                      </div>
 
-                      <div className="mt-1 text-gray-500">
+                      <div className="mt-1 text-gray-500 dark:text-gray-400">
                         When enabled, members (non-admin users) can create new workspaces. If not -
                         only admins can create workspaces.
                       </div>
@@ -209,7 +215,7 @@ export function SettingsComponent({ contentHeight }: Props) {
             )}
           </div>
 
-          <div className="mt-3 text-sm text-gray-500">
+          <div className="mt-3 text-sm text-gray-500 dark:text-gray-400">
             Read more about settings you can{' '}
             <a
               href="https://postgresus.com/access-management/#global-settings"
@@ -223,10 +229,10 @@ export function SettingsComponent({ contentHeight }: Props) {
 
           {/* Health-check Information */}
           <div className="my-8 max-w-2xl">
-            <h2 className="mb-3 text-xl font-bold">Health-check</h2>
+            <h2 className="mb-3 text-xl font-bold dark:text-white">Health-check</h2>
 
             <div className="group relative">
-              <div className="flex items-center rounded-md border border-gray-300 bg-gray-50 px-3 py-2 !font-mono text-sm text-gray-700">
+              <div className="flex items-center rounded-md border border-gray-300 bg-gray-50 px-3 py-2 !font-mono text-sm text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200">
                 <code
                   className="flex-1 cursor-pointer break-all transition-colors select-all hover:text-blue-600"
                   onClick={() => {
@@ -248,7 +254,7 @@ export function SettingsComponent({ contentHeight }: Props) {
                   📋
                 </Button>
               </div>
-              <div className="mt-1 text-xs text-gray-500">
+              <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                 Use this endpoint to monitor your Postgresus system&apos;s availability
               </div>
             </div>

frontend/src/features/storages/ui/StorageCardComponent.tsx

@@ -17,13 +17,15 @@ export const StorageCardComponent = ({
 }: Props) => {
   return (
     <div
-      className={`mb-3 cursor-pointer rounded p-3 shadow ${selectedStorageId === storage.id ? 'bg-blue-100' : 'bg-white'}`}
+      className={`mb-3 cursor-pointer rounded p-3 shadow ${selectedStorageId === storage.id ? 'bg-blue-100 dark:bg-blue-800' : 'bg-white dark:bg-gray-800'}`}
       onClick={() => setSelectedStorageId(storage.id)}
     >
       <div className="mb-1 font-bold">{storage.name}</div>
 
       <div className="flex items-center">
-        <div className="text-sm text-gray-500">Type: {getStorageNameFromType(storage.type)}</div>
+        <div className="text-sm text-gray-500 dark:text-gray-400">
+          Type: {getStorageNameFromType(storage.type)}
+        </div>
 
         <img
           src={getStorageLogoFromType(storage.type)}
@@ -33,7 +35,7 @@ export const StorageCardComponent = ({
       </div>
 
       {storage.lastSaveError && (
-        <div className="mt-1 flex items-center text-sm text-red-600 underline">
+        <div className="mt-1 flex items-center text-sm text-red-600 underline dark:text-red-400">
           <InfoCircleOutlined className="mr-1" style={{ color: 'red' }} />
           Has save error
         </div>

frontend/src/features/storages/ui/StorageComponent.tsx

@@ -122,7 +122,7 @@ export const StorageComponent = ({
 
   return (
     <div className="w-full">
-      <div className="grow overflow-y-auto rounded bg-white p-5 shadow">
+      <div className="grow overflow-y-auto rounded bg-white p-5 shadow dark:bg-gray-800">
         {!storage ? (
           <div className="mt-10 flex justify-center">
             <Spin />
@@ -164,7 +164,7 @@ export const StorageComponent = ({
                         setEditStorage(undefined);
                       }}
                     >
-                      <CloseOutlined className="text-gray-500" />
+                      <CloseOutlined className="text-gray-500 dark:text-gray-400" />
                     </Button>
                   </div>
                 </div>
@@ -196,7 +196,7 @@ export const StorageComponent = ({
                   {storage.lastSaveError}
                 </div>
 
-                <div className="mt-3 text-sm break-words whitespace-pre-wrap text-gray-500">
+                <div className="mt-3 text-sm break-words whitespace-pre-wrap text-gray-500 dark:text-gray-400">
                   To clean this error (choose any):
                   <ul>
                     <li>- test connection via button below (even if you updated settings);</li>
@@ -242,7 +242,6 @@ export const StorageComponent = ({
                 <Button
                   type="primary"
                   className="mr-1"
-                  ghost
                   onClick={testConnection}
                   loading={isTestingConnection}
                   disabled={isTestingConnection}

frontend/src/features/storages/ui/StoragesComponent.tsx

@@ -100,7 +100,7 @@ export const StoragesComponent = ({ contentHeight, workspace, isCanManageStorage
 
             {storages.length < 5 && isCanManageStorages && addStorageButton}
 
-            <div className="mx-3 text-center text-xs text-gray-500">
+            <div className="mx-3 text-center text-xs text-gray-500 dark:text-gray-400">
               Storage - is a place where backups will be stored (local disk, S3, etc.)
             </div>
           </div>
@@ -145,7 +145,7 @@ export const StoragesComponent = ({ contentHeight, workspace, isCanManageStorage
           open={isShowAddStorage}
           onCancel={() => setIsShowAddStorage(false)}
         >
-          <div className="my-3 max-w-[250px] text-gray-500">
+          <div className="my-3 max-w-[250px] text-gray-500 dark:text-gray-400">
             Storage - is a place where backups will be stored (local disk, S3, etc.)
           </div>
 

frontend/src/features/storages/ui/edit/storages/EditS3StorageComponent.tsx

@@ -183,13 +183,16 @@ export function EditS3StorageComponent({ storage, setStorage, setUnsaved }: Prop
                 size="small"
                 className="w-full max-w-[250px]"
                 placeholder="my-prefix/ (optional)"
+                // we do not allow to change the prefix after creation,
+                // otherwise we will have to migrate all the data to the new prefix
+                disabled={!!storage.id}
               />
 
               <Tooltip
                 className="cursor-pointer"
-                title="Optional prefix for all object keys (e.g., 'backups/' or 'my_team/'). May not work with some S3-compatible storages."
+                title="Optional prefix for all object keys (e.g., 'backups/' or 'my_team/'). May not work with some S3-compatible storages. Cannot be changed after creation (otherwise backups will be lost)."
               >
-                <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
+                <InfoCircleOutlined className="ml-4" style={{ color: 'gray' }} />
               </Tooltip>
             </div>
           </div>

frontend/src/features/users/ui/AdminPasswordComponent.tsx

@@ -81,7 +81,7 @@ export function AdminPasswordComponent({
     <div className="w-full max-w-[300px]">
       <div className="mb-5 text-center text-2xl font-bold">Sign up admin</div>
 
-      <div className="mx-auto mb-4 max-w-[250px] text-center text-sm text-gray-600">
+      <div className="mx-auto mb-4 max-w-[250px] text-center text-sm text-gray-600 dark:text-gray-400">
         Then you will be able to sign in with login &quot;admin&quot; and password you set
       </div>
 

frontend/src/features/users/ui/AuthNavbarComponent.tsx

@@ -1,15 +1,22 @@
 import GitHubButton from 'react-github-btn';
 
+import { ThemeToggleComponent } from '../../../widgets/main/ThemeToggleComponent';
+
 export function AuthNavbarComponent() {
   return (
-    <div className="m-3 flex h-[65px] items-center justify-center p-3 sm:justify-start">
+    <div className="flex h-[65px] items-center justify-center px-5 pt-5 sm:justify-start">
       <div className="flex items-center gap-3 hover:opacity-80">
         <a href="https://postgresus.com" target="_blank" rel="noreferrer">
           <img className="h-[45px] w-[45px]" src="/logo.svg" />
         </a>
 
         <div className="text-xl font-bold">
-          <a href="https://postgresus.com" className="!text-black" target="_blank" rel="noreferrer">
+          <a
+            href="https://postgresus.com"
+            className="!text-blue-600"
+            target="_blank"
+            rel="noreferrer"
+          >
             Postgresus
           </a>
         </div>
@@ -17,7 +24,7 @@ export function AuthNavbarComponent() {
 
       <div className="mr-3 ml-auto hidden items-center gap-5 sm:flex">
         <a
-          className="!text-black hover:opacity-80"
+          className="!text-black hover:opacity-80 dark:!text-gray-200"
           href="https://t.me/postgresus_community"
           target="_blank"
           rel="noreferrer"
@@ -25,7 +32,7 @@ export function AuthNavbarComponent() {
           Community
         </a>
 
-        <div className="mt-1">
+        <div className="mt-[7px]">
           <GitHubButton
             href="https://github.com/RostislavDugin/postgresus"
             data-icon="octicon-star"
@@ -36,6 +43,8 @@ export function AuthNavbarComponent() {
             &nbsp;Star on GitHub
           </GitHubButton>
         </div>
+
+        <ThemeToggleComponent />
       </div>
     </div>
   );

frontend/src/features/users/ui/ProfileComponent.tsx

@@ -200,21 +200,23 @@ export function ProfileComponent({ contentHeight }: Props) {
     <div className="flex grow sm:pl-5">
       <div className="w-full">
         <div
-          className="grow overflow-y-auto rounded bg-white p-5 shadow"
+          className="grow overflow-y-auto rounded bg-white p-5 shadow dark:bg-gray-800"
           style={{ height: contentHeight }}
         >
-          <h1 className="text-2xl font-bold">Profile</h1>
+          <h1 className="text-2xl font-bold dark:text-white">Profile</h1>
 
           <div className="mt-5">
             {user ? (
               <>
                 <div className="mb-6">
-                  <h3 className="mb-4 text-lg font-semibold">Profile Information</h3>
+                  <h3 className="mb-4 text-lg font-semibold dark:text-white">
+                    Profile Information
+                  </h3>
                   <div className="max-w-md">
-                    <div className="text-xs font-semibold">User ID</div>
-                    <div className="mb-4 text-sm text-gray-600">{user.id}</div>
+                    <div className="text-xs font-semibold dark:text-gray-200">User ID</div>
+                    <div className="mb-4 text-sm text-gray-600 dark:text-gray-400">{user.id}</div>
 
-                    <div className="mb-1 text-xs font-semibold">Name</div>
+                    <div className="mb-1 text-xs font-semibold dark:text-gray-200">Name</div>
                     <Input
                       value={editName}
                       onChange={(e) => {
@@ -226,7 +228,7 @@ export function ProfileComponent({ contentHeight }: Props) {
                       className="mb-4"
                     />
 
-                    <div className="mt-2 mb-1 text-xs font-semibold">Email</div>
+                    <div className="mt-2 mb-1 text-xs font-semibold dark:text-gray-200">Email</div>
                     <Input
                       value={editEmail}
                       onChange={(e) => {
@@ -240,14 +242,14 @@ export function ProfileComponent({ contentHeight }: Props) {
                       disabled={user.email === 'admin'}
                     />
                     {user.email === 'admin' && (
-                      <div className="mb-4 text-xs text-gray-500">
+                      <div className="mb-4 text-xs text-gray-500 dark:text-gray-400">
                         Admin email cannot be changed
                       </div>
                     )}
 
-                    <div className="mt-2 mb-1 text-xs font-semibold">Role</div>
+                    <div className="mt-2 mb-1 text-xs font-semibold dark:text-gray-200">Role</div>
                     <div className="mb-4">
-                      <span className="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800">
+                      <span className="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                         {getRoleDisplayText(user.role)}
                       </span>
                     </div>
@@ -267,16 +269,18 @@ export function ProfileComponent({ contentHeight }: Props) {
                 </div>
 
                 <div className="mb-8">
-                  <Button type="default" onClick={handleLogout} danger>
+                  <Button type="primary" ghost onClick={handleLogout} danger>
                     Logout
                   </Button>
                 </div>
 
                 <div className="max-w-xs">
-                  <h3 className="mb-4 text-lg font-semibold">Change Password</h3>
+                  <h3 className="mb-4 text-lg font-semibold dark:text-white">Change Password</h3>
 
                   <div className="max-w-sm">
-                    <div className="my-1 text-xs font-semibold">New Password</div>
+                    <div className="my-1 text-xs font-semibold dark:text-gray-200">
+                      New Password
+                    </div>
                     <Input.Password
                       placeholder="Enter new password"
                       value={newPassword}
@@ -294,7 +298,9 @@ export function ProfileComponent({ contentHeight }: Props) {
                       }}
                     />
 
-                    <div className="mt-2 mb-1 text-xs font-semibold">Confirm New Password</div>
+                    <div className="mt-2 mb-1 text-xs font-semibold dark:text-gray-200">
+                      Confirm New Password
+                    </div>
                     <Input.Password
                       placeholder="Confirm new password"
                       value={confirmPassword}

frontend/src/features/users/ui/SignInComponent.tsx

@@ -75,7 +75,7 @@ export function SignInComponent({ onSwitchToSignUp }: SignInComponentProps): JSX
             <div className="w-full border-t border-gray-300"></div>
           </div>
           <div className="relative flex justify-center text-sm">
-            <span className="bg-white px-2 text-gray-500">or continue</span>
+            <span className="bg-white px-2 text-gray-500 dark:text-gray-400">or continue</span>
           </div>
         </div>
       )}
@@ -126,12 +126,12 @@ export function SignInComponent({ onSwitchToSignUp }: SignInComponentProps): JSX
       )}
 
       {onSwitchToSignUp && (
-        <div className="mt-4 text-center text-sm text-gray-600">
+        <div className="mt-4 text-center text-sm text-gray-600 dark:text-gray-400">
           Don&apos;t have an account?{' '}
           <button
             type="button"
             onClick={onSwitchToSignUp}
-            className="cursor-pointer font-medium text-blue-600 hover:text-blue-700"
+            className="cursor-pointer font-medium text-blue-600 hover:text-blue-700 dark:!text-blue-500"
           >
             Sign up
           </button>

frontend/src/features/users/ui/SignUpComponent.tsx

@@ -106,7 +106,7 @@ export function SignUpComponent({ onSwitchToSignIn }: SignUpComponentProps): JSX
             <div className="w-full border-t border-gray-300"></div>
           </div>
           <div className="relative flex justify-center text-sm">
-            <span className="bg-white px-2 text-gray-500">or continue</span>
+            <span className="bg-white px-2 text-gray-500 dark:text-gray-400">or continue</span>
           </div>
         </div>
       )}
@@ -184,12 +184,12 @@ export function SignUpComponent({ onSwitchToSignIn }: SignUpComponentProps): JSX
       )}
 
       {onSwitchToSignIn && (
-        <div className="mt-4 text-center text-sm text-gray-600">
+        <div className="mt-4 text-center text-sm text-gray-600 dark:text-gray-400">
           Already have an account?{' '}
           <button
             type="button"
             onClick={onSwitchToSignIn}
-            className="cursor-pointer font-medium text-blue-600 hover:text-blue-700"
+            className="cursor-pointer font-medium text-blue-600 hover:text-blue-700 dark:!text-blue-500"
           >
             Sign in
           </button>

frontend/src/features/users/ui/UserAuditLogsSidebarComponent.tsx

@@ -139,7 +139,7 @@ export function UserAuditLogsSidebarComponent({ user }: Props) {
     <div className="h-full">
       <div ref={scrollContainerRef} className="h-full overflow-y-auto">
         <div className="mb-4 flex items-center justify-between">
-          <div className="text-sm text-gray-500">
+          <div className="text-sm text-gray-500 dark:text-gray-400">
             {isLoading ? (
               <Spin indicator={<LoadingOutlined spin />} />
             ) : (
@@ -166,18 +166,20 @@ export function UserAuditLogsSidebarComponent({ user }: Props) {
             {isLoadingMore && (
               <div className="flex justify-center py-4">
                 <Spin indicator={<LoadingOutlined spin />} />
-                <span className="ml-2 text-sm text-gray-500">Loading more logs...</span>
+                <span className="ml-2 text-sm text-gray-500 dark:text-gray-400">
+                  Loading more logs...
+                </span>
               </div>
             )}
 
             {!hasMore && auditLogs.length > 0 && (
-              <div className="py-4 text-center text-sm text-gray-500">
+              <div className="py-4 text-center text-sm text-gray-500 dark:text-gray-400">
                 All logs loaded ({total} total)
               </div>
             )}
 
             {!isLoading && auditLogs.length === 0 && (
-              <div className="py-8 text-center text-sm text-gray-500">
+              <div className="py-8 text-center text-sm text-gray-500 dark:text-gray-400">
                 No audit logs found for this user.
               </div>
             )}

frontend/src/features/users/ui/UsersComponent.tsx

@@ -272,9 +272,9 @@ export function UsersComponent({ contentHeight }: Props) {
         const date = dayjs(createdAt);
         const timeFormat = getUserTimeFormat();
         return (
-          <div className="text-sm text-gray-600">
+          <div className="text-sm text-gray-600 dark:text-gray-400">
             <div>{date.format(timeFormat.format)}</div>
-            <div className="text-xs text-gray-400">{date.fromNow()}</div>
+            <div className="text-xs text-gray-400 dark:text-gray-500">{date.fromNow()}</div>
           </div>
         );
       },
@@ -297,13 +297,16 @@ export function UsersComponent({ contentHeight }: Props) {
     const timeFormat = getUserTimeFormat();
 
     return (
-      <div key={user.id} className="mb-3 rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
+      <div
+        key={user.id}
+        className="mb-3 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800"
+      >
         <div className="mb-3 flex items-start justify-between">
           <div className="flex-1">
-            <div className="font-medium text-gray-900">{user.name}</div>
-            <div className="text-sm text-gray-500">{user.email}</div>
+            <div className="font-medium text-gray-900 dark:text-white">{user.name}</div>
+            <div className="text-sm text-gray-500 dark:text-gray-400">{user.email}</div>
           </div>
-          <div className="text-right text-xs text-gray-500">
+          <div className="text-right text-xs text-gray-500 dark:text-gray-400">
             <div>{date.format(timeFormat.format)}</div>
             <div className="text-gray-400">{date.fromNow()}</div>
           </div>
@@ -311,7 +314,7 @@ export function UsersComponent({ contentHeight }: Props) {
 
         <div className="mb-3 flex items-center justify-between">
           <div className="flex items-center gap-2">
-            <span className="text-sm text-gray-600">Role:</span>
+            <span className="text-sm text-gray-600 dark:text-gray-400">Role:</span>
             <Select
               value={user.role}
               onChange={(value) => handleRoleChange(user.id, value)}
@@ -335,7 +338,7 @@ export function UsersComponent({ contentHeight }: Props) {
             />
           </div>
           <div className="flex items-center gap-2">
-            <span className="text-sm text-gray-600">Active:</span>
+            <span className="text-sm text-gray-600 dark:text-gray-400">Active:</span>
             <Switch
               checked={user.isActive}
               onChange={() => handleActivationToggle(user.id, user.isActive)}
@@ -367,12 +370,12 @@ export function UsersComponent({ contentHeight }: Props) {
       <div className="w-full">
         <div
           ref={scrollContainerRef}
-          className="grow overflow-y-auto rounded bg-white p-5 shadow"
+          className="grow overflow-y-auto rounded bg-white p-5 shadow dark:bg-gray-800"
           style={{ height: contentHeight }}
         >
           <div className="mb-4 flex items-center justify-between">
-            <h1 className="text-2xl font-bold">Postgresus Users</h1>
-            <div className="text-sm text-gray-500">
+            <h1 className="text-2xl font-bold dark:text-white">Postgresus users</h1>
+            <div className="text-sm text-gray-500 dark:text-gray-400">
               {isLoading ? 'Loading...' : `${users.length} of ${total} users`}
             </div>
           </div>
@@ -392,7 +395,7 @@ export function UsersComponent({ contentHeight }: Props) {
               <Spin indicator={<LoadingOutlined spin />} size="large" />
             </div>
           ) : users.length === 0 ? (
-            <div className="flex h-32 items-center justify-center text-gray-500">
+            <div className="flex h-32 items-center justify-center text-gray-500 dark:text-gray-400">
               No users found.
             </div>
           ) : (
@@ -417,7 +420,7 @@ export function UsersComponent({ contentHeight }: Props) {
               )}
 
               {!hasMore && users.length > 0 && (
-                <div className="py-4 text-center text-sm text-gray-500">
+                <div className="py-4 text-center text-sm text-gray-500 dark:text-gray-400">
                   All users loaded ({total} total)
                 </div>
               )}
@@ -430,8 +433,10 @@ export function UsersComponent({ contentHeight }: Props) {
       <Drawer
         title={
           <div>
-            <div className="text-lg font-semibold text-gray-900">User Audit Logs</div>
-            <div className="text-sm text-gray-600">{selectedUser?.email}</div>
+            <div className="text-lg font-semibold text-gray-900 dark:text-white">
+              User Audit Logs
+            </div>
+            <div className="text-sm text-gray-600 dark:text-gray-400">{selectedUser?.email}</div>
           </div>
         }
         placement="right"

frontend/src/features/workspaces/ui/CreateWorkspaceDialogComponent.tsx

@@ -100,7 +100,7 @@ export const CreateWorkspaceDialogComponent = ({
       ]}
     >
       <div className="mb-4">
-        <div>
+        <div className="dark:text-gray-300">
           Workspace is a place where you group:
           <br />
           - your databases;
@@ -111,7 +111,9 @@ export const CreateWorkspaceDialogComponent = ({
           <br />- access control (if you have team);
         </div>
 
-        <label className="mt-5 mb-2 block text-sm font-medium text-gray-700">Workspace name</label>
+        <label className="mt-5 mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+          Workspace name
+        </label>
         <Input
           value={workspaceName}
           onChange={(e) => setWorkspaceName(e.target.value)}

frontend/src/features/workspaces/ui/WorkspaceAuditLogsComponent.tsx

@@ -111,7 +111,7 @@ export function WorkspaceAuditLogsComponent({
       render: (_, record: AuditLog) => {
         if (!record.userEmail && !record.userName) {
           return (
-            <span className="inline-block rounded-full bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-600">
+            <span className="inline-block rounded-full bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
               System
             </span>
           );
@@ -122,7 +122,7 @@ export function WorkspaceAuditLogsComponent({
           : record.userEmail;
 
         return (
-          <span className="inline-block rounded-full bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-800">
+          <span className="inline-block rounded-full bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200">
             {displayText}
           </span>
         );
@@ -132,7 +132,9 @@ export function WorkspaceAuditLogsComponent({
       title: 'Message',
       dataIndex: 'message',
       key: 'message',
-      render: (message: string) => <span className="text-xs text-gray-900">{message}</span>,
+      render: (message: string) => (
+        <span className="text-xs text-gray-900 dark:text-gray-100">{message}</span>
+      ),
     },
     {
       title: 'Created',
@@ -143,7 +145,7 @@ export function WorkspaceAuditLogsComponent({
         const date = dayjs(createdAt);
         const timeFormat = getUserShortTimeFormat();
         return (
-          <span className="text-xs text-gray-700">
+          <span className="text-xs text-gray-700 dark:text-gray-300">
             {`${date.format(timeFormat.format)} (${date.fromNow()})`}
           </span>
         );
@@ -158,7 +160,7 @@ export function WorkspaceAuditLogsComponent({
     const getUserDisplay = () => {
       if (!log.userEmail && !log.userName) {
         return (
-          <span className="inline-block rounded-full bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-600">
+          <span className="inline-block rounded-full bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
             System
           </span>
         );
@@ -167,22 +169,25 @@ export function WorkspaceAuditLogsComponent({
       const displayText = log.userName ? `${log.userName} (${log.userEmail})` : log.userEmail;
 
       return (
-        <span className="inline-block rounded-full bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-800">
+        <span className="inline-block rounded-full bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200">
           {displayText}
         </span>
       );
     };
 
     return (
-      <div key={log.id} className="mb-3 rounded-lg border border-gray-200 bg-white p-3 shadow-sm">
+      <div
+        key={log.id}
+        className="mb-3 rounded-lg border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-800"
+      >
         <div className="flex items-start justify-between">
           <div className="flex-1">{getUserDisplay()}</div>
-          <div className="text-right text-xs text-gray-500">
+          <div className="text-right text-xs text-gray-500 dark:text-gray-400">
             <div>{date.format(timeFormat.format)}</div>
-            <div className="text-gray-400">{date.fromNow()}</div>
+            <div className="text-gray-400 dark:text-gray-500">{date.fromNow()}</div>
           </div>
         </div>
-        <div className="mt-2 text-sm text-gray-900">{log.message}</div>
+        <div className="mt-2 text-sm text-gray-900 dark:text-gray-100">{log.message}</div>
       </div>
     );
   };
@@ -194,8 +199,8 @@ export function WorkspaceAuditLogsComponent({
   return (
     <div className="max-w-[1200px]">
       <div className="mb-4 flex items-center justify-between">
-        <h2 className="text-xl font-bold text-gray-900">Audit logs</h2>
-        <div className="text-sm text-gray-500">
+        <h2 className="text-xl font-bold text-gray-900 dark:text-white">Audit logs</h2>
+        <div className="text-sm text-gray-500 dark:text-gray-400">
           {isLoading ? (
             <Spin indicator={<LoadingOutlined spin />} />
           ) : (
@@ -209,7 +214,7 @@ export function WorkspaceAuditLogsComponent({
           <Spin indicator={<LoadingOutlined spin />} size="large" />
         </div>
       ) : auditLogs.length === 0 ? (
-        <div className="flex h-32 items-center justify-center text-gray-500">
+        <div className="flex h-32 items-center justify-center text-gray-500 dark:text-gray-400">
           No audit logs found for this workspace.
         </div>
       ) : (
@@ -230,12 +235,14 @@ export function WorkspaceAuditLogsComponent({
           {isLoadingMore && (
             <div className="flex justify-center py-4">
               <Spin indicator={<LoadingOutlined spin />} />
-              <span className="ml-2 text-sm text-gray-500">Loading more logs...</span>
+              <span className="ml-2 text-sm text-gray-500 dark:text-gray-400">
+                Loading more logs...
+              </span>
             </div>
           )}
 
           {!hasMore && auditLogs.length > 0 && (
-            <div className="py-4 text-center text-sm text-gray-500">
+            <div className="py-4 text-center text-sm text-gray-500 dark:text-gray-400">
               All logs loaded ({auditLogs.length} total)
             </div>
           )}

frontend/src/features/workspaces/ui/WorkspaceMembershipComponent.tsx

@@ -315,10 +315,10 @@ export function WorkspaceMembershipComponent({ workspaceResponse, user }: Props)
       width: 300,
       render: (_, record: WorkspaceMemberResponse) => (
         <div className="flex items-center">
-          <UserOutlined className="mr-2 text-gray-400" />
+          <UserOutlined className="mr-2 text-gray-400 dark:text-gray-500" />
           <div>
-            <div className="font-medium">{record.name}</div>
-            <div className="text-xs text-gray-500">{record.email}</div>
+            <div className="font-medium dark:text-white">{record.name}</div>
+            <div className="text-xs text-gray-500 dark:text-gray-400">{record.email}</div>
           </div>
         </div>
       ),
@@ -360,9 +360,9 @@ export function WorkspaceMembershipComponent({ workspaceResponse, user }: Props)
         const date = dayjs(createdAt);
         const timeFormat = getUserShortTimeFormat();
         return (
-          <div className="text-sm text-gray-600">
+          <div className="text-sm text-gray-600 dark:text-gray-300">
             <div>{date.format(timeFormat.format)}</div>
-            <div className="text-xs text-gray-400">{date.fromNow()}</div>
+            <div className="text-xs text-gray-400 dark:text-gray-500">{date.fromNow()}</div>
           </div>
         );
       },
@@ -411,14 +411,14 @@ export function WorkspaceMembershipComponent({ workspaceResponse, user }: Props)
     return (
       <div
         key={member.id}
-        className="mb-3 rounded-lg border border-gray-200 bg-white p-3 shadow-sm"
+        className="mb-3 rounded-lg border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-800"
       >
         <div className="flex items-start justify-between">
           <div className="flex items-center">
-            <UserOutlined className="mr-2 text-gray-400" />
+            <UserOutlined className="mr-2 text-gray-400 dark:text-gray-500" />
             <div>
-              <div className="font-medium">{member.name}</div>
-              <div className="text-xs text-gray-500">{member.email}</div>
+              <div className="font-medium dark:text-white">{member.name}</div>
+              <div className="text-xs text-gray-500 dark:text-gray-400">{member.email}</div>
             </div>
           </div>
           {canManageMembers && member.role !== WorkspaceRole.OWNER && !isCurrentUser && (
@@ -444,7 +444,7 @@ export function WorkspaceMembershipComponent({ workspaceResponse, user }: Props)
 
         <div className="mt-3 flex items-center justify-between">
           <div>
-            <div className="text-xs text-gray-500">Role</div>
+            <div className="text-xs text-gray-500 dark:text-gray-400">Role</div>
             {canManageMembers && member.role !== WorkspaceRole.OWNER && !isCurrentUser ? (
               <Select
                 value={member.role}
@@ -464,9 +464,11 @@ export function WorkspaceMembershipComponent({ workspaceResponse, user }: Props)
             )}
           </div>
           <div className="text-right">
-            <div className="text-xs text-gray-500">Joined</div>
-            <div className="text-sm text-gray-600">{date.format(timeFormat.format)}</div>
-            <div className="text-xs text-gray-400">{date.fromNow()}</div>
+            <div className="text-xs text-gray-500 dark:text-gray-400">Joined</div>
+            <div className="text-sm text-gray-600 dark:text-gray-300">
+              {date.format(timeFormat.format)}
+            </div>
+            <div className="text-xs text-gray-400 dark:text-gray-500">{date.fromNow()}</div>
           </div>
         </div>
       </div>
@@ -476,7 +478,7 @@ export function WorkspaceMembershipComponent({ workspaceResponse, user }: Props)
   return (
     <div className="max-w-[850px]">
       <div className="mb-6 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-        <h2 className="text-xl font-bold text-gray-900">Users</h2>
+        <h2 className="text-xl font-bold text-gray-900 dark:text-white">Users</h2>
 
         <div className="flex flex-col gap-2 md:flex-row md:space-x-2">
           {canTransferOwnership && (
@@ -509,7 +511,7 @@ export function WorkspaceMembershipComponent({ workspaceResponse, user }: Props)
         </div>
       ) : (
         <div>
-          <div className="mb-4 text-sm text-gray-500">
+          <div className="mb-4 text-sm text-gray-500 dark:text-gray-400">
             {members.length === 0
               ? 'No members found'
               : `${members.length} member${members.length !== 1 ? 's' : ''}`}
@@ -517,7 +519,7 @@ export function WorkspaceMembershipComponent({ workspaceResponse, user }: Props)
 
           {isMobile ? (
             members.length === 0 ? (
-              <div className="py-8 text-center text-gray-500">
+              <div className="py-8 text-center text-gray-500 dark:text-gray-400">
                 <div className="mb-2">No members found</div>
                 {canManageMembers && (
                   <div className="text-sm">Click &quot;Add member&quot; to get started</div>
@@ -535,7 +537,7 @@ export function WorkspaceMembershipComponent({ workspaceResponse, user }: Props)
               size="small"
               locale={{
                 emptyText: (
-                  <div className="py-8 text-center text-gray-500">
+                  <div className="py-8 text-center text-gray-500 dark:text-gray-400">
                     <div className="mb-2">No members found</div>
                     {canManageMembers && (
                       <div className="text-sm">Click &quot;Add member&quot; to get started</div>
@@ -569,7 +571,7 @@ export function WorkspaceMembershipComponent({ workspaceResponse, user }: Props)
       >
         <div className="py-4">
           <div className="mb-4">
-            <div className="mb-2 font-medium text-gray-900">Email address</div>
+            <div className="mb-2 font-medium text-gray-900 dark:text-white">Email address</div>
             {user.role === UserRole.ADMIN ? (
               <AutoComplete
                 value={addMemberForm.email}
@@ -619,14 +621,14 @@ export function WorkspaceMembershipComponent({ workspaceResponse, user }: Props)
                 status={addMemberEmailError ? 'error' : undefined}
               />
             )}
-            <div className="mt-1 text-xs text-gray-500">
+            <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
               If the user exists, they will be added directly. Otherwise, an invitation will be
               sent.
             </div>
           </div>
 
           <div className="mb-4">
-            <div className="mb-2 font-medium text-gray-900">Role</div>
+            <div className="mb-2 font-medium text-gray-900 dark:text-white">Role</div>
             <Select
               value={addMemberForm.role}
               onChange={(role) => setAddMemberForm({ ...addMemberForm, role })}
@@ -655,10 +657,12 @@ export function WorkspaceMembershipComponent({ workspaceResponse, user }: Props)
       >
         <div className="py-4">
           <div className="flex items-center">
-            <UserAddOutlined className="mr-3 text-2xl text-blue-600" />
+            <UserAddOutlined className="mr-3 text-2xl text-blue-600 dark:text-blue-400" />
             <div>
-              <div className="font-medium text-gray-900">Invitation sent to {invitedEmail}</div>
-              <div className="mt-1 text-sm text-gray-600">
+              <div className="font-medium text-gray-900 dark:text-white">
+                Invitation sent to {invitedEmail}
+              </div>
+              <div className="mt-1 text-sm text-gray-600 dark:text-gray-300">
                 The user is not present in the system yet, but has been invited to the workspace.
                 After the user signs up via specified email, they will automatically become a member
                 of the workspace.
@@ -687,23 +691,23 @@ export function WorkspaceMembershipComponent({ workspaceResponse, user }: Props)
         }}
       >
         <div className="py-4">
-          <div className="mb-4 rounded-md bg-yellow-50 p-3">
-            <div className="text-sm text-yellow-800">
+          <div className="mb-4 rounded-md bg-yellow-50 p-3 dark:bg-yellow-900/30">
+            <div className="text-sm text-yellow-800 dark:text-yellow-200">
               <strong>Warning:</strong> This action cannot be undone. You will lose ownership of
               this workspace and the new owner will have full control.
             </div>
           </div>
 
           {eligibleMembers.length === 0 ? (
-            <div className="rounded-md bg-gray-50 p-4 text-center">
-              <div className="text-sm text-gray-600">
+            <div className="rounded-md bg-gray-50 p-4 text-center dark:bg-gray-700">
+              <div className="text-sm text-gray-600 dark:text-gray-300">
                 No members available to transfer ownership to. You need to have at least one other
                 member in the workspace to transfer ownership.
               </div>
             </div>
           ) : (
             <div className="mb-4">
-              <div className="mb-2 font-medium text-gray-900">Select new owner</div>
+              <div className="mb-2 font-medium text-gray-900 dark:text-white">Select new owner</div>
               <Select
                 value={transferForm.selectedMemberId || undefined}
                 onChange={(memberId) => {
@@ -716,7 +720,7 @@ export function WorkspaceMembershipComponent({ workspaceResponse, user }: Props)
                 options={eligibleMembers.map((member) => ({
                   label: (
                     <div className="flex items-center">
-                      <UserOutlined className="mr-2 text-gray-400" />
+                      <UserOutlined className="mr-2 text-gray-400 dark:text-gray-500" />
                       <div>
                         {member.name} ({member.email})
                       </div>
@@ -725,7 +729,7 @@ export function WorkspaceMembershipComponent({ workspaceResponse, user }: Props)
                   value: member.userId,
                 }))}
               />
-              <div className="mt-1 text-xs text-gray-500">
+              <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                 The selected member will become the workspace owner
               </div>
             </div>

frontend/src/features/workspaces/ui/WorkspaceSettingsComponent.tsx

@@ -169,27 +169,29 @@ export function WorkspaceSettingsComponent({ workspaceResponse, user, contentHei
       <div className="w-full">
         <div
           ref={scrollContainerRef}
-          className={`grow overflow-y-auto rounded bg-white shadow ${isMobile ? 'p-3' : 'p-5'}`}
+          className={`grow overflow-y-auto rounded bg-white shadow dark:bg-gray-800 ${isMobile ? 'p-3' : 'p-5'}`}
           style={{ height: contentHeight }}
         >
-          <h1 className="mb-6 text-2xl font-bold">Workspace settings</h1>
+          <h1 className="mb-6 text-2xl font-bold dark:text-white">Workspace settings</h1>
 
           {isLoading || !workspace ? (
             <Spin indicator={<LoadingOutlined spin />} size="large" />
           ) : (
             <>
               {!canEdit && (
-                <div className="my-4 max-w-[500px] rounded-md bg-yellow-50 p-3">
-                  <div className="text-sm text-yellow-800">
+                <div className="my-4 max-w-[500px] rounded-md bg-yellow-50 p-3 dark:bg-yellow-900/30">
+                  <div className="text-sm text-yellow-800 dark:text-yellow-200">
                     You don&apos;t have permission to modify these settings
                   </div>
                 </div>
               )}
 
               <div className="space-y-6 text-sm">
-                <div className="max-w-2xl border-b border-gray-200 pb-6">
+                <div className="max-w-2xl border-b border-gray-200 pb-6 dark:border-gray-700">
                   <div className="max-w-md">
-                    <div className="mb-1 font-medium text-gray-900">Workspace name</div>
+                    <div className="mb-1 font-medium text-gray-900 dark:text-white">
+                      Workspace name
+                    </div>
                     <Input
                       value={formWorkspace.name || ''}
                       onChange={(e) => {
@@ -233,21 +235,25 @@ export function WorkspaceSettingsComponent({ workspaceResponse, user, contentHei
                   )}
                 </div>
 
-                <div className="max-w-2xl border-b border-gray-200 pb-6">
+                <div className="max-w-2xl border-b border-gray-200 pb-6 dark:border-gray-700">
                   <WorkspaceMembershipComponent workspaceResponse={workspaceResponse} user={user} />
                 </div>
 
                 {canEdit && (
-                  <div className="max-w-2xl border-b border-gray-200 pb-6">
-                    <h2 className="mb-4 text-xl font-bold text-gray-900">Danger Zone</h2>
+                  <div className="max-w-2xl border-b border-gray-200 pb-6 dark:border-gray-700">
+                    <h2 className="mb-4 text-xl font-bold text-gray-900 dark:text-white">
+                      Danger Zone
+                    </h2>
 
-                    <div className="rounded-lg border border-red-200 bg-red-50 p-4">
+                    <div className="rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900/30">
                       <div
                         className={`flex ${isMobile ? 'flex-col gap-3' : 'items-start justify-between'}`}
                       >
                         <div className="flex-1">
-                          <div className="font-medium text-red-900">Delete this workspace</div>
-                          <div className="mt-1 text-sm text-red-700">
+                          <div className="font-medium text-red-900 dark:text-red-200">
+                            Delete this workspace
+                          </div>
+                          <div className="mt-1 text-sm text-red-700 dark:text-red-300">
                             Once you delete a workspace, there is no going back. All data and
                             resources associated with this workspace will be permanently removed.
                           </div>

frontend/src/index.css

@@ -1,5 +1,8 @@
 @import 'tailwindcss';
 
+/* Enable Tailwind dark mode with class strategy */
+@custom-variant dark (&:where(.dark, .dark *));
+
 :root {
   font-family:
     'Jost',
@@ -59,18 +62,18 @@ body {
 
 /* Track */
 *::-webkit-scrollbar-track {
-  background: gainsboro;
+  background: var(--color-scrollbar-track);
 }
 
 /* Handle */
 *::-webkit-scrollbar-thumb {
-  background: #adadad;
+  background: var(--color-scrollbar-thumb);
   border-radius: 360px;
 }
 
 /* Handle on hover */
 *::-webkit-scrollbar-thumb:hover {
-  background: #555;
+  background: var(--color-scrollbar-thumb-hover);
   cursor: pointer;
 }
 /* END OF SCROLLBAR STYLING */

frontend/src/pages/AuthPageComponent.tsx

@@ -9,11 +9,13 @@ import {
   SignInComponent,
   SignUpComponent,
 } from '../features/users';
+import { useScreenHeight } from '../shared/hooks';
 
 export function AuthPageComponent() {
   const [isAdminHasPassword, setIsAdminHasPassword] = useState(false);
   const [authMode, setAuthMode] = useState<'signIn' | 'signUp'>('signUp');
   const [isLoading, setLoading] = useState(true);
+  const screenHeight = useScreenHeight();
 
   const checkAdminPasswordStatus = () => {
     setLoading(true);
@@ -34,7 +36,7 @@ export function AuthPageComponent() {
   }, []);
 
   return (
-    <div>
+    <div className="h-full dark:bg-gray-900" style={{ height: screenHeight }}>
       {isLoading ? (
         <div className="flex h-screen w-screen items-center justify-center">
           <Spin indicator={<LoadingOutlined spin />} size="large" />

frontend/src/pages/OauthStorageComponent.tsx

@@ -85,7 +85,7 @@ export function OauthStorageComponent() {
           window.location.href = '/';
         }}
       >
-        <div className="my-3 max-w-[250px] text-gray-500">
+        <div className="my-3 max-w-[250px] text-gray-500 dark:text-gray-400">
           Storage - is a place where backups will be stored (local disk, S3, etc.)
         </div>
 

frontend/src/shared/theme/ThemeProvider.tsx

@@ -0,0 +1,78 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { ReactNode } from 'react';
+
+import { ThemeContext } from './themeContext';
+import type { ResolvedTheme, ThemeMode } from './themeContext';
+
+const THEME_STORAGE_KEY = 'postgresus-theme';
+
+function getSystemTheme(): ResolvedTheme {
+  if (typeof window !== 'undefined' && window.matchMedia) {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  return 'light';
+}
+
+function getStoredTheme(): ThemeMode {
+  if (typeof window !== 'undefined') {
+    const stored = localStorage.getItem(THEME_STORAGE_KEY);
+
+    if (stored === 'light' || stored === 'dark' || stored === 'system') {
+      return stored;
+    }
+  }
+
+  return 'system';
+}
+
+interface ThemeProviderProps {
+  children: ReactNode;
+}
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  const [theme, setThemeState] = useState<ThemeMode>(getStoredTheme);
+  const [systemTheme, setSystemTheme] = useState<ResolvedTheme>(getSystemTheme);
+
+  // Listen for system theme changes
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      setSystemTheme(e.matches ? 'dark' : 'light');
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  // Compute resolved theme
+  const resolvedTheme: ResolvedTheme = useMemo(() => {
+    return theme === 'system' ? systemTheme : theme;
+  }, [theme, systemTheme]);
+
+  // Apply theme class to document
+  useEffect(() => {
+    const root = document.documentElement;
+    if (resolvedTheme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+  }, [resolvedTheme]);
+
+  const setTheme = useCallback((newTheme: ThemeMode) => {
+    setThemeState(newTheme);
+    localStorage.setItem(THEME_STORAGE_KEY, newTheme);
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      theme,
+      resolvedTheme,
+      setTheme,
+    }),
+    [theme, resolvedTheme, setTheme],
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}

frontend/src/shared/theme/index.ts

@@ -0,0 +1,4 @@
+export { ThemeContext } from './themeContext';
+export type { ThemeMode, ResolvedTheme, ThemeContextValue } from './themeContext';
+export { ThemeProvider } from './ThemeProvider';
+export { useTheme } from './useTheme';

frontend/src/shared/theme/themeContext.ts

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+
+export type ThemeMode = 'light' | 'dark' | 'system';
+export type ResolvedTheme = 'light' | 'dark';
+
+export interface ThemeContextValue {
+  theme: ThemeMode;
+  resolvedTheme: ResolvedTheme;
+  setTheme: (theme: ThemeMode) => void;
+}
+
+export const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);

frontend/src/shared/theme/useTheme.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+
+import { ThemeContext } from './themeContext';
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}

frontend/src/widgets/main/MainScreenComponent.tsx

@@ -25,6 +25,7 @@ import {
 } from '../../features/workspaces';
 import { useIsMobile, useScreenHeight } from '../../shared/hooks';
 import { SidebarComponent } from './SidebarComponent';
+import { ThemeToggleComponent } from './ThemeToggleComponent';
 import { WorkspaceSelectionComponent } from './WorkspaceSelectionComponent';
 
 export const MainScreenComponent = () => {
@@ -194,8 +195,8 @@ export const MainScreenComponent = () => {
   ];
 
   return (
-    <div style={{ height: screenHeight }} className="bg-[#f5f5f5] p-2 md:p-3">
-      <div className="mb-2 flex h-[50px] items-center rounded bg-white px-2 py-2 shadow md:mb-3 md:h-[60px] md:p-3">
+    <div style={{ height: screenHeight }} className="bg-[#f5f5f5] p-2 md:p-3 dark:bg-gray-900">
+      <div className="mb-2 flex h-[50px] items-center rounded bg-white px-2 py-2 shadow md:mb-3 md:h-[60px] md:p-3 dark:bg-gray-800">
         <div className="flex items-center gap-2 hover:opacity-80 md:gap-3">
           <a href="https://postgresus.com" target="_blank" rel="noreferrer">
             <img className="h-[30px] w-[30px] md:h-[40px] md:w-[40px]" src="/logo.svg" />
@@ -215,7 +216,7 @@ export const MainScreenComponent = () => {
 
         <div className="ml-auto hidden items-center gap-5 md:flex">
           <a
-            className="!text-black hover:opacity-80"
+            className="!text-black hover:opacity-80 dark:!text-gray-200"
             href="https://postgresus.com/installation"
             target="_blank"
             rel="noreferrer"
@@ -224,7 +225,7 @@ export const MainScreenComponent = () => {
           </a>
 
           <a
-            className="!text-black hover:opacity-80"
+            className="!text-black hover:opacity-80 dark:!text-gray-200"
             href="https://postgresus.com/contribute"
             target="_blank"
             rel="noreferrer"
@@ -232,7 +233,7 @@ export const MainScreenComponent = () => {
             Contribute
           </a>
           <a
-            className="!text-black hover:opacity-80"
+            className="!text-black hover:opacity-80 dark:!text-gray-200"
             href="https://t.me/postgresus_community"
             target="_blank"
             rel="noreferrer"
@@ -255,7 +256,7 @@ export const MainScreenComponent = () => {
           {diskUsage && (
             <Tooltip title="To make backups locally and restore them, you need to have enough space on your disk. For restore, you need to have same amount of space that the backup size.">
               <div
-                className={`cursor-pointer text-center text-xs ${isUsedMoreThan95Percent ? 'text-red-500' : 'text-gray-500'}`}
+                className={`cursor-pointer text-center text-xs ${isUsedMoreThan95Percent ? 'text-red-500' : 'text-gray-500 dark:text-gray-400'}`}
               >
                 {(diskUsage.usedSpaceBytes / 1024 ** 3).toFixed(1)} of{' '}
                 {(diskUsage.totalSpaceBytes / 1024 ** 3).toFixed(1)} GB
@@ -265,13 +266,16 @@ export const MainScreenComponent = () => {
               </div>
             </Tooltip>
           )}
+
+          <ThemeToggleComponent />
         </div>
 
-        <div className="mt-1 ml-auto md:hidden">
+        <div className="ml-auto flex items-center gap-2 md:hidden">
           <Button
             type="text"
             icon={<MenuOutlined style={{ fontSize: '20px' }} />}
             onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+            className="mt-1"
           />
         </div>
       </div>

frontend/src/widgets/main/SidebarComponent.tsx

@@ -6,6 +6,8 @@ import GitHubButton from 'react-github-btn';
 import { type DiskUsage } from '../../entity/disk';
 import { type UserProfile, UserRole } from '../../entity/users';
 import { useIsMobile } from '../../shared/hooks';
+import { useTheme } from '../../shared/theme';
+import { ThemeToggleComponent } from './ThemeToggleComponent';
 
 interface TabItem {
   text: string;
@@ -38,6 +40,7 @@ export const SidebarComponent = ({
   contentHeight,
 }: Props) => {
   const isMobile = useIsMobile();
+  const { resolvedTheme } = useTheme();
 
   // Close sidebar on desktop when it becomes desktop size
   useEffect(() => {
@@ -73,7 +76,7 @@ export const SidebarComponent = ({
   if (!isMobile) {
     return (
       <div
-        className="max-w-[60px] min-w-[60px] rounded bg-white py-2 shadow"
+        className="max-w-[60px] min-w-[60px] rounded bg-white py-2 shadow dark:bg-gray-800"
         style={{ height: contentHeight }}
       >
         <div className="flex h-full flex-col">
@@ -81,7 +84,7 @@ export const SidebarComponent = ({
             {filteredTabs.map((tab) => (
               <div key={tab.text} className="flex justify-center">
                 <div
-                  className={`flex h-[50px] w-[50px] cursor-pointer items-center justify-center rounded select-none ${selectedTab === tab.name ? 'bg-blue-600' : 'hover:bg-blue-50'}`}
+                  className={`flex h-[50px] w-[50px] cursor-pointer items-center justify-center rounded select-none ${selectedTab === tab.name ? 'bg-blue-600' : 'hover:bg-blue-50 dark:hover:bg-gray-700'}`}
                   onClick={() => handleTabClick(tab)}
                   style={{ marginTop: tab.marginTop }}
                 >
@@ -111,17 +114,24 @@ export const SidebarComponent = ({
       placement="right"
       width={280}
       styles={{
-        body: { padding: 0 },
+        body: {
+          padding: 0,
+          backgroundColor: resolvedTheme === 'dark' ? '#1f2937' : undefined,
+        },
+        header: {
+          backgroundColor: resolvedTheme === 'dark' ? '#1f2937' : undefined,
+        },
       }}
       closable={false}
       mask={false}
     >
       <div className="flex h-full flex-col">
         {/* Custom Close Button */}
-        <div className="flex justify-end border-b border-gray-200 px-3 py-3">
+        <div className="flex items-center justify-between border-b border-gray-200 px-3 py-3 dark:border-gray-700">
+          <ThemeToggleComponent />
           <button
             onClick={onClose}
-            className="flex h-8 w-8 items-center justify-center rounded hover:bg-gray-100"
+            className="flex h-8 w-8 items-center justify-center rounded hover:bg-gray-100 dark:hover:bg-gray-700"
           >
             <CloseOutlined />
           </button>
@@ -136,7 +146,7 @@ export const SidebarComponent = ({
             return (
               <div key={tab.text}>
                 <div
-                  className={`flex cursor-pointer items-center gap-3 rounded px-3 py-3 select-none ${selectedTab === tab.name ? 'bg-blue-600 text-white' : 'text-gray-700 hover:bg-gray-100'}`}
+                  className={`flex cursor-pointer items-center gap-3 rounded px-3 py-3 select-none ${selectedTab === tab.name ? 'bg-blue-600 text-white' : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700'}`}
                   onClick={() => handleTabClick(tab)}
                 >
                   <img
@@ -147,19 +157,21 @@ export const SidebarComponent = ({
                   />
                   <span className="text-sm font-medium">{tab.text}</span>
                 </div>
-                {showDivider && <div className="my-2 border-t border-gray-200" />}
+                {showDivider && (
+                  <div className="my-2 border-t border-gray-200 dark:border-gray-700" />
+                )}
               </div>
             );
           })}
         </div>
 
         {/* Footer Section */}
-        <div className="border-t border-gray-200 bg-gray-50 px-3 py-4">
+        <div className="border-t border-gray-200 bg-gray-50 px-3 py-4 dark:border-gray-700 dark:bg-gray-800">
           {diskUsage && (
             <div className="mb-4">
               <Tooltip title="To make backups locally and restore them, you need to have enough space on your disk. For restore, you need to have same amount of space that the backup size.">
                 <div
-                  className={`cursor-pointer text-xs ${isUsedMoreThan95Percent ? 'text-red-500' : 'text-gray-600'}`}
+                  className={`cursor-pointer text-xs ${isUsedMoreThan95Percent ? 'text-red-500' : 'text-gray-600 dark:text-gray-400'}`}
                 >
                   <div className="font-medium">Disk Usage</div>
                   <div className="mt-1">
@@ -174,7 +186,7 @@ export const SidebarComponent = ({
 
           <div className="space-y-2">
             <a
-              className="!hover:text-blue-600 block rounded text-sm font-medium !text-gray-700 hover:bg-gray-100"
+              className="block rounded text-sm font-medium !text-gray-700 hover:bg-gray-100 hover:!text-blue-600 dark:!text-gray-300 dark:hover:bg-gray-700"
               href="https://postgresus.com/installation"
               target="_blank"
               rel="noreferrer"
@@ -183,7 +195,7 @@ export const SidebarComponent = ({
             </a>
 
             <a
-              className="!hover:text-blue-600 block rounded text-sm font-medium !text-gray-700 hover:bg-gray-100"
+              className="block rounded text-sm font-medium !text-gray-700 hover:bg-gray-100 hover:!text-blue-600 dark:!text-gray-300 dark:hover:bg-gray-700"
               href="https://postgresus.com/contribute"
               target="_blank"
               rel="noreferrer"
@@ -192,7 +204,7 @@ export const SidebarComponent = ({
             </a>
 
             <a
-              className="!hover:text-blue-600 block rounded text-sm font-medium !text-gray-700 hover:bg-gray-100"
+              className="block rounded text-sm font-medium !text-gray-700 hover:bg-gray-100 hover:!text-blue-600 dark:!text-gray-300 dark:hover:bg-gray-700"
               href="https://t.me/postgresus_community"
               target="_blank"
               rel="noreferrer"

frontend/src/widgets/main/ThemeToggleComponent.tsx

@@ -0,0 +1,129 @@
+import { Dropdown } from 'antd';
+import type { MenuProps } from 'antd';
+
+import { type ThemeMode, useTheme } from '../../shared/theme';
+
+const SunIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle cx="12" cy="12" r="4" />
+    <path d="M12 2v2" />
+    <path d="M12 20v2" />
+    <path d="m4.93 4.93 1.41 1.41" />
+    <path d="m17.66 17.66 1.41 1.41" />
+    <path d="M2 12h2" />
+    <path d="M20 12h2" />
+    <path d="m6.34 17.66-1.41 1.41" />
+    <path d="m19.07 4.93-1.41 1.41" />
+  </svg>
+);
+
+const MoonIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+  </svg>
+);
+
+const SystemIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <rect width="20" height="14" x="2" y="3" rx="2" />
+    <line x1="8" x2="16" y1="21" y2="21" />
+    <line x1="12" x2="12" y1="17" y2="21" />
+  </svg>
+);
+
+export function ThemeToggleComponent() {
+  const { theme, setTheme, resolvedTheme } = useTheme();
+
+  const items: MenuProps['items'] = [
+    {
+      key: 'light',
+      label: (
+        <div className="flex items-center gap-2">
+          <SunIcon />
+          <span>Light</span>
+        </div>
+      ),
+      onClick: () => setTheme('light'),
+    },
+    {
+      key: 'dark',
+      label: (
+        <div className="flex items-center gap-2">
+          <MoonIcon />
+          <span>Dark</span>
+        </div>
+      ),
+      onClick: () => setTheme('dark'),
+    },
+    {
+      key: 'system',
+      label: (
+        <div className="flex items-center gap-2">
+          <SystemIcon />
+          <span>System</span>
+        </div>
+      ),
+      onClick: () => setTheme('system'),
+    },
+  ];
+
+  const getCurrentIcon = () => {
+    if (theme === 'system') {
+      return <SystemIcon />;
+    }
+    return resolvedTheme === 'dark' ? <MoonIcon /> : <SunIcon />;
+  };
+
+  const getLabel = (mode: ThemeMode) => {
+    switch (mode) {
+      case 'light':
+        return 'Light';
+      case 'dark':
+        return 'Dark';
+      case 'system':
+        return 'System';
+    }
+  };
+
+  return (
+    <Dropdown menu={{ items, selectedKeys: [theme] }} trigger={['click']} placement="bottomRight">
+      <button
+        className="flex cursor-pointer items-center gap-1.5 rounded-md border border-gray-200 bg-white px-2.5 py-1 text-sm text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
+        title={`Theme: ${getLabel(theme)}`}
+      >
+        {getCurrentIcon()}
+        <span className="hidden sm:inline">{getLabel(theme)}</span>
+      </button>
+    </Dropdown>
+  );
+}

frontend/src/widgets/main/WorkspaceSelectionComponent.tsx

@@ -71,10 +71,10 @@ export const WorkspaceSelectionComponent = ({
 
       <div className="relative">
         <div
-          className="cursor-pointer rounded bg-gray-100 p-1 px-2 hover:bg-gray-200"
+          className="cursor-pointer rounded bg-gray-100 p-1 px-2 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600"
           onClick={() => setIsDropdownOpen(!isDropdownOpen)}
         >
-          <div className="flex items-center justify-between text-sm">
+          <div className="flex items-center justify-between text-sm dark:text-gray-200">
             <div className="flex-1 truncate pr-1">
               {selectedWorkspace?.name || 'Select a workspace'}
             </div>
@@ -89,8 +89,8 @@ export const WorkspaceSelectionComponent = ({
         </div>
 
         {isDropdownOpen && (
-          <div className="absolute top-full right-0 left-0 z-50 mt-1 min-w-[250px] rounded-md border border-gray-200 bg-white shadow-lg md:right-auto md:left-0 md:min-w-full">
-            <div className="border-b border-gray-100 p-2">
+          <div className="absolute top-full right-0 left-0 z-50 mt-1 min-w-[250px] rounded-md border border-gray-200 bg-white shadow-lg md:right-auto md:left-0 md:min-w-full dark:border-gray-600 dark:bg-gray-800">
+            <div className="border-b border-gray-100 p-2 dark:border-gray-700">
               <Input
                 placeholder="Search workspaces..."
                 value={searchValue}
@@ -105,7 +105,7 @@ export const WorkspaceSelectionComponent = ({
               {filteredWorkspaces.map((workspace) => (
                 <div
                   key={workspace.id}
-                  className="cursor-pointer truncate px-3 py-2 text-sm hover:bg-gray-50"
+                  className="cursor-pointer truncate px-3 py-2 text-sm hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-gray-700"
                   onClick={() => openWorkspace(workspace)}
                 >
                   {workspace.name}
@@ -113,13 +113,15 @@ export const WorkspaceSelectionComponent = ({
               ))}
 
               {filteredWorkspaces.length === 0 && searchValue && (
-                <div className="px-3 py-2 text-sm text-gray-500">No workspaces found</div>
+                <div className="px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
+                  No workspaces found
+                </div>
               )}
             </div>
 
-            <div className="border-t border-gray-100">
+            <div className="border-t border-gray-100 dark:border-gray-700">
               <div
-                className="cursor-pointer px-3 py-2 text-sm text-blue-600 hover:bg-gray-50 hover:text-blue-700"
+                className="cursor-pointer px-3 py-2 text-sm text-blue-600 hover:bg-gray-50 hover:text-blue-700 dark:hover:bg-gray-700"
                 onClick={() => {
                   onCreateWorkspace();
                   setIsDropdownOpen(false);