Light/Dark theme fixed.

src/main/resources/org/to/telegramfinalproject/CSS/dark_theme.css

@@ -124,17 +124,17 @@
 
 /* Input bubble */
 .msg-input {
-    -fx-background-color: white;
+    -fx-background-color: #1b2b39;   /* dark bluish background */
+    -fx-control-inner-background: #1b2b39;
+    -fx-text-fill: #e8f1f8;
+    -fx-prompt-text-fill: #8ea1b2;
     -fx-background-radius: 18;
     -fx-padding: 6 12 6 12;
-    -fx-text-fill: #0f141a;
-    -fx-prompt-text-fill: #9aa6b2;
     -fx-border-color: transparent;
-
-    -fx-control-inner-background: white;
     -fx-focus-color: transparent;
     -fx-faint-focus-color: transparent;
 }
+
 .msg-input .scroll-pane {
     -fx-vbar-policy: never;
     -fx-hbar-policy: never;
@@ -144,6 +144,7 @@
     -fx-background-color: transparent;
 }
 
+/* Context menu */
 .context-menu {
     -fx-background-color: #1b2735;
     -fx-background-radius: 6;
@@ -162,17 +163,140 @@
     -fx-background-radius: 4;
 }
 
-/* ===== Search panel ===== */
+
-.chat-search-pane {
+/* ===== Search panel (dark) ===== */
-    -fx-background-color: #1b2735; /* matches sidebar */
+.chat-search-pane { -fx-background-color: #1b2735; }
+.chat-search-bar { -fx-background-color: transparent; -fx-padding: 8 10; }
+.search-placeholder { -fx-text-fill: #8ea1b2; -fx-font-size: 13px; }
+
+/* ===== Global search bar ===== */
+.global-search {
+    -fx-background-color: #1b2b39;
+    -fx-background-radius: 15;
+    -fx-text-fill: #e8f1f8;
+    -fx-prompt-text-fill: #8ea1b2;
 }
 
-.chat-search-bar {
+/* ===== Chat list ===== */
+.chat-list { -fx-background-color: #0f1c26; }
+.chat-list .label { -fx-text-fill: #e8f1f8; }
+
+/* ===== Sidebar / Left Pane ===== */
+.sidebar-pane {
+    -fx-background-color: #1b2735; /* Telegram dark */
+}
+
+.sidebar-topbar {
     -fx-background-color: transparent;
-    -fx-padding: 8 10;
 }
 
-.search-placeholder {
+.menu-btn {
+    -fx-background-color: transparent;
+    -fx-cursor: hand;
+}
+
+.global-search {
+    -fx-background-color: #2a3a4a;
+    -fx-background-radius: 15;
+    -fx-text-fill: #e8f1f8;
+    -fx-prompt-text-fill: #8ea1b2;
+    -fx-border-color: transparent;
+}
+
+/* Chat list */
+.chat-list {
+    -fx-background-color: #0f1c26;
+}
+
+.chat-scroll {
+    -fx-background-color: transparent;
+}
+
+/* ===== Search Panel ===== */
+.chat-search-pane {
+    -fx-background-color: #1b2735;
+}
+
+.search-label {
     -fx-text-fill: #8ea1b2;
-    -fx-font-size: 13px;
+    -fx-font-size: 11px;
+    -fx-padding: 10 0 5 10;
+}
+
+.search-separator {
+    -fx-background-color: #2e3948;
+}
+
+.search-scope-bar {
+    -fx-padding: 8 10;
+    -fx-border-color: #2e3948;
+    -fx-border-width: 0 0 1 0;
+}
+
+.search-scope {
+    -fx-text-fill: #8ea1b2;
+    -fx-font-size: 11px;
+}
+
+.close-btn {
+    -fx-background-color: transparent;
+    -fx-cursor: hand;
+    -fx-text-fill: #e8f1f8;
+}
+
+/* ===== Right Chat Panel ===== */
+.chat-display {
+    -fx-background-color: #0f1c26;
+}
+
+/* ===== Overlay ===== */
+.overlay {
+    -fx-background-color: rgba(0,0,0,0.3);
+}
+
+/* Chat item container */
+.chat-item {
+    -fx-background-color: #0f1c26;
+    -fx-padding: 10;
+    -fx-border-color: #2e3948;
+    -fx-border-width: 0 0 1 0;
+}
+
+.chat-item:hover {
+    -fx-background-color: #223446;
+    -fx-cursor: hand;
+}
+
+/* Avatar */
+.chat-avatar {
+    -fx-background-radius: 50;
+    -fx-border-radius: 50;
+}
+
+/* Chat details */
+.chat-name {
+    -fx-font-size: 14;
+    -fx-font-weight: bold;
+    -fx-text-fill: #e8f1f8;
+}
+
+.chat-last-message {
+    -fx-text-fill: #8ea1b2;
+    -fx-font-size: 12;
+}
+
+/* Time + unread */
+.chat-time {
+    -fx-font-size: 11;
+    -fx-text-fill: #8ea1b2;
+}
+
+/* Unread counter (same for both modes) */
+.unread-count {
+    -fx-background-color: #2196f3; /* blue bubble */
+    -fx-text-fill: white !important;          /* always white */
+    -fx-font-size: 10px;
+    -fx-padding: 3 6;
+    -fx-background-radius: 10;
+    -fx-font-weight: bold;
 }

src/main/resources/org/to/telegramfinalproject/CSS/light_theme.css

@@ -51,12 +51,12 @@
     -fx-text-fill: black;
 }
 
-/* Thin Telegram-like SplitPane divider (light) */
+/* SplitPane divider */
 .split-pane:horizontal > .split-pane-divider {
-    -fx-background-color: transparent; /* no big solid block */
+    -fx-background-color: transparent;
-    -fx-border-color: #cccccc; /* the visible thin line */
+    -fx-border-color: #cccccc;
-    -fx-border-width: 0 1px 0 1px; /* 1px vertical line */
+    -fx-border-width: 0 1px 0 1px;
-    -fx-padding: 0 0 0 0.5px; /* big invisible hitbox for the mouse */
+    -fx-padding: 0 0 0 0.5px;
 }
 
 .placeholder-label {
@@ -144,6 +144,7 @@
     -fx-background-color: transparent;
 }
 
+/* Context menu */
 .context-menu {
     -fx-background-color: white;
     -fx-background-radius: 6;
@@ -162,17 +163,139 @@
     -fx-background-radius: 4;
 }
 
-/* ===== Search panel ===== */
+
+/* ===== Search panel (light) ===== */
+.chat-search-pane { -fx-background-color: #f5f5f5; }
+.chat-search-bar { -fx-background-color: transparent; -fx-padding: 8 10; }
+.search-placeholder { -fx-text-fill: #7e8a97; -fx-font-size: 13px; }
+
+/* ===== Global search bar ===== */
+.global-search {
+    -fx-background-color: #f5f5f5;
+    -fx-background-radius: 15;
+    -fx-text-fill: #0f141a;
+    -fx-prompt-text-fill: #9aa6b2;
+}
+
+/* ===== Chat list ===== */
+.chat-list { -fx-background-color: #ffffff; }
+.chat-list .label { -fx-text-fill: #0f141a; }
+
+/* ===== Sidebar / Left Pane ===== */
+.sidebar-pane {
+    -fx-background-color: #ffffff;
+}
+
+.sidebar-topbar {
+    -fx-background-color: transparent;
+}
+
+.menu-btn {
+    -fx-background-color: transparent;
+    -fx-cursor: hand;
+}
+
+.global-search {
+    -fx-background-color: #f5f5f5;
+    -fx-background-radius: 15;
+    -fx-text-fill: #0f141a;
+    -fx-prompt-text-fill: #7e8a97;
+    -fx-border-color: transparent;
+}
+
+/* Chat list */
+.chat-list {
+    -fx-background-color: transparent;
+}
+
+.chat-scroll {
+    -fx-background-color: transparent;
+}
+
+/* ===== Search Panel ===== */
 .chat-search-pane {
     -fx-background-color: #f5f5f5;
 }
 
-.chat-search-bar {
+.search-label {
-    -fx-background-color: transparent;
+    -fx-text-fill: #7e8a97;
-    -fx-padding: 8 10;
+    -fx-font-size: 11px;
+    -fx-padding: 10 0 5 10;
 }
 
-.search-placeholder {
+.search-separator {
+    -fx-background-color: #e6e6e6;
+}
+
+.search-scope-bar {
+    -fx-padding: 8 10;
+    -fx-border-color: #e6e6e6;
+    -fx-border-width: 0 0 1 0;
+}
+
+.search-scope {
     -fx-text-fill: #7e8a97;
-    -fx-font-size: 13px;
+    -fx-font-size: 11px;
+}
+
+.close-btn {
+    -fx-background-color: transparent;
+    -fx-cursor: hand;
+}
+
+/* ===== Right Chat Panel ===== */
+.chat-display {
+    -fx-background-color: #fafafa;
+}
+
+/* ===== Overlay ===== */
+.overlay {
+    -fx-background-color: rgba(0,0,0,0.3);
+}
+
+/* Chat item container */
+.chat-item {
+    -fx-background-color: #ffffff;
+    -fx-padding: 10;
+    -fx-border-color: #ddd;
+    -fx-border-width: 0 0 1 0;
+}
+
+.chat-item:hover {
+    -fx-background-color: #f5f5f5;
+    -fx-cursor: hand;
+}
+
+/* Avatar */
+.chat-avatar {
+    -fx-background-radius: 50;
+    -fx-border-radius: 50;
+}
+
+/* Chat details */
+.chat-name {
+    -fx-font-size: 14;
+    -fx-font-weight: bold;
+    -fx-text-fill: #0f141a;
+}
+
+.chat-last-message {
+    -fx-text-fill: #7e8a97;
+    -fx-font-size: 12;
+}
+
+/* Time + unread */
+.chat-time {
+    -fx-font-size: 11;
+    -fx-text-fill: #7e8a97;
+}
+
+/* Unread counter (same for both modes) */
+.unread-count {
+    -fx-background-color: #2196f3; /* blue bubble */
+    -fx-text-fill: white !important;          /* always white */
+    -fx-font-size: 10px;
+    -fx-padding: 3 6;
+    -fx-background-radius: 10;
+    -fx-font-weight: bold;
 }

src/main/resources/org/to/telegramfinalproject/Fxml/chat_item.fxml

@@ -8,23 +8,23 @@
 <HBox xmlns:fx="http://javafx.com/fxml"
       fx:controller="org.to.telegramfinalproject.UI.ChatItemController"
       spacing="10" alignment="CENTER_LEFT"
-      style="-fx-padding: 10; -fx-background-color: white; -fx-border-color: #ddd; -fx-border-width: 0 0 1 0;">
+      styleClass="chat-item">
 
     <!-- Profile Image -->
-    <ImageView fx:id="profileImage" fitWidth="40" fitHeight="40" preserveRatio="true"
+    <ImageView fx:id="profileImage"
-               style="-fx-background-radius: 50; -fx-border-radius: 50;"/>
+               fitWidth="40" fitHeight="40"
+               preserveRatio="true"
+               styleClass="chat-avatar"/>
 
     <!-- Chat Details -->
     <VBox alignment="CENTER_LEFT" HBox.hgrow="ALWAYS">
-        <Label fx:id="chatName" style="-fx-font-size: 14; -fx-font-weight: bold;"/>
+        <Label fx:id="chatName" styleClass="chat-name"/>
-        <Label fx:id="lastMessage" style="-fx-text-fill: gray; -fx-font-size: 12;"/>
+        <Label fx:id="lastMessage" styleClass="chat-last-message"/>
     </VBox>
 
     <!-- Time + Unread -->
     <VBox alignment="CENTER_RIGHT" spacing="5">
-        <Label fx:id="chatTime" style="-fx-font-size: 11; -fx-text-fill: gray;"/>
+        <Label fx:id="chatTime" styleClass="chat-time"/>
-        <Label fx:id="unreadCount"
+        <Label fx:id="unreadCount" styleClass="unread-count"/>
-               style="-fx-background-color: #2196f3; -fx-text-fill: white; -fx-font-size: 10;
-                      -fx-padding: 3 6; -fx-background-radius: 10;"/>
     </VBox>
-</HBox>
+</HBox>

src/main/resources/org/to/telegramfinalproject/Fxml/main.fxml

@@ -21,18 +21,19 @@
             <items>
 
                 <!-- LEFT: Sidebar -->
-                <VBox fx:id="leftPane" minWidth="72" style="-fx-background-color: #FFFFFF;">
+                <VBox fx:id="leftPane" minWidth="72" styleClass="sidebar-pane">
 
                     <!-- Top bar (always visible) -->
-                    <HBox spacing="10">
+                    <HBox spacing="10" styleClass="search-bar-container">
                         <padding>
                             <Insets bottom="10" left="10" right="10" top="10"/>
                         </padding>
                         <children>
-                            <Button fx:id="menuButton" minHeight="29.0" minWidth="40"
+                            <Button fx:id="menuButton"
+                                    minHeight="29.0" minWidth="40"
                                     onAction="#toggleSidebar"
                                     prefHeight="29.0" prefWidth="40.0"
-                                    style="-fx-background-color: transparent;">
+                                    styleClass="menu-btn">
                                 <graphic>
                                     <ImageView fx:id="menuIcon" fitHeight="24" fitWidth="17"
                                                preserveRatio="true" smooth="true">
@@ -46,7 +47,7 @@
                             <TextField fx:id="searchBar"
                                        prefHeight="36" prefWidth="430.0"
                                        promptText="Search"
-                                       style="-fx-background-color: #f5f5f5; -fx-background-radius: 15;"/>
+                                       styleClass="global-search"/>
                         </children>
                     </HBox>
 
@@ -55,12 +56,12 @@
 
                         <!-- Chat list (default) -->
                         <ScrollPane fx:id="scrollPane" fitToWidth="true" hbarPolicy="NEVER"
-                                    style="-fx-background-color: transparent;"
                                     vbarPolicy="AS_NEEDED"
-                                    visible="true" managed="true">
+                                    visible="true" managed="true"
+                                    styleClass="chat-scroll">
                             <content>
                                 <VBox fx:id="chatListContainer" spacing="5"
-                                      style="-fx-background-color: transparent;">
+                                      styleClass="chat-list">
                                     <padding>
                                         <Insets bottom="10" left="10" right="10" top="10"/>
                                     </padding>
@@ -69,18 +70,18 @@
                         </ScrollPane>
 
                         <!-- Search panel (hidden initially) -->
-                        <VBox fx:id="chatSearchPane" visible="false" managed="false"
+                        <VBox fx:id="chatSearchPane"
+                              visible="false" managed="false"
                               styleClass="chat-search-pane">
 
                             <!-- Section label -->
-                            <Label text="Search messages in"
+                            <Label text="Search messages in" styleClass="search-label"/>
-                                   style="-fx-text-fill: #7e8a97; -fx-font-size: 11px; -fx-padding: 10 0 5 10;"/>
 
                             <!-- Tiny separator line -->
-                            <Separator style="-fx-background-color: #e6e6e6;" prefHeight="0.5"/>
+                            <Separator styleClass="search-separator" prefHeight="0.5"/>
 
                             <!-- User profile + "This chat" + close -->
-                            <HBox spacing="10" alignment="CENTER_LEFT" style="-fx-padding: 8 10; -fx-border-color: #e6e6e6; -fx-border-width: 0 0 1 0;">
+                            <HBox spacing="10" alignment="CENTER_LEFT" styleClass="search-scope-bar">
                                 <!-- Avatar -->
                                 <ImageView fx:id="searchChatAvatar" fitWidth="32" fitHeight="32" preserveRatio="true">
                                     <image>
@@ -90,12 +91,11 @@
 
                                 <!-- scope -->
                                 <VBox alignment="CENTER_LEFT">
-                                    <Label text="This chat" style="-fx-text-fill: #7e8a97; -fx-font-size: 11px;"/>
+                                    <Label text="This chat" styleClass="search-scope"/>
                                 </VBox>
                                 <Region HBox.hgrow="ALWAYS"/>
                                 <!-- Close button -->
-                                <Button text="✕" onAction="#closeSearchPanel"
+                                <Button text="✕" onAction="#closeSearchPanel" styleClass="close-btn"/>
-                                        style="-fx-background-color: transparent; -fx-cursor: hand;"/>
                             </HBox>
 
                             <!-- Placeholder -->
@@ -111,7 +111,7 @@
                 </VBox>
 
                 <!-- RIGHT: Chat panel -->
-                <StackPane fx:id="chatDisplayArea" minWidth="360" style="-fx-background-color: #FAFAFA;">
+                <StackPane fx:id="chatDisplayArea" minWidth="360" styleClass="chat-display">
                     <children>
                         <Label fx:id="placeholderLabel" alignment="CENTER"
                                prefHeight="21.0" prefWidth="248.0"
@@ -128,7 +128,7 @@
         <Pane fx:id="overlay"
               mouseTransparent="true"
               onMouseClicked="#closeSidebar"
-              style="-fx-background-color: rgba(0,0,0,0.3);"
+              styleClass="overlay"
               visible="false"/>
     </children>
 </StackPane>